5 modelos creativos módulo de propaganda de la divicidad

En esta publicación, exploraremos una de las características más populares del módulo Div, Blurb. Aunque aparentemente simple fuera de la puerta, tiene muchas características personalizables que pueden dar vida a los elementos de su sitio web. En general, el módulo de propaganda se utiliza para cosas como servicios, beneficios, información de contacto, etc., pero con DIV, las posibilidades son ilimitadas. ¡Vamos a divertirnos! Eye es una breve presentación de los 5 estilos de módulos de propaganda que crearé en este tutorial.





5 Modelos creativos Div Div Blurbs Módulos suscribirse a nuestro canal de YouTube
Nociones básicas para comenzar, deberá crear una nueva página. Desde el tablero de WordPress, navegue por las páginas> Agregar un nuevo. Luego, dé el título de su página e implementa el Visual Builder. Seleccione la opción “Construir desde Scratch”. Una vez que el Visual Builder está cargado en la página, está listo para comenzar el diseño. Este tutorial está diseñado para facilitar la creación de cada uno de estos modelos de propaganda individuales, así que no dude en seguir el diseño que desea construir. En otras palabras, no tienes que comenzar con el primero.
1. Embujas emergentes con listas de funciones

En este primer ejemplo, nos divertiremos un poco con la extensión de las borrones fuera de la fila para crear un efecto emergente. Luego podemos usar las columnas adyacentes al lado de cada una para agregar algunas borrones con iconos con las izquierdas para servir como elementos de lista recomendados. Para comenzar, cree una nueva sección y una fila con una estructura de cuatro columnas.

Luego continúe y actualice la configuración de la fila de la siguiente manera: Wallpaper: # 2E3858 Haga que esta fila se complete el ancho: Sí Use el ancho personalizado del canal: Sí, el ancho del canal: 1 iguala las alturas de la columna: Sí Margen personalizado: 5VW , Braida personalizada de 5VW Down: 0 PX Up, 0 Px Jossalve la configuración.
Luego, en la primera columna, agregue su primer modo de propaganda. Elimine la última oración del cuadro de contenido para acortar la cantidad de texto. Luego seleccione usar un icono en lugar de una imagen y elija un icono (cualquiera lo hará).

Luego actualice lo siguiente: Color de fondo: # DF4570 Color del icono: #ffffffff Orientación del texto: Fuente Título: Codifique Sans Título semi condensado Estilo de fuente: TT Título Letras: 2 PX Margen personalizado (Escritorio): -5VW Up, -5VW Down Personalizado Margen personalizado (tableta): 0 px hacia arriba, 0 px hacia abajo forro personalizado: 5VW hacia arriba, 5VW abajo, 3VW izquierda, 3VW Box Box Sombra: Vea la captura de pantalla El poder de la sombra de la caja: 80 PX

Usando la opción de menú de clic derecho o teclas cortas CMD + C y CMD + V, copie el módulo que acaba de crear y pegue en la columna 3. Luego actualice el nuevo módulo de blurb con otro color brillante (pero libre): Color de fondo: # 24C4A3

Ahora es el momento de agregar los elementos de la lista Blurbs adyacentes a los elementos emergentes que acabamos de crear. Para hacer esto, agregue un nuevo texto a la columna 2. Luego elimine el texto falso en el cuadro de contenido para que solo quede el texto del texto. Luego agregue un icono para reemplazar su imagen igual que antes. Luego actualice la configuración de diseño de la siguiente manera:

Icono de color: # DF4570 Imagen / icono Colocación: Fuente izquierda Título: Codifique SAN SAN Semi condensado Lineo personalizado: 20 PX hacia arriba, 20 PX hacia abajo, 3VW izquierda, 3VW Duplicar la propaganda dos veces, por lo que obtiene tres borrachos de la lista en la columna en la columna en la columna . Luego use la función DIV multiselección para seleccionar las tres borrachas y luego copiarlas y pegarlas en la columna 4. También puede usar la multiclección para seleccionar las tres borrachas en la columna 4 y editar la configuración del elemento para bloquear para cambiar el color del icono Los tres a # 24C4A3. ¡Esto es! Crear desenfoque pop-out es una forma divertida de hacer desenfoque para destacar. Aquí esta el resultado final.
2. Brurbación promocional con imagen de fondo personalizada.

Este estilo de propaganda es excelente para incluir ofertas de contenido y promoción, como un libro gratuito. La idea básica es colocar el contenido de la propaganda en el lado izquierdo del módulo para dejar espacio para los antecedentes personalizados. Vamos a eso. Primero agregue una sección ordinaria con dos columnas. En la columna izquierda, agregue un nuevo módulo de propaganda. Actualice el texto del título y elimine la última oración del contenido simulado para reducir la cantidad de texto. Luego actualice la imagen con una imagen de libro (o una imagen de su producto). Un ícono de un libro o algo funcionará también.



Utilizo los elementos de imagen en el paquete de presentación del blog de viajes, así que no dude en comenzar el diseño tomando esas imágenes.

Consejo: también puede agregar una URL del módulo a este módulo para hacer clic en todo el módulo, ya que puede servir como promoción. Luego agregue una imagen de fondo al modo. Asegúrese de que la imagen de fondo sea una imagen de tipo encabezado, con el punto focal de la imagen a la derecha, por lo que puede agregar el contenido a la izquierda de la imagen, con el fondo que distrae el texto. Luego agregue un gradiente de fondo para servir como una superposición parcial detrás del contenido y se superpone la imagen de fondo para hacer que el texto sea más legible. Para agregar la actualización del gradiente de fondo lo siguiente: Color izquierdo del gradiente de fondo: RGBA (255,255,25,0,8) Color derecho del gradiente de fondo: RGBA (255,255,255,0) Dirección de gradiente: 90 grados Posición inicial: 40% final Posición: 70% Coloque el gradiente sobre la imagen de fondo: Sí
Luego, actualice lo siguiente: Caja de imagen Sombra: Ver Fuente de captura de pantalla: Noto Serif Título Texto: 26 PX Fuente Cuerpo: Noto Body Texto Tamaño: 16 PX Ancho de imagen: 150 PX Contenido Ancho (Escritorio): 60% Ancho de contenido: (teléfono inteligente):: Alineo personalizado del 80%: 2VW hacia abajo, 2 VW, el diseño de la tecla derecha de 2 VW aquí ofrece tanto la imagen como el contenido un ancho personalizado, de modo que el contenido se puede colocar a la izquierda más adelante.

Ahora debemos agregar una sombra de la caja en la parte superior del texto para crear la impresión de que la imagen del libro se extiende por encima del módulo para un hermoso efecto de superposición. Para hacer esto, actualice lo siguiente: Box Sombra: vea la captura de pantalla de la sombra de la caja: 0 PX Box Sombra Posición vertical: 50 PX Color de sombra: #fffffffltim Pass implica un fragmento CSS corto personalizado necesario para alinear el contenido de la propaganda con el lado izquierdo del módulo. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en el cuadro de introducción de contenido de la propaganda:
Margen-izquierda: 0;

¡Ahora revise el resultado!
Consejo: Recuerde las opciones de desplazamiento disponibles. ¡Trate de darle una ventaja a la imagen del libro para que las cosas cobren vida! 3. El estilo de la propaganda círculo utilizando el gradiente de fondo Esta propaganda simple utiliza fondo para servir como fondo circular para su contenido de propaganda. Esta es una alternativa divertida para convertir todo su modo de propaganda en un círculo usando CSS personalizado. Comience agregando una nueva sección habitual con una estructura de fila de tres columnas. Luego agregue un módulo de propaganda a la columna izquierda.

Luego elimine la última oración del contenido para reducir la cantidad de texto. Es importante que este diseño mantenga la cantidad de texto algo pequeña, porque lo caberá dentro de un círculo. Luego agregue un gradiente de fondo para crear el fondo del círculo de la siguiente manera: Color izquierdo del gradiente de fondo: # FA7F28 El color derecho del gradiente de fondo: RGBA (255,255,255.0) Tipo de gradiente: Posición inicial radial: 60% Posición final: 0%% Coloque el gradiente sobre la imagen de fondo: Sí, luego actualice el resto de la configuración de diseño de la siguiente manera: Orientación del texto: Fuente Centro de título: Oswald Fuente Estilo: TT Título Letras: 1 PX Fuente Cuerpo: Robot Peso de la fuente del cuerpo: Tamaño del cuerpo Fácil Texto del cuerpo : 16 ancho de px (tableta): 80% Alineación del módulo: Centro de forro personalizado (escritorio): 20% más, 25% de baja, 20% izquierda, 20% de forro personalizado derecho (teléfono inteligente): 20% más bajo, 25% de baja, 10 % a la izquierda, 10% a la derecha
La clave aquí es ajustar adecuadamente el relleno personalizado, de modo que el círculo de fondo esté alineado con el contenido del centro. Es posible que deba ajustar estas configuraciones de acuerdo con la cantidad de contenido que tiene. Ahora puede copiar y pegar el módulo en las columnas restantes. Luego actualice la configuración de la fila para que tengan un ancho personalizado del 80% y un ancho de 1.

