Lo más destacado del complemento Divi: contenido intenso

Divi Builder incluye un módulo de blog para mostrar publicaciones basadas en categorías en formato de cuadrícula o de ancho completo. ¿Alguna vez ha querido tener más control sobre el diseño de su blog? Es posible que le interese un complemento de terceros llamado Content Intense.

Content Intense es un complemento de BeSuperfly que agrega nuevos diseños y funciones de estilo para darle un nuevo aspecto a su módulo de blog. Se basa en el módulo de blog estándar, por lo que incluye todas las funciones familiares.

(El complemento está disponible en el sitio web del desarrollador).

En este complemento destacado, echaremos un vistazo a las funciones y veremos cómo se ve en la página. También lo cargaré en Extra (pero, por supuesto, también es compatible con Divi).

Instalación intensa de contenido

Carga y contenido activo intenso como cualquier complemento. Una vez que se haya activado el complemento, verá un nuevo elemento de menú dentro de Configuración en el panel de control llamado Activación de complemento de contenido intenso. Haga clic aquí e ingrese su clave API y correo electrónico, y guarde los cambios.

Módulo de contenido intenso

Se agrega un nuevo módulo a Divi Builder llamado Content Intense.

La pestaña Contenido le permite mostrar solo publicaciones, solo páginas o páginas y publicaciones, el número para mostrar, las categorías y el número de compensación. Muestre la imagen destacada, meta (que le permite elegir un separador), extracto, navegación y fondo. Como verá, estoy simplificando demasiado la cantidad de opciones en la configuración.

Una de las características más exclusivas es que las categorías de WordPress se agregan a las páginas. Si elige mostrar páginas, se seleccionan cuando elige sus categorías.

La pestaña Diseño le permite seleccionar uno de los 5 diseños, habilitar la superposición, ajustar el texto del encabezado, el texto del cuerpo y el meta texto. También ajuste el borde, el botón, el espaciado y la animación.

El Avanzado que incluye funciones de relación de botones para que pueda especificar el valor del atributo rel del enlace. Esto es ideal para crear marcadores, establecer un enlace a nofollow, etc.

Configuración predeterminada intensa de contenido

La configuración predeterminada muestra la imagen destacada con el Gravatar del autor superpuesto a la parte inferior de la imagen. A esto le sigue el meta de la publicación, el título, una línea, el extracto de la publicación y el botón Leer más con animación flotante. Agregué un fondo en la sección para ayudarlo a destacar.

En este ejemplo, agregué un asterisco para el meta separador, cambié el recuento de extractos de 270 a 100 y reemplacé el botón leer más con texto centrado. En lugar de la fecha, muestra cuánto tiempo hace que se publicó la publicación. He desactivado el recuento de comentarios.

Éste agrega algo de color al fondo detrás del texto. También moví el botón a la derecha y establecí el extracto en 150.

Hay cinco diseños diferentes. Los ejemplos que hemos visto hasta ahora usan Atlas: diseño vertical de 3 columnas, con avatar. Veamos cada diseño. Estoy usando la configuración predeterminada.

Éste es Alpes. Es un diseño alterno horizontal de una columna. El fondo del texto coincide con el color de fondo que elegí en la sección. Estas son cartas planas con efectos de desplazamiento para el botón.

Este es Himalaya, un diseño vertical de 3 columnas que utiliza la imagen destacada de la publicación como fondo. También utiliza animación de botones. Este texto es más difícil de ver sin ajustes. Arreglaremos esto más tarde con una superposición.

Esto es Rockies: un diseño vertical de 3 columnas con efectos de desplazamiento. También coloca la imagen destacada como fondo. Los efectos de desplazamiento revelan el extracto completo y el botón Leer más. Haremos algunos ajustes para que el texto sea más legible.

Este es Andes: un diseño vertical de 1 columna con avatar. Utiliza una versión recortada de la imagen destacada y usa líneas pequeñas para separar meta y líneas más grandes para separar publicaciones.

En la parte inferior de la página, verá botones de navegación. Puede desactivarlos o agregar su propio texto. Adoptan el estilo de los otros botones, por lo que cuando haya diseñado los botones de leer más, también los habrá diseñado. También puede utilizar texto en lugar de un botón.

