Documentación de SeedProd

Documentación, materiales de referencia y tutoriales para SeedProd

Puestos Bloque

El bloque Entradas te permite mostrar una colección de entradas en una sola página, lo que te da un control total sobre cómo se consulta, organiza y muestra tu contenido. Elige entre múltiples diseños, maquetaciones y opciones de visualización para crear un feed de entradas que se adapte al diseño de tu sitio web.

El bloque admite potentes filtros de búsqueda por tipo de publicación, categoría, etiqueta y autor, y ofrece numerosas opciones de diseño, como cuadrícula, masonry y carrusel. También puedes controlar qué información de la publicación se muestra (imágenes destacadas, títulos, metadatos, extractos, insignias y enlaces «Leer más») desde un único panel de configuración.

Ejemplo de bloque de publicaciones

Requisitos:El bloque Entradas está disponible en todos nuestrosplanes de licencia. Antes de empezar, asegúrate de haber publicado algunas entradas con imágenes destacadas para tener contenido que mostrar.


Añadir el bloque de entradas a tus páginas

Sigue estos pasos para añadir un bloque de publicaciones a tu página SeedProd:

Paso 1: Añadir el bloque

En Bloques > Avanzado, arrastra y suelta el bloque Entradas en la sección deseada de tu página.

Arrastrar el bloque Posts a una página de SeedProd

Paso 2: Configurar los ajustes de contenido

Una vez añadido, haz clic en el bloque Entradas para abrir su configuración. La pestaña Configuración está organizada en dos secciones: Consulta de entradas y Diseño.

Pestaña Configuración del bloque de publicaciones

Consulta de publicaciones:

  • Tipo de consulta: elige cómo se recuperan las entradas. La opción predeterminada utiliza los parámetros de consulta existentes en la página, la opción Personalizada te permite filtrar por tipo de entrada, categoría, etiqueta y autor, y la opción Manual te permite introducir una cadena de consulta WP_Query sin procesar para tener un control total.
  • Consulta por tipo de publicación: Actívela para filtrar los resultados por uno o más tipos de publicación. Seleccione los tipos de publicación que desea incluir en el menú desplegable (disponible cuando se selecciona Personalizado).
  • Consulta por categoría: Actívela para filtrar los resultados por una o más categorías. Seleccione las categorías que desea incluir en el menú desplegable.
  • Consulta por etiqueta(s): Active esta opción para filtrar los resultados por una o varias etiquetas. Seleccione las etiquetas que desea incluir en el menú desplegable.
  • Consulta por autor(es): Active esta opción para filtrar los resultados por uno o más autores. Seleccione los autores que desea incluir en el menú desplegable.
  • Ordenar por: Elija el campo que se utilizará para ordenar los resultados: Fecha, Fecha de última modificación, Título, Número de comentarios u Orden del menú.
  • Orden: Establezca la dirección de clasificación: ASC (más antiguo/A-Z primero) o DESC (más reciente/Z-A primero).
  • Parámetros de consulta: Introduzca una cadena WP_Query manual (disponible cuando se selecciona Manual), por ejemplo: post_type=post&posts_per_page=3&order=desc.
Bloque de publicaciones Configuración de consultas

Disposición:

  • Apariencia: Elige el diseño general de la postal: Clásico (lista/cuadrícula estándar), Tarjeta (tarjeta enmarcada con imagen en la parte superior), Creativo (imagen con área de contenido superpuesta) o Minimalista (diseño limpio y ligero).
  • Diseño: elige cómo se organizan las publicaciones: cuadrícula (columnas uniformes), mampostería (columnas de altura variable) o carrusel (presentación de diapositivas con desplazamiento horizontal). Las opciones del carrusel incluyen diapositivas para mostrar (1-10), activar/desactivar la reproducción automática, velocidad de reproducción automática, posición de navegación (superior/inferior), estilo de navegación (flechas y puntos/flechas/puntos) y color de navegación.
  • Columnas: Establece el número de columnas que se mostrarán (diseños de cuadrícula y mampostería).
  • Paginación: Actívela para añadir enlaces de paginación debajo de las publicaciones.
  • Número por página: Establece cuántas entradas se mostrarán por página (disponible cuando se selecciona el tipo de consulta Personalizada o Manual).
  • Mostrar imagen destacada: Actívela para mostrar la imagen destacada de cada entrada. Cuando esté activada, también podrá configurar la altura de la imagen (0-500 píxeles) y, para las plantillas Creative y Minimal, la posición de la imagen (izquierda o derecha).
  • Mostrar título: Actívelo para mostrar el título de cada publicación. Cuando esté activado, elija la etiqueta de título: H1 a H6, div, span o p.
  • Mostrar metadatos: Actívelo para mostrar los metadatos de la publicación. Los botones individuales le permiten mostrar u ocultar la fecha de modificación, el autor, la fecha, la hora y el recuento de comentarios. Establezca un carácter separador para que aparezca entre los elementos de metadatos.
  • Mostrar extracto: Actívelo para mostrar el extracto de cada publicación. Cuando esté activado, establezca la longitud del extracto (número de palabras).
  • Mostrar «Leer más»: Actívelo para mostrar un enlace «Leer más» debajo del extracto. Cuando esté habilitado, personalice el texto «Leer más».
  • Insignia: Actívela para mostrar una insignia de etiqueta de taxonomía en cada publicación (disponible para las plantillas Card y Creative). Cuando esté habilitada, elija la taxonomía de la insignia: categoría o etiquetas.
  • Avatar: Actívelo para mostrar el avatar del autor (solo en la apariencia de la tarjeta).
Configuración del diseño del bloque de publicaciones

Paso 3: Personalizar el diseño

