Cómo crear cuadros de contenido elegantes en Divi para consejos, información, advertencias y más (descarga gratuita)

Las cajas de contenido estilizadas para cosas como consejos, advertencias y otra información importante son materiales útiles para cualquier sitio o blog. Esta es una forma efectiva y conveniente de presentar un 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 posible problema. En este tutorial, le mostraremos cómo construir 3 modelos de cajas de contenido en el Div. Estos modelos de cuadros de contenido se pueden modificar fácilmente con nuevos iconos, esquemas de color y / o contenido para que coincida con cualquier necesidad. Una vez que le mostremos cómo diseñar las cajas, le mostraremos cómo puede usar las presetitas globales de la división para facilitar la implementación de un nuevo cuadro de contenido predefinido con solo unos pocos clics. ¡No se necesita ningún complemento!
¡Vamos a empezar! Dibuja la vista hoy, construiremos estos 3 modelos principales de cajas de contenido en el Div.

Con estos 3 modelos principales de cuadros de contenido, podrá hacer personalizaciones fáciles (como el icono, el color y el texto) para crear modelos interminables de cajas de contenido para cualquier ocasión. Aquí hay 36 ejemplos que incluimos en la descarga gratuita a continuación.

Descargue el aspecto gratuito para poner su mano en los 36 cuadros de contenido, primero deberá descargar el aspecto con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder). Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de los proyectos de cuadros de contenido en la división antes de comenzar a diseñar nuestros cuadros de contenido, para agregar una nueva fila con una columna a la sección predeterminada de Div Builder.
Content Box Design # 1 Para crear el primer cuadro de contenido, agregue un módulo de propaganda a la columna.
En la pestaña Contenido, actualice lo siguiente:

Usa el icono: si

Icono: ver captura de pantalla
Color de fondo: #ffffff
Color izquierdo del gradiente de fondo: # 00529b
Color correcto del gradiente de fondo: # bde5f8
Dirección de gradiente: 90 grados
Posición de inicio: 3em
Posición final: 0%
En la pestaña Diseño, actualice el estilo de icono de la siguiente manera:
Icono de color: #ffffff

Alineación de imágenes / iconos: izquierda
Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 2em
Luego actualice los estilos de texto de la siguiente manera:
Color de texto del título: # 00529b

Título Tamaño del texto: 1.5em
Altura de la línea de título: 2em
Color del texto del cuerpo: # bde5f8
Tamaño del texto del cuerpo: 1em
La 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 revestimiento de la siguiente manera:
Ancho de contenido: 100%

Ancho máximo: 700 PX
Alineación del módulo: centro
Junta: 2em arriba, 2em hacia abajo, 5em a la izquierda, 2em a la derecha
Luego agregue una sombra de caja sutil a la propaganda de la siguiente manera:
Box Shadow: Ver captura de pantalla

Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 88 PX
Poder de extensión de la sombra de la caja: -10pculcare Shadow: RGBA (0.0,0,17)
En la pestaña Avanzada, le daremos al ícono de la propaganda un estilo personalizado, para que tengan un círculo con colores de fondo y bordes que coincidan con el color de fondo de ala izquierda utilizado. También colocaremos el ícono con una posición absoluta, para que podamos colocarlo exactamente donde queremos, sin ocupar espacio real en el documento.
Para agregar el estilo personalizado, pegue el siguiente código CSS al cuadro CSS de la imagen de la propaganda: Posición: Absoluto;
Botón de margen: 0px;

Borde: 0.5em sólido #00529b!
Radio fronterizo: 50%;
Antecedentes: #00529b;
Transformar: traduceX (-3.75em);
Nota: Al cambiar el esquema de color del cuadro de contenido (o el módulo de la propaganda), también tendremos que actualizar los colores que se usan en la imagen de blurbs CSS para el borde y el fondo del icono.
Verifiquemos el resultado final.
Diseño de la caja de contenido # 2 Para crear el segundo diseño del cuadro de contenido, duplique el módulo de propaganda anterior para iniciar el proyecto para que podamos hacer algunos cambios.

Para este diseño, centraremos el icono vertical en el lado izquierdo de la propaganda utilizando la propiedad de la cuadrícula CSS. Debajo de la pestaña de diseño, reemplace CSS de imagen de blurbs con lo siguiente: Margen-Bottom: 0px;


Luego agregue el siguiente CSS al contenido de la propaganda CSS Box: Display: Grid;

Alinine-Ritams: Centro;

