MAQUETACIÓN

Entradas relacionadas con la maquetación u organización de los contenidos en la página.

Breadcrumbs: qué son y cómo activarlos en tu web

Se ha añadido en PortalEdu la posibilidad de utilizar breadcrumbs (migas de pan). Esta funcionalidad permite mostrar al usuario la ruta de navegación dentro de la web.

¿Qué son los breadcrumbs?

Los breadcrumbs son un elemento de navegación que muestra al visitante en qué lugar de la web se encuentra y cómo ha llegado hasta esa página. Se suelen mostrar como una secuencia de enlaces separados por un símbolo, por ejemplo:

Inicio > Noticias > Actividades > Excursión al museo

Cada elemento de la ruta es un enlace que permite volver fácilmente a niveles anteriores de la web.

¿Para qué sirven?

Los breadcrumbs ayudan a:

  • Orientar al usuario dentro de la estructura del sitio.
  • Mejorar la navegación, permitiendo volver a secciones anteriores rápidamente.
  • Facilitar la exploración de contenidos relacionados.
  • Mejorar la experiencia de usuario, especialmente en webs con muchas páginas o categorías.

¿Dónde se muestran?

Cuando están activados, los breadcrumbs aparecen justo encima del título del post o página, mostrando la ruta de navegación hasta ese contenido.

¿Cómo activarlos o desactivarlos?

Puedes activar o desactivar los breadcrumbs desde el panel de administración:

Apariencia → GVA Cabecera y Pie

Dentro de esta pantalla encontrarás un botón On / Off que permite habilitar o deshabilitar esta funcionalidad.

Una vez activados, los breadcrumbs se mostrarán automáticamente en los contenidos del sitio.

¿Cómo se construyen los breadcrumbs?

Los breadcrumbs reflejan la estructura jerárquica de las páginas del sitio.
Si el menú del sitio se ha creado utilizando páginas, cada nivel de esa jerarquía aparecerá como un elemento dentro de los breadcrumbs.

Por ejemplo, si tienes la siguiente estructura de páginas:

  • Inicio
  • Centro
    • Historia
    • Instalaciones
  • Información Académica
    • Calendario Escolar

Si el visitante accede a la página Calendario Escolar, los breadcrumbs se mostrarán así:

Inicio > Información Académica > Calendario Escolar

Cada elemento representa una página superior en la estructura y permite volver fácilmente a ella.

Recomendación

Para que los breadcrumbs funcionen correctamente, es recomendable:

  • Crear los menús utilizando páginas jerárquicas. Más información aquí
  • Organizar las páginas en niveles (página padre y páginas hijas).
  • Mantener una estructura clara del sitio.

De esta forma, los breadcrumbs mostrarán correctamente la ruta de navegación y ayudarán a los visitantes a moverse por la web de forma más intuitiva.

¿Qué son las anclas y cómo usarlas en Gutenberg?

Las anclas (o enlaces ancla) permiten crear enlaces que llevan directamente a una parte concreta de una página o entrada. Son muy útiles para índices de contenido, preguntas frecuentes o páginas largas donde queremos facilitar la navegación al lector.

Podemos ver un ejemplo de este tipo de enlaces en el siguiente índice de contenidos para esta entrada

¿Qué es un ancla?

Un ancla es un identificador único que se asigna a un bloque dentro de la página. Después, puedes crear enlaces que apunten directamente a ese punto usando el símbolo #.

Por ejemplo:
https://portal.edu.gva.es/centro/entrada#ancla1 llevará al usuario al bloque que tenga el ancla ancla1.

Cómo crear un ancla en Gutenberg

  1. Selecciona el bloque al que quieras enlazar (por ejemplo, un encabezado).
  2. En el panel derecho, abre la pestaña Avanzado.
  3. Busca el campo Ancla HTML.
  4. Escribe un nombre corto, sin espacios ni acentos (ejemplo: servicios, faq, contacto).

Cómo crear un enlace hacia el ancla

  1. Selecciona el texto o botón desde donde quieras enlazar.
  2. Añade un enlace usando #nombre-del-ancla.

Ejemplo:

  • Si el ancla es crear_ancla, como en el caso de la segunda entrada de nuestro índice. El enlace será 👉 #crear_ancla.

También puedes enlazar desde otra página usando la URL completa:
https://portal.edu.gva.es/centro/entrada#crear_ancla

Consejos rápidos

  • Usa nombres claros y simples.
  • Evita espacios y caracteres especiales.
  • Las anclas funcionan especialmente bien con bloques de Encabezado (H2, H3…) para crear índices automáticos.

Las anclas mejoran la experiencia del usuario y hacen que navegar por contenidos largos sea mucho más rápido y cómodo.

Bloque contenedor animado

Este bloque nos permitirá:

  • Agrupar bloques con fondo animado de imágenes con efectos
  • Mostrar una animación de imágenes con efectos

Este es un bloc titular sobre el contenidor animat

Te mostramos cómo utilizarlo:

1.-Insertamos el bloque

Añadimos el bloque «Contenedor Animado». Nos aparecerá en el lienzo, en forma de rectángulo.

