Gutenberg: Bloque pestañas

El bloque pestañas nos ayuda a mostrar contenidos organizados en pestañas. Estas pueden estar dispuestas vertical u horizontalmente.

Este bloque permite trabajar de dos formas:

  • Entradas. Permite seleccionar las entradas de una categoría y visualizar los títulos, dejando el cuerpo o el inicio del cuerpo de la entrada oculto hasta que se selecciona la pestaña correspondiente.
    Esta modalidad resulta recomendable para presentar información relacionada.
  • Contenido personalizado. Si se elige contenido personalizado, el componente nos permitirá crear elementos con un título y un contenido que se visualizarán tal y como sucede en el caso de elegir el modelo de entradas. Mostrando el título y ocultando el contenido, que se visualizará al seleccionar la pestaña correspondiente.

Los contenidos personalizados se confeccionan utilizando bloques estándar de gutenberg!

Selección de los colores del contorno y de las pestañas:

La configuración del plugin nos permite seleccionar ambos colores. El color del texto de las pestañas no es configurable. Cambiará automáticamente de negro a blanco en función del fondo escogido, para favorecer el mejor contraste y legibilidad de los textos.

Podemos ver un ejemplo de bloque de pestañas de tipo «Entradas» a continuación 

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
1-¿Cómo nos ayudan las categorías en wordpress? Las categorías de WordPress nos permiten agrupar las entradas en grandes grupos para poder gestionar o visualizar aquellas entradas relacionadas con esa categoría. Un sitio web puede tener categorizados diferentes temas. Por ejemplo, novedades, secretaría, general, preguntas frecuentes, o niveles educativos como primaria, secundaria, etc… La categorización del contenido es útil en muchos
Hemos incorporado a Portaledu el plugin Blocks Animation, que nos permite dotar de efectos animados a prácticamente cualquier bloque de Gutenberg. En este post os enseñaremos cómo utilizar esta funcionalidad. 1-Animación de textos. Efecto de escritura o tecleo. En los elementos de texto, como párrafo, titular, encabezado, etc., veremos una nueva opción en el menú contextual de opciones del bloque.
Bloque contenedor con titular y botón En este post aprenderemos a utilizar el bloque contenedor para confeccionar un conjunto como el siguiente: Este es un bloque contenedor: Este es un bloque titular Este es un botón En el cual tenemos: Un bloque contenedor padre, que engloba todo el conjunto y que contiene: Una imagen de fondo, así como una capa
Cuando estamos trabajando en contenidos complejos, con muchos bloques, podemos hacerlo más cómodamente ampliando la zona de edición. En este ejemplo mostramos un contenido complejo, con muchas columnas, en el que no resulta cómodo trabajar en un área estrecha: Opciones para ampliar la zona de trabajo 1-Reducir el menú de la izquierda En el menú de secciones de la izquierda,

Gutenberg: Bloque visor deslizante

Portaledu está aumentando las herramientas disponibles en el editor Gutenberg. Dentro de esta serie de bloques que estamos incorporando, presentamos el bloque visor deslizante de entradas.

Este bloque permite seleccionar las entradas de una categoría y visualizarlas en diapositivas, de una en una, de modo circular, realizando una presentación de las mismas y añadiendo así dinamismo a las páginas. De cada entrada se mostrará, a ancho completo del contenedor, la imagen destacada y, opcionalmente, el extracto de la misma.

Resulta ideal para la presentación visual de categorías como noticias u otros temas, ya que el bloque elegirá las últimas entradas de la categoría seleccionada para su presentación. Podemos ver un ejemplo a continuación 👇🏽

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones:

Imagen Configuración Bloque Visor Deslizante de Entradas
  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Duración de cada diapositiva. Tiempo en milisegundos que permanecerá visualizada una diapositiva. Pasado dicho tiempo, el visor mostrará la siguiente.
  • Mostrar extracto. Indica si en las diapositivas se mostrarán o no las primeras líneas de las entradas.
  • Fondo Blanco/Negro: Metadatos de la entrada en negro sobre fondo blanco o a la inversa.

    Los elementos que estarán siempre presentes en las dispositivas y cuya presencia no es configurable son:
    • Imagen destacada de la entrada. En caso de que la entrada carezca de imagen personalizada, se utilizará una imagen por defecto propia del bloque.
    • Título de la diapositiva
    • Fecha de su creación
    • Enlace (leer más) para navegar hasta la entrada.

Gutenberg: Bloque acordeón

El bloque acordeón nos ayuda a mostrar contenidos de forma desplegable, permitiendo al lector centrarse inicialmente solamente en los títulos.

Este bloque permite trabajar de dos formas:

  • Entradas. Permite seleccionar las entradas de una categoría y visualizar los títulos, dejando el cuerpo o el inicio del cuerpo de la entrada oculto hasta que es desplegado por el usuario al hacer click en el «+» a la derecha del título.
    Esta modalidad resulta recomendable para presentar una serie de artículos a modo de formación.
  • Contenido personalizado. Si se elige contenido personalizado, el componente nos permitirá crear elementos con un título y un contenido que se visualizarán tal y como sucede en el caso de elegir el modelo de entradas. Mostrando el título y ocultando el contenido, que puede ser desplegado mediante el botón «+»
    Este componente así empleado es muy típico verlo por ejemplo en páginas de FAQs (Frequently Asked Questions)

