El módulo de Extra: Feed del blog en grilla

El módulo de Extra: Feed del blog en grilla

El módulo Feed del blog en grilla muestra las entradas con un diseño de bloques. Puede usar múltiples módulos en un mismo diseño para crear listados de contenido verdaderamente únicos.

Cómo insertar un módulo Feed del blog en grilla

Antes de poder añadir un módulo Feed del blog en grilla, deberá abrir un diseño de categoría o crear uno nuevo, desde el menú Extra > Constructor de categoría. Haga clic en Insertar módulo/s, localice el módulo Feed del blog en grilla dentro de la lista de módulos y haga clic sobre el botón gris para añadirlo al diseño.

Extra - Insertar módulo Feed del blog en grilla

Opciones del módulo

Opciones de contenido

Extra - Feed del blog en grilla - Contenido

  • Categorías – Elija las categorías cuyas entradas deben mostrarse en este módulo.
  • Entradas por página – Defina el número de entradas que se mostrarán por página en este módulo.
  • Mostrar solo entradas destacadas – Active esta opción para mostrar únicamente las entradas marcadas como destacadas.
  • Ignorar entradas mostradas – Active esta opción para que las entradas que ya aparezcan en otros módulos no se repitan en este módulo.
  • Contenido – Elija si desea mostrar el contenido completo o el extracto de la entrada. Si se muestra el contenido completo, se anulará el uso de la etiqueta <!--more-->
  • Método de ordenamiento – Elija el método para ordenar las entradas: más reciente, más popular o mejor valorado.
  • Orden – Elja si las entradas se mostrarán en orden cronológico ascendente o descendente.
  • Mostrar paginación – Elija si se debe mostrar o no la paginación.
  • Mostrar autor – Elija si se debe mostrar o no el nombre del autor en la sección de información meta de la entrada.
  • Mostrar categorías – Elija si se debe mostrar o no el nombre de la/s categoría/s en la sección de información meta de la entrada.
  • Mostrar imagen destacada – Elija si se debe mostrar o no la imagen destacada en el módulo.
  • Mostrar fecha – Incluya la fecha en la sección de información meta de cada entrada.
  • Mostrar comentarios – Elija si se debe mostrar o no el número de comentarios en la sección de información meta de la entrada.
  • Mostrar calificación – Elija si se deben mostrar o no las estrellas en la sección de información meta de la entrada.
  • Mostrar botón “Leer más” – Elija si se debe mostrar o no el enlace Leer más a continuación del extracto.
  • Formato de fecha – Escriba aquí el formato en que se mostrará la fecha. Debe ser especificado de acuerdo con el formato PHP date().
  • Etiqueta de administración – De manera predeterminada, este módulo aparecerá con el nombre Feed del blog en grilla en el constructor. La etiqueta de administración le permite cambiar el nombre para identificar el módulo más fácilmente. Cuando use la vista de estructura, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del constructor.

Opciones de diseño

Extra - Feed del blog en grilla - Diseño

Diseño
  • Eliminar sombra – Elija si desea mostrar o no la sombra de la sección.
Superposición
  • Color de superposición al posar el ratón – Use el selector de color para elegir un color de superposición sobre la imagen destacada al posar el puntero.
  • Color de icono de superposición al posar el puntero – Use el selector de color para elegir un color del icono sobre la imagen destacada al posar el puntero.
  • Selector de icono de superposición al posar el puntero – Aquí puede definir un icono personalizado para mostrar sobre la imagen destacada al posar el puntero.
Paginación
  • Color de paginación – Use el selector de color para elegir el color de los números de la paginación.
  • Color de fondo de paginación – Use el selector de color para elegir el color de fondo de los números de la paginación.
  • Color activo de paginación – Use el selector de color para elegir el color del número de la página activa de la paginación.
  • Color de fondo activo de paginación – Use el selector de color para elegir el color de fondo del número de la página activa de la paginación.
Entrada
  • Color de fondo de entrada – Use el selector para cambiar el color de fondo de la entrada.
