Cómo agregar un formulario de inicio de sesión desplegable a su encabezado Divi

Si está creando un sitio web de membresía, es muy necesario pensar en la experiencia de inicio de sesión. Claro, puede permitir que los visitantes usen la página de inicio de sesión predeterminada de WordPress, pero también puede facilitarles las cosas al incluir un formulario de inicio de sesión en su encabezado. En este caso, querrá activar el formulario de inicio de sesión al hacer clic para que pueda ahorrar espacio en su encabezado. Eso es exactamente lo que le mostraremos en el tutorial de Divi de hoy. Construiremos un encabezado global desde cero e incluiremos un formulario de inicio de sesión desplegable. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de encabezado global GRATIS

Para tener en sus manos la plantilla de encabezado global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Cree una nueva plantilla de encabezado global

Ir a Divi Theme Builder

Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress. Una vez allí, haga clic en "Agregar encabezado global".

Agregar nuevo encabezado global

Aparecerá un menú desplegable. Para comenzar a construir desde cero, continúe seleccionando "Crear encabezado global".

2. Crear diseño de encabezado

Agregar la sección n. ° 1

Imagen de fondo

Una vez dentro del editor de plantillas, notarás una sección allí. Abra la configuración de la sección y cargue una imagen de fondo o use un color de fondo.

Espaciado

Vaya a la pestaña de diseño de la sección y modifique el relleno superior e inferior a continuación.

• Acolchado superior: 10px
• Acolchado inferior: 10px

Agregar fila a la sección

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho:
  • Escritorio: 80%
  • Tableta y teléfono: 95%
• Ancho máximo: 2580px

Espaciado

A continuación, modifique los valores de relleno.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Acolchado izquierdo: 1%
• Acolchado derecho: 1%

CSS del elemento principal

Para alinear automáticamente las columnas verticalmente, agregaremos las siguientes líneas de código CSS al elemento principal de la fila en la pestaña avanzada:

display: flex;
justify-content: center;
align-items: center;

Agregue el módulo de seguimiento de redes sociales a la columna 1

Agregar redes sociales

Es hora de agregar módulos, comenzando con un Módulo de seguimiento de redes sociales en la columna 1. Agregue las redes sociales de su elección.

Cambiar el color de fondo de cada red social individualmente

Luego, cambie el color de fondo de cada red social individualmente a blanco.

• Color de fondo: #ffffff

Configuración de iconos

Vuelva a la configuración general del módulo y cambie el color del icono en la pestaña de diseño.

• Color del icono: # 141414

Frontera

Aplique algunas configuraciones de esquinas redondeadas en la configuración del borde a continuación.

• Todas las esquinas: 100px

Agregar módulo de botones a la columna 2

Agregar copia

En la columna 2, el único módulo que necesitamos es un módulo de botones. Agregue una copia de su elección.

Alineación de botones

A continuación, cambie la alineación del módulo.

• Alineación de botones: derecha

Configuración de botones

Luego, estiliza 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: #ffffff
• Color de fondo del botón: # ff4700
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Espacio entre letras del botón: 2px

• Fuente del botón: Prata
• Estilo de fuente del botón: mayúsculas

Espaciado

Y complete la configuración del botón aplicando los siguientes valores de relleno a la configuración de espaciado:

• Acolchado superior: 16px
• Acolchado inferior: 16px
• Relleno izquierdo: 24px
• Relleno derecho: 24px

Agregar sección n. ° 2

Color de fondo

Agregue otra sección justo debajo de la anterior y use el siguiente color de fondo para ella:

• Color de fondo: # fff4ef

Espaciado

Elimine todo el acolchado superior e inferior predeterminado en la pestaña de diseño a continuación.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Ecualizar alturas de columna: Sí
• Ancho:
  • Escritorio: 80%
  • Tableta y teléfono: 95%
• Ancho máximo: 2580px

Espaciado

Modifique también los valores de relleno en la configuración de espaciado.

• Acolchado superior: 5px
• Acolchado inferior: 5px
• Acolchado izquierdo: 2%
• Acolchado derecho: 2%

Configuración de la columna 2

Color de fondo

Luego, abra la configuración de la columna 2 y aplique un color de fondo solo en la tableta y el teléfono.

• Escritorio: /
• Tableta y teléfono: # f2e8e3

Espaciado

También estamos agregando algo de relleno superior e inferior en tamaños de pantalla más pequeños.

• Acolchado superior:
  • Tableta y teléfono: 25px
• Acolchado inferior:
  • Tableta y teléfono: 25px

Agregar módulo de menú a la columna 1

Seleccione el menú

A continuación, agregaremos un módulo de menú a la fila. Seleccione un menú de su elección.

Subir logotipo

Sube un logo a tu módulo de menú.

Eliminar color de fondo

Luego, elimine el color de fondo del menú.

Configuración del texto del menú

Vaya a la pestaña de diseño del módulo y aplique el estilo del texto del menú de la siguiente manera:

• Fuente del menú: Prata
• Color del texto del menú: # 111821
• Tamaño del texto del menú: 18px
• Altura de la línea del menú: 1.4em
• Alineación de texto: derecha

Configuración del menú desplegable

Cambie también la configuración del menú desplegable.

• Color de fondo del menú desplegable: # fff4ef
• Color de la línea del menú desplegable: # 191919
• Color del texto del menú desplegable: # 191919
• Color de fondo del menú móvil: # fff4ef
• Color del texto del menú móvil: # 191919

