Cómo crear cuadros de contenido con estilo en Divi para obtener consejos, información, advertencias y más (descarga GRATUITA)

Los cuadros de contenido con estilo para cosas como consejos, advertencias y otra información importante son activos útiles para cualquier sitio web o blog. Son una forma efectiva y conveniente de mostrar contenido importante con un diseño consistente que los usuarios apreciarán. Por ejemplo, es posible que necesite un diseño de cuadro de contenido para resaltar un consejo clave en un tutorial o para advertir a los usuarios sobre un problema potencial.

En este tutorial, le mostraremos cómo crear 3 diseños de cajas de contenido en Divi . Estos diseños de cuadros de contenido se pueden modificar fácilmente con nuevos íconos, esquemas de color y/o contenido para adaptarse a cualquier necesidad. Una vez que le mostremos cómo diseñar las cajas, le mostraremos cómo puede usar los ajustes preestablecidos globales de Divi para facilitar la implementación de una nueva caja de contenido prediseñada con solo unos pocos clics. ¡No se necesita complemento!

¡Empecemos!

Vistazo

Hoy, vamos a construir estos 3 diseños principales de cajas de contenido en Divi.

Con estos 3 diseños principales de cuadros de contenido, podrá realizar personalizaciones sencillas (como icono, color y texto) para crear un sinfín de diseños de cuadros de contenido para cualquier ocasión.

Aquí hay 36 ejemplos que incluimos en nuestra descarga GRATUITA a continuación.

Descarga el diseño GRATIS

Para tener en sus manos los 36 diseños de cajas de contenido, primero deberá descargar el diseño usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

https://youtu.be/j2k0KnBPOPg

Suscríbete a nuestro canal de Youtube

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo has hecho, instala y activa el tema Divi .
Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Crear los diseños de la caja de contenido en Divi

Antes de comenzar a diseñar nuestros cuadros de contenido, agreguemos una nueva fila de una columna a la sección predeterminada en Divi Builder.

Diseño de caja de contenido #1

Para crear el primer cuadro de contenido, agregue un módulo de publicidad a la columna.

En la pestaña de contenido, actualice lo siguiente:

Icono de uso: SÍ
Icono: ver captura de pantalla
Color de fondo: #ffffff
Degradado de fondo Color izquierdo: #00529b
Degradado de fondo Color derecho: #bde5f8
Dirección del gradiente: 90 grados
Posición de inicio: 3em
Posición final: 0%

En la pestaña de diseño, actualice el estilo del icono de la siguiente manera:

Color del icono: #ffffff
Alineación de imagen/icono: Izquierda
Usar tamaño de fuente del icono: SÍ
Tamaño de fuente del icono: 2em

A continuación, actualice los estilos de texto de la siguiente manera:

Color del texto del título: #00529b
Tamaño del texto del título: 1,5 em
Altura de la línea del título: 2em
Color del cuerpo del texto: #bde5f8
Tamaño del cuerpo del texto: 1em
Altura de la línea del cuerpo: 2em

Una vez que los estilos de texto estén en su lugar, actualice el tamaño y el relleno de la siguiente manera:

Ancho de contenido: 100%
Ancho máximo: 700px
Alineación del módulo: Centro
Acolchado: 2em arriba, 2em abajo, 5em izquierda, 2em derecha

Luego agregue una sombra de cuadro sutil a la propaganda de la siguiente manera:

Sombra de caja: ver captura de pantalla
Posición vertical de la sombra del cuadro: 0px
Fuerza de desenfoque de sombra de cuadro: 88px
Fuerza de propagación de la sombra del cuadro: -10px
Color de sombra: rgba(0,0,0,0.17)

En la pestaña avanzada, le daremos al ícono de la publicidad un estilo personalizado para que tenga una forma de círculo con colores de fondo y borde que coincidan con el color degradado de fondo izquierdo que se usó anteriormente. También vamos a colocar el icono con una posición absoluta para que podamos colocarlo exactamente donde queramos sin ocupar espacio real en el documento.

Para agregar el estilo personalizado, pegue el siguiente código CSS en el cuadro CSS de la imagen de Blurb:

position:absolute;
margin-bottom: 0px;
border: 0.5em solid #00529b !important;
border-radius:50%;
background: #00529b;
transform: translateX(-3.75em);

NOTA: Al cambiar el esquema de color del cuadro de contenido (o módulo de publicidad), también necesitaremos actualizar los colores que se utilizan en el CSS de la imagen de Blurb para el borde y el fondo del icono.

Veamos el resultado final.

Diseño de caja de contenido #2

Para crear nuestro segundo diseño de cuadro de contenido, duplique el módulo de publicidad anterior para impulsar el diseño y que podamos hacer algunas modificaciones.

Para este diseño, vamos a centrar verticalmente el ícono en el lado izquierdo de la publicidad utilizando la propiedad de cuadrícula CSS.

En la pestaña de diseño, reemplace el CSS de la imagen de Blurb con lo siguiente:

margin-bottom: 0px;

Luego agregue el siguiente CSS al cuadro CSS de contenido de Blurb:

display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 5em auto;
grid-gap: 2em;

