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

Hoy vamos a ver cómo hacer con el Theme Builder de Divi un encabezado entero 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 favorecido 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 normal, ocupa mucho espacio en categoría.

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

Recursos necesarios

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

Paso a paso

En el futuro 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 colchoneta: 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 mayor: 100%

SEPARACIÓN:

• Relleno superior y colchoneta: 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:

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 camino: enfadado
• Color de texto del menú móviles: enfadado

ICONOS:

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

SEPARACIÓN:

Paso 5 – Módulo Inicio de Sesión

Por extremo, en la columna 2 insertamos un módulo de inicio de sesión y lo arrastramos exacto encima del módulo de menú. Este es el punto central de nuestra tutor de hoy.

FONDO:

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 cogollo: Sí
• Tamaño del texto: 14px
• Color de fondo: #ff3190
• Ancho del borde: 0px
• Fuente: Lato
• Relleno superior y colchoneta: 2px
• Relleno izquierda y derecha: 10px

SEPARACIÓN:

ID y CLASE CSS:

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 colchoncillo

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

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 eludir los cambios en el constructor. Y no te olvides de eludir igualmente 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 cultivarse todo lo que se puede hacer con Divi.