BLACK FRIDAY: 50% DE DESCUENTO EN TODOS NUESTROS PLANES

Hosting WordPress Webempresa

Cómo crear un footer en Divi

por | Sep 27, 2022 | Tutoriales Divi

Como crear un pie de página personalizado con Divi

Una de las grandes ventajas que tenemos cuando estamos de creando un sitio web con Divi o con un tema que nos permite añadir plantillas personalizadas es la capacidad que tenemos para añadir personalizaciones a nuestro diseño sin necesidad de conocer código o modificar el código de nuestro tema en sí. Como puede ser crear un footer en Divi

Divi es uno de los temas que nos permiten añadir este tipo de plantillas a través de las opciones del generador de temas, en este artículo veremos como podemos crear una de estas plantillas personalizadas crear un footer en WordPress.

 ¿Qué son las plantillas personalizadas en Divi?


Una plantilla es un diseño personalizado que podemos añadir a nuestro sitio web, lo que quiere decir que cualquier plantilla que creemos ya sea para un artículo, la página de productos o nuestra página tienda se aplicará de forma global en todo nuestro sitio web.

De esta forma al crear una plantilla para el pie de página por ejemplo esta sustituirá el diseño actual por el que nosotros estemos diseñando para nuestro sitio web.

  Conoce más sobre Divi y como puedes crear tu sitio web completo siguiendo los cursos gratuitos de Curso de Divi y Curso de Divi 4.0 Avanzado disponibles en Webempresa

Es así como podemos tener diferentes diseños personalizados para nuestro sitio web, ya sea al crear productos de WooCommerce en Divi o para crear una página de tienda de WooCommerce con Divi.

  Configurar footer en Divi


Ahora vamos manos a la obra, lo primero que necesitamos hacer es crear nuestra plantilla personalizada para el footer en Divi, para ello tenemos que acceder a Divi   Generador de temas y pulsar en las opciones que indica Editar pie de página global.

configurar footer en divi

Si no tienes creado un pie de página global añadido puedes pulsar en la opción que indica Agregar pie de página global y crear tu nueva plantilla.

añadir pie de página en divi

pie de página global en divi

Una vez hemos pulsado en las opciones de crear una nueva plantilla en Divi comenzará a cargar el constructor de Divi donde comenzaremos a crear nuestro nuevo diseño.

  Crear footer en Divi

Antes de continuar, veamos el diseño que estaremos aplicando para nuestro footer de Divi, recuerda que puedes sustituir los colores por los que tu sitio web para que logres personalizarlo tu pie de página como deseas.

footer de divi de Webempresa

Una vez tenemos claro cómo será nuestro diseño de pie de página en Divi, lo primero que tenemos que añadir es el color de fondo a la sección principal de nuestro pie de página.

Para esto pulsaremos en las opciones de configuración de la sección principal que se carga de forma automática en Divi y abriremos las opciones de configuración principal de la sección.

background footer divi

Dentro de las secciones de configuración de nuestra sección añadiremos un color de fondo seleccionando Gradiente de fondo y configurando los colores de nuestra marca.

diseño footer de divi

Las configuraciones del fondo son:

  • Tipo de gradiente: Linear
  • Dirección del Gradiente: 48deg
  • Repeat Gradient: No
  • Gradient Unit: Percent
  • Imagen de fondo: No

Una vez tenemos nuestro fondo configurado lo siguiente será añadir nuestra Fila con 5 columnas que contendrán nuestros widgets con la información de nuestro pie de página.

añadir filas en el footer de divi

Muy bien, ya tenemos la primera parte de nuestro pie de página creado, ahora viene la siguiente parte la cual será añadir cada uno de los módulos que tendrán la información de nuestro pie de página.

En este caso nosotros en nuestro diseño hemos establecido una información específica que añadiremos, sin embargo, puedes configurar y añadir la información que consideres necesario en cada una las columnas del footer de Divi.

  Añadir Widgets en el Footer de Divi.

Dentro de la primera columna en nuestro diseño añadiremos nuestro logo, puedes seleccionarlo de forma dinámica con Divi o simplemente añadir un módulo de imagen para añadir el logo, a continuación podrás ver las dos forma y seleccionar la que mejor se adapte al diseño que deseas añadir.

  Añadiendo el logo de forma dinámica en el footer de divi:

añadir un objeto de forma dinámica en el footer de divi

  Añadiendo logo subiendo una imagen a nuestro sitio web:

subir logo a la biblioteca de medios

Lo siguiente es añadir widgets en WordPress donde tendremos la información de nuestra Empresa, localización e información, para añadir esta información lo más recomendado es añadirlo directamente desde la sección de widgets de WordPress, por lo que esta sección lo haremos en dos partes.

Lo primero que haremos es guardar todos los cambios de nuestra plantilla y salir al escritorio principal de WordPress.

guardar cambios del footer de divi

Luego de guardar los cambios iremos al apartado de Apariencia   menú donde crearemos los menús principales para “La empresa” e “Información”

menú de wordpress

  Crea los menús de acuerdo a la información que deseas mostrar en tu sitio web

menú en footer de divi

Si has llegado hasta este punto estoy segura de que has logrado crear un menú en WordPress que podremos añadir dentro de los widgets de tu pie de página en Divi, lo siguiente es acceder nuevamente al apartado Apariencia pero en lugar de ir a menú seleccionaremos Widgets.

Dentro de los widgets utilizaremos dos widgets principales:

  • Menú de navegación: este widget nos permitirá añadir los menús que recién hemos creado.
  • Texto: con este widget podremos añadir la información de localización de nuestro sitio web de forma sencilla y rápida.

Ya que tenemos configurados nuestros widgets necesitamos regresar al generador de temas de Divi desde el apartado de Divi   Generador de temas y editar nuevamente la plantilla del pie de página que estamos creando.

pie de página en divi

Dentro de las siguientes columnas de nuestro pie de página añadiremos el módulo de Divi llamado Barra lateral, con este módulo podremos seleccionar cada widget que hemos configurado y asignarlo en cada sección de la columna que queremos mostrarlo.

  El módulo sidebar de WordPress en Divi nos permite mostrar las barra laterales o widgets que ya tengamos previamente configurado dentro de las opciones principales de los widgets en WordPress.

barra lateral en footer divi

Una vez tenemos añadido nuestros widgets dentro de nuestra plantilla de Divi nos falta añadir el contenido de nuestra ultima columna, en este caso estaremos añadiendo nuestros iconos de redes sociales en WordPress, donde configuraremos los perfiles de nuestras redes, para ello estaremos utilizando el modulo de “Seguir en medios sociales” disponible en el constructor de Divi.

redes sociales en el footer de divi

Lo único que tendremos que hacer es añadir cuáles son las redes sociales en las que tenemos un perfil creado y configurar los enlaces así como los estilos para que se adapten a nuestro diseño, ten en cuenta que antes necesitamos añadir el titulo de nuestra columna para que se adapten a nuestro diseño.

El titulo de la columna de “Síguenos” podemos añadirlo con el modulo de texto disponible en Divi configurando los siguientes estilos:

  • Texto de fuente: Montserrat
  • Color del texto: #ffffff
  • Tamaño del texto: 18px
  • Alineación del texto: izquierda

módulo de texto en divi

estilos de texto en divi

Revisa cada paso en la siguiente imagen:

redes sociales

  Añadiendo el copyright en el footer de Divi

Una vez tenemos configurado los ajustes de cada widget en nuestro pie de página con su contenido lo siguiente es añadir él copyright en el footer de Divi

copyright footer divi

El copyright es el texto que usualmente aparece en la parte inferior de la página y el cual nos ayuda a atribuir la autoría del contenido de nuestro sitio web, generalmente está compuesto del símbolo de copyright © y la fecha de creación así como el año actual donde nos encontramos.

Para añadir el copyright en nuestro sitio web lo primero será añadir una nueva fila en la parte inferior de nuestros widgets.

nueva fila en el footer de divi

Una vez tenemos nuestra nueva fila añadida configuremos el espacio de separación entre estas, para ello debes acceder a las opciones de configuración de la nueva fila e ir al apartado de diseño   separación, dentro de esto configura los valores de margen y relleno a 0px.

fila inferior en el footer de divi

Esto nos permitirá asignar el espacio correcto entre cada fila y la sección principal, luego de añadir estos ajustes lo siguiente será añadir un módulo de texto donde podremos incorporar la información sobre la autoría de nuestro sitio web.

