Hoy vamos a ver cómo hacer con el Theme Builder de Divi un encabezado global del sitio web que incluya un formulario de inicio de sesión de WordPress.

Tener un formulario de inicio de sesión en el encabezado del sitio web es muy útil en sitios en los que el usuario necesita iniciar sesión, por ejemplo: tiendas online, cursos online y sitios de membresía.

Cómo Hacer un Encabezado con Inicio de Sesión

Hacer un encabezado con formulario de inicio de sesión con Divi tiene la complicación de que el formulario, por lo general, ocupa mucho espacio en altura.

Por eso te voy a mostrar cómo hacer para que el formulario se despliegue en horizontal, ocupando el menor espacio posible.

Recursos necesarios

Para crear el encabezado con formulario de inicio de sesión con Divi vamos a usar las siguientes herramientas:

• Divi. Actualizado a la última versión. Consíguelo aquí.
• Theme Builder de Divi. Vamos a usarlo para editar la plantilla de entradas agregando la sección de entradas recientes.
• Módulo Imagen de Divi. Lo vamos a usar para colocar el logo del sitio web.
• Módulo Inicio de sesión de Divi. Es el módulo que nos permite crear el formulario de inicio de sesión de WordPress.
• Módulo Menú de Divi. Lo vamos a usar para agregar también un menú al encabezado.

Paso a paso

En el siguiente video te muestro paso a paso cómo crear un encabezado con inicio de sesión con Divi.

Paso 1 – Sección del Encabezado

Configuramos la sección predeterminada para que pueda contener nuestro encabezado con inicio de sesión.

FONDO:

• Color del gradiente 1: #073399
• Color del gradiente 2: #2a71c9
• Dirección del gradiente: 48 grados

SEPARACIÓN:

• Relleno superior y base: 10px
• Relleno izquierda y derecha: 25px

Paso 2 – Fila con 2 columnas

Insertamos una fila con estructura de dos columnas: la columna 1 angosta y la columna 2 ancha.

TAMAÑO:

• Uso Personalizado del Canalón de Ancho: Sí
• Espacio entre columnas: 1
• Ancho: 100%
• Ancho máximo: 100%

SEPARACIÓN:

• Relleno superior y base: 0px.

Paso 3 – Módulo Imagen

En la columna 1 insertamos un módulo de imagen para insertar el logo del sitio web.

TAMAÑO:

• Ancho: 80px (dependiendo de las dimensiones de tu logo)
• Alineación del texto: Izquierda (Escritorio), Centrado (Tablet y Teléfono).

SEPARACIÓN:

• Margen base: 5px;

Paso 4 – Módulo Menú

En la columna 2 insertamos un módulo de menú.

CONTENIDO:

• Menú: Selecciona el menú que quieras mostrar.

FONDO:

• Fondo: borrar el color de fondo.

TEXTO DEL MENÚ:

• Fuente del Menú: Lato
• Peso: Negrita
• Tamaño: 16px
• Color del texto: blanco
• Alineación del texto: Derecha

MENÚ DESPLEGABLE:

• Color de línea: negro
• Color de texto del menú móviles: negro

ICONOS:

• Color de ícono del menú de hamburguesas: blanco

SEPARACIÓN:

• Margen superior: 5px

Paso 5 – Módulo Inicio de Sesión

Por último, en la columna 2 insertamos un módulo de inicio de sesión y lo arrastramos justo encima del módulo de menú. Este es el punto central de nuestra guía de hoy.

FONDO:

• Usar color de fondo: No

CAMPOS

• Color de fondo de los campos: rgba(0,0,0,0.15)
• Color del texto: blanco
• Fuente: Lato
• Tamaño del texto: 14px

BOTÓN:

• Usar estilos personalizados para botón: Sí
• Tamaño del texto: 14px
• Color de fondo: #ff3190
• Ancho del borde: 0px
• Fuente: Lato
• Relleno superior y base: 2px
• Relleno izquierda y derecha: 10px

SEPARACIÓN:

• Relleno: 0px

ID y CLASE CSS:

• Clase CSS: inicio-sesion

CSS PERSONALIZADO:

• Formulario de inicio de sesión:

width: 100% !important;

• Campos de inicio de sesión:

padding: 5px 4% !important;

Paso 6 – Ajustes de la cabecera

Para terminar vamos a los ajustes de la cabecera de la plantilla que estamos editando y pegamos el siguiente código CSS para que transforme el formulario en horizontal.

CSS PERSONALIZADO:

• CSS Personalizado:

.inicio-sesion .et_pb_login_form form {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.inicio-sesion .et_pb_login_form .et_pb_contact_form_field {
   padding-bottom: 0px;
   margin-right: 5px;
}
.inicio-sesion .et_pb_forgot_password {
   display:none;
}

Eso es todo. Ahora solo queda guardar los cambios en el constructor. Y no te olvides de guardar también en el Theme Builder.

Déjame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.