Documentación del plugin Divi Builder

Cómo añadir, configurar y personalizar el módulo de blog de Divi.

Con Divi, incluso los blogs son un módulo, y tu «blog» puede colocarse en cualquier lugar de tu sitio web, y en varios formatos. Puedes combinar los módulos de blog y barra lateral para crear diseños de blog clásicos. Los blogs de 1 columna, 2 columnas o 3 columnas pueden todos ser construidos usando módulos de blog y barra lateral.

Ver una demostración en vivo de este módulo

Cómo agregar un módulo de blog a su página

Antes de que pueda agregar un módulo de blog a su página, primero tendrá que saltar en el Constructor Divi. Una vez que el Tema Divi ha sido instalado en su sitio web, usted notará un botón de Uso del Constructor Divi por encima del editor de mensajes cada vez que usted está construyendo una nueva página. Al hacer clic en este botón se habilitará el Constructor Divi, dándole acceso a todos los módulos del Constructor Divi. A continuación, haz clic en el botón Usar Constructor Visual para lanzar el constructor en Modo Visual. También puedes hacer clic en el botón Usar Constructor Visual al navegar por tu sitio web en el front-end si has iniciado sesión en tu Tablero de WordPress.

Una vez que haya entrado en el Constructor Visual, puede hacer clic en el botón gris más para añadir un nuevo módulo a su página. Los nuevos módulos sólo se pueden añadir dentro de las filas. Si estás comenzando una nueva página, no olvides añadir una fila a tu página primero. Tenemos algunos grandes tutoriales sobre cómo utilizar los elementos de fila y sección de Divi.

Localiza el módulo del blog dentro de la lista de módulos y haz clic en él para añadirlo a tu página. La lista de módulos se puede buscar, lo que significa que también puedes escribir la palabra «blog» y luego hacer clic en enter para encontrar y añadir automáticamente el módulo de blog. Una vez añadido el módulo, aparecerá la lista de opciones del módulo. Estas opciones están separadas en tres grupos principales: Contenido, Diseño y Avanzado.

Ejemplo de uso: Añadir el módulo de blog con un diseño de cuadrícula en una sección especializada con una barra lateral derecha

Para este ejemplo, voy a añadir un módulo de blog a una página de blog. Esta página de blog tiene un encabezado de ancho completo con un módulo de búsqueda debajo de él. Bajo el módulo de búsqueda, voy a añadir una sección de especialidad con el módulo de blog en el lado izquierdo y una sección de barra lateral a la derecha. La barra lateral de la derecha tiene un widget de publicaciones recientes, un módulo de suscripción de correo electrónico y un módulo de persona.

Aquí está el aspecto de la página de ejemplo.

Nota que el módulo de blog está en un diseño de cuadrícula en el lado izquierdo de la sección de especialidad.

Comencemos.

Utiliza el constructor visual para añadir una Sección de Especialidad con el siguiente diseño:

Se te pedirá que añadas una fila de 1 columna o 2 columnas para el lado izquierdo. Elija la fila de 1 columna.

A continuación, añada el módulo de blog a la fila.

Actualice la configuración del blog de la siguiente manera:

Opciones de contenido

Número de publicaciones: 6
Botón Leer más: ON
Mostrar Paginación: NO
Color de fondo de la cuadrícula: #ffffff

Opciones de diseño

Diseño: Grid
Use Dropshadow: ON
Color del icono superpuesto: #ffffff
Color de superposición: rgba(224,153,0,0.51)
Fuente del encabezado: Default
Tamaño de la fuente del encabezado: 21px
Color del texto del encabezado: #333333
Espacio entre letras del encabezado: 1px
Altura de la línea del encabezado: 1,2em
Utilizar borde: SI
Color del borde: #f0f0f0
Ancho del borde: 1px
Estilo del borde: Sólido

Opciones Avanzadas

Custom CSS (Botón Leer más):

El CSS personalizado avanzado para el botón leer más crea un aspecto personalizado que se adapta bien al diseño.

En la sección de la barra lateral derecha del diseño de la Sección Especializada tendrás que añadir un módulo de barra lateral que tire del widget de publicaciones recientes. Debajo de eso tendrás que añadir un módulo de Email Optin. Y luego debajo del Email Optin necesitas añadir el Módulo de Persona con información sobre el autor.

¡Eso es todo!

Opciones de Contenido del Blog

Dentro de la pestaña de contenido encontrarás todos los elementos de contenido del módulo, como texto, imágenes e iconos. Cualquier cosa que controle lo que aparece en su módulo se encontrará siempre dentro de esta pestaña.

Número de posts

Defina el número de posts que desea mostrar. Necesitarás tener posts hechos para que algo se muestre dentro de este módulo.

