Cómo agregar un formulario de autenticación desplegable a su DIV

Si crea un sitio web de membresía, es muy necesario pensar en la experiencia de conexión. Claro, puede permitir que los visitantes usen la página de autenticación de WordPress predeterminada, pero también puede facilitar un formulario de conexión en su encabezado en este caso, querrá activar el formulario de conexión, para que pueda ahorrar espacio en su encabezado. Esto es Exactamente lo que le mostraremos en el tutorial de hoy. Crearemos un encabezado global desde cero e incluiremos un formulario de autenticación desplegable. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso.
Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree una nueva plantilla de encabezado Global Access Div Div Theme Builder Comience al acceder a Divce Theme Builder desde su sitio de WordPress Backp. Una vez que llegue allí, haga clic en “Agregar espectáculo global”.
Agregue un nuevo encabezado global aparecerá un menú de caída. Para comenzar a construir desde cero, continúe seleccionando “Build Global Header”.

2. Construya el diseño de su encabezado Agregar sección no. 1 Imagen de fondo Una vez que llegue al editor de plantillas, ya notará una sección allí. Abra la configuración de la sección y cargue una imagen de fondo o use un color de fondo.

Interruptor de espacio a la pestaña de diseño de la sección y cambia aún más la parte superior e inferior.

Revestimiento superior: 10 px
Finamiento inferior: 10 PX
Agregue la estructura de la columna de fila a la sección Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: escritorio: 80%
Tableta y teléfono: 95%
Ancho máximo: 2580 PX
Sparting modifica los valores de llenado.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 1%
Junta derecha: 1%
El elemento principal CSS principal para alinear automáticamente las columnas en la vertical, agregaremos las siguientes líneas de código CSS al elemento principal de la fila en la pestaña avanzada: Display: Flex;
Justify-Concursing: Centro;

Alinine-Ritams: Centro;
Agregue el módulo de seguimiento de las redes sociales a la columna 1 Agregar redes sociales es hora de agregar módulos, comenzando con un módulo de seguimiento social de seguimiento en la columna 1. Agregue las redes sociales a su elección.
Cambie individualmente el color de fondo de cada red social, cambie el color de fondo de cada red social individual a blanca.

Color de fondo: #ffffff

La configuración del icono vuelve a la configuración general del módulo y cambia el color del icono de diseño.
Icono de color: # 141414


El borde aplica algunas configuraciones de esquina redondeadas en la siguiente configuración del borde.
Todas las esquinas: 100 px

Agregue un módulo de botón a la columna 2 Agregue una copia en la columna 2, la única forma en que necesitamos es un módulo de botón. Agregue una copia de su elección.
Alineación de bloque Cambie la alineación del módulo a continuación.

Alineación de botones: correcto

Establece el botón y luego estiliza el botón.
Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 12 PX
El color del texto del botón: #ffffff
El color de fondo del botón: # FF4700
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Botón de fuente: Prata
El estilo de la fuente del botón: mayúscula

Espacio y complete la configuración del botón aplicando los siguientes valores de llenado a la configuración de separación: revestimiento superior: 16 PX
Revestimiento inferior: 16 PX

Revelaje izquierdo: 24 PX
Revestimiento derecho: 24 PX
Agregue la sección 2 Color de fondo Agregue otra sección justo debajo de la anterior y use el siguiente color de fondo para esto:
Color de fondo: # FFF4EF
El espacio elimina todos los rellenos predeterminados e inferiores de la siguiente pestaña de diseño.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
Igualar las alturas de la columna: sí

Ancho:

Escritorio: 80%
Tableta y teléfono: 95%
Ancho máximo: 2580 PX
Sparting modifica los valores de llenado en las configuraciones de espaciaciones.
Revestimiento superior: 5 px
Finamiento inferior: 5 PX

ENLIZACIÓN IZQUIERDA: 2%
Junta derecha: 2%
Configuración 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

Espacio agregue un poco de revestimiento superior e inferior y tamaños de pantalla más pequeños.
Revestimiento superior:
Tableta y teléfono: 25 px


Levante inferior:
Tableta y teléfono: 25 px
Agregue un módulo de menú a la columna 1 Seleccione el menú, luego agregaremos un módulo de menú en una fila. Seleccione un menú de su elección.
Cargue el logotipo cargar un logotipo en el módulo de menú.
Retire el color de fondo y luego, elimine el color de fondo del menú.

Configuración de texto del menú Vaya a la pestaña Diseño del módulo y estilice el texto del menú de la siguiente manera: Menú de fuente: Prata

Color de texto del menú: # 111821


Menú Tamaño del texto: 18 PX

La altura de la línea de menú: 1.4em
Alineación del texto: Derecho
Configuración del menú Desolring Modifique y Configuración del menú decantado.
El color del fondo de caída: # FFF4EF
Línea de color del menú desplegable: # 191919
El color del texto del menú desplegable: # 191919

Color del fondo del menú móvil: # FFF4EF
Color de texto del menú móvil: # 191919
Icono de configuración Entonces, cambie los colores del icono en la configuración de los iconos.
Icono de canasta de compras en color: # 191919
Icono de búsqueda de color: # 191919
Icono de menú de hamburguesas de color: # 191919

