Uso de patrones en Portaledu

Como sabéis, WordPress ofrece una serie de patrones (o plantillas) genéricos que podemos incorporar a nuestras entradas o páginas. Estos patrones nos ofrecen diseños concretos, elaborados con bloques del editor estándar. Una vez añadidos a nuestro contenido, podremos editarlos y personalizarlos a nuestro gusto. Veamos cómo hacerlo.

1-Acceso a los patrones

Cuando creamos una nueva entrada o página, o bien al editar cualquiera de las que ya tenemos creadas, podemos añadir patrones. Para ello, haremos clic sobre el «+» que aparece en la parte superior izquierda del editor:

Tras hacer clic, se nos abrirá un panel a la izquierda, para añadir bloques, patrones o ficheros. Seleccionaremos la pestaña de patrones:

2-Listado de patrones

Al hacer clic sobre Patrones nos aparecerá un listado de categorías de patrones. La mayoría vienen por defecto con WordPress. Os animamos a echar un vistazo por si os interesa algún diseño.

En todo caso, Portaledu ha incorporado su propia colección de patrones, que encontraréis en la categoría con su nombre.

3-Patrones de Portaledu

Portaledu ofrece una selección de patrones confeccionados con bloques estándar, tanto genéricos como propios de Portaledu. Al hacer clic sobre la categoría Portaledu, se mostrarán a la derecha los patrones correspondientes. Si pasamos el ratón por encima de alguno de ellos, se mostrará una descripción del mismo.

4-Insertar un patrón

Añadir un patrón a nuestro contenido es tan fácil como hacer clic sobre el mismo. Al hacerlo, aparecerá automáticamente en nuestro contenido. Un mensaje emergente nos notifica el evento (Patrón de bloque «nombre del patrón» añadido)

5-Idioma de los patrones de Portaledu

Los patrones no tienen idioma asignado, ya que son simplemente plantillas de bloques, pensadas para facilitar diferentes diseños de maquetación, siendo el contenido de textos e imágenes irrelevante. Así, encontraremos en los patrones, textos en diferentes idiomas y también imágenes que están pensados para ser editados y sustituidos, adaptando cada usuario su contenido.

6-Ampliación de la colección de patrones

Portaledu irá ampliando su colección de patrones en función de las necesidades detectadas. Comprueba de vez en cuando la categoría de patrones de Portaledu, por si hubiera alguna novedad.

Menú del sitio web

En este post aprenderemos a confeccionar el menú superior de nuestro sitio web:

1-¿Desde dónde se configura el menú?

Lo primero que debemos saber es que podemos confeccionar un menú para cada idioma de nuestro sitio web. Los menús se configuran desde el panel izquierdo del escritorio: Apariencia –> Menús

Aparença, Menús

Si tenemos más de un menú definido, en primer lugar seleccionaremos el menú que queremos editar y pulsaremos el botón «Seleccionar»

2-¿Qué clase de elementos pueden conformar el menú?

El menú está compuesto por enlaces que nos llevan directamente a:

  • Páginas
  • Entradas
  • Enlaces personalizados
  • Categorías

3-¿Cómo añadir los elementos al menú?

A la parte izquierda, seleccionaremos en el panel el tipo de elemento (páginas, entradas…) y marcaremos aquel elemento que deseemos incorporar al menú. Por defecto, se nos muestran los elementos más recientes. Si no encontramos el elemento que buscamos, seleccionaremos la pestaña «Ver todo», donde se nos mostrarán todos los elementos.

Una vez seleccionados los elementos deseados (pueden ser varios o incluso todos), pulsaremos el botón de «Añadir al menú».

4-¿Cómo ordenar los elementos del menú?

Una vez añadidos los elementos, estos se muestran como bloques en la parte derecha. Podemos ordenarlos pinchando sobre ellos y arrastrándolos. Si deseamos que un ítem aparezca como submenú de otro, lo arrastraremos debajo del otro, dejándolo sangrado levemente a la derecha. En este ejemplo, las páginas FAQs y SAI aparecerán como submenú de SUPORT:

5-Establecer idioma para el menú

En la parte de abajo de la configuración del menú, debemos seleccionar el idioma en que se mostrará ese menú. En este ejemplo, está marcado que el menú actual sea el menú utilizado para la web en valenciano.

6-Guardar el menú

No olvidemos guardar el menú con el botón correspondiente, que encontraremos abajo del mismo: «Guardar el menú»

7-Editar el nombre o eliminar un elemento del menú