Justify-Concursing: Centro;
Columna de plantilla de cuadrícula: 5em Car;
GAP GRID: 2EM;
El ancho de la columna izquierda en la cuadrícula (la que sostiene el icono) se establece en 5EM, y la columna derecha que contiene el título y el texto del cuerpo se establece automáticamente. Debemos igualar el ancho del color de gradiente izquierdo con la columna de grado con un ancho de 5EM que contiene el ícono. Para esto, actualice lo siguiente: Iniciar posición: 5EM
En la pestaña Diseño, actualice la alineación y el tamaño del icono:
Alineación de imágenes / iconos: Centro

Icono de tamaño de fuente: 3em
Ahora ya no necesitamos el forro izquierdo, así que sácalo.

Ahora, todo debería estar bellamente alineado. Verifique el resultado final.
Content Box Design # 3 Para crear el tercer diseño del cuadro de contenido, copie el segundo módulo de blurbs (cuadro de contenido) que acabo de terminar.
Una vez que la segunda propaganda sea duplicada, abra la configuración de propaganda duplicada. En la pestaña Diseño, cambie el color del icono:

Icono de color: RGBA (255,255,255,0,3)

Luego, agregaremos el texto de la etiqueta vertical a través del icono agregando CSS personalizado al pseudo elemento anterior (que le permite adjuntar un diseño y / o contenido adicionales antes del elemento del módulo de la propaganda). Para agregar la etiqueta, pegue los siguientes CSS a la caja antes de CSS: Contenido: ‘TIP de clave’;

Abajo: 50%;

Tamaño de fuente: 1em;
Línea de altura: 1em;

Espaciado de letras: 0.4em;
Posición: Absoluto;
Transforma: Rotatez (-90deg) TraducEx (-50%) Traducy (3EM)!
Transform-urig: abajo a la izquierda;
Color: #fff;
Font-Family: heredar;
Font-Weight: Bold;
Texto-transformación: uppercase;
Índice Z: 1;
También giraremos el icono para que coincida con el texto vertical girado. Para hacer esto, agregue los siguientes CSS a la imagen de la propaganda CSS: Bottom de margen: 0px; transformar: Rotatez (-90deg);
Aquí esta el resultado final.
La actualización de la actualización de diseño de la actualización del tamaño de los elementos del cuadro de contenido cambiando el tamaño del texto del cuerpo, cada uno de los cuadros de contenido está construido con la unidad de mayor longitud (EM es relativa al tamaño de la fuente de la raíz del cuerpo). Por esta razón, los cuadros de contenido se dimensionarán perfectamente al ajustar el tamaño del texto del cuerpo en la configuración de diseño incrustado. Actualice los colores CSS personalizados para el diseño del cuadro de contenido # 1, agregué un fondo personalizado y un color de borde al icono con CSS personalizado. Asegúrese de actualizar los colores utilizados para la propiedad de borde y fondo para que coincida con su propio esquema de diseño.
Actualización del texto de la etiqueta de texto Para el cuadro de contenido de diseño # 3, agregué una etiqueta Pseudo CSS antes del elemento. Para actualizar el texto, simplemente cambie el valor de la propiedad de contenido en el cuadro antes de CSS.
La reutilización de los cuadros de contenido en Divit Guard el módulo en la biblioteca de la Divica Hay dos formas principales de hacer los módulos reutilizables en el DIV. La primera forma es guardar el módulo (o cualquier elemento) en la biblioteca de la Divica. Una vez que el elemento se guarda en la biblioteca, puede encontrarlo en la biblioteca de la Divica cuando agrega un nuevo elemento a una página. Use el preajuste global La segunda forma principal de hacer un modo reutilizable en la división es crear un preajuste global para ese módulo. Una vez que guarde el diseño de un módulo global, puede agregar fácilmente el preajuste global a cualquier otra instancia del mismo módulo. En este caso, podemos abrir la configuración para cada uno de nuestros cuadros de contenido (o módulos de propaganda) y podemos crear un nuevo preajuste global para cada uno. Para hacer esto, abra la configuración del módulo de la propaganda y haga clic en la opción Preset en la parte superior. Luego convierta la configuración del módulo en un nuevo preajuste de estilos personalizados. Nombra el nuevo preajuste lo que quieras y guárdelo.
Repita estos pasos para cada preajuste del módulo de propaganda que desea crear. Para crear múltiples cuadros de contenido en el futuro, simplemente agregue un nuevo módulo de blurb y seleccione el icono que desea usar. Luego active cualquiera de los preajuste cargados haciendo clic en el menú Fin del preajuste y seleccionando un preajuste de su elección.

Los resultados finales aquí son un último vistazo a los 3 modelos principales de cajas de contenido que construimos.

Aquí hay 36 modelos que podrá hacer con algunas personalizaciones fáciles que incluimos en la descarga gratuita de arriba.