En la pestaña Avanzado, puedes ajustar el estilo visual de cada elemento del bloque Entradas. Los ajustes están organizados en las siguientes secciones:

Publicación:

  • Relleno de la publicación: Establece el espaciado interior alrededor del contenido dentro de cada tarjeta postal (arriba, derecha, abajo, izquierda).
  • Color de fondo de la publicación: Establece el color de fondo para cada tarjeta postal individual.
  • Sombra de publicación: añade un efecto de sombra alrededor de cada tarjeta postal; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande, 2X Grande o una sombra personalizada.
  • Espacio inferior: Establece el espacio vertical entre tarjetas postales de 0 a 100 píxeles.

Texto:

  • Tipografía del título: configura la familia, el tamaño, el grosor y el estilo de la fuente para los títulos de las publicaciones (admite ajustes por dispositivo).
  • Color del título: Establece el color del texto del título de la publicación.
  • Tipografía del metatexto: configura la tipografía de la información meta de la publicación (por dispositivo).
  • Color del texto meta: Establece el color del texto meta.
  • Tipografía del extracto: configura la tipografía del extracto de la publicación (por dispositivo).
  • Color del extracto: Establece el color del texto del extracto.
  • Tipografía del texto «Leer más»: configura la tipografía del enlace «Leer más» (por dispositivo).
  • Color del texto «Leer más»: Establece el color del enlace «Leer más».
  • Tipografía de paginación: configura la tipografía de los enlaces de paginación (por dispositivo).
  • Color de paginación: Establece el color del texto del enlace de paginación.

Imagen:

  • Altura de la imagen: Establece la altura de las imágenes destacadas entre 0 y 500 píxeles (se muestra cuando las imágenes destacadas están habilitadas).
  • Sombra: añade un efecto de sombra a la imagen destacada; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande, 2X Extragrande o Sombra inferior.
  • Margen de la imagen: Establece el espacio alrededor de la imagen destacada (arriba, derecha, abajo, izquierda).
  • Borde de la imagen: Establezca el estilo del borde de la imagen (sólido, punteado, discontinuo), el color, el ancho y el radio de las esquinas (incluido el radio por esquina: superior derecha, superior izquierda, inferior derecha, inferior izquierda).
  • Relleno de espacio en blanco de la imagen: añade relleno interior alrededor de la imagen destacada.

Frontera:

  • Radio del borde: Establece el redondeo de las esquinas de cada postal entre 0 y 100 píxeles.
  • Estilo del borde: Establezca el estilo del borde para cada postal: sólido, punteado o discontinuo.
  • Color del borde: Establece el color del borde de cada postal.
  • Ancho del borde: Establece el ancho del borde por cada lado (superior, derecho, inferior, izquierdo).

Área de contenido:

  • Relleno del contenido: Establece el relleno interior del área de contenido del texto dentro de cada postal (superior, derecha, inferior, izquierda).
  • Color de fondo del contenido: Establece el color de fondo del área de contenido dentro de cada postal.
  • Sombra del contenido: añade una sombra al área de contenido; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande, 2X Extragrande o una sombra personalizada.
  • Borde del área de contenido: Establezca el estilo del borde del área de contenido (sólido, punteado, discontinuo), el color, el ancho por lado y el radio del borde.

Taxonomía de insignias:

  • Relleno de taxonomía: Establece el relleno interior de la etiqueta de la insignia (arriba, derecha, abajo, izquierda).
  • Radio del borde: Establece el redondeo de las esquinas de la insignia por esquina (superior derecha, superior izquierda, inferior derecha, inferior izquierda).
  • Color de fondo: Establece el color de fondo de la insignia de taxonomía.
  • Color: Establece el color del texto de la etiqueta de la insignia de taxonomía.
  • Tipografía de taxonomía: Establece la familia, el tamaño y el estilo de fuente para el texto de la insignia (por dispositivo).
  • Espaciado inferior: Establezca el espaciado debajo de la insignia entre 0 y 100 píxeles.

Espaciado:

  • Margen: controla el espacio exterior alrededor del bloque de publicaciones (superior, derecho, inferior, izquierdo). Admite ajustes por dispositivo para ordenadores de sobremesa, tabletas y móviles.
  • Relleno: ajusta el espacio interior dentro del bloque de publicaciones (arriba, derecha, abajo, izquierda). Admite ajustes por dispositivo.

Atributos:

  • ID CSS: muestra el identificador único generado automáticamente para tu bloque de publicaciones. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
  • Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
  • Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.

Visibilidad del dispositivo:

  • Ocultar en escritorio: Ocultar el bloque de publicaciones en las pantallas de escritorio.
  • Ocultar en tableta: Ocultar el bloque de publicaciones en dispositivos tableta.
  • Ocultar en dispositivos móviles: Ocultar el bloque de publicaciones en dispositivos móviles.

Efectos de animación:

  • Animación de entrada: elige entre varios efectos de animación que se reproducen cuando el bloque de publicaciones aparece en pantalla. Las opciones incluyen Rebotar, Aparecer gradualmente, Acercar, Girar y muchas más.
Configuración de la pestaña Avanzado del bloque de publicaciones

Paso 4: Guarde los cambios

Una vez que hayas terminado de configurar el bloque Entradas y personalizar su apariencia, asegúrate de guardar tu trabajo.


¡Has añadido correctamente un bloque de entradas a tu página! Úsalo para mostrar tu contenido de forma elegante, con un diseño atractivo y organizado que anime a los lectores a explorar más tu sitio web. Prueba diferentes diseños, distribuciones y configuraciones de consulta para crear un feed de entradas que se adapte perfectamente a tu marca y a tu estrategia de contenido.

Artículos relacionados