El bloque de Publicaciones te permite mostrar una colección de publicaciones en una sola página, dándote control total sobre cómo se consultan, organizan y muestran tus contenidos. Elige entre múltiples estilos, diseños y opciones de visualización para crear un feed de publicaciones que coincida con el diseño de tu sitio.
El bloque admite un potente filtrado de consultas por tipo de publicación, categoría, etiqueta y autor, y ofrece ricas opciones de diseño que incluyen Cuadrícula, Mampostería 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 de "leer más"), todo desde un único panel de configuración.
Añadir el Bloque de Publicaciones a tus Páginas
Sigue estos pasos para añadir un bloque de Publicaciones a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Bloques > Avanzados, arrastra y suelta el bloque Publicaciones en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Publicaciones para abrir su configuración. La pestaña Ajustes está organizada en dos secciones: Consulta de Publicaciones y Diseño.
Consulta de Publicaciones:
- Tipo de Consulta: Elige cómo se recuperan las publicaciones. Predeterminado utiliza los parámetros de consulta existentes de la página, Personalizado te permite filtrar por tipo de publicación, categoría, etiqueta y autor, y Manual te permite introducir una cadena de consulta WP_Query sin procesar para un control total.
- Consultar por Tipo de Publicación: Activa para filtrar los resultados por uno o varios tipos de publicación. Selecciona los tipos de publicación a incluir en el desplegable (disponible cuando se selecciona Personalizado).
- Consultar por Categoría: Activa para filtrar los resultados por una o varias categorías. Selecciona las categorías a incluir en el desplegable.
- Consultar por Etiqueta(s): Activa para filtrar los resultados por una o varias etiquetas. Selecciona las etiquetas a incluir en el desplegable.
- Consultar por Autor(es): Activa para filtrar los resultados por uno o varios autores. Selecciona los autores a incluir en el desplegable.
- Ordenar por: Elige el campo utilizado para ordenar los resultados: Fecha, Fecha de Última Modificación, Título, Número de Comentarios o Orden del Menú.
- Orden: Establece la dirección de ordenación: ASC (más antiguo/A-Z primero) o DESC (más reciente/Z-A primero).
- Parámetros de Consulta: Introduce una cadena WP_Query manual (disponible cuando se selecciona Manual), por ejemplo:
post_type=post&posts_per_page=3&order=desc.
Diseño:
- Estilo: Elige el diseño general de la tarjeta de publicación: Clásico (lista/cuadrícula estándar), Tarjeta (tarjeta con borde y imagen arriba), Creativo (imagen con área de contenido superpuesta) o Minimalista (diseño limpio y ligero).
- Diseño: Elige cómo se organizan las entradas: 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 a mostrar (1-10), activador de Reproducción automática, Velocidad de reproducción automática, posición de Navegación (Arriba/Abajo), estilo de Navegación (Flechas y Puntos/Flechas/Puntos) y Color de Navegación.
- Columnas: Establece el número de columnas a mostrar (diseños de Cuadrícula y Mampostería).
- Paginación: Activa para añadir enlaces de paginación debajo de las entradas.
- Número por página: Establece cuántas entradas mostrar por página (disponible cuando se selecciona el tipo de consulta Personalizada o Manual).
- Mostrar imagen destacada: Activa para mostrar la imagen destacada de cada entrada. Cuando está activado, también puedes establecer la Altura de la imagen (0-500px) y, para las apariencias Creativa y Minimalista, la Posición de la imagen (Izquierda o Derecha).
- Mostrar título: Activa para mostrar el título de cada entrada. Cuando está activado, elige la Etiqueta del título: H1 a H6, div, span o p.
- Mostrar metadatos: Activa para mostrar los metadatos de la entrada. Los activadores individuales te permiten mostrar/ocultar Fecha de modificación, Autor, Fecha, Hora y Número de comentarios. Establece un carácter Separador que aparecerá entre los elementos de metadatos.
- Mostrar extracto: Activa para mostrar el extracto de cada entrada. Cuando está activado, establece la Longitud del extracto (número de palabras).
- Mostrar leer más: Activa para mostrar un enlace de leer más debajo del extracto. Cuando está activado, personaliza el Texto de leer más.
- Insignia: Activa para mostrar una insignia de etiqueta de taxonomía en cada entrada (disponible para las apariencias Tarjeta y Creativa). Cuando está activado, elige la Taxonomía de la insignia: Categoría o Etiquetas.
- Avatar: Activa para mostrar el avatar del autor (solo apariencia Tarjeta).
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes ajustar el estilo visual de cada elemento de tu bloque de Entradas. Los ajustes están organizados en las siguientes secciones:
Entrada:
- Relleno de entrada: Establece el espaciado interior alrededor del contenido dentro de cada tarjeta de entrada (Arriba, Derecha, Abajo, Izquierda).
- Color de fondo de entrada: Establece el color de fondo de cada tarjeta de entrada individual.
- Sombra de entrada: Añade un efecto de sombra alrededor de cada tarjeta de entrada: elige entre Ninguna, Capilar, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o una sombra personalizada.
- Espacio inferior: Establece el espaciado vertical entre las tarjetas de entrada de 0 a 100px.
Texto:
- Tipografía del título: Establece la familia de fuentes, el tamaño, el peso y el estilo de los títulos de las entradas (admite ajustes por dispositivo).
- Color del título: Establece el color del texto del título de la entrada.
- Tipografía del texto de metadatos: Establece la tipografía de la información de metadatos de la entrada (por dispositivo).
- Color del texto de metadatos: Establece el color del texto de metadatos.
- Tipografía del extracto: Establece la tipografía para el extracto de la publicación (por dispositivo).
- Color del extracto: Establece el color del texto del extracto.
- Tipografía del texto "Leer más": Establece la tipografía para el enlace "Leer más" (por dispositivo).
- Color del texto "Leer más": Establece el color del texto del enlace "Leer más".
- Tipografía de paginación: Establece la tipografía para los enlaces de paginación (por dispositivo).
- Color de paginación: Establece el color del texto de los enlaces de paginación.
Imagen:
- Altura de la imagen: Establece la altura de las imágenes destacadas de 0 a 500px (se muestra cuando las imágenes destacadas están habilitadas).
- Sombra: Añade un efecto de sombra a la imagen destacada; elige entre Ninguna, Mínima, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Sombra Caída Inferior.
- Margen de la imagen: Establece el espaciado alrededor de la imagen destacada (Superior, Derecha, Inferior, Izquierda).
- Borde de la imagen: Establece el estilo del borde de la imagen (Sólido, Punteado, Discontinuo), color, ancho y radio de las esquinas (incluyendo 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.
Borde:
- Radio del borde: Establece el redondeo de las esquinas de cada tarjeta de publicación de 0 a 100px.
- Estilo del borde: Establece el estilo del borde para cada tarjeta de publicación: Sólido, Punteado o Discontinuo.
- Color del borde: Establece el color del borde de cada tarjeta de publicación.
- Ancho del borde: Establece el ancho del borde por lado (Superior, Derecha, Inferior, Izquierda).
Área de contenido:
- Relleno del contenido: Establece el relleno interior del área de texto del contenido dentro de cada tarjeta de publicación (Superior, Derecha, Inferior, Izquierda).
- Color de fondo del contenido: Establece el color de fondo del área de contenido dentro de cada tarjeta de publicación.
- Sombra del contenido: Añade una sombra al área de contenido; elige entre Ninguna, Mínima, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o una sombra personalizada.
- Borde del área de contenido: Establece el estilo del borde del área de contenido (Sólido, Punteado, Discontinuo), color, ancho por lado y radio del borde.
Taxonomía de insignia:
- Relleno de la taxonomía: Establece el relleno interior de la etiqueta de la insignia (Superior, Derecha, Inferior, 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 la taxonomía: Establece la familia de fuentes, el tamaño y el estilo del texto de la insignia (por dispositivo).
- Espaciado inferior: Establece el espaciado debajo de la insignia de 0 a 100px.
Espaciado:
- Margen: Controle el espaciado exterior alrededor de su bloque de Publicaciones (Superior, Derecho, Inferior, Izquierdo). Admite configuraciones por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajuste el espaciado interior dentro de su bloque de Publicaciones (Superior, Derecho, Inferior, Izquierdo). Admite configuraciones por dispositivo.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para su bloque de Publicaciones. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en Escritorio: Oculte el bloque de Publicaciones en pantallas de escritorio.
- Ocultar en Tableta: Oculte el bloque de Publicaciones en dispositivos tableta.
- Ocultar en Móvil: Oculte el bloque de Publicaciones en dispositivos móviles.
Efectos de Animación:
- Animación de Entrada: Elija entre varios efectos de animación que se reproducen cuando el bloque de Publicaciones entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que haya terminado de configurar el bloque de Publicaciones y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Ha agregado con éxito un bloque de Publicaciones a su página! Úselo para mostrar elegantemente su contenido en un diseño visualmente atractivo y organizado que anima a los lectores a explorar más de su sitio. Experimente con diferentes apariencias, diseños y configuraciones de consulta para crear un feed de publicaciones que coincida perfectamente con su marca y estrategia de contenido.