En cada elemento del menú, a la derecha, encontraremos una flecha. Si hacemos clic sobre ella, se despliega el elemento para editarlo. Podemos modificar el nombre del elemento, esto permite mostrar en el menú un nombre diferente del que tenga la página o elemento originalmente.

También tenemos la opción de Suprimir el elemento del menú. Esto no elimina la página o post referenciado, solo elimina su aparición en el menú.

Advertencia: Tened mucho cuidado de no pulsar sobre el enlace de «Suprimir el menú» si solo queréis eliminar un elemento. Esta acción eliminará el menú y no puede deshacerse! Y recordad siempre pulsar el botón «Guardar el menú» después de cualquier cambio deseado.

Gutenberg: Bucle de consulta

Este bloque comprende toda la funcionalidad del bloque de Últimas Entradas, permitiendo además al usuario un control total de la apariencia.

Si deseas mostrar diferentes entradas en modo de listado o en paneles con varias columnas, te interesa este bloque de generateblocks llamado Query Loop o Bucle de Consulta. Este bloque permite mostrar dinámicamente listas de contenido.

Imatge Bucle de consulta

Usando el bucle de consulta, puedes mostrar las entradas más recientes de tu blog o seleccionar entradas de categorías específicas en tu página de inicio o en una sección destacada. Este contenido puede ser personalizado a través de una interfaz intuitiva según las condiciones que establezcamos, como pueden ser el tipo de publicación (entradas, páginas, eventos), categorías, etiquetas o autores.

¿Cómo funciona el bloque de Bucle de Consulta?

Al insertar un bloque de bucle de consulta en una página o publicación de WordPress usando GenerateBlocks, se te ofrecen diferentes plantillas predeterminadas, cuya configuración podrás personalizar después. En este caso, vamos a escoger la plantilla de dos columnas con imagen destacada:

Puedes configurar parámetros como:

  1. Tipo de contenido: Puedes elegir mostrar entradas, páginas o eventos.
  2. Filtros: Seleccionar contenido basado en categorías, etiquetas, autores, fechas, entre otros. Estos filtros ayudan a que la consulta devuelva solo el contenido relevante para el contexto de la página.
  3. Orden y límite: Puedes establecer cómo se ordenarán los resultados y cuántos elementos se mostrarán.
  4. Diseño personalizado: Una de las grandes ventajas de GenerateBlocks es la flexibilidad de diseño. Puedes utilizar otros bloques del plugin, como el bloque de cuadrícula, encabezado o imagen, dentro del bucle de consulta para crear una estructura visual atractiva.

En el ejemplo siguiente, escogeremos que se muestren entradas o posts de una determinada categoría. En primer lugar, escogemos posts como tipo de contenido:

Bucle de consulta - Selecció tipus de contingut

A continuación, deseamos establecer un filtro para que se muestren solamente las entradas correspondientes a una categoría determinada. Para ello, añadiremos un parámetro (taxonomías):

Bucle de consulta - Afegir paràmetre consulta

Escogemos Taxonomías:

Seleccionamos Categorías:

Entonces podremos escoger una categoría para mostrar. En la imagen os mostramos cómo queda la configuración completa de nuestro bucle de consulta:

Y a continuación os mostramos cómo queda la visualización:

Ampliar el número de columnas de visualización

Vemos que en la plantilla predeterminada, se visualiza el panel de entradas a dos columnas. Ajustando la plantilla de la entrada, podemos variar el número de columnas de visualización. Para ello, hemos de indicar el porcentaje que ocupa cada entrada en el contenedor. Por defecto está al 50%. Para tres columnas, lo pondremos al 33%, así:

Generateblocs - Bucle de consulta - Vista global en edició (2)

Personalización avanzada del diseño

El poder de GenerateBlocks reside en su capacidad para controlar cada aspecto del diseño. Con el bloque de bucle de consulta, no solo puedes especificar qué contenido se muestra, sino también cómo se muestra. Esto incluye:

  • Diseño de cuadrícula: Puedes configurar el diseño del contenido en columnas, lo que es ideal para crear portafolios o galerías.
  • Tipografía y estilos: Cambiar fácilmente las fuentes, colores y espaciados.
  • Composición flexible: Dado que GenerateBlocks está compuesto por bloques modulares, puedes construir plantillas complejas mezclando el bucle de consulta con otros bloques para lograr diseños únicos.
Generateblocs - Bucle de consulta - Vista global en edició

Te recomendamos que explores cada objeto en la estructura de tu contenido y veas sus opciones de configuración. Sin duda encontrarás todo un mundo de opciones para configurar el aspecto de tu contenido, incluyendo el comportamiento en modo responsivo, para visualización en dispositivos como tabletas y móviles.