El ancho de la columna de la izquierda en la cuadrícula (la que contiene el ícono) se establece en 5em , y la columna de la derecha que contiene el título y el texto del cuerpo se establece en automático . Necesitamos hacer coincidir el ancho del color del degradado izquierdo con la columna de cuadrícula de 5 em de ancho que contiene el icono. Para hacer eso, actualice lo siguiente:

Posición de inicio: 5em

En la pestaña de diseño, actualice la alineación y el tamaño del icono:

Alineación de imagen/icono: centro
Tamaño de fuente del icono: 3em

Ahora no necesitamos el relleno izquierdo, así que sácalo.

Ahora todo debería estar bien alineado. Mira el resultado final.

Diseño de caja de contenido #3

Para crear el tercer diseño del cuadro de contenido, duplique el segundo módulo publicitario (cuadro de contenido) que acabamos de terminar.

Una vez que se duplique la segunda publicidad, abra la configuración de publicidad duplicada.

En la pestaña Diseño, cambie el color del icono:

Color del icono: rgba(255,255,255,0.3)

A continuación, vamos a agregar texto de etiqueta vertical sobre el ícono agregando CSS personalizado al pseudoelemento anterior (que básicamente le permite adjuntar diseño y/o contenido adicional antes del elemento del módulo de publicidad).

Para agregar la etiqueta, pegue el siguiente CSS en el cuadro Antes de CSS:

content: 'key tip';
bottom:50%;
font-size: 1em;
line-height: 1em;
letter-spacing: 0.4em;
position:absolute;
transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important;
transform-origin: bottom left;
color: #fff;
font-family: inherit;
font-weight: bold;
text-transform: uppercase;
z-index:1;

También rotaremos el ícono para que coincida con el texto vertical rotado. Para hacer esto, agregue el siguiente CSS al cuadro CSS de la imagen de Blurb:

margin-bottom: 0px;
transform: rotateZ(-90deg);

Aquí esta el resultado final.

Actualización del diseño

Actualice el tamaño de los elementos del cuadro de contenido cambiando el tamaño del texto del cuerpo

Cada uno de los cuadros de contenido se crea utilizando principalmente la unidad de longitud em ( em es relativo al tamaño de fuente del cuerpo raíz del elemento). Debido a esto, los cuadros de contenido se escalarán en tamaño sin problemas al ajustar el tamaño del texto del cuerpo en la configuración de diseño integrada de Divi.

Actualizar colores CSS personalizados

Para el diseño del cuadro de contenido n.º 1, agregamos un fondo personalizado y un color de borde al ícono con CSS personalizado. Asegúrese de actualizar los colores utilizados para la propiedad de borde y fondo para que coincidan con el esquema de color de su propio diseño.

Actualización del texto de la etiqueta

Para el diseño del cuadro de contenido #3, agregamos una etiqueta con CSS personalizado en el pseudo elemento anterior . Para actualizar el texto, simplemente cambie el valor de la propiedad de contenido en el cuadro Antes de CSS.

Hacer que las cajas de contenido sean reutilizables en Divi

Guarde el módulo en la biblioteca Divi

Hay dos formas principales de hacer que los módulos sean reutilizables en Divi. La primera forma es guardar el módulo (o cualquier elemento) en la Biblioteca Divi.

Una vez que el elemento se guarda en la biblioteca, puede encontrarlo en la biblioteca Divi al agregar un nuevo elemento a una página.

Usar preajustes globales

La segunda forma principal de hacer que un módulo sea reutilizable en Divi es crear un ajuste preestablecido global para ese módulo. Una vez que guarde el diseño de un módulo como un ajuste preestablecido global, puede agregar fácilmente ese ajuste preestablecido global a cualquier otra instancia de ese mismo módulo.

En este caso, podemos abrir la configuración de cada uno de nuestros cuadros de contenido (o módulos publicitarios) y crear un nuevo ajuste preestablecido global para cada uno. Para hacer eso, abra la configuración del Módulo Blurb y haga clic en la opción preestablecida en la parte superior. Luego, convierta la configuración del módulo en un nuevo ajuste preestablecido de estilos personalizados.

Nombra el nuevo preset como quieras y guárdalo.

Repita estos pasos para cada ajuste preestablecido de módulo publicitario que desee crear.

Para crear más cuadros de contenido en el futuro, simplemente agregue un nuevo módulo de publicidad y seleccione el ícono que desea usar. Luego active cualquiera de los ajustes preestablecidos cargados haciendo clic en el menú desplegable de ajustes preestablecidos en la parte superior y seleccionando un ajuste preestablecido de su elección.

Resultados finales

Aquí hay un vistazo final a los 3 diseños principales de cajas de contenido que construimos.

Y aquí hay 36 diseños que podrá hacer con algunas personalizaciones sencillas que incluimos en nuestra descarga GRATUITA anterior.

Pensamientos finales

Los cuadros de contenido con estilo que creamos pueden ser un recurso de diseño útil para cualquier sitio web o blog. Puede aprovechar las potentes opciones de diseño en Divi para modificar los cuadros de contenido para que se ajusten a cualquier diseño. Además, con la capacidad de guardarlos y cargarlos en la biblioteca Divi y/o crear ajustes preestablecidos globales, podrá implementar estos cuadros de contenido cuando lo desee con solo unos pocos clics. Con suerte, estos serán útiles.

Espero escuchar de usted en los comentarios.

¡Salud!