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.
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.
Para crear el encabezado con formulario de inicio de sesión con Divi vamos a usar las siguientes herramientas:
En el siguiente video te muestro paso a paso cómo crear un encabezado con inicio de sesión con Divi.
Configuramos la sección predeterminada para que pueda contener nuestro encabezado con inicio de sesión.
FONDO:
SEPARACIÓN:
Insertamos una fila con estructura de dos columnas: la columna 1 angosta y la columna 2 ancha.
TAMAÑO:
SEPARACIÓN:
En la columna 1 insertamos un módulo de imagen para insertar el logo del sitio web.
TAMAÑO:
SEPARACIÓN:
En la columna 2 insertamos un módulo de menú.
CONTENIDO:
FONDO:
TEXTO DEL MENÚ:
MENÚ DESPLEGABLE:
ICONOS:
SEPARACIÓ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:
CAMPOS
BOTÓN:
SEPARACIÓN:
ID y CLASE CSS:
CSS PERSONALIZADO:
width: 100% ;
padding: 5px 4% ;
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:
.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.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…