Información relacionada:

Modo Mantenimiento para sitios en construcción

En este post os explicamos cómo ocultar todo el sitio web cuando éste se encuentra en construcción o se está remodelando.

Cuando activamos el «modo mantenimiento» o «modo offline» los editores de la web podrán trabajar sobre ella y realizar pruebas sin que éstas puedan ser visualizadas por el público en general. Las páginas solo podrán ser vistas por los usuarios logueados pertenecientes al sitio web.

1-¿Cómo se activa y desactiva el modo mantenimiento?

Esta operación se realiza fácilmente desde el escritorio, panel lateral izquierdo, opción de menú «Modo mantenimiento».

2-¿Qué ocurre cuando está activado el modo mantenimiento?

Cuando el sitio esté en modo mantenimiento, las páginas no serán visibles para usuarios no autenticados. Los visitantes verán una pantalla como esta:

3-¿Cómo accedo a la web cuando el modo mantenimiento está activo?

Cuando el modo mantenimiento está activo, no podemos ver en la cabecera la opción de «acceder». Para poder autenticarnos, simplemente añadiremos a la URL de nuestro sitio /wp-admin, por ejemplo:

https://portal.edu.gva.es/nombredemicentro/wp-admin

Generateblocks: elemento contenedor

El bloque Contenedor tiene como objetivo principal agrupar y contener otros bloques. Proporciona un contenedor visual y estructural que permite organizar y personalizar la presentación de los elementos dentro de él.

Generateblocks bloc contenidor

Características clave

  • Diseño Flexible: Permite ajustar el ancho del contenedor para adaptarse a las necesidades específicas del diseño.
  • Fondo Personalizable: Ofrece opciones para personalizar el fondo del contenedor, incluyendo colores y gradientes.
  • Márgenes y Rellenos: Facilita el control preciso de los márgenes y rellenos alrededor del contenedor.
  • Opciones de Responsividad: Permite definir comportamientos específicos para diferentes tamaños de pantalla, asegurando una presentación adecuada en dispositivos móviles y de escritorio.

Uso común

  • Secciones y Bloques Complejos: Utilizado para crear secciones de página o bloques más complejos organizando otros bloques dentro de él.
  • Personalización Estilística: Es fundamental para la personalización estilística avanzada de secciones específicas de una página.

Integración con Gutenberg

  • Totalmente integrado con el editor de bloques Gutenberg de WordPress, lo que facilita la creación y personalización de contenido visualmente atractivo.

Bloc contenidor Seccions configuració
Vista de configuraciones que admite el bloque contenedor

Generateblocks: elemento cuadrícula

El bloque Cuadrícula (Grid) está diseñado para permitir a los usuarios crear y personalizar sistemas de cuadrícula flexibles en sus páginas. Proporciona una estructura organizada y versátil para colocar y alinear otros bloques de manera precisa.

Generateblocks - Quadrícula

Características clave

  • División en Columnas: Facilita la creación de sistemas de columnas personalizables para el diseño de contenido.
  • Alineación y Espaciado: Permite alinear y ajustar el espacio entre las columnas, brindando un control detallado sobre el diseño.
  • Ancho Variable: Posibilita establecer anchos variables para cada columna, permitiendo diseños más complejos.
  • Personalización Estilística: Ofrece opciones para personalizar el fondo, bordes y otros estilos para las columnas y el contenedor de la cuadrícula.
  • Opciones de Responsividad: Permite definir comportamientos específicos para diferentes tamaños de pantalla, asegurando una presentación óptima en dispositivos móviles y de escritorio.

Uso común

  • Diseño de Página Avanzado: Ideal para estructuras de página más complejas, especialmente cuando se requiere un diseño basado en columnas.
  • Secciones Especializadas: Utilizado para crear secciones con columnas distintas, lo que facilita la presentación visualmente atractiva del contenido.

Integración con Gutenberg

  • Totalmente integrado con el editor de bloques Gutenberg de WordPress, facilitando la construcción y personalización de contenido.

Compatibilidad con GenerateBlocks (Editor de bloques)

  • Funciona de manera coherente con otros bloques proporcionados por GenerateBlocks, permitiendo una combinación eficiente para diseños personalizados.

Avís de privacitat

Este lloc web utilitza només cookies tècniques necessàries per al seu funcionament. No s’emmagatzemen dades amb finalitats publicitàries ni es comparteixen amb tercers. S’utilitza analítica interna sense cookies, i només es recull la IP amb finalitats de seguretat.

Veure política de cookies