Cómo agregar códigos cortos a su pie de página Divi (3 ejemplos de complementos)

Los pies de página Divi son versátiles. Puede colocar una variedad de elementos dentro de ellos para ayudar a los visitantes a navegar a través de su sitio web. Aunque Divi está lleno de módulos que puede colocar dentro de su pie de página desde el principio, también puede incluir códigos cortos de complementos en su pie de página de Divi. ¡En este artículo, le mostraremos cómo! Abordaremos tres ejemplos de complementos diferentes, así que vamos a hacerlo.

Avance

Echemos un vistazo rápido a lo que estamos agregando a nuestro pie de página de Divi. Agregaremos estos complementos:

  • El calendario de eventos
  • Feed de fotos sociales de Smash Balloon
  • Cookie Sí | Aviso de cumplimiento y consentimiento de cookies de GDPR

El escritorio del calendario de eventos

Aquí está el calendario de eventos en la versión de escritorio de nuestro sitio web Divi.

El calendario de eventos móvil

Este es el calendario de eventos en el móvil.

Smash Balloon Social Photo Feed Escritorio

Este es el feed de fotos sociales de Smash Balloon en el escritorio.

Smash Balloon Social Photo Feed Móvil

Aquí está el feed de fotos sociales de Smash Balloon en el móvil.

Cookie Sí Escritorio

Aquí está la versión de escritorio de nuestro nuevo pie de página con CookieYes.

Cookie Sí Móvil

Aquí está la versión móvil con CookieYes.

Plantilla de pie de página

Para este tutorial, necesitará una plantilla de pie de página. Puede crear uno desde cero o usar una de las plantillas de pie de página gratuitas que se encuentran en el blog de Elegant Themes. Simplemente busque «pie de página gratuito». Para mi ejemplo, estoy usando la plantilla GRATUITA de encabezado y pie de página para el paquete de diseño de aceites esenciales de Divi .

Descarga tu plantilla de pie de página de Divi y descomprime el archivo. Subirás el archivo JSON. Agregaremos códigos cortos al pie de página de Divi.

Cargue la plantilla de pie de página en Divi Theme Builder

Una vez que haya descargado y descomprimido su plantilla de pie de página Divi, es hora de cargarla en Divi Theme Builder . Ve a Divi > Theme Builder en el panel de control de WordPress. Seleccione el ícono de Portabilidad en la esquina superior derecha. En el modal, haga clic en la pestaña Importar , seleccione Elegir archivo , navegue hasta su archivo JSON y selecciónelo, y haga clic en Importar plantillas de Divi Theme Builder . Espera a que se cargue. Elimine la plantilla de encabezado si no desea usarla y guarde la configuración.

Ahora, veamos cómo agregar códigos abreviados al pie de página de Divi. Puede trabajar en Divi Theme Builder o en la interfaz.

Agregue los códigos cortos del calendario de eventos a su pie de página de Divi

Para nuestro primer shortcode, usaremos The Events Calendar . Este es el calendario de eventos más popular para WordPress y sus calendarios se ven muy bien en un pie de página. Este complemento no incluye códigos cortos, pero podemos agregarlos con una extensión llamada Códigos cortos de eventos para el calendario de eventos . Instale ambos complementos. Crea tus eventos como de costumbre.

El calendario de eventos no le dará códigos cortos, pero puede crearlos con el complemento de códigos cortos. Este complemento también incluye opciones de estilo y un campo para CSS personalizado. Vea la configuración del complemento en el panel de control de WordPress. Vaya a Complementos de eventos > Configuración de códigos cortos .

La pestaña de códigos cortos para el complemento se encuentra en la pestaña Atributos de códigos cortos . Esto proporciona un código abreviado de muestra junto con los atributos que puede usar para crear un código abreviado personalizado. Siga las instrucciones y cree el código abreviado para su evento.

Para mis ejemplos, trabajaré desde el frente. Habilite Visual Builder y desplácese hacia abajo hasta el pie de página. Coloca el cursor sobre el pie de página y haz clic en Editar plantilla de pie de página.

Pase el cursor sobre el área debajo de los elementos de pie de página. Esta área está justo encima del aviso de derechos de autor del pie de página. Haga clic en el ícono verde más y agregue una fila de una sola columna.

Seleccione un módulo de Texto o Código. No importa cuál elijas. He seleccionado un módulo de código para este ejemplo. Pegue su shortcode en el campo de código. Haga clic en el cheque verde y guarde su página.

Dale estilo a los códigos cortos del calendario de eventos en tu pie de página de Divi

Seleccione la pestaña Diseño para el módulo Código. Desplácese hasta Estilos de borde y agregue un borde de 1px.

  • Estilos de borde: 1px

Diseñaremos el resto del evento en el Complemento de códigos cortos de eventos usando elementos de diseño del pie de página.