Título Texto
  • Fuente de Título – Puede cambiar la fuente del texto del título, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Título Peso de fuente – Esto controla el peso de la fuente del texto del título. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Título Estilo de fuente – Esto controla el estilo de la fuente del texto del título. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Título – Esto controla la alineación del texto del título: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Título – Aquí puede ajustar el tamaño del texto del título. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Color de texto de Título – Si desea cambiar el color de texto del título, elija el color del selector en esta opción.
  • Espacio entre letras de Título – El espacio entre letras es la separación entre cada uno de los caracteres del texto del título. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Título – La altura de línea afecta el espacio entre cada una de las líneas de texto del título. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Título – Elija un estilo de sombra para activar en el texto del título. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Sección meta Texto
  • Fuente de Sección meta – Puede cambiar la fuente del texto de la sección meta de las entradas (autor, fecha, categorías, comentarios), seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Sección meta Peso de fuente – Esto controla el peso de la fuente del texto de la sección meta. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Sección meta Estilo de fuente – Esto controla el estilo de la fuente del texto de la sección meta. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Sección meta – Esto controla la alineación del texto de la sección meta: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Sección meta – Aquí puede ajustar el tamaño del texto de la sección meta. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Color de texto de Sección meta – Si desea cambiar el color de texto de la sección meta, elija el color del selector en esta opción.
  • Espacio entre letras de Sección meta – El espacio entre letras es la separación entre cada uno de los caracteres del texto de la sección meta. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Sección meta – La altura de línea afecta el espacio entre cada una de las líneas de texto de la sección meta. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Sección meta – Elija un estilo de sombra para activar en el texto de la sección meta. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Cuerpo Texto
  • Fuente de Cuerpo – Puede cambiar la fuente del texto del cuerpo de la entrada, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Cuerpo Peso de fuente – Esto controla el peso de la fuente del texto del cuerpo de la entrada. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Cuerpo Estilo de fuente – Esto controla el estilo de la fuente del texto del cuerpo de la entrada. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Alineación del texto de Cuerpo – Esto controla la alineación del texto del cuerpo de la entrada: izquierda, derecha, centrada o justificada.
  • Tamaño de texto de Cuerpo – Aquí puede ajustar el tamaño del texto del cuerpo de la entrada. Puede arrastrar el selector de rango para aumentarlo o disminuirlo, o puede escribir el valor de tamaño del texto que desee en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, em o pt.
  • Color de texto de Cuerpo – Si desea cambiar el color de texto del cuerpo de la entrada, elija el color del selector en esta opción.
  • Espacio entre letras de Cuerpo – El espacio entre letras es la separación entre cada uno de los caracteres del texto del cuerpo de la entrada. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Altura de línea de Cuerpo – La altura de línea afecta el espacio entre cada una de las líneas de texto del cuerpo de la entrada. Si desea aumentar ese espacio, use el selector de rango para ajustarlo o escriba el valor en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Sombra de texto de Cuerpo – Elija un estilo de sombra para activar en el texto del cuerpo de la entrada. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
Tamaño
  • Ancho máximo – De manera predeterminada, el ancho máximo está asignado al 100%. Si desea limitar el ancho del módulo puede hacerlo introduciendo el valor aquí. Por ejemplo, un valor de 50% limitará el ancho a la mitad de la columna que la contiene.
