Resaltado del complemento Divi - Extras del blog Divi

Divi incluye un módulo de blog para mostrar sus publicaciones en un diseño de cuadrícula o ancho completo. Es un módulo agradable y hace el trabajo. ¿Y si quisiera diseños y funciones diferentes? Eso se puede hacer con CSS, pero un complemento de terceros llamado Divi Blog Extras facilita mucho la tarea.

Divi Blog Extras es un complemento de terceros de Divi Extended que agrega un nuevo módulo a Divi Builder con varias funciones nuevas para mostrar las publicaciones de su blog. Incluye seis diseños de diseño diferentes y agrega una función de carga AJAX con un botón de carga más. Las publicaciones se cargan a medida que se desplaza y la carga es rápida. Puede cambiar el texto tanto para leer más como para cargar más botones.

En este complemento destacado, echaremos un vistazo a Divi Blog Extras y obtendremos algunas ideas de lo que se puede hacer con este complemento. Las imágenes de estos ejemplos se tomaron de Unsplash.com.

Instalación y configuración de Divi Blog Extras

Sube y activa como de costumbre. Un nuevo módulo llamado Divi Blog Extras estará disponible en Divi Builder. Para usarlo, simplemente colóquelo en una fila como cualquier módulo. Dado que las opciones son las mismas que las de los módulos Divi Builder estándar, el uso de este módulo es intuitivo.

La configuración de contenido incluye las opciones familiares y tiene seis opciones de diseño, longitud de extracto, colores de categoría, cargar más texto de botón, superposición de imágenes destacadas, leer más texto de botón y opciones de color de texto. La configuración de Diseño incluye encabezado, meta, texto del cuerpo y estilo de borde. El diseño Block Extended agrega posición de imagen y Classic agrega íconos sociales. Veamos más de cerca cada uno de los diseños.

Cuadrícula extendida

El diseño predeterminado, Grid Extended, muestra publicaciones de blog con imágenes y texto alternando. Las imágenes se iluminan al pasar el mouse. Los nombres de las categorías se colocan dentro de un cuadro. en el modo de respuesta, las imágenes se colocan en la parte superior.

En este ejemplo, agregué una superposición de desplazamiento, un icono de desplazamiento, cambié el texto para leer más, limité el extracto a 100 caracteres y cambié el texto de la categoría y los colores de fondo. La animación de desplazamiento se muestra cuando se desplaza sobre cualquier parte de la publicación.

Caja extendida

Cuadro extendido coloca el extracto en un cuadro que se superpone a la imagen y elimina el cuadro alrededor del nombre de la categoría. La imagen del autor se agrega a la sección meta. Las imágenes y el texto se alternan. Este es uno de los diseños de blogs más elegantes.

En este ejemplo, cambié la fuente de la categoría y los colores de fondo, limité la longitud del extracto a 150 caracteres, cambié la fuente a azul y cambié el texto del botón Leer más. El desplazamiento predeterminado ilumina la imagen como se ve en la imagen superior de arriba.

Ancho completo

Full Width coloca las imágenes a la izquierda y el extracto a la derecha, agregando una fecha con estilo en el extremo izquierdo. Cada publicación está separada por una línea. El nombre de la categoría se coloca dentro de meta.

Este ejemplo deshabilita la fecha y la metainformación. El texto usa colores personalizados. Cambié el texto del botón Leer más y cargar más. El extracto está limitado a 200 caracteres.

Todos los diseños responden. Aquí hay un vistazo a la apariencia receptiva de Full Width. Esto muestra dos módulos uno al lado del otro en una fila de 2 columnas.

Bloque extendido

Block Extended es una cuadrícula de blog que agrega el nombre de la categoría sobre la imagen y la meta en la parte inferior de la tarjeta. La imagen se amplía cuando pasa el cursor sobre cualquier parte de la tarjeta. Me gusta este tipo de micro-interacción porque muestra que se puede hacer clic en la tarjeta.