Haciendo clic sobre el +, podemos añadir otros bloques al contenedor, que quedarán agrupados y tendrán el fondo común. En este caso, añadiremos un bloque titular.

Escogeremos un color de texto blanco y un fondo gris con transparencia, de manera que resalte el texto sin tapar las imágenes.

Ajustaremos el formato del titular a nuestro gusto, modificando:

  • Negrita (peso de la fuente)
  • Tamaño de la fuente
  • Color de texto: blanco
  • Color del fondo: gris con transparencia
Bloque Titular: Selección de color con transparencia para el fondo

2.-Ajustamos la altura del contenedor y otras opciones de aspecto

Por defecto, el contenedor se muestra a ancho completo y con una altura mínima. Es importante configurar la altura que deseamos mostrar.

En este caso, hemos ajustado:

  • Altura: 400px
  • Alineación vertical: Centro
  • Alineación horizontal: Centro

3.-Configuración del fondo (animado)

Disponemos de tres opciones:

  • Imagen estática
  • Color sólido
  • Degradado
  • Imagen deslizante

En este ejemplo, elegiremos esta última, ya que las otras opciones las tenemos también en el bloque contenedor de generateblocks.

Al seleccionar la opción de Imagen deslizante en el tipo de fondo nos aparece la opción de crear una galería (selección de imágenes) que se mostrarán dinámicamente en el fondo del contenedor. Podemos elegir también alguno de los efectos de transición que se nos ofrecen.

Una vez seleccionadas de la mediateca las imágenes, pulsaremos el botón «Crear una galería nueva», abajo, a la derecha.

Ahora se nos mostrarán solo las imágenes seleccionadas y pulsaremos el botón: «Insertar una galería»

Una vez insertada la galería, aparecerá en el lienzo nuestro fondo animado con imágenes.

Además, se mostrará una previsualización de las imágenes en el panel derecho de configuración.

Es el momento de probar diferentes efectos de animación para dejar nuestro bloque listo!

Ocultar bloques y programar su visibilidad

Si quieres ocultar alguna parte de tu contenido (uno o varios bloques) temporalmente, de forma que no sean visibles para los visitantes, puedes hacerlo con la nueva funcionalidad de «visibilidad» que encontrarás en la configuración de cualquier bloque.

1.-Opciones de configuración

  • Siempre visible: Es la opción por defecto. El bloque se muestra normalmente.
  • Siempre oculto: Si seleccionas esta opción, el bloque no se visualizará en el contenido.
  • Programado: Permite establecer un intervalo temporal en que se visualizará el contenido (Fecha y hora de inicio, fecha y hora de fin). Es importante tener en cuenta que la caché de Portaledu puede interferir en este horario. Simplificando la explicación, el horario programado puede sufrir un retraso de hasta 30 minutos, tanto en su momento de inicio, como en su momento de fin. Si deseas que el contenido se muestre exactamente a una hora concreta, debes gestionar la visibilidad manualmente, utilizando las opciones de siempre visible o siempre oculto y pulsando el botón de guardar la página o entrada.

2.-Ocultar varios bloques

No hay límite en el número de bloques a ocultar. Cada bloque tiene su propia configuración de visibilidad y se puede configurar de forma independiente del resto.

Si deseas ocultar varios bloques de contenido simultáneamente puede ser buena idea agruparlos en un contenedor.

Generateblocks: elemento contenedor

3.-Efecto de la caché sobre el horario programado

Para que todos los sites de Portaledu tengan un buen rendimiento y se pueda afrontar la elevada carga de visitas a nuestro portal, tenemos desplegado un servidor de caché que despacha los contenidos previamente solicitados y procesados por el servidor de aplicaciones. Esto alivia la carga de los servidores principales. Normalmente este sistema es transparente y no afecta a los usuarios porque, cada vez que un editor actualiza (guarda) un post, se indica al servidor de caché que el contenido se debe refrescar, es decir, se invalida la caché.

Pero en este caso de eventos programados, es importante tener en cuenta que la caché de Portaledu puede interferir en el horario. Simplificando la explicación, el horario programado puede sufrir un retraso de hasta 30 minutos, tanto en su momento de inicio, como en su momento de fin. Si deseas que el contenido se muestre exactamente a una hora concreta, debes gestionar la visibilidad manualmente, utilizando las opciones de siempre visible o siempre oculto y pulsando el botón de guardar la página o entrada. O bien mantener la programación, pero darle al botón de guardar la entrada justo cuando desees que el cambio se transmita a los visitantes, ya que el guardado invalida la caché.

4.-Recomendaciones sobre la ocultación de bloques

Te recomendamos que no dejes bloques permanentemente ocultos «por si acaso», ya que estos bloques sin uso ocupan recursos del sistema y perjudican el rendimiento de la aplicación, ralentizan la edición del contenido, etc.

Si quieres guardar uno o varios bloques que no vayas a utilizar ahora, recomendamos copiarlos y pegarlos en algún contenido que puede incluso estar en borrador (no publicado).

Copia y pega bloques entre diferentes contenidos

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:

Bucle de consulta con paginación

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
Bloque contenedor: ejemplo 1

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