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 recursos útiles para cualquier sitio web o blog. Son una forma eficaz y conveniente de mostrar contenido importante con un diseño coherente que los usuarios agradecerá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 iconos, esquemas de color y / o contenido para adaptarse a cualquier necesidad. Una vez que le mostramos 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 ningún complemento!

¡Empecemos!

Vistazo

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

Con estos 3 diseños de cuadros de contenido principal, podrá realizar personalizaciones fáciles (como icono, color y texto) para crear diseños de cuadros de contenido sin fin 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 cuadros de contenido, primero deberá descargar el diseño usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

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

Creación de diseños de cajas 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 n. ° 1

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

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

• Usar icono: SÍ
• Icono: ver captura de pantalla
• Color de fondo: #ffffff
• Color de degradado de fondo a la izquierda: # 00529b
• Color de degradado de fondo a la derecha: # 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 de 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.5em
• Altura de la línea de título: 2em
• Color del texto del cuerpo: # bde5f8
• Tamaño del texto del cuerpo: 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 del contenido: 100%
• Ancho máximo: 700px
• Alineación del módulo: centro
• Acolchado: 2em arriba, 2em abajo, 5em izquierdo, 2em derecho

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

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

En la pestaña avanzada, le daremos al icono de propaganda un estilo personalizado para que tenga una forma de círculo con colores de fondo y borde que coincidan con el color de degradado de fondo izquierdo utilizado anteriormente. También vamos a colocar el icono con una posición absoluta para que podamos colocarlo exactamente donde queramos sin ocupar ningún 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 propaganda), también necesitaremos actualizar los colores que se están utilizando 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 n. ° 2

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

Para este diseño, vamos a centrar verticalmente el icono en el lado izquierdo de la propaganda usando 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 de 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 tiene el icono) 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 degradado de la izquierda con la columna de la cuadrícula de ancho de 5em que sostiene 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 n. ° 3

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

Una vez que la segunda propaganda esté duplicada, abra la configuración de propaganda duplicada.

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

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

A continuación, agregaremos 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 propaganda).

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 giraremos el icono para que coincida con el texto vertical girado. Para hacer esto, agregue el siguiente CSS al cuadro CSS de imagen de Blurb:

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

Aquí esta el resultado final.

Actualización del diseño

Actualizar 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 construye utilizando sobre todo la unidad de longitud em (em es con respecto al cuerpo de la raíz tamaño de fuente del elemento). Debido a esto, los cuadros de contenido se escalarán de tamaño sin problemas al ajustar el tamaño del texto del cuerpo en la configuración de diseño incorporada de Divi.

Actualizar colores CSS personalizados

Para el diseño de 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 la caja de contenido de diseño # 3, añadimos una etiqueta con CSS personalizado en el elemento antes de pseudo. Para actualizar el texto, simplemente cambie el valor de la propiedad de contenido en el cuadro Antes de CSS.

Cómo 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 preajuste 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 de propaganda) y crear un nuevo preset 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 a partir de estilos personalizados.

Nombra el nuevo ajuste preestablecido como quieras y guárdalo.

Repita estos pasos para cada preajuste de módulo de propaganda que desee crear.

Para crear más cuadros de contenido en el futuro, simplemente agregue un nuevo módulo de propaganda y seleccione el icono 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 de cajas de contenido principales que creamos.

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

Pensamientos finales

Los cuadros de contenido con estilo que creamos pueden ser un activo de diseño útil para cualquier sitio web o blog. Puede aprovechar las poderosas opciones de diseño en Divi para ajustar 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 tener noticias tuyas en los comentarios.

¡Salud!