Lo más destacado del complemento Divi: módulo Divi Ribbon

Encuéntrelo en el mercado Divi

¡ El módulo Divi Ribbon está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Builder Addons en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).

Compra en el mercado Divi

Divi Ribbon Module es un complemento de terceros para Divi que agrega una cinta personalizable al contenido del módulo. Agregue una imagen, botón, título, contenido y estilo a cada elemento tan detallado como desee. Úselo para resaltar la venta de un producto, crear un llamado a la acción o llamar la atención sobre cualquier elemento. En este punto destacado del complemento Divi , echaremos un vistazo al módulo Divi Ribbon y veremos qué puede hacer.

Instalación del módulo de cinta Divi

  1. Vaya a y descargue el complemento
  2. En el panel de control de WordPress, vaya a Complementos > Agregar nuevo
  3. Haga clic en Cargar complemento
  4. Seleccione el archivo comprimido de su computadora
  5. Haga clic en Instalar ahora
  6. Cuando vea «Complemento instalado correctamente», haga clic en Activar complemento
  7. Vaya a Herramientas > Licencia del complemento Divi Ribbon e ingrese su clave de licencia

Módulo de cinta Divi

Se agrega un nuevo módulo a Divi Builder llamado Divi Ribbon. El módulo crea una propaganda (completa con un título, contenido, ícono, imagen y botones) y coloca una cinta en esa propaganda. Tiene control sobre la ubicación y el estilo de la cinta, así como de los demás elementos del módulo. La publicidad incluye una sombra de cuadro por defecto.

Pestaña de contenido de la cinta Divi

La pestaña Contenido incluye la configuración principal, la rotación de la publicidad, la imagen y el icono, el enlace, el fondo y la etiqueta de administrador. La configuración principal proporciona selecciones para el tipo de cinta, la ubicación, el texto, el título y el contenido.

Ajustes principales

Hay 7 tipos de cinta para elegir. Funcionan de la misma manera e incluyen el mismo contenido, pero muestran formas diferentes. Las formas incluyen cintas con extremos bifurcados, cintas que se extienden por los bordes, cintas en los lados o en la parte superior, y tienen diferentes tipos de extremos, como horquillas o círculos. Esto le da muchas opciones de visualización.

Cada uno de los tipos de cinta tiene diferentes opciones de ubicación según sus capacidades de visualización. Este ejemplo muestra la cinta de la esquina. Se puede colocar en la parte superior izquierda o derecha, o en la parte inferior izquierda o derecha.

Bifurcado se puede mostrar en la parte superior izquierda o derecha.

El ancho completo se puede mostrar arriba o abajo.

Algunos de los tipos de cinta tienen otras opciones que se abren cuando las selecciona. Este ejemplo muestra la cinta de ancho completo. Puede ajustar su ubicación y altura.

La cinta lateral incluye ajustes para la ubicación, el ancho y la altura. Todos los controles son los controles deslizantes Divi estándar, por lo que son fáciles de usar.

El título y el contenido se agregan a la propia tarjeta. El área de contenido tiene pestañas para visualización y texto, y pueden incluir medios, enlaces, código y códigos abreviados.

Rotación de publicidad

La rotación de Blurb agrega una opción de giro 3D que muestra el contenido después de que la tarjeta se voltea de lado, y una imagen y un ícono para mostrar en la fuente.

Agregue imágenes de su biblioteca de medios e íconos de la lista. La imagen/icono se mostrará primero, y luego la tarjeta se volteará para mostrar el contenido al pasar el mouse. También puede agregar imágenes como fondo.

Botón

El botón incluye texto, enlace, opciones de ventana, relleno y margen. Agregué un margen izquierdo para sacar el botón de debajo de la cinta.

Pestaña de diseño de la cinta Divi

La pestaña Diseño de la cinta Divi incluye configuraciones para la imagen y el icono, la rotación, el texto, el tamaño, la cinta, el texto del título, el texto del cuerpo, el botón, el espaciado, el borde, los filtros, la transformación y la animación.

Imagen e Icono

La configuración de imagen e icono le permite ajustar el ancho de la imagen, el borde, la sombra del cuadro, los colores, el modo de fusión, etc.

Rotación

La configuración de rotación le permite ajustar el color de la cara. Este es el fondo detrás de la imagen. Deshabilite el borde de la tarjeta original para que pueda crear uno propio. Ajuste el icono de rotación. Tiene muchas opciones para el icono. Agregue un color de icono, fondo, borde y use un tamaño de fuente de rotación previa.

Al principio, fue un poco confuso que el ajuste de íconos estuviera aquí en lugar de la configuración de imágenes e íconos, pero tiene sentido estar en esta sección. Tendría sentido colocar la configuración de la imagen aquí también, pero hay tantas que necesitan una pestaña separada.