Botón “Leer más”
  • Usar estilos personalizados para Botón “Leer más” Si activa esta opción aparecerán varios ajustes de personalización para el botón Leer más, que le permitirán cambiar la apariencia.
  • Tamaño de texto de Botón “Leer más” – Puede usar este ajuste para aumentar o disminuir el tamaño del texto dentro del botón, el cual se escalará de acuerdo con ese tamaño.
  • Color de texto de Botón “Leer más” – De manera predeterminada, los botones tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de texto personalizado. Elija un color del selector para aplicarlo.
  • Color de fondo de Botón “Leer más” – De manera predeterminada, los botones tienen un color de fondo transparente. Puede elegir el color que desee del selector.
  • Ancho del borde de Botón “Leer más” – Todos los botones de Divi tienen un ancho de borde predeterminado de 2 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste. También puede eliminar el borde, asignando un valor 0.
  • Color del borde de Botón “Leer más” – De manera predeterminada, los bordes tomarán el color de acento definido en el personalizador de tema. Con esta opción podrá asignar un color de borde personalizado. Elija un color del selector para aplicarlo.
  • Radio del borde de Botón “Leer más” – El radio de borde tiene efecto sobre el redondeado de las esquinas del botón. De manera predeterminada, los botones de Divi tiene un radio de 3 píxeles. Puede aumentar o disminuir ese tamaño con este ajuste, usar 0 para que las esquinas sean cuadradas o un valor muy alto para que sean circulares.
  • Espacio entre letras de Botón “Leer más” – El espacio entre letras es la separación entre cada uno de los caracteres del texto del botón. Si desea aumentar esa separación, use el selector de rango para ajustarlo o escriba el valor de espaciado en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px o em.
  • Fuente de Botón “Leer más” – Puede cambiar la fuente del texto del botón, seleccionándola del menú desplegable. Divi incluye docenas de hermosas fuentes proporcionadas por Google Fonts. De manera predeterminada, Divi usa la fuente Open Sans para todos los textos de la página. También puede personalizar el estilo del texto con las opciones de negrita, itálica, mayúsculas y subrayado.
  • Peso de fuente – Esto controla el peso de la fuente del texto del botón. Las opciones son: Claro (fino), Estándar, Semi Negrita, Negrita y Ultra Negrita.
  • Estilo de fuente – Esto controla el estilo de la fuente del texto del botón. Las opciones son: Itálica, Mayúsculas, Versales, Subrayado y Tachado.
  • Mostrar icono de Botón “Leer más” – Si desactiva este ajuste, no se mostrará ningún icono en el botón. De manera predeterminada, todos los botones de Divi muestran una flecha al posar el puntero del ratón.
  • Icono de Botón “Leer más” – Si está activado el icono, puede usar este ajuste para elegir uno de la lista de iconos de Divi.
  • Color de icono de Botón “Leer más” – De manera predeterminada, el color del icono es el mismo que el del texto, pero con este ajuste puede cambiarlo independientemente.
  • Ubicación de icono de Botón “Leer más” – Puede elegir mostrar el icono del lado derecho o izquierdo.
  • Solo mostrar icono al posar el puntero en el Botón “Leer más” – De manera predeterminada, los iconos de los botones solo se muestran al posar el puntero. Si desea que el icono se muestre siempre, desactive este ajuste.
  • Color de texto del Botón “Leer más” al posar el puntero – Puede elegir el color del texto del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
  • Color de fondo del Botón “Leer más” al posar el puntero – Puede elegir el color de fondo del botón al posar el puntero del ratón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
  • Color de borde del Botón “Leer más” al posar el puntero – Puede elegir el color de borde del botón, que tendrá una transición desde el color de base definido en los ajustes anteriores.
  • Radio de borde del Botón “Leer más” al posar el puntero – Puede elegir el radio de borde del botón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
  • Espacio entre letras del Botón “Leer más” al posar el puntero – Puede elegir el espacio entre letras del botón al posar el puntero del ratón, que tendrá una transición desde el valor de base definido en los ajustes anteriores.
  • Sombra de texto de Botón “Leer más” – Elija un estilo de sombra para activar en el texto del botón. Una vez activado, podrá personalizar aún más el estilo (controlar la posición axial y la fuerza de la sombra asignando valores en píxeles, y cambiar el color con el selector). Para desactivar el estilo personalizado de sombra de texto, elija la opción Ninguna.
  • Sombra de botón – Use estos ajustes para añadir una sombra en el botón. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Espaciado
  • Margen personalizado – El margen es el espacio que se agrega fuera del módulo, entre sus extremos y los elementos contiguos (arriba, abajo, a la izquierda o a la derecha). Puede añadir valores personalizados de margen a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
  • Relleno personalizado – El relleno es el espacio que se agrega dentro del módulo, entre sus extremos y los elementos internos. Puede añadir valores personalizados de relleno a cualquiera de los cuatro lados del módulo. Para eliminar el relleno personalizado, borre el valor agregado del campo de entrada. De manera predeterminada, estos valores se miden en píxeles, pero puede usar unidades de medida personalizadas.
