Divi Theme Builder marca una nueva era y cambia la forma en que diseñamos sitios web. Una de las partes más importantes de esta función es poder agregar dinámicamente pies de página globales a sus páginas y publicaciones. Una vez que haya diseñado un pie de página, puede agregarlo automáticamente a cualquier tipo de página o publicación que desee utilizando Divi y su Theme Builder. Ahora, en este tutorial, lo guiaremos paso a paso a través del proceso de creación y adición de un pie de página global a su sitio web. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al diseño del pie de página global en diferentes tamaños de pantalla.
Escritorio
Móvil
Para poner sus manos en el pie de página global personalizado gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Ve al Creador de temas de Divi
Comience yendo al Generador de temas en sus Opciones de tema Divi .
Allí, puede agregar un pie de página global desde su biblioteca Divi o comenzar a crear uno desde cero. En este tutorial, crearemos un pie de página personalizado desde cero, así que continúe y elija la primera opción.
Añadir Sección #1
Color de fondo
¡Hora de empezar a crear! Abra la sección que puede encontrar en la página y cambie el color de fondo de la sección.
- Color de fondo: #000000
Espaciado
Modifique la configuración de espaciado de la sección a continuación.
- Margen superior: 6vw
- Margen izquierdo: 6vw
- Margen derecho: 6vw
- Relleno izquierdo: 30px
- Relleno derecho: 30px
Borde
Agregue un borde superior izquierdo y derecho a continuación.
- Arriba a la izquierda: 20px
- Arriba a la derecha: 20px
Sombra de la caja
Incluya también una sombra de cuadro en la configuración de la sección.
- Fuerza de desenfoque de sombra de cuadro: rgba (0,0,0,0.18)
- Color de sombra: rgba (0,0,0,0.18)
Agregar nueva fila a la sección
Estructura de la columna
Continúe agregando una fila a su sección usando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Agregar contenido H2
Agregue un módulo de texto con algo de contenido H2.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 en consecuencia:
- Título 2 Fuente: Poppins
- Encabezado 2 Peso de fuente: semi negrita
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #ffffff
- Título 2 Tamaño del texto: 31 px (escritorio), 24 px (tableta), 18 px (teléfono)
- Encabezado 2 Altura de línea: 1,6 em
Dimensionamiento
Agregue un poco de ancho máximo al módulo también.
- Ancho máximo: 700px
Agregar copia
Agregue un Módulo de botón justo debajo del Módulo de texto en su columna e ingrese alguna copia de su elección.
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación del botón al centro.
- Alineación de botones: Centro
Configuración de botones
Continúe diseñando el botón.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 12px
- Color del texto del botón: #000000
- Color de fondo del botón: #FFFFFF
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Poppins
- Peso de la fuente del botón: semi negrita
- Estilo de fuente del botón: Mayúsculas
Espaciado
Agregue también algunos valores de relleno personalizados.
- Relleno superior: 14px
- Relleno inferior: 14px
- Relleno izquierdo: 40px
- Relleno derecho: 58px
Añadir Sección #2
Color de fondo
¡A la siguiente sección regular! Elija un color de fondo de sección blanco.
- Color de fondo: #ffffff
Espaciado
Retire todo el relleno superior e inferior a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
Agregue un poco de radio de borde a la sección también.
- Arriba a la izquierda: 20px
- Arriba a la derecha: 20px
Sombra de la caja
Y complete la configuración de la sección agregando una sutil sombra de cuadro.
- Fuerza de desenfoque de sombra de cuadro: 135px
- Color de sombra: rgba (0,0,0,0.18)
Agregar nueva fila a la sección
Estructura de la columna
Una vez que haya completado la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine el relleno superior e inferior predeterminado de la fila a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Espaciado de columnas
Continúe abriendo la configuración de la columna y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.
- Relleno superior: 100 px (escritorio), 50 px (tableta y teléfono)
- Relleno inferior: 100 px (escritorio), 50 px (tableta y teléfono)
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Agregue el módulo de texto n. ° 1 a la columna
Agregar contenido
¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto regular a la columna 1 e inserte algún contenido de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Poppins
- Peso de fuente de texto: Negrita
- Color del texto: #000000
- Tamaño del texto: 17px
- Alineación de texto: Centro
Espaciado
Agregue un margen superior e inferior personalizado a continuación.
- Margen superior: 10px
- Margen inferior: 30px
Agregar módulo divisor a columna
Visibilidad
Justo debajo del módulo de texto, agregue un módulo divisor y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Cambia el color de la línea a negro.
- Color de línea: #000000
Dimensionamiento
Modifique también la configuración de tamaño del divisor.
- Ancho: 15%
- Alineación del módulo: Centro
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido
Continúe agregando otro módulo de texto a la columna.
Añadir enlace
Agregue un enlace a la página a la que desea que haga referencia este módulo.
Configuración de texto
Luego, vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:
- Fuente del texto: Poppins
- Peso de fuente de texto: ligero
- Color del texto: #777777
- Tamaño del texto: 15px
- Alineación de texto: Centro
Espaciado
Agregue un poco de margen superior e inferior también.
- Margen superior: 10px
- Margen inferior: 10px
Clonar el módulo de texto n.º 2 tanto como sea necesario
Una vez que haya completado el segundo Módulo de texto en la columna, puede clonarlo tantas veces como lo necesite (dependiendo de cuántos elementos de pie de página en los que se pueda hacer clic desee incluir).
Cambiar contenido y enlaces
Asegúrese de cambiar el contenido del módulo y los enlaces para cada duplicado.
Clonar toda la columna dos veces
Una vez que haya completado la columna y sus módulos, puede clonar la columna completa dos veces.
Color de fondo de la columna 2
Luego, abra la configuración de la columna 2 y cambie el color de fondo.
- Color de fondo de la columna 2: #f9f9f9
Cambiar contenido y enlaces
Asegúrese de cambiar todo el contenido y los enlaces en cada columna duplicada.
Agregar nueva columna
Luego, agregue una cuarta columna a la fila.
Color de fondo
Cambia el color de fondo de la nueva columna.
- Color de fondo: #0fffc7
Espaciado
Junto con los valores de relleno de la columna.
- Relleno superior: 70px
- Relleno inferior: 70px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Añadir Redes Sociales
Continúe agregando un módulo de seguimiento de redes sociales a la columna 4.
Restablecer estilos de redes sociales
Restablezca los estilos de elementos para cada red social que agregue.
Alineación
Luego, pase a la pestaña de diseño y cambie la alineación del módulo.
- Alineación del módulo: Centro
Configuración de iconos
Modifique el color del icono también.
- Color del icono: #000000
Agregue el módulo de opción de correo electrónico a la columna 4
Eliminar contenido
Continúe agregando un módulo de opción de correo electrónico a la columna 4 y elimine el título y el contenido del cuerpo.
Cuenta de correo electrónico
Agregue una cuenta de correo electrónico a continuación. Sin agregar la cuenta de correo electrónico, el módulo no aparecerá una vez que haya salido del generador.
Eliminar color de fondo
Continúe eliminando el color de fondo del módulo.
- Usar color de fondo: No
Configuración de campos
Pase a la pestaña de diseño y cambie la configuración de los campos de la siguiente manera:
- Color de fondo de los campos: rgba(0,0,0,0)
- Color del texto de los campos: #000000
- Fuente de los campos: Poppins
- Tamaño del texto de los campos: 13px
- Ancho del borde de los campos: 1px
- Color del borde de los campos: #000000
Configuración de botones
Dale estilo al botón de tu módulo también.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 12px
- Color del texto del botón: #000000
- Color de fondo del botón: #FFFFFF
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Poppins
- Peso de la fuente del botón: semi negrita
- Estilo de fuente del botón: Mayúsculas
- Relleno superior: 15px
- Relleno inferior: 15px
Agregar módulo de texto dinámico a la columna 4
Contenido dinámico
El siguiente y último módulo que necesitamos para completar este diseño es un módulo de texto. Habilite la opción de contenido dinámico en el cuadro de contenido.
Luego, seleccione la opción ‘Fecha actual’.
- Contenido dinámico: fecha actual
Y modifique la configuración del contenido dinámico de la siguiente manera:
- Antes: Copyright ©
- Después: | Reservados todos los derechos
- Formato de fecha: Personalizado
- Formato de fecha personalizado: 20 años
Configuración de texto
Luego, pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Poppins
- Color del texto: #000000
- Tamaño del texto: 16px
Espaciado
Complete la configuración del módulo agregando un margen superior y ¡listo!
- Margen superior: 50px
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En este tutorial, le mostramos lo fácil que es crear un hermoso pie de página global personalizado con el nuevo Theme Builder de Divi. El módulo incorporado de Theme Builder y Divi y las opciones de diseño lo ayudan a ahorrar mucho tiempo y crear sitios web impresionantes en muy poco tiempo. Esperamos que este tutorial lo inspire a crear hermosos pies de página globales para sus próximos proyectos Divi. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.