Espaciado de texto

El espaciado de texto le brinda la configuración de margen y relleno para el título y el cuerpo del texto. Normalmente, la cinta se mostrará sobre el contenido. Esto le permite ajustar la posición del texto en función de la ubicación de la cinta si desea que esté visible. He agregado relleno tanto para el título como para el cuerpo del texto en este ejemplo.

Configuración de la cinta

La configuración de la cinta le permite cambiar el color, agregar una imagen que llenará la cinta, desactivar el extremo de la cinta (para evitar que el estilo se superponga a la tarjeta), ajustar las fuentes, agregar una sombra de texto, ajustar las esquinas de la cinta y el borde. He cambiado el color de la cinta en este ejemplo.

La imagen llenará la cinta. Solo pude hacer que los JPG funcionaran, pero funciona bien. Recomiendo elegir una imagen que ya tenga el tamaño que desea para que tenga control sobre cómo se muestra.

Al apagar el extremo de la cinta, se elimina la parte que se pliega detrás de la tarjeta, como puede ver a la izquierda de la cinta en este ejemplo.

Texto

El título y el cuerpo del texto incluyen todas las opciones esperadas. En este ejemplo, aumenté el tamaño de ambos, cambié el color del texto del título y centré ambos.

Botón

El estilo del botón incluye todas las opciones esperadas y agrega una función para mostrar el degradado sobre la imagen de fondo. En este ejemplo, aumenté el tamaño de la fuente, cambié el color de la fuente y el borde, redondeé el borde, di un degradado al fondo y agregué una sombra.

Ejemplos de cintas Divi

Aquí hay algunos ejemplos de cómo se ve Divi Ribbon dentro de los diseños de Divi.

En venta cinta

Para el primer ejemplo, reemplazaré el CTA de la derecha.

Se hizo con tres módulos: imagen, texto y botón. Usaré el mismo fondo, texto y botón y lo recrearé con un solo módulo Divi Ribbon.

Aquí está el resultado usando Divi Ribbon. Agregué la imagen, el texto del título y el texto del cuerpo para que coincidan con el original. También agregué la cinta a la esquina y moví el botón al centro y usé el color del borde del fondo de la cinta. El original usó la imagen en la columna. Lo eliminé y agregué la imagen al módulo, pero funcionaría de cualquier manera.

No incluí la imagen ondulada (una onda triangular), pero podría agregarse fácilmente en el área de contenido. También sería necesario mover el título al área de contenido para que el gráfico aparezca sobre el título. La cinta En oferta hace que se destaque un poco más.

Cinta de últimos proyectos

Para este, reemplacé una imagen con el módulo Divi Ribbon y agregué una cinta de ancho completo como CTA para ver los últimos proyectos. La cinta tiene una imagen de fondo y fuentes del diseño. La sombra del cuadro es la configuración predeterminada. He centrado el texto.

Cinta de llamada a la acción del producto

Para este ejemplo, agregué un módulo Divi Ribbon a la sección principal de la página de la tienda del diseño de Leather Company. Usando una imagen del diseño, reemplacé el CTA de venta estándar. La cinta y el botón usan colores del diseño. Moví la cinta a la esquina inferior derecha y quité el extremo de la cinta.

Esta es una sección de Especialidad. Me alegra ver que funciona bien en las secciones de especialidad. Muchos módulos de terceros no siempre son compatibles con este tipo de apartado.

Prueba y Compra

Puede comprar Divi Ribbon Module desde el sitio web del desarrollador por $11 para uso personal o comercial en un solo sitio web.

También puede probar el complemento antes de comprarlo para ver si funcionará para sus necesidades. El enlace para probar el complemento se encuentra en la página de ventas del desarrollador. Le brinda acceso completo a Divi Builder y al complemento, para que pueda diseñarlo al contenido de su corazón. Recomiendo darle una oportunidad.

pensamientos finales

Divi Ribbon Module es un módulo interesante para Divi Builder. Incluye varios lugares para agregar imágenes y puede incluir un título, contenido, un icono y un botón. Con todas estas funciones, funciona muy bien como publicidad, llamada a la acción, enlace de producto, enlace de blog, etc. Agregue a eso una cinta personalizable para llamar la atención sobre ventas u otras CTA, y este complemento proporciona opciones de estilo que son difíciles de obtener con un solo módulo.

El módulo Divi Ribbon funciona muy bien con Visual Builder y Theme Builder . Es un complemento excelente que es fácil de recomendar.

Queremos escuchar de ti. ¿Has probado el módulo Divi Ribbon? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de Foxys Graphic / shutterstock.com