Block Extended tiene tres opciones para mostrar las imágenes. Este ejemplo coloca la imagen destacada en segundo plano con el texto superpuesto.

Este ejemplo alterna la imagen de fondo entre las dos primeras opciones.

Fondo de ancho completo

Fondo de ancho completo muestra una versión recortada de la imagen en ancho completo y coloca el extracto con meta en una superposición sobre la imagen. La ubicación de los extractos se alterna. Meta se separa del extracto con una línea.

Este ejemplo usa una superposición oscura sobre la imagen para mostrar que la superposición del extracto no usa la misma superposición al pasar el mouse. El fondo de la sección es rojo para este ejemplo. Observe que el rojo se muestra al pasar el mouse. También agregué mi propio texto de botón Leer más y un borde de 2 píxeles.

Clásico

El diseño clásico muestra las publicaciones del blog con imágenes de tamaño completo y extractos de ancho completo debajo de las imágenes. La categoría y la fecha se colocan encima del título. El título incluye un separador de línea corto para diferenciarlo de la imagen. Debajo del extracto está el nombre del autor y el número de comentarios separados por una barra. Un separador de línea más delgado y más ancho separa los postes entre sí.

Este diseño tiene una opción para mostrar iconos sociales. Al hacer clic en Cargar más (o como lo he etiquetado - Ver más artículos) se muestra el siguiente conjunto de publicaciones, que equivale a la cantidad de publicaciones que he seleccionado para mostrar. En este ejemplo, estoy mostrando dos publicaciones. Cargar más carga las siguientes 2 publicaciones.

Creando un diseño único con Divi Blog Extras

Se pueden usar varios módulos juntos para crear diseños de revistas. Este diseño simple incluye cuatro módulos que muestran el diseño Gird Extended. Cada módulo muestra diferentes categorías. Los dos del medio muestran dos mensajes cada uno.

Esto crea un diseño de revista con diferentes categorías para las distintas secciones. Este ejemplo muestra cómo se ve la cuadrícula extendida como receptiva.

Este es el mismo diseño de Divi Builder pero utiliza un fondo de ancho completo. Las superposiciones cubren las imágenes casi por completo en el modo de respuesta.

Este ejemplo utiliza el diseño clásico para el módulo superior y Grid Extended para los dos módulos siguientes. Cada uno de los módulos muestra diferentes categorías y tiene su propio estilo para el texto de la categoría. El módulo superior no muestra un extracto.

Esto crea un diseño de revista interesante. También configuro las filas para mostrar el ancho completo. Puede mezclar y combinar los diseños para obtener un diseño único. Creé los diseños con diferentes categorías para cada módulo. En una actualización futura, el módulo tendrá una función de compensación para que pueda usar varios módulos dentro de la misma categoría.

Licencia

Un solo sitio cuesta $ 15. La licencia extendida cuesta $ 30 y puede usarse en sitios ilimitados para usted y sus clientes. Incluye actualizaciones de por vida.

Este complemento no funciona con Extra.

• Puede comprar este complemento en el sitio web de Divi Extended.

Pensamientos finales

Divi Blog Extras agrega algunas características agradables de estilo y diseño para darle un poco de estilo a su módulo de blog. También agrega la capacidad de aplicar estilo a los fondos y al texto de las categorías. Utiliza AJAX para cargar e incluye un nuevo botón de carga. Incluso puede agregar su propio texto para cargar más y leer más botones. Cada uno de estos diseños es excelente para darle a su blog un aspecto único del blog estándar. Si desea un diseño de blog que vaya más allá del módulo de blog estándar de Divi Builder, Divi Blog Extras podría ser el módulo que está buscando.

Queremos escuchar de ti. ¿Has probado Divi Blog Extras? Háganos saber su experiencia en los comentarios a continuación.

Imagen destacada a través de pulsar011 / shutterstock.com