Borde
  • Esquinas redondeadas – Aquí puede controlar el radio de la esquina de este módulo. Active el icono del enlace para controlar las cuatro esquinas a la vez, o desactívelo para definir un valor personalizado para cada una.
  • Estilos del borde – Esta opción controla de manera individual la apariencia de los cuatro bordes: izquierdo, derecho, superior e inferior.
  • Ancho del borde – De manera predeterminada, los bordes tienen un ancho de 0 (sin borde). Puede aumentar este valor arrastrando el selector de rango o escribirlo en el campo de entrada ubicado a la derecha del selector. El campo de entrada soporta distintas unidades de medida, tales como px, vh, vw, etc.
  • Color del borde – Esta opción afecta al color del borde. Elija un color personalizado del selector para aplicarlo.
  • Estilo del borde – Los bordes incluyen ocho estilos diferentes: sólido, punteado, rayado, doble, surco, cresta, interior y exterior. Seleccione el estilo que desee del menú desplegable para aplicarlo.
Sombra
  • Sombra – Use estos ajustes para añadir una sombra en el módulo. Podrá controlar la posición axial y la fuerza de la sombra asignando valores en píxeles; cambiar el color con el selector, y la posición respecto del borde (interior o exterior).
Animación
  • Estilo de la animación – Elija un estilo de animación para activar las animaciones en este elemento. Las opciones son: Desvanecer, Diapositiva, Rebotar, Zoom, Voltear, Plegar o Rodar. Una vez activado, podrá personalizar aún más el estilo de animación. Para desactivar las animaciones, elija la opción Ninguna.
  • Repetición de la animación – De manera predeterminada, las animaciones solo se ejecutarán una vez. Si desea que la animación se repita continuamente puede elegir aquí la opción Repetir.
  • Dirección de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer. Elija una de las cinco direcciones de animación diferentes, cada una de las cuales ajustará la posición inicial y final del elemento animado: Centrada, Derecha, Izquierda, Arriba, Abajo.
  • Duración de la animación – Aumente o disminuya la velocidad mediante el ajuste de duración de la animación. Las unidades son en milisegundos y la duración predeterminada de la animación es de un segundo.
  • Retardo de la animación – Si desea añadir un retardo antes de ejecutar la animación puede designar aquí ese retraso en milisegundos. Esto puede ser útil si usa varios módulos animados juntos.
  • Intensidad de la animación – Esta opción está disponible para todos los estilos de animación, excepto Desvanecer y Rebotar. La intensidad afecta la suavidad o fuerza de la animación. Si baja la intensidad, la animación será más suave y sutil. Si la aumenta, la animación será más agresiva y ágil.
  • Opacidad inicial de la animación – Si aumenta la opacidad inicial, puede reducir o eliminar el efecto de desvanecido que es aplicado a todos los estilos de animación.
  • Curva de velocidad de la animación – Aquí puede ajustar el método de atenuación de la animación. Las opciones son: Atenuación de entrada y salida, Atenuación, Atenuación de entrada y Atenuación de salida. Atenuar la entrada o salidad de la animación creará un efecto más suave en comparación con una curva de velocidad lineal.

Opciones avanzadas

Extra - Feed del blog en grilla - Avanzado

  • ID CSS – Escriba una ID CSS opcional para usar en este módulo. Puede usar una ID para aplicarle estilos o usarla como anclaje de enlace.
  • Clase CSS – Escriba una o varias clases CSS opcionales para usar en este módulo. Una clase CSS puede ser usada para aplicar estilos. Puede añadir múltiples clases, separadas por un espacio. Estas clases pueden ser usadas en el tema hijo o en el recuadro CSS personalizado para añadir a la página (desde los ajustes de la página) o al sitio entero (desde las opciones del tema).
  • CSS personalizado – Puede aplicar CSS personalizado al módulo desde aquí. Dentro de la sección CSS personalizado encontrará un campo de texto donde podrá añadir el código directamente a cada elemento. El código que se añada a estos campos ya está envuelto en sus respectivas etiquetas, por lo que solo deberá introducir reglas de CSS separadas por punto y coma.
  • Relación del Botón “Leer más” – Especifique el valor del atributo rel del enlace del botón “Leer más”. El atributo rel especifica la relación entre el documento actual y el documento vinculado.

Ver demostración en vivo del módulo

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Skype
Enviar por correo
Imprimir

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *