Divi Blurb Extended

¿Cómo usar el complemento  Divi Blurb Extendido?

Este complemento consta de dos módulos para que Divi Builder cree Divi Blurbs y Flip Box.

1. Divi Blurb Extended: este módulo tiene 5 diseños que son Classic, Flipbox, Easebox, Borderbox y Image Card.
2. Flip Box avanzado: en este módulo, obtiene 6 diseños de flip box que son Flip, Zoom, Slide, 3D Cube, Grow y Cover.

Creación de Blurbs con el módulo Divi Blurb Extendido

Pasos comunes a seguir para cada diseño disponible con el módulo extendido Divi Blurb.

1. Cree una nueva página / edite una página existente en la que desee agregar o mostrar anuncios creados con el módulo Divi Blurb Extended.
2. Insertar fila >> Desplazar biblioteca de módulos Divi >> Insertar módulo Divi Blurb Extended
3. Vaya a Configuración de contenido de Blurb >> Establecer título de Blurb >> Establecer contenido de Blurb
4. Vaya a la configuración de enlace de Blurb >> para ingresar Blurb Link si desea abrir una página relacionada con el Blurb >> marque «Url se abre en una nueva ventana» como «Sí» si desea abrir una página relacionada con la propaganda en una nueva ventana.
5. Para el botón Leer más en Blurb, vaya a Configuración del botón >> marque «Botón Leer más» como «Sí».
6. Introduzca texto en el campo de texto del botón Leer más para utilizarlo como texto personalizado para el botón Leer más.
7. Si desea personalizar el botón Leer más, marque «Usar estilos personalizados para el botón» como «Sí».
8. Vaya a la configuración de imagen e ícono para agregar una imagen o ícono en el blurb >> simplemente cargue su imagen.
9. Si desea utilizar un icono en lugar de una imagen, marque «Usar icono» como «Sí».

Selección de diseño

1. Después de proporcionar contenido publicitario en la configuración de contenido
2. Vaya a la pestaña Diseño >> Configuración de diseño >> Elija cualquiera de los diseños disponibles.

Configuración de fondo de contenido para el diseño Clásico, Easebox, Borderbox y Tarjeta de imagen

1. Para cambiar el color de fondo del contenido de la propaganda.
2. Vaya a la pestaña Diseño >> Configuración del fondo del contenido >> elija un color que se utilizará para el fondo del contenido.

Configuración de diseño de Flipbox

1. Para personalizar el fondo del contenido de la parte frontal >> Vaya a la pestaña Diseño >> Configuración de Flipbox >> Frente >> elija color / imagen >> elija un color / cargue una imagen.
2. Para personalizar el fondo del contenido de la parte trasera >> Vaya a la pestaña Diseño >> Configuración de Flipbox >> Atrás >> elija color / imagen >> elija un color / cargue una imagen.
3. Para ajustar la altura de Flipbox >> Vaya a la pestaña Diseño >> Configuración de Flipbox >> Altura de Flipbox
4. Mueva el control deslizante o ingrese el valor para aumentar / disminuir la altura de Flipbox.

Configuración de diseño de Borderbox

1. Para cambiar el color del borde del diseño del cuadro del borde
2. Vaya a la pestaña Diseño >> Configuración del cuadro de borde >> Color del borde >> Elija un color para usar para el borde.

Configuración de diseño de la tarjeta de imagen

1. Para insertar la imagen superior en el diseño de la tarjeta de imagen
2. Vaya a la pestaña Diseño >> Configuración de la tarjeta de imagen >> Imagen superior >> Seleccione / Cargue una imagen.
3. Si desea establecer un texto alternativo para la imagen
4. Luego vaya a la pestaña Diseño >> Configuración de tarjeta de imagen >> campo Texto alternativo de imagen >> e ingrese el texto que desee para usar como Texto alternativo de imagen.

Colocación de imágenes e íconos para cualquier diseño

1. Para cambiar la ubicación de la imagen / icono de los anuncios
2. Vaya a la pestaña Diseño >> Configuración de imágenes e íconos >> Colocación de imágenes / íconos >> elija Arriba / Izquierda / Derecha
3. Si desea cambiar el color del icono
4. Entonces vaya a la pestaña Diseño >> Configuración de imagen e ícono >> Color del ícono >> y elija un color para usar para el ícono
5. Marque «Usar tamaño de fuente del icono» como «Sí» si desea cambiar el tamaño del icono.
6. Luego mueva el control deslizante o ingrese el valor para aumentar / disminuir el tamaño del icono

Configuración de texto de contenido y título de Blurb

1. Para personalizar el título del anuncio y el texto del contenido
2. Vaya a la pestaña Diseño >> Configuración de texto de Blurb >> y personalice el texto de Título y contenido según sus necesidades.

Configuración de efectos de Blurb Hover

1. Para aplicar efectos de desplazamiento sobre el texto, el botón y los elementos del anuncio
2. Vaya a la pestaña Diseño >> Estado de desplazamiento >> elija Texto / Botón / Elementos
3. Y aplique la personalización según sus requisitos.

Creación de desenfoques con el módulo Flip Box avanzado

Pasos comunes a seguir para cada diseño disponible con el módulo Flip Box avanzado.

1. Cree una página nueva / edite una página existente en la que desee agregar o mostrar anuncios creados con el módulo Flip Box avanzado.
2. Insertar fila >> Desplazar biblioteca de módulos Divi >> Insertar cuadro de volteo avanzado.

Selección y configuración de diseño de volteo

1. Después de insertar el módulo Flip Box avanzado
2. Vaya a la pestaña Contenido >> Voltear diseño de caja >> Seleccionar diseño >> elija Voltear
3. Luego, muévase a la configuración de Flip Direction >> y elija Superior / Inferior / Derecha / Izquierda / Diagonal izquierda / Diagonal derecha / Diagonal izquierda invertida / Diagonal derecha invertida como dirección de giro del Flip Box
4. Mantenga «Efecto de profundidad 3D» como «Sí» si desea efectos 3D en el cuadro Flip.
5. Marque «Agitar al girar» como «Sí» si desea aplicar efectos de agitación cuando se voltea la propaganda.
6. Mueva el control deslizante / valor de entrada en el campo Velocidad de giro (en ms) para controlar la velocidad de giro de Flip Box.

Selección y configuración de diseño de zoom

1. Después de insertar el módulo Flip Box avanzado
2. Vaya a la pestaña Contenido >> Diseño de caja giratoria >> Seleccione Diseño >> elija Zoom
3. Luego, vaya a la configuración Flip Style >> y elija Fade / Zoom In / Zoom Out como estilo flip del Flip Box
4. Mueva el control deslizante / ingrese el valor en el campo Flip Speed ​​(en ms) para controlar la velocidad del estilo Flip Box.

Selección y configuración de diseño de diapositivas, cubos 3D, crecimiento y portada

1. Después de insertar el módulo Flip Box avanzado
2. Vaya a la pestaña Contenido >> Diseño de caja giratoria >> Seleccione Diseño >> elija Diapositiva / Cubo 3D / Crecer / Cubrir
3. Luego muévase a la configuración Entrace Direction >> y elija Top / Bottom / Right / Left como dirección de entrada del Flip Box
4. Mueva el control deslizante / valor de entrada en el campo Velocidad de giro (en ms) para controlar la velocidad de giro de Flip Box.

Configuración de contenido común para los diseños 1, 2 y 3 del módulo Flip Box avanzado

Configuración de contenido de la parte frontal y posterior de Flip Box

1. Para personalizar el título y el contenido de Flip Box
2. Vaya a la pestaña Contenido >> Configuración de contenido de Flip Box >> elija Contenido frontal / Contenido posterior
3. Luego, para Flip Box Front / Back Title >> ingrese su texto personalizado en el campo Título
4. Para contenido frontal / posterior >> ingrese su texto personalizado en el campo Contenido

Selección de icono / imagen de Flip Box

1. Para usar Imagen / Icono en Flip Box
2. Vaya a la pestaña Contenido >> Configuración de elementos de Flip Box >> haga clic en Elementos frontales / posteriores
3. A continuación, marque «Usar icono en el anverso / reverso» como «Sí», si desea utilizar el icono en el Flip Box.
4. De lo contrario, cargue una imagen en el campo Imagen frontal / posterior.
5. Si desea establecer un texto alternativo para la imagen
6. Luego, vaya a la pestaña Contenido >> Configuración de Elementos de caja giratoria >> haga clic en Elementos delanteros / traseros >> Campo de texto alternativo de imagen >> e ingrese el texto que desee que se utilice como Texto alternativo de imagen.

Aplicar efectos de fondo