Dimensión y complete la configuración del módulo aplicando la siguiente configuración de tamaño:
Logotipo ancho máximo: 50 px
Ancho: 100%
3. Agregue un formulario de autenticación desplegable y haga clic en la funcionalidad Agregar módulos de blurb en la columna 2 Agregue el título ahora que se ha construido la base de nuestro encabezado, podemos centrarnos en crear el disparador y el formulario de registro. Lo primero que necesitamos es un módulo de propaganda en la columna 2 de nuestra fila. Aquí agregaremos un título.

Seleccione el icono luego, seleccionaremos un icono.
Icono de configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del icono de la siguiente manera:
Icono de color: #ffffff

Icono del círculo: si

Color círculo: # FF4700

Colocación de la imagen / icono: izquierda
Configuración de texto de título Entonces, estilice el texto del título.
Título de la fuente: Lato
Fuente de peso del título: duro
Estilo de fuente de título: mayúscula

Título Tamaño del texto: 12 PX
Difundir las cartas de título: 3 pxanimation también elimina la animación predeterminada de este módulo de la configuración de animación.
Animación de imagen / icono: sin animación
Título de la propaganda CSS y agregaremos un borde superior al título de la propaganda en la pestaña Avanzada. margen-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 # 2 a la estructura de la columna de la sección # 2 Para agregar el formulario de inicio de sesión, usaremos una nueva fila debajo de la anterior, con la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Igualar las alturas de la columna: sí
Ancho máximo: 2580 PX
Sparting modifica los valores de llenado.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 2%
Junta derecha: 2%

Agregue el módulo de conexión a la columna 2 Eliminar el contenido Agregue un módulo de conexión a la columna 2. Asegúrese de que los cuadros de contenido estén vacíos.
El color del papel tapiz cambia el color de fondo.
Color de fondo: # FF4700
Configuración de campo Vaya a la pestaña Diseño y estilice los campos.
Color de fondo de campo: RGBA (0.0,0,0)

Campos de campo de texto: RGBA (255,255,255,0,73)

Campos Izquierda: 0px
Campos de revestimiento derecho: 0 PX

Fuerte de campos: lato
Campos de tamaño de texto: 16 PX
La altura de la línea de campo: 1.8em
Todas las esquinas: 0 PX
Campos el ancho del borde inferior: 1 PX
Campos color borde inferior: #ffffff
Botón de configuración y luego cambie la configuración del botón de la siguiente manera:

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 12 PX
El color del texto del botón: #ffffff
El color del fondo de fondo: # 141414 El botón del botón: 0 PX

El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 2 PX
Botón de fuente: Prata
El estilo de la fuente del botón: mayúscula
Forro para botones: 16 px
Forro para botones: 16 px
Dimensión Asegúrese de que el ancho sea “100%”.
Ancho: 100%
Botón de autenticación CSS Aplique un borde superior en el cuadro CSS desde el botón de inicio de sesión en la pestaña avanzada. margen-top: 30px;

Posición y reposicione el módulo en consecuencia:
Posición: Absoluto
Ubicación: a la derecha a la derecha

Brecha vertical: 1 PX
Agregue CSS ID al módulo de blurb en la fila # 1 ahora, que tenemos todos los elementos que necesitamos, podemos centrarnos en la funcionalidad de clic. Primero, abra el módulo de la propaganda y agregue el siguiente ID CSS:

ID CSS: Div-login-toggle

Agregue ID CSS al módulo de conexión en la fila no. 2 Abra el módulo de inicio de sesión adicional y aplique el siguiente ID CSS:
ID de CSS: Forma Div-Login
Agregue un módulo de código en el módulo de conexión y luego, agregue un módulo de código justo en el módulo de conexión.
Agregue las etiquetas de estilo y el script para crear la funcionalidad de clic, usaremos algunos códigos CSS y JQuey. Para prepararnos para ese código, agregaremos etiquetas de estilo (para el código CSS) y las etiquetas de script (para el código jquey).

Ingrese el código CSS entre etiquetas de estilo Coloque las siguientes filas del código CSS entre etiquetas de estilo: #divi-logine-toogle {
Cursor: puntero;

}
#Divic-login-forma {

margen -top: -20px;

Visibilidad: oculto;

Opacidad: 0;
-WebKit-Transition: ¡todos los 0.2s facilitados!
-Moz-Transition: ¡todos los 0.2s facilitados!
-O-transición: ¡todos los 0.2s facilitados! importantes;
Transición: ¡todos los 0.2s facilitados! Importantes;
}
.show-login-forma {
Visibilidad: ¡Visible! Importante;
margen-top: 0px! importante;
Opacidad: 1! IMPORTANTE;
}
Inserte jquey entre etiquetas de script y el siguiente código entre etiquetas de script: jQuery (documento) .Ready (function ($) {
lima loginform = $ (‘#div-logine-form’);
$ (‘#Divi-Loggle’). Click (function () {
loginform.toglecLass (‘show-logine-form’);
});
});

4. Guarde las divisiones de Builder Divic ahora que todo está en su lugar, ¡lo único que queda por hacer es guardar todos los cambios Builder y ver el resultado!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo puede ser creativo con su encabezado al crear un sitio de membresía. Específicamente, le mostré cómo incluir un formulario de autenticación desplegable que permita a sus visitantes conectarse a sus cuentas sin tener que acceder a la página de autenticación de WordPress. ¿Has logrado descargar el programa JSON Satert gratis gratis? 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.