Con Divi puedes combinar módulos de blog y de barra lateral para crear diseños de blog clásicos. Se pueden crear 1 columna, 2 columnas o 3 columnas utilizando el módulo de blog y la barra lateral.
Cómo añadir un módulo de blog a su página
Una vez que haya instalado el tema Divi en su sitio web, notará un botón Usar Divi Builder encima del editor de publicación cada vez que cree una nueva página.
Al hacer clic en este botón, puede activar Divi Builder, que le dará acceso a todos los módulos de Divi Builder.
A continuación, haga clic en el botón Usar Visual Builder para iniciar el generador en modo visual, o haga clic en el botón Usar Visual Builder mientras navega por su sitio web ascendente si está conectado al panel de control de WordPress.
Una vez que haya entrado en Visual Builder, 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 líneas, si comienza una nueva página no olvide añadir una línea a su página primero, tenemos excelentes tutoriales sobre cómo utilizar los elementos de línea y secciones Divi.
Busque el módulo blog en la lista de módulos y haga clic en él para añadirlo a su página. la lista de módulos es buscable, lo que significa que también puede escribir la palabra»blog» y, a continuación, hacer clic en intro para buscar y añadir automáticamente el módulo blog!
Una vez añadido el módulo, será bienvenido con la lista de opciones del módulo, que se dividen en tres grupos principales: Contenido, Diseño y Avanzado.
Caso de uso del módulo de blog con diseño en cuadrícula en una sección especializada con barra lateral derecha
Para este ejemplo, agregaré un módulo de blog a una página de blog que tenga un encabezado completo con un módulo de búsqueda a continuación.
Bajo el módulo de búsqueda, añadiré una sección especializada con el módulo de blog a la izquierda y una sección de barra lateral a la derecha, la barra lateral a la derecha contiene un widget de publicación reciente, un módulo de correo electrónico de Optin y un módulo de Persona.
A continuación se muestra el aspecto de la página de ejemplo.
Tenga en cuenta que el módulo del blog se encuentra en una cuadrícula a la izquierda de la sección especial.
Vamos a empezar.
Utilice el generador visual para añadir una sección especializada con el siguiente esquema:
Se le pedirá que añada una columna o una fila de dos columnas para el lado izquierdo, seleccione la columna de la fila 1.
Luego agregue el módulo de blog a la línea.
Actualiza la configuración del blog de la siguiente manera:
Opciones de contenido
Número de mensajes:
6 Saber más Botón: ONA Mostrar
paginación: NOC Color de
fondo de la cuadrícula: #ffffff
Opciones de diseño
Diseño: GridUse
Dropshadow: ONSuperposition
Color Icono: #ffffffHover
Overlay Color: rgba (224,153,0,0.
1) HeaderFont
:Header Font Size: 21pxHeading
Text Color: #
333333Heading
Spacing:
1pxHeading
Line
Height: 1.2 emBorder
: YESCBorder
Border
Color
: # f0f0f0Border Border Width
:
1pxBorder Border
Style
: Solid
Opciones avanzadas
CSS personalizado (botón Leer más):
color: # e09900
;bloque de visualización
;alineación de texto: centro
;margen-tapa: 10px
;borde: 1px sólido #ccc
;relleno: 5px
;transformación de texto: mayúsculas
;espaciado de letras: 1px;
El botón CSS personalizado avanzado para el botón Leer más crea un aspecto personalizado que coincide con el diseño.
En la sección de la barra lateral derecha del diseño de la sección especializada, deberá agregar un módulo de barra lateral que inserte el widget para las publicaciones recientes; a continuación, deberá agregar un módulo Optin de correo electrónico; y luego, en El Optin de correo electrónico, deberá agregar el módulo Persona con información del autor.
¡Eso es! ¡Eso es!
Opciones de contenido del blog
En la pestaña Contenido encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos, y todo lo que controla lo que aparece en su módulo siempre estará en esta pestaña.
Número de posición (Número de posiciones)
Defina el número de mensajes que desea mostrar Necesitará tener mensajes para todo lo que aparece en este módulo.
Seleccione las categorías que desea incluir en el feed de publicación y todas las categorías de mensajes que ha creado aparecerán aquí para que pueda seleccionar/deseleccionarlas.
Categorías Incluidas
Elija las categorías que desea incluir en el feed.
Formato de metadatos
Establezca el formato de fecha que desea mostrar en sus entradas de blog aquí, el diseño por defecto es un formato M j, Y (6 de enero de 2014) Vea el códice de WordPress sobre formatos de fecha para más opciones.
Contenido
La visualización del contenido completo no truncará sus publicaciones en la página de índice; la visualización del extracto sólo mostrará el texto del extracto.
Número de desplazamiento
Elija el número de mensajes que desea compensar, si lo hace con 3 mensajes, por ejemplo, los tres primeros mensajes en el feed de su blog no se mostrarán.
Mostrar imagen destacada
Esta opción le permite elegir si desea que las miniaturas aparezcan o no en el módulo de su blog.
Leer más botón
Aquí se puede definir si se visualiza o no el enlace»leer más» después del extracto.
Mostrar autor
Elija si desea mostrar o no el autor de cada artículo de blog en el buzón meta bajo el título del artículo.
Mostrar fecha
Seleccione si desea o no visualizar la fecha en la que se creó cada artículo en el campo meta posición bajo el título del mensaje.
Mostrar categorías
Elija si desea mostrar o no las categorías de trabajo en el área meta de trabajo debajo del título de la publicación.
Mostrar número de comentarios
Elija si desea o no mostrar el número de comentarios en el meta buzón bajo el título de la publicación.
Mostrar paginación
Para habilitar la paginación numerada, deberá instalar el complemento WP Page Navi.
Etiqueta de administración
Cuando se utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulos de la interfaz de Divi Builder.
Opciones de diseño de blogs
En la ficha Diseño, encontrará todas las opciones de estilo de módulo, como fuentes, colores, tamaño y espaciado, que le permiten cambiar el aspecto del módulo.
Provisión
Puede elegir mostrar los artículos de su blog en una cuadrícula o diseño de ancho completo.
Imagen de superposición
Si esta opción está activada, se muestran un color y un icono de superposición cuando un visitante pasa por encima de la imagen seleccionada de un mensaje.
Color del icono de superposición
Aquí puede establecer un color personalizado para el icono de superposición.
Color de la cubierta en el vuelo de flotación
Aquí puede definir un color personalizado para la sobreimpresión.
Recogedor de iconos flotante
Aquí puede definir un icono personalizado para la sobreimpresión.
Color del texto
Si su blog está colocado sobre un fondo claro, el color del texto debe ajustarse a»Oscuro»; si su blog está colocado sobre un fondo oscuro, el color del texto debe ajustarse a»Claro».
Fuente de cabecera
Puedes cambiar la fuente de tu encabezado seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi utiliza la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto utilizando las opciones en negrita, cursiva, mayúsculas y subrayado.
Tamaño de fuente del encabezado
Aquí puede ajustar el tamaño del texto del encabezado, arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño del texto, o puede introducir directamente el valor del tamaño del texto deseado en el campo de entrada a la derecha del control deslizante, que soporta diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Color del texto de la cabecera
Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color de su encabezado, elija el color que desee en el selector de color utilizando esta opción.
Espaciado entre letras de cabecera
Si desea aumentar el espacio entre cada letra del texto del encabezado, utilice el control deslizante de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del control deslizante.Los campos de entrada soportan diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Altura de la línea de cabecera
La altura de línea afecta al espacio entre cada línea del texto de encabezado Si desea aumentar el espacio entre cada línea, utilice el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del control deslizante.
Policía del cuerpo
Puedes cambiar la fuente de tu cuerpo seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas desarrolladas por Google Fonts, Divi utiliza la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto utilizando las opciones en negrita, cursiva, mayúsculas y subrayado.
Tamaño de la fuente del cuerpo
Aquí puede ajustar el tamaño de su cuerpo de texto, arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede introducir directamente el valor del tamaño de texto deseado en el campo de entrada a la derecha del control deslizante, que soporta diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Color del cuerpo del texto
Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color del texto de su cuerpo, elija el color deseado en el selector de color utilizando esta opción.
Espaciado de las letras del cuerpo
Si desea aumentar el espacio entre cada letra del texto del cuerpo, utilice el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del control deslizante.Los campos de entrada soportan diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Altura de la línea corporal
La altura de la línea afecta el espacio entre cada línea del texto del cuerpo. Si desea aumentar el espacio entre cada línea, utilice el deslizador de intervalos para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del deslizador.
Policía de Meta
Puedes cambiar la fuente de tu meta-texto seleccionando la fuente de tu elección en el menú desplegable, Divi viene con docenas de fuentes fantásticas potenciadas por Google Fonts, Divi usa la fuente Open Sans para todo el texto de tu página de forma predeterminada, y también puedes personalizar el estilo de tu texto usando las opciones en negrita, cursiva, mayúsculas y subrayadas.
Tamaño de la fuente de las Metas
Aquí puede ajustar el tamaño del metatexto, arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño del texto, o introducir el valor del tamaño de texto deseado directamente en el campo de entrada a la derecha del control deslizante.
Los campos de entrada soportan diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Color de texto para meta
Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro, si desea cambiar el color de su meta-texto, elija el color de su elección en el selector de color utilizando esta opción.
Espaciado de las meta-cartas
Si desea aumentar el espacio entre cada letra del metatexto, utilice el deslizador de intervalos 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 soportan diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Altura de la meta línea
La altura de la línea afecta al espacio entre cada línea del metatexto Si desea aumentar el espacio entre cada línea, utilice el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño de espaciado deseado en el campo de entrada situado a la derecha del control deslizante.
Los campos de entrada soportan diferentes unidades de medida, lo que significa que puede introducir»px» o»em» dependiendo de su tamaño para cambiar su tipo de unidad.
Usar el borde
Habilitando esta opción se colocará un borde alrededor de su módulo que puede ser personalizado usando los siguientes parámetros condicionales.
Color del borde
Seleccione un color personalizado en el selector de color para aplicarlo a su borde.
Ancho del borde
Por defecto, los bordes tienen un ancho de 1 píxel, que puede aumentar arrastrando el cursor desde el rango o introduciendo un valor personalizado en el campo de entrada a la derecha del cursor.
Unidades de medida personalizadas de los soportes, lo que significa que puede cambiar la unidad predeterminada de»px» a otra, por ejemplo, em, vh, vw, etc.
Estilo de borde
Los bordes soportan ocho estilos diferentes que incluyen: sólido, punteado, punteado, doble, ranura, cresta, inserción y comienzo.
Opciones avanzadas de blog
En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como CSS personalizados y atributos HTML, aquí puede aplicar un CSS personalizado a cualquiera de los muchos elementos del módulo, o puede aplicar clases CSS personalizadas e IDs al módulo, que se pueden utilizar para personalizar el módulo en el archivo de estilo.css del tema hijo.
ID DE CSS
Un identificador se puede utilizar para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.
Clase CSS
Una clase CSS puede ser usada para crear un estilo CSS personalizado, puede agregar varias clases, separadas por un espacio.
Estas clases se pueden utilizar en el tema Divi Child o en el CSS personalizado que añada a su página o sitio web mediante las opciones de tema Divi o la configuración de página de Divi Builder.
CSS personalizado
En la sección de CSS personalizado, encontrará un campo de texto donde podrá añadir CSS directamente a cada elemento.
Las entradas CSS en estos parámetros ya están incrustadas en etiquetas de estilo. Sólo tienes que introducir las reglas CSS separadas por punto y coma.
Visibilidad
Puede optar por desactivar el módulo en tabletas individuales, teléfonos inteligentes u ordenadores de sobremesa.
Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.