Los contenidos personalizados se confeccionan utilizando bloques estándar de gutenberg!

Podemos ver un ejemplo de acordeón de tipo «Entradas» a continuación 👇🏽

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

Uso de categorías

1-¿Cómo nos ayudan las categorías en wordpress? Las categorías de WordPress nos permiten agrupar las entradas en grandes grupos para poder gestionar o visualizar aquellas entradas relacionadas con esa categoría. Un sitio web puede tener categorizados diferentes temas. Por ejemplo, novedades, secretaría, general, preguntas frecuentes, o niveles educativos como primaria, secundaria, etc… La categorización del contenido es útil en muchos

Diferencia entre Página y Entrada en WordPress

En WordPress, los contenidos se organizan principalmente en dos tipos: páginas y entradas. Aunque ambos son elementos que publicamos en la web, cumplen funciones diferentes y es importante saber cuándo usar cada uno. Ejemplo de página de portada (estructura fija) que muestra contenido dinámico (entradas de la categoría «Noticias») mediante un bucle de consulta. 1.-¿Qué es una Página? Una página

¡Nace el ‘Centre en Proves’!

Desde Portaledu presentamos una nueva página web formativa de un centro ficticio creada para aprender, inspirar y mostrar todas las posibilidades que ofrece una web de centro en Portaledu con el editor estándar, que es el ‘Centro en Pruebas!’ Aquí podrás:💡 Descubrir ejemplos reales de diseño y estructura web🧭 Acceder a píldoras formativas integradas en cada bloque🛠️ Conocer trucos y

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 Si tenemos más de un menú definido, en primer lugar

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones en función del tipo de contenido seleccionado:

  • Tipo de contenido. Permite seleccionar entre Post / Contenido personalizado. Lo cual hará que el bloque acordeón funcione con entradas ya creadas o bien permita crear nuevo contenido.
    En función del tipo elegido las opciones del bloque mostradas más abajo variarán.
  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Contenido completo. Indica si al visualizar el desplegable se mostrará el contenido completo de la entrada o bien el primer párrafo de esta más un enlace para seguir leyendo.

  • Tipo de contenido. Permite seleccionar entre Post / Contenido personalizado. Lo cual hará que el bloque acordeón funcione con entradas ya creadas o permita crear nuevo contenido.
    En función del tipo elegido las opciones del bloque mostradas más abajo variarán.
  • Añadir nuevo elemento. Añade un nuevo bloque al acordeón. El formulario presentado se divide en Título y Cuerpo. En el cuerpo del ítem o elemento, podemos utilizar bloques estándar.

Gutenberg: Bloque carrusel

Portaledu está aumentando las herramientas disponibles en el editor Gutenberg. Dentro de esta serie de nuevos bloques que se van a ir incorporando, presentamos el bloque de carrusel.

Este bloque permite seleccionar las entradas de una categoría y visualizarlas en diapositivas de modo circular, realizando una presentación de las mismas y añadiendo así dinamismo a las páginas.

Resulta ideal para la presentación visual de categorías como noticias u otros temas, ya que el bloque elegirá las últimas entradas de la categoría seleccionada para su presentación. Podemos ver un ejemplo a continuación 👇🏽

El bloque es fácilmente configurable desde el editor, presentando las siguientes opciones:

  • Categoría. Al elegir una categoría, las entradas pertenecientes a esta, ordenadas descendentemente por fecha de creación, serán seleccionadas para su visualización
  • Número de entradas. Número total de entradas seleccionadas para su visualización. Si se deja en su valor por defecto 5, optarán a la visualización las cinco últimas entradas pertenecientes a la categoría elegida.
  • Duración de cada diapositiva. Tiempo en milisegundos que permanecerá visualizada una diapositiva. Pasado dicho tiempo, el carrusel rotará para seleccionar la siguiente.
  • Entradas por diapositiva. Con un valor mínimo de 2 y máximo de 4. Permite seleccionar cuántas diapositivas mostrará el carrusel simultáneamente.
  • Mostrar extracto. Indica si en las diapositivas se mostrarán o no las primeras líneas de las entradas.
  • Mostrar leer más. Se puede ocultar/mostrar el enlace (leer más) para navegar a la entrada.
  • Mostrar fecha. Se puede ocultar/mostrar la fecha del post.

    Los elementos que estarán siempre presentes en las dispositivas y cuya presencia no es configurable son:
    • Imagen destacada de la entrada. En caso de que la entrada carezca de imagen personalizada, se utilizará una imagen por defecto propia del bloque carrusel.
    • Título de la diapositiva

También podemos crear un carrusel minimalista, solamente con las imágenes destacadas de los posts. Para hacerlo, activaremos la opción Ocultar información de la entrada y seleccionaremos una proporción de la imagen.

Conseguiremos un resultado como este:

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:

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