En la pestaña Configuración general del complemento Códigos abreviados de eventos, cambie los colores y las fuentes a esta configuración:

  • Color principal de la piel: #000000
  • Color de fondo del evento: #E3E3E3
  • Fuente del texto: Cantarell
  • Tamaño de fuente: 14px
  • Estilos de títulos de eventos: espartano, negrita, #000000, 18 px
  • Estilos de descripción de eventos: #000000
  • Estilos de lugares de eventos: #ffffff
  • Estilos de fechas de eventos: Cantarell, 36px, #ffffff

El pie de página ahora incluye un calendario de eventos que coincide con el resto del pie de página.

Agregue códigos cortos de alimentación de fotos sociales de Smash Balloon a su pie de página de Divi

Smash Balloon Social Photo Feed se conecta a su cuenta de Instagram a través de una API y muestra las fotos de su feed. Esta es una excelente manera de construir su seguimiento social. Para conectarse a su cuenta de Instagram, vaya a Feed de Instagram > Configuración en el panel de control de WordPress. En la pestaña Configurar , haga clic en Conectar y cuenta de Instagram .

Esto lo lleva a una pantalla donde puede conectar su cuenta. Haga clic para iniciar sesión y permitir que el complemento acceda a la cuenta.

Selecciona la pestaña Mostrar tu feed . Copie el código abreviado de Feed de Instagram . También puede copiar códigos abreviados para otros tipos de fuentes, incluidas múltiples fuentes, opciones de personalización, agregar botones, etc. Algunos requieren la versión pro del complemento. Estoy usando el feed estándar.

Ve a tu página de inicio (o Divi Theme Builder). Habilite el generador visual y desplácese hasta el pie de página. Pase el cursor sobre el pie de página y haga clic en Editar plantilla de pie de página .

Pasa el cursor por donde quieras agregar el feed. Inserte una nueva fila y seleccione una sola columna.

Su feed de Instagram se muestra automáticamente. Incluye un botón Cargar más, un botón Seguir de Instagram y una etiqueta que muestra a quién pertenece el feed.

Cada elemento se puede personalizar. Puede cambiar el color de fondo, el diseño, la cantidad de fotos para mostrar, etc., en la pantalla de configuración del complemento en la pestaña Configurar . Ya se muestra de la manera que quiero, así que no tendré que diseñar este.

Añadir CookieSí | Códigos cortos del aviso de cumplimiento y consentimiento de cookies de GDPR para su pie de página de Divi

CookieSí | El Aviso de Consentimiento y Cumplimiento de Cookies de GDPR muestra un consentimiento de cookies que se puede incrustar en su pie de página. Los códigos abreviados están disponibles en la pestaña Guía de ayuda. Vaya a Consentimiento de cookies RGPD > Configuración en el panel de control de WordPress. Hay varios para elegir y puedes personalizarlos.

Habilite Visual Builder en su página de inicio, desplace el pie de página y seleccione Editar plantilla de pie de página.

Desplácese hacia abajo hasta el aviso de derechos de autor y cambie la fila a doble columna.

Haga clic en el ícono más gris oscuro a la derecha y seleccione el módulo Código o Texto.

Agregue todos los códigos cortos al módulo. Cierre el módulo y guarde la página. Haremos algunos ajustes con ambos módulos y la configuración del complemento.

Cookie de estiloSí | Aviso de cumplimiento y consentimiento de cookies de GDPR

Abra el módulo Código y seleccione la pestaña Diseño. En Espaciado, establezca el Margen superior en -24 px. Puede arrastrar esto en Visual Builder.

  • Margen superior: -24px

Abra el módulo Texto de derechos de autor. En la pestaña Diseño, agregue 14px de relleno.

  • Relleno: 14px

Guarde su configuración y navegue a la configuración del complemento.

En la pestaña Personalizar botones, seleccione cada uno de los botones y seleccione Grande para el Tamaño del botón.

  • Tamaño del botón: grande

Seleccione las opciones Leer más y configure el Color del texto en #888888.

Color del texto: #888888

Resultados

Así es como se ve cada uno de los pies de página en computadoras de escritorio y dispositivos móviles.

El escritorio del calendario de eventos

Este es el tipo de publicación del evento en el escritorio.

El calendario de eventos móvil

La versión móvil apila los elementos del tipo de publicación de eventos.

Smash Balloon Social Photo Feed Escritorio

Aquí está la versión de escritorio de nuestro feed de Instagram.

Smash Balloon Social Photo Feed Móvil

Aquí está la versión móvil. Coloca las imágenes en una pila.

Cookie Sí Escritorio

Aquí está la versión de escritorio de nuestro nuevo pie de página con consentimiento de cookies.

Cookie Sí Móvil

Aquí está la versión móvil.

pensamientos finales

Ese es nuestro vistazo a cómo agregar códigos cortos al pie de página de Divi para expandir aún más su sitio web. Los códigos cortos son fáciles de agregar con módulos de texto o código. Los tres complementos que utilicé aquí son solo la punta del iceberg de lo que se puede agregar a Divi con códigos cortos.

Queremos escuchar de ti. ¿Agrega códigos cortos al pie de página de Divi? Cuéntanos tu experiencia en los comentarios.