Selecciona las categorías que te gustaría incluir en el feed de posts. Cualquier categoría de post que haya creado se mostrará aquí para que pueda seleccionar/deseleccionar.

Categorías Incluidas

Elija qué categorías le gustaría incluir en el feed.

Formato de Fecha Meta

Defina el formato de fecha que le gustaría mostrar en las entradas de su blog aquí. El diseño por defecto es un M j, Y formate (6 de enero de 2014) Ver el Códice de WordPress en los formatos de fecha para más opciones.

Contenido

Mostrar el contenido completo no truncará sus mensajes en la página de índice. Mostrar el extracto sólo mostrará el texto del extracto.

Número de desplazamiento

Elija por cuántas publicaciones desea desplazarse. Si se desplaza por 3 entradas, por ejemplo, no se mostrarán las tres primeras entradas de su blog.

Mostrar imagen destacada

Esta opción le permite elegir si desea o no que aparezcan imágenes en miniatura en el módulo de su blog.

Botón de leer más

Aquí puedes definir si quieres mostrar el enlace «leer más» después del extracto o no.

Mostrar autor

Elige si quieres o no mostrar el autor de cada entrada del blog dentro del área meta de la entrada debajo del título de la misma.

Mostrar fecha

Elija si desea o no mostrar la fecha de creación de cada entrada en el área meta de la entrada debajo del título de la misma.

Mostrar categorías

Elija si desea o no mostrar las categorías de la entrada en el área meta de la misma debajo del título de la misma.

Mostrar recuento de comentarios

Elija si desea o no mostrar el recuento de comentarios dentro del área meta de la entrada debajo del título de la misma.

Mostrar paginación

Elija si desea o no mostrar la paginación para esta fuente. Para habilitar la paginación numerada, tendrá que instalar el plugin WP Page Navi.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando se utiliza la vista WireFrame en el Constructor Visual, estas etiquetas aparecerán dentro del bloque del módulo en la interfaz del Constructor Divi.

Opciones de diseño del blog

Dentro de la pestaña de diseño encontrarás todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que utilizarás para cambiar el aspecto de tu módulo. Cada módulo Divi tiene una larga lista de ajustes de diseño que puede utilizar para cambiar casi cualquier cosa.

Diseño

Puede elegir mostrar las entradas de su blog en una cuadrícula o en un diseño de ancho completo.

Superposición de imagen destacada

Si se activa, se mostrará un color y un icono de superposición cuando los visitantes pasen por encima de la imagen destacada de una entrada.

Color del icono de superposición

Aquí puede definir un color personalizado para el icono de superposición.

Color de superposición

Aquí puede definir un color personalizado para la superposición.

Seleccionador de iconos por encima

Aquí puede definir un icono personalizado para la superposición.

Color del texto

Si su blog se está colocando sobre un fondo claro, el color del texto debe establecerse en ‘oscuro’. Visa versa, si su blog se está colocando en un fondo oscuro, el color del texto debe establecerse en ‘Luz’.

Fuente de cabecera

Puede cambiar la fuente de su texto de cabecera seleccionando su fuente deseada en el menú desplegable. Divi viene con docenas de grandes fuentes impulsadas por Google Fonts. Por defecto, Divi utiliza la fuente Open Sans para todo el texto en su página. También puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, todo mayúsculas y subrayado.

Tamaño de la fuente del encabezado

Aquí puedes ajustar el tamaño de tu texto de encabezado. Puede arrastrar el deslizador de rango para aumentar o disminuir el tamaño de su texto, o puede introducir su valor de tamaño de texto deseado directamente en el campo de entrada a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puedes introducir «px» o «em» después de tu valor de tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

Por defecto, todos los colores del texto en Divi aparecerán como blanco o gris oscuro. Si desea cambiar el color de su texto de cabecera, elija su color deseado desde el selector de color utilizando esta opción.

Espacio entre letras de cabecera

El espacio entre letras afecta al espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto de cabecera, utilice el deslizador de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir «px» o «em» después de su valor de tamaño para cambiar su tipo de unidad.

Altura de línea del encabezado

La altura de línea afecta al espacio entre cada línea de su texto de encabezado Si desea aumentar el espacio entre cada línea, utilice el control deslizante de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puedes introducir «px» o «em» después de tu valor de tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puedes cambiar la fuente de tu texto del cuerpo seleccionando tu fuente deseada en el menú desplegable. Divi viene con docenas de grandes fuentes impulsadas por Google Fonts. Por defecto, Divi utiliza la fuente Open Sans para todo el texto en su página. También puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, todo mayúsculas y subrayado.

Tamaño de la fuente del cuerpo