1. Si desea aplicar efectos de fondo en Flip Box
2. Luego vaya a la pestaña Contenido >> Configuración de fondo de Flip Box >> elija Frente / Atrás
3. Luego, aplique Color / Degradado / una imagen al campo Fondo frontal / Fondo posterior.

Configuración de diseño común para los diseños 1, 2 y 3 del módulo Flip Box avanzado

Personalizaciones de ubicación de íconos / imágenes de Flip Box

1. Para personalizar la ubicación de la imagen frontal / icono del Flip Box.
2. Vaya a la pestaña Diseño >> Configuración de imagen frontal / Estilo de icono >> Ubicación de imagen / icono >> elija Superior / Izquierda / Derecha
3. Esto establecerá la imagen / icono frontal en el área elegida.
4. Para la ubicación de la imagen trasera / icono
5. Vaya a la pestaña Diseño >> Configuración de estilo de imagen / icono posterior >> Ubicación de imagen / icono >> elija Superior / Izquierda / Derecha.
6. Esto establecerá la imagen / icono de Atrás en el área elegida.

Personalizaciones de texto de Flip Box

1. Para personalizar el título y el contenido de Flip Box Front
2. Vaya a la pestaña Diseño >> Configuración de estilo de texto frontal >> y personalice el texto del Título y contenido según sus necesidades.
3. Para personalizar el título y el contenido de Flip Box Back
4. Vaya a la pestaña Diseño >> Configuración de estilo de texto posterior >> y personalice el texto del Título y contenido según sus necesidades.

Configuración de alineación del botón de retroceso de la caja giratoria

1. Para personalizar la alineación del botón Atrás.
2. Vaya a la pestaña Diseño >> Configuración de estilo del botón Atrás >> Alineación de botones >> alinee el botón según el requisito, ya sea a la izquierda, a la derecha o al centro

Configuración de la alineación de la caja giratoria y otras personalizaciones

1. Para personalizar la alineación del Front Box del Flip Box.
2. Vaya a la pestaña Diseño >> Configuración de estilo de cuadro frontal >> Alineación de contenido frontal >> elija Superior / Centro / Inferior.
3. Para el cuadro frontal redondeado >> vaya a la pestaña Diseño >> Configuración de estilo del cuadro frontal >> Esquinas redondeadas frontales >> introduzca el valor o mueva el control deslizante para redondear el cuadro frontal.
4. Para personalizar la alineación del Back Box del Flip Box.
5. Vaya a la pestaña Diseño >> Configuración de estilo del cuadro posterior >> Alineación del contenido posterior >> elija Arriba / Centro / Abajo.
6. Para el cuadro posterior redondeado >> vaya a la pestaña Diseño >> Configuración de estilo del cuadro posterior >> Esquinas redondeadas posteriores >> ingrese el valor o mueva el control deslizante para redondear el cuadro frontal.

Uso de Divi Blurb Extended con tipos de publicaciones personalizadas

Para usar Divi Blurb Extended en páginas, publicaciones y tipos de publicaciones personalizadas con soporte adicional de Divi Builder, siga los pasos a continuación:

1. En su panel de WordPress >> Vaya al menú Divi >> Opciones del tema Divi >> Generador
2. Habilite los tipos de publicaciones personalizadas donde desee usar Divi Blurb Extended usando Divi Builder.

CSS Atajos

Si no ves Iconos en modo Visual, añade este css:

.admin-bar .et_pb_blurb_extended .et-pb-icon {
opacity: 1 !important;
}

¿Cómo mover el ícono en el medio en el diseño del cuadro de borde extendido Divi Blurb?

En el diseño del cuadro de borde, los iconos se adjuntan a una distancia de 22 píxeles. Si desea mover el ícono superior al centro, puede anular esa área usando el siguiente fragmento de CSS:
.et_pb_main_blurb_image {
left: calc(50% – (68px/2));
}

Nota: Aquí, 68 se obtiene manualmente del ancho del área del icono que deberá reemplazar con su propio tamaño de cuadro de icono.

¿Dónde puedo descargar los diseños de demostración del sitio de demostración de Divi Blurb Extended?

Descargue los diseños extendidos de Divi Blurb aquí.

¿Cómo configurar los Blurb de igual altura?

Para establecer los Blurb de igual altura, puede agregar la altura mínima (que es el valor en altura, del blurb con la altura máxima) al módulo.

Por ejemplo, en la fila de blurbs, el blurb con la altura máxima es 400 px. Por lo tanto, debe establecer la altura mínima de cada otra blurb en 400px.