Ejemplo: Alpes con Atlas

Creé este diseño de blog usando 2 módulos Content Intense. El primero utiliza el diseño de los Alpes sin navegación. El segundo módulo usa Atlas. Establecí su desplazamiento en 1 para que no muestre la misma imagen que el primer módulo. He ajustado el color de la fuente a Arimo (uno de mis favoritos). Los botones usan un degradado. Al pasar el mouse, cambian a un color sólido y aumentan el espaciado entre letras. El botón de navegación coincide.

Ejemplo: Alpes

Soy un fanático de los diseños alternos. Me encanta el aspecto de los Alpes sin ningún cambio, así que solo hice algunos pequeños ajustes. Agregué un borde rojo, una superposición roja y cambié los colores del botón y del encabezado. También cambié la fuente a Dosis y la puse en negrita. Esto muestra la superposición al pasar el mouse.

De hecho, me gusta más sin el borde. Este muestra el botón al pasar el mouse.

Ejemplo: Andes

Este ejemplo usa 6 módulos Content Intense diferentes, todos ellos usando Andes y cada uno está compensado por 1 más que el módulo anterior. Agregué un fondo a la sección con una superposición. La fuente del encabezado es Comfortaa. El último módulo usa navegación. Cambié los botones a texto.

Aquí hay un vistazo al diseño normal de una sola columna. También agregué una superposición de desplazamiento. Todo lo demás es predeterminado.

Ejemplo: Himalaya

Este usa Himalaya con una superposición detrás del texto. He desactivado el meta, cambié el texto a claro, cambié el estilo del botón a blanco y reduje la fuente del botón a 12 puntos. El texto del encabezado es amargo. La única animación que he incluido es para el botón de desplazamiento. Esto sería una gran CTA o enlaces a páginas que describen sus servicios.

Ejemplo: Rockies

Me encanta el look de los Rockies. Tiene un bonito efecto de sombra con animación flotante que muestra el texto y el botón Leer más. Podría haber colocado una superposición de texto, pero no quería cubrir la imagen. En cambio, cambié el texto a claro. También cambié los colores de meta y el botón, y cambié el separador a un guión.

Por supuesto, una superposición se ve bien. Agregué una superposición negra y cambié la opacidad para que se vea un poco de la imagen. La fecha en la esquina superior izquierda también usa la superposición. Cambié el botón a texto y lo moví hacia la derecha. Me gustan esos tres puntos y una línea en la parte inferior de las tarjetas. Es un pequeño detalle que agrega un toque de brillo visual.

Ejemplo: extra

Content Intense funciona muy bien con Extra. Solo tuve que hacer algunos ajustes menores donde usé Andes. En mi ejemplo, coloqué un fondo blanco para el área de texto. Como usé texto en blanco, simplemente lo cambié a oscuro. El ejemplo anterior es Rockies. La única diferencia fue el color del texto del enlace Leer más.

Estilos descargables

Las animaciones se pueden agregar a través de CSS. El sitio web del desarrollador muestra varias animaciones que han creado, como la de arriba, que mueve el texto al pasar el mouse. Este y otros estilos se pueden descargar de ellos en un archivo JSON.

Licencia y documentación

Elija entre dos licencias (ninguna permite la reventa):

• Licencia estándar: para usar en un solo sitio web. Incluye 1 para el proyecto de desarrollo y 1 para el proyecto en vivo.
• Licencia ilimitada: se puede utilizar en sitios web ilimitados para uso personal y del cliente.

Las actualizaciones son automáticas. Content Intense está disponible en el sitio web del desarrollador.

La documentación se prueba en el sitio web del desarrollador. Lo guía a través de los ajustes y proporciona demostraciones a lo largo del camino.

Pensamientos finales

Content Intense tiene algunas características de diseño agradables, y se agregarán aún más diseños en el futuro, por lo que esto es solo el comienzo. Cada uno de los diseños se puede diseñar con los ajustes del módulo y personalizar aún más con CSS. Es intuitivo de usar. Si estás interesado en darle a tu blog un aspecto diferente, Content Intense podría ser el complemento que estás buscando.

Queremos escuchar de ti. ¿Has probado Content Intense? Háganos saber su experiencia con él en los comentarios a continuación.

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