Para completar el diseño, puede agregar una imagen de fondo y un gradiente en su sección de la siguiente manera: Agregue una imagen de fondo del gradiente de fondo: RGBA (2,0,76.51) Color derecho del gradiente de fondo: RGBA (2,0, 76,0.84) Coloque el gradiente sobre el fondo: ¡Sí, esto es! ¡Revise su diseño final!

Para un espacio adicional, siempre puede reducir el tamaño del icono de la propaganda a algo así como 50px, para evitar la colisión de círculos en anchos de navegador más pequeños. Cuando realice ajustes, no olvide aprovechar la función de división multiseelect para hacer ediciones de bloque en todos los módulos simultáneamente. Consejo de bonificación: transformando todo el modo de propaganda en un círculo CSS personalizado Si desea convertir todo el módulo en un círculo (en lugar de usar el gradiente de fondo), reemplace el gradiente con un color de fondo regular y agregue este CSS personalizado debajo de la pestaña avanzada Configuración del módulo de blurb: en el cuadro del elemento principal: Altura: 300px;

Ancho: 300px;

Border-Radius: 100%;


Borde: 5px sólido #ffffff;

Relleno: ¡5%! IMPORTANTE;


Pantalla: Flex;
En el cuadro de contenido de la propaganda: Margen: Auto;
Este CSS personalizado reemplaza el conjunto de llenado desde la configuración del módulo de propaganda, por lo que es posible que deba eliminar el fragmento si desea volver a esta configuración. Además, este CSS usa Flex para centrar el contenido de la propaganda dentro del círculo. Esto será útil. Se verá así si se aplica a los tres módulos.
4. Presage con bordes y sombras de caja Una de mis características de diseño favoritas de todos los tiempos para divertirse es la caja de la caja. Ya hemos presentado un uso creativo para las sombras de caja en el diseño de la propaganda de la promoción anteriormente, donde creamos el efecto superpuesto. Pero también puede usar las sombras de la caja como una forma creativa de adaptarse a su contenido con patrones de cuadrícula rotos. En este diseño, le mostraré cómo combinar los bordes y las sombras de la caja de una manera única. Para comenzar, agregue una nueva sección normal con una estructura de tres columnas. Luego agregue el módulo de la propaganda a la primera columna. Pase una imagen a la propaganda. Luego, dale a la imagen la imagen un borde y una sombra de la caja, actualizando la configuración de diseño de la siguiente manera: El ancho del borde superior: 8 px El borde superior de la imagen: # 2f3854 ancho del borde izquierdo: 8 px borde izquierdo de imagen: # 2f3854 Caja de imagen de sombra: ver la captura de pantalla de la sombra de la caja: -20px Box Sombra Posición vertical: -30px Color de sombra: # F89DA9
Luego actualice la fuente y el título espacial y el cuerpo de la siguiente manera: Fuente Título: Yeseva One Font Corp: Montserrat Margen personalizado: 50 px Down Fining personalizado: 2 VW Down Down
Finalmente, le dé a su módulo de propaganda un borde personalizado y un tono de caja para equilibrar el diseño del marco de la siguiente manera: El ancho del borde recto: 15 px Edge recto: # 2F3854 Ancho de margen inferior: 15 PX Color de borde inferior: # 2F3854 Caja de imagen de sombra : Vea la captura de pantalla de la sombra de la caja: 20 PX Box Sombra Posición vertical: 35 PX Color de sombra: #DDDDDD
Ahora copie y pegue el módulo en las columnas 2 y 3 y actualice las imágenes de la propaganda para completar el diseño. Aquí está el resultado final 5. El estilo de las borrones como una lista curva, el siguiente diseño es una forma divertida de crear listas usando borrones. Usando algunos bordes personalizados, puede curvar los elementos de la lista de propaganda para envolver elementos en su página En este ejemplo, curvaré la lista para envolver el lado derecho de un icono grande. Y puede volverse un poco creativo primero, agregue una nueva sección habitual con una estructura de columnas de dos cero. Antes de agregar módulos de propaganda, dé a su turno un ancho personalizado y un ancho de canaleta, actualizando la configuración de la fila de la siguiente manera: Ancho personalizado: 700 PX Ancho de canaletas: 2
Ahora, para crear el icono de la propaganda grande agregando el módulo de la propaganda a la columna izquierda. Luego elimine el texto y el contenido del título. Y luego elija el icono de la bombilla. Ahora, solo el ícono debería ser visible. Luego, actualice el color y el tamaño del icono de la siguiente manera: Color del icono: # 96A6BD Font Dimension Icon (escritorio): 400 px Icono de tamaño de fuente (teléfono inteligente): 200 PX

En la columna derecha, agregue un nuevo módulo de propaganda. Este será el primero de los cinco borrones totales que compensarán nuestra lista. Luego abra la configuración del módulo y elimine el contenido dejando solo el texto del título. Luego elija el icono de flecha correcta para la propaganda.

Las siguientes actualizan la configuración de diseño de la siguiente manera: Wallpaper: #BB7860 Color icono: #fffff Place Imagen / icono: Izquierda Use el tamaño de la fuente del icono: Sí Fuente de dimensión del icono: 30 PX Título de la fuente: Título del Título del raleway Color: #FFFFFF Tamaño Título Título: 20 PX Altura de la línea del título: 1.5EM Margen personalizado: 5% Informe de alineación personalizada: 3% hacia arriba, 10% izquierda, 2% Derecha por desplazamiento del módulo cuatro veces hasta que obtenga un total de cinco borrones apilados en el columna derecha.

Luego, le dé al segundo color un nuevo color, bordes personalizados para empujarlo hacia la derecha y las esquinas redondeadas creativas de la siguiente manera: Color de fondo: # 393E56 Margen personalizado (escritorio): 10% izquierda, margen personalizado (tableta): 0% Izquierda, 0% de esquinas redondeadas a la derecha: 50 px arriba a la derecha, 50 px abajo a la izquierda

Antes de dejar este módulo, copie las esquinas redondeadas haciendo clic con la derecha en la opción de la configuración de la propaganda.

Luego guarde la configuración de la propaganda y haga clic con el botón derecho en el primer módulo (superior) que creó y pegue las esquinas redondeadas en el estilo del módulo.


Ahora continuemos actualizando los últimos tres módulos con colores apropiados, espacio y diseños de esquina redondeados. Para la tercera propaganda en la columna, actualice lo siguiente: Color de fondo: # 96A6BD Margen personalizado (escritorio): 20% izquierda, -20% Margen personalizado (tableta): 0% izquierda, 0% esquinas redondeadas a la derecha: 50 px hacia arriba , 50 px hacia abajo a la derecha para la cuarta propaganda, actualice lo siguiente: Color de fondo: # 393E56 Margen personalizado (escritorio): 10% izquierda, -10% Margen personalizado (tableta): 0% izquierda, 0% esquinas redondeadas a la derecha: 50 px arriba A la izquierda, 50 px hacia abajo para la quinta propaganda, simplemente copie las esquinas redondeadas de la cuarta propaganda y péguelos. ¡Eso es todo! Veamos el diseño final. Más inspiración de estilo de propaganda Si está interesado en explorar modelos de módulos de blurb más divertidos, consulte los enlaces a continuación:

Puede usar fondos asimétricamente curvos para borrones.

Puede colocar los módulos de propaganda con modelos creativos utilizando separadores de sección.

Puede crear su propia forma de la imagen de fondo para construir una apariencia geométrica de la cuadrícula.

Aprenda a combinar los iconos de blurbi para crear un elemento gráfico enfocado en su publicación en las sombras de caja unilateral.

Y no olvides explorar nuestros esquemas previos a la paciencia disponibles en Divic Builder para estilos aún más inspiradores