Configuración de iconos

Luego, cambie los colores de los iconos en la configuración de los iconos.

• Color del icono del carrito de compras: # 191919
• Color del icono de búsqueda: # 191919
• Color del icono del menú de hamburguesas: # 191919

Dimensionamiento

Y complete la configuración del módulo aplicando las siguientes configuraciones de tamaño:

• Ancho máximo del logotipo: 50px
• Ancho: 100%

3. Agregue el formulario de inicio de sesión desplegable y haga clic en la funcionalidad

Agregar módulo Blurb a la columna 2

Añadir título

Ahora que se ha construido la base de nuestro encabezado, podemos concentrarnos en crear el formulario y el activador desplegable de inicio de sesión. Lo primero que necesitaremos es un módulo Blurb en la columna 2 de nuestra fila. Aquí, agregaremos un título.

Seleccionar icono

A continuación, seleccionaremos un icono.

Configuración de iconos

Vaya a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:

• Color del icono: #ffffff
• Icono de círculo: Sí
• Color del círculo: # ff4700
• Ubicación de la imagen / icono: Izquierda

Configuración del texto del título

Luego, aplique estilo al texto del título.

• Fuente del título: Lato
• Peso de la fuente del título: Pesado
• Estilo de fuente del título: mayúsculas
• Tamaño del texto del título: 12px
• Espaciado de letras de título: 3px

Animación

También eliminaremos la animación predeterminada de este módulo en la configuración de la animación.

• Animación de imagen / icono: sin animación

CSS del título de la propaganda

Y agregaremos un margen superior al título de la propaganda en la pestaña avanzada.

margin-top: 10px;

Posición

Por último, pero no menos importante, reposicionaremos el módulo en la configuración de posición.

• Posición: Absoluto
• Ubicación: Centro

Agregue la fila n. ° 2 a la sección n. ° 2

Estructura de la columna

Para agregar el formulario de inicio de sesión, usaremos una nueva fila debajo de la anterior, con la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Ecualizar alturas de columna: Sí
• Ancho máximo: 2580px

Espaciado

Modifique también los valores de relleno.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Acolchado izquierdo: 2%
• Acolchado derecho: 2%

Agregar módulo de inicio de sesión a la columna 2

Quitar contenido

Agregue un módulo de inicio de sesión a la columna 2. Asegúrese de que los cuadros de contenido estén vacíos.

Color de fondo

A continuación, cambie el color de fondo.

• Color de fondo: # ff4700

Configuración de campos

Vaya a la pestaña de diseño y aplique estilo a los campos.

• Color de fondo de los campos: rgba (0,0,0,0)
• Color del texto de los campos: rgba (255,255,255,0.73)
• Relleno de campos a la izquierda: 0px
• Relleno de campos a la derecha: 0px
• Fuente Fields: Lato
• Tamaño del texto de los campos: 16px

• Altura de la línea de campos: 1.8em
• Todas las esquinas: 0px
• Ancho del borde inferior de los campos: 1 px
• Color del borde inferior de los campos: #ffffff

Configuración de botones

Luego, modifique la configuración del botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 12px
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 141414
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Espacio entre letras del botón: 2px
• Fuente del botón: Prata

• Estilo de fuente del botón: mayúsculas
• Acolchado superior del botón: 16px
• Acolchado de la parte inferior del botón: 16px

Dimensionamiento

Asegúrese de que el ancho también sea "100%".

• Ancho: 100%

CSS del botón de inicio de sesión

Aplique un margen superior al cuadro CSS del botón de inicio de sesión en la pestaña avanzada.

margin-top: 30px;

Posición

Y reposicione el módulo en consecuencia:

• Posición: Absoluto
• Ubicación: arriba a la derecha
• Desplazamiento vertical: 1 px

Agregue CSS ID al módulo Blurb en la fila # 1

Ahora que tenemos todos los elementos que necesitamos, podemos centrarnos en la funcionalidad de hacer clic. Primero, abra el Módulo Blurb y agregue la siguiente ID de CSS:

• ID de CSS: divi-login-toggle

Agregue la ID de CSS al módulo de inicio de sesión en la fila n. ° 2

A continuación, abra el módulo de inicio de sesión y aplique la siguiente ID de CSS:

• ID de CSS: divi-login-form

Agregar módulo de código debajo del módulo de inicio de sesión

Luego, agregue un módulo de código justo debajo del módulo de inicio de sesión.

Agregar etiquetas de estilo y secuencia de comandos

Para crear la funcionalidad de clic, usaremos algo de código CSS y JQuery. Para prepararnos para ese código, agregaremos etiquetas de estilo (para el código CSS) y etiquetas de script (para el código JQuery).

Insertar código CSS entre etiquetas de estilo

Coloque las siguientes líneas de código CSS entre las etiquetas de estilo:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Insertar JQuery entre etiquetas de script

Y el siguiente código entre las etiquetas del script:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Guarde los cambios en Divi Theme Builder

Ahora que todo está en su lugar, lo único que queda por hacer es guardar todos los cambios de Divi Theme Builder y ver el resultado.

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 esta publicación, le mostramos cómo ser creativo con su encabezado al crear un sitio web de membresía. Más específicamente, le mostramos cómo incluir un formulario de inicio de sesión desplegable que permite a sus visitantes iniciar sesión en sus cuentas sin tener que ir a la página de inicio de sesión de WordPress. ¡También pudo descargar el archivo JSON de plantilla de encabezado de forma gratuita! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.