Aquí puedes ajustar el tamaño de tu texto del cuerpo. Puede arrastrar el deslizador de rango para aumentar o disminuir el tamaño de su texto, o puede introducir su valor de tamaño de texto deseado directamente en el campo de entrada a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puedes introducir «px» o «em» después de tu valor de tamaño para cambiar su tipo de unidad.

Color del cuerpo del texto

Por defecto, todos los colores del texto en Divi aparecerán como blanco o gris oscuro. Si desea cambiar el color de su cuerpo de texto, elija su color deseado desde el selector de color utilizando esta opción.

Espacio entre letras del cuerpo

El espacio entre letras afecta al espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su cuerpo de texto, utilice el deslizador de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir «px» o «em» después de su valor de tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta al espacio entre cada línea de su cuerpo de texto Si desea aumentar el espacio entre cada línea, utilice el deslizador de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del deslizador. Los campos de entrada soportan diferentes unidades de medida, lo que significa que puedes introducir «px» o «em» después de tu valor de tamaño para cambiar su tipo de unidad.

Fuente Meta

Puedes cambiar la fuente de tu meta texto seleccionando tu fuente deseada en el menú desplegable. Divi viene con docenas de grandes fuentes impulsadas por Google Fonts. Por defecto, Divi utiliza la fuente Open Sans para todo el texto en su página. También puedes personalizar el estilo de tu texto utilizando las opciones de negrita, cursiva, todo mayúsculas y subrayado.

Tamaño de la fuente meta

Aquí puedes ajustar el tamaño de tu meta texto. Puede arrastrar el deslizador de rango para aumentar o disminuir el tamaño de su texto, o puede introducir su valor de tamaño de texto deseado directamente en el campo de entrada a la derecha del deslizador. Los campos de entrada soportan diferentes unidades de medida, lo que significa que puede introducir «px» o «em» después de su valor de tamaño para cambiar su tipo de unidad.

Color del Texto Meta

Por defecto, todos los colores de texto en Divi aparecerán como blanco o gris oscuro. Si desea cambiar el color de su meta texto, elija su color deseado desde el selector de color utilizando esta opción.

Espacio entre letras

El espacio entre letras afecta al espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su metatexto, utilice el deslizador de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir «px» o «em» después de su valor de tamaño para cambiar su tipo de unidad.

Altura de línea de meta

La altura de línea afecta al espacio entre cada línea de su meta texto Si desea aumentar el espacio entre cada línea, utilice el deslizador de rango para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada a la derecha del deslizador. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir «px» o «em» después de su valor de tamaño para cambiar su tipo de unidad.

Usar borde

Activar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes ajustes condicionales.

Color del borde

Esta opción afecta al color de su borde. Seleccione un color personalizado del selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de 1 píxel. Puede aumentar este valor arrastrando el deslizador de rango o introduciendo un valor personalizado en el campo de entrada a la derecha del deslizador. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de «px» por otra, como em, vh, vw, etc.

Estilo de borde

Los bordes admiten ocho estilos diferentes, entre los que se incluyen: sólido, punteado, discontinuo, doble, ranura, cresta, inserción y salida. Selecciona el estilo que desees en el menú desplegable para aplicarlo a tu borde.

Opciones avanzadas del blog

Dentro de la pestaña avanzada, encontrarás opciones que los diseñadores web más experimentados podrían encontrar útiles, como el CSS personalizado y los atributos HTML. Aquí puedes aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e IDs CSS personalizados al módulo, que pueden utilizarse para personalizar el módulo dentro del archivo style.css de su tema hijo.

Identificación CSS

Introduzca un ID CSS opcional que se utilizará para este módulo. Un ID se puede utilizar para crear un estilo CSS personalizado, o para crear enlaces a secciones particulares de su página.

Clase CSS

Introduzca las clases CSS opcionales que se utilizarán para este módulo. Una clase CSS puede utilizarse para crear estilos CSS personalizados. Puede añadir varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema hijo de Divi o dentro del CSS personalizado que agrega a su página o su sitio web utilizando las opciones del tema Divi o la configuración de la página del constructor Divi.

Custom CSS

El CSS personalizado también se puede aplicar al módulo y a cualquiera de los elementos internos del módulo. Dentro de la sección de CSS personalizado, encontrarás un campo de texto donde puedes añadir CSS personalizado directamente a cada elemento. Las entradas de CSS en estas configuraciones ya están envueltas dentro de las etiquetas de estilo, por lo que sólo tienes que introducir las reglas CSS separadas por punto y coma.

Visibilidad

Esta opción te permite controlar en qué dispositivos aparece tu módulo. Puede elegir desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil mediante la eliminación de ciertos elementos de la página.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.