Cómo hacer que los módulos de Blurb se puedan usar como elementos de pie de página en Divi

Rifat Divi Tutorials Jan 29, 2022

Los módulos de Blurb son excelentes opciones para los pies de página de Divi . Pueden mostrar fotos o íconos en varios diseños y tener varias opciones de personalización. Además, son de gran ayuda para combinar enlaces e íconos para crear proyectiles con estilo. Afortunadamente, con los módulos publicitarios de Divi , puedes generar fácilmente este tipo de enlaces. En este tutorial, veremos la integración de módulos publicitarios en los pies de página de Divi .

Vista previa del diseño

Antes de comenzar a diseñar, echemos un vistazo a cómo se verá nuestro pie de página.

Carga de plantillas

Usaremos el encabezado y el pie de página del paquete de diseño de inteligencia artificial de Divi para el tutorial de hoy. Primero, ve a tu tablero y navega a Divi

Ahora puede modificar su nuevo pie de página Divi . Puede actualizar el pie de página desde el back-end, o puede elegirlo desde Visual Builder del front-end. Debido a que el encabezado contiene un menú personalizado que se abre en el generador de forma predeterminada, actualizaré el pie de página en el back-end.

Módulos de Blurb como pie de página

Actualizaremos los enlaces en las secciones Qué hacemos y Recursos . Esto buscará los enlaces deseados y los marcará con íconos. Usaré el primer encabezado y mantendré el número de enlaces al mínimo. Decoraremos el primero antes de clonarlo para hacer el resto.

Quite la columna Recursos .

Ahora convierta esto en un diseño de dos columnas, por lo que solo necesitaremos una columna para que nuestros módulos publicitarios diseñen el pie de página.

Finalmente, elimine el módulo de texto que contiene los enlaces. Solo se requiere el módulo de título.

Ahora desplace el cursor sobre el área y agregue un módulo de Blurb.

Configuración del módulo Blurb

En el módulo de publicidad se incluyen un título, un cuerpo de texto y una imagen. El título servirá como enlace. Se pueden utilizar descripciones breves en el cuerpo del texto. Para los propósitos de este tutorial, lo quitaré. Si lo utiliza, le recomiendo que mantenga el texto lo más breve posible y utilice solo un puñado de anuncios publicitarios. Usaremos un icono en lugar de una imagen.

Cambié el nombre del enlace y eliminé el texto del cuerpo. Luego, en Imagen e ícono, elija Usar ícono. A continuación, elija su icono del selector de iconos. En la sección Enlace, ingrese la URL en el área URL del enlace del título. El resto de la configuración del enlace debe dejarse en paz. Esto es lo único que haremos con esta pestaña.

  • Título: el nombre de tu enlace
  • Icono: Llaves dobles
  • URL del enlace del título: su enlace

En la pestaña Diseño, establezca el color del icono. Establezca la ubicación de la imagen/icono a la izquierda.

  • Color del icono: #db0eb7
  • Colocación de imagen/icono: Izquierda

Seleccione Teléfono en Ancho de imagen/icono.

  • Ancho de la imagen/icono del teléfono: 15 px

Establezca el ancho del borde de la imagen/icono en 1 px y el color en #39c0ed.

  • Ancho del borde de la imagen/icono: 1 px
  • Color del borde de la imagen/icono: #39c0ed

Agregue algo de relleno en los cuatro lados del relleno de imagen/icono.

  • Relleno de imagen/icono: 10 px (superior, inferior, izquierda, derecha)

Cambie el texto del título.

  • Fuente del título: Archivo
  • Color del texto del título: #ffffff

Establezca el texto superior en el medio.

Desplácese a la sección Espaciado del módulo de propaganda y agregue algo de Relleno izquierdo.

  • Acolchado de escritorio, izquierdo: 17vh
  • Acolchado del teléfono, Izquierda: 7vh

Lengüeta avanzada

A continuación, aplicaremos CSS personalizado al título para centrarlo con el ícono.

  • Pestaña Avanzado Título de publicidad CSS personalizada: padding-top:12px

Duplicar Módulo Blurb

A continuación, duplique el módulo de publicidad tres veces haciendo clic tres veces en el botón Duplicar módulo. Esto nos permitirá usar módulos publicitarios en lugar de enlaces de texto para los elementos de pie de página.

Ahora cambie los iconos y el texto de esos módulos.

Diseño final

Aquí hay un vistazo a nuestros módulos de publicidad Divi en el pie de página de ambos diseños de escritorio.

Pensamientos finales

Eso concluye nuestra discusión sobre el uso de módulos publicitarios para elementos de pie de página en los pies de página de Divi . Blurbs son excelentes posibilidades para los hipervínculos. Son fáciles de usar y ofrecen muchas posibilidades de personalización de imágenes e iconos. Por ejemplo, puede usar los íconos con o sin bordes, y puede hacerlos tan grandes como desee. Los símbolos que hemos elegido aquí complementan bien el diseño del menú de encabezado.

Divi WordPress Theme