Los ajustes de diseño que añadiremos al texto de copyright serán los siguientes:

  • Texto fuente: Montserrat
  • Color: #ffffff
  • Texto luz suave: claro
  • Tamaño del texto: 14px;
  • Alineación del texto: centrado

anadir copyrigt divi

  Si quieres añadir el año de forma dinámica en tu sitio web puedes revisar la entrada que tenemos disponibles donde se explica de forma detallada Cómo añadir el año dinámico en el copyright Divi

Una vez guardamos los cambios podremos revisar cómo va quedando nuestro nuevo pie de página en nuestro sitio web.

ver pie de página cread con divi

Como puedes ver aún nos falta agregar detalles adicionales para que nuestro nuevo pie de página sea como nuestro diseño principal, estos detalles adicionales los añadiremos a través de código CSS en WordPress el cual no va a permitir darle estos detalles de diseño específicos que nosotros queremos asignar, no te preocupes puedes aplicar este código en tu sitio web para que también se apliquen los cambios que deseas.

Para añadir estos estilos finales debes acceder al apartado de Divi  Opciones del tema   General   CSS Personalizado y pegar el siguiente código CSS que te comparto, con este código podremos asignar el estilo que deseamos a todos los títulos de nuestros widgets.


/* Añadir estilo a los títulos de los widgets*/
.et-l.et-l--footer .title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
}

css personalizado en divi

Finalmente si queremos tener nuestro pie de página en Divi igual que nuestro diseño necesitaremos realizar algunos ajustes al módulo de seguir en medios sociales, lo que nos permitirá añadir el estilo correcto a los iconos de las redes sociales, para lograr esto lo primero que tenemos que hacer es asignar nuestro color principal de fondo como el color de los iconos de las redes.

Para lograr esto necesitamos acceder a las configuraciones del módulo de redes sociales y en las opciones de diseño asignar el color de los iconos principales.

iconos sociales en divi

Una vez tenemos este cambio realizado lo siguiente que necesitamos hacer es acceder nuevamente al apartado de Divi   Opciones del tema   General   CSS Personalizado y pegar el siguiente código CSS:


/* Cambiar estilos iconos redes sociales */

.et_pb_social_media_follow li a.icon {
    border-radius: 50px !important;
    background: #ffffff !important;
}

Ten en cuenta siempre que guardar los cambios realizados.

Una vez guardado los cambios podremos revisar el resultado final de nuestro nuevo pie de página

nuevo pie de página en divi

Ya con esto podremos tener nuestro footer personalizado en Divi; sin embargo, podremos hacer algunos ajustes finales para que nuestro diseño sea mucho más preciso, para ello solo tendremos que ajustar un poco la separación de nuestra sección principal.

Si deseas hacer estos ajustes solo debes acceder al apartado de Divi   Generador de temas y editar tu plantilla de pie de página personalizada, luego de ello accede a los ajustes de la sección principal y asigna el relleno de la separación en 10px.

seccion principal de divi

De esta forma podremos tener nuestra nueva plantilla personalizada para nuestro pie de página en Divi de nuestro sitio web.

pie de página como resultado

  Ajustes footer en Divi para móvil


Actualmente Divi se encarga de ajustar los elementos que añadimos dentro de las secciones y filas que añadimos en nuestro diseño por lo que estos al estar en un dispositivo móvil o tablet se ajusta de forma automática.

ajustar footer en móvil en divi

Sin embargo, sí deseas que los elementos se encuentren centrados para dispositivos móviles puedes añadir el siguiente código CSS en las opciones de CSS personalizado de Divi que hemos visto anteriormente.


@media only screen and (max-width: 500px) {
.et-l.et-l--footer {
    text-align: center;
}
.et-l.et-l--footer p {
    text-align: center;
}
}

Así tendremos todos los textos de nuestro pie de página en Divi centrado para dispositivos móviles.

 Conclusiones:


Crear plantillas personalizadas dentro de Divi es algo que nos puede llevar un poco de trabajo y esfuerzo pero este vale la pena, ya que podremos adaptar nuestro sitio web al diseño que deseamos tener.

Algo importante que siempre podremos tomar en cuenta es que mientras más personalicemos nuestro sitio web podremos darle una identidad única a nuestra marca dentro de internet y los usuarios pueden confiar mucho más en los diferentes servicios o productos que les ofrecemos.

Puedes darle un vistazo a los diferentes tutoriales de Divi que tenemos disponibles.

También te puede interesar:

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa