Lo más destacado del complemento Divi: contenido intenso

Instalación de contenido intenso

Cargue y active Content Intense 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 intenso de contenido. Haga clic aquí e ingrese su clave API y correo electrónico, y guarde los cambios.

Módulo intensivo de contenido

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 singulares 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 cuerpo del texto y el metatexto. 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 excelente para crear marcadores, establecer un enlace para no seguir, etc.

Ajustes predeterminados de contenido intenso

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. He agregado un fondo en la sección para ayudar a que se destaque.

En este ejemplo, agregué un asterisco para el metaseparador, 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 deshabilitado el conteo de comentarios.

Este agrega algo de color al fondo detrás del texto. También moví el botón a la derecha y configuré 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.

Este es los Alpes. Es un diseño alternativo horizontal de una columna. El fondo del texto coincide con el color de fondo que he elegido en la sección. Estas son tarjetas 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á los botones de navegación. Puede deshabilitarlos o agregar su propio texto. Toman el estilo de los otros botones, así que cuando hayas diseñado los botones Leer más, también habrás diseñado estos. También puede usar texto en lugar de un botón.

Ejemplo: Alpes con Atlas

Creé este diseño de blog usando 2 módulos de Content Intense. El primero utiliza el diseño de los Alpes sin navegación. El segundo módulo utiliza Atlas. Establecí su compensación en 1 para que no muestre la misma imagen que el primer módulo. Ajusté el color de la fuente a Arimo (uno de mis favoritos). Los botones usan un degradado. Al pasar el mouse, pasan a un color sólido y aumentan el espacio 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 unos 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 diferentes de Content Intense, todos ellos usando Andes y cada uno está compensado por 1 más que el módulo anterior. He agregado un fondo a la sección con una superposición. La fuente del encabezado es Comfortaa. El último módulo utiliza la navegación. He cambiado los botones a texto.

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

Ejemplo: Himalaya

Este usa Himalayas con una superposición detrás del texto. Desactivé 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 – Montañas Rocosas

Me encanta el aspecto de las Rocosas. 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 la luz. 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í a la derecha. Me gustan esos tres puntos y la línea en la parte inferior de las tarjetas. Es un pequeño detalle que añade un toque de brillo visual.

Ejemplo: adicional

Content Intense funciona muy bien con Extra. Solo tuve que hacer algunos ajustes menores donde usé Andes. En mi ejemplo, había colocado un fondo blanco para el área de texto. Como usé texto blanco, simplemente lo cambié a oscuro. El ejemplo anterior es Rockies. La única diferencia fue el color del texto para el 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 uso en un solo sitio web. Incluye 1 para el Proyecto de Desarrollo y 1 para el Proyecto Vivo.
• Licencia ilimitada:  se puede usar 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 lleva a través de los ajustes y proporciona demostraciones en el camino.

Pensamientos finales

Content Intense tiene algunas características de diseño agradables, e incluso se agregará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á interesado en darle a su blog un aspecto diferente, Content Intense podría ser el complemento que está buscando.

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

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