El Módulo de Inicio de Sesión de Divi

El módulo de inicio de sesión de Divi facilita la creación de un área de acceso para usuarios registrados, para que puedan entrar a un área de miembros, contenido restringido, descargas, recursos y más.

Ver una Demo en Vivo de Este Módulo

Cómo agregar el módulo de inicio de sesión de Divi a tu página

1. Agrega una nueva página o edita una página existente.
   Por defecto, el Editor estándar de Gutenberg se carga cuando agregas una nueva entrada o página en WordPress.

2. Haz clic en el botón morado debajo del título de la página: Usa el Divi Builder.

3. Agrega una página y carga el Divi Builder.

Al recargarse la página, verás tres opciones:

• Construir desde cero

• Elegir un diseño predefinido

• Construir con IA

Construir desde cero

Elegir un diseño predefinido

Construir con IA

Agregar el módulo de inicio de sesión de Divi

Cuando cargas el Visual Builder, Divi añade automáticamente una Sección.

Haz clic en el ícono verde + para insertar una Fila.

Haz clic en el ícono gris + dentro de la Fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos en el tema Divi.

Busca el módulo de Inicio de Sesión y haz clic para cargarlo.
También puedes buscarlo en la barra de búsqueda en la parte superior.

Todas las opciones del módulo de inicio de sesión de Divi explicadas

Una vez que agregues el módulo, sus ajustes aparecerán automáticamente. Estas configuraciones te permiten configurar el contenido y el estilo del módulo. Los ajustes están divididos en tres pestañas ubicadas en la parte superior del módulo: Contenido, Diseño y Avanzado.

Pestaña Contenido

Aquí encontrarás las opciones de contenido disponibles para este módulo.

Texto

• Título — Si deseas mostrar un título en la parte superior del módulo, escríbelo aquí. Si dejas este campo vacío, no se mostrará título.

• Cuerpo — Si deseas que aparezca texto debajo del título, escríbelo aquí. Si dejas el campo vacío, no se mostrará texto adicional.

Redireccionamiento

• Redirigir a la página actual — Activa esta opción si quieres que el usuario sea redirigido a la misma página después de iniciar sesión.

Enlace

• URL del enlace del módulo — Pega la URL a la que quieres que lleve el módulo cuando sea clickeado. Esto hará que todo el módulo sea clickeable y redirija a dicha URL.

• Destino del enlace del módulo — Define si el enlace se abre en la misma ventana o en una pestaña nueva.

  • En la misma ventana

  • En una nueva pestaña

Fondo

En esta sección puedes configurar:

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

1. Haz clic en la primera pestaña con el ícono del cubo de pintura.
   
2. Haz clic en "Agregar color de fondo" y elige un color de la paleta de tu sitio o usa el cuentagotas para elegir uno nuevo.
   

Cómo agregar un degradado de fondo

1. Haz clic en la segunda pestaña con el ícono de degradado.
   
2. Haz clic en "Agregar degradado de fondo".
   Para cambiar los colores, haz clic en los puntos del degradado y selecciona colores de la paleta o usa el cuentagotas. Puedes añadir más puntos haciendo clic en cualquier parte de la barra del degradado.

Opciones de degradado incluyen:

• Tipo de degradado

• Dirección del degradado

• Repetir degradado

• Unidad del degradado

• Colocar degradado encima de la imagen de fondo

Cómo agregar una imagen de fondo

1. Haz clic en la tercera pestaña con el ícono de imagen.
   
2. Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes elegir una imagen ya subida o subir una nueva.
   

Opciones para la imagen de fondo:

• Usar efecto parallax

• Tamaño de la imagen

• Posición de la imagen

• Repetición de la imagen

• Mezcla de la imagen con otras capas

Cómo agregar un video de fondo

1. Haz clic en la cuarta pestaña con el ícono de video.
   
2. Haz clic en el ícono gris + para abrir la Biblioteca de Medios.
   

Opciones de video:

• Recomendamos subir versión mp4 y webm para compatibilidad en todos los navegadores

• Ancho y alto del video

• Pausar video cuando otro video se reproduzca (por defecto se pausa cuando no está visible)

Cómo agregar un patrón de fondo

1. Haz clic en la quinta pestaña con el ícono de patrón.
   
2. Haz clic en "Agregar patrón de fondo".
   Elige el tipo de patrón, color, tamaño, transformación, repetición, origen, desplazamiento y modo de mezcla.

Cómo agregar una máscara de fondo

1. Haz clic en la sexta pestaña con el ícono de máscara.
   
2. Haz clic en "Agregar máscara de fondo".
   Elige tipo, color, transformación, proporción, tamaño y modo de mezcla de la máscara.

Etiqueta administrativa

La etiqueta administrativa es un nombre que solo tú ves para organizar mejor los módulos en el backend. Por defecto, es el nombre del módulo, pero puedes cambiarlo a lo que quieras.

Pestaña Diseño

Aquí encontrarás todos los estilos y configuraciones de diseño para el módulo.

Campos

Estiliza los campos de inicio de sesión aquí.

Color de fondo de los campos – Elige un color de fondo para los campos de la sección de comentarios. Selecciona de la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Color del texto de los campos – Elige el color del texto dentro de los campos. Selecciona de la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Color de fondo de los campos al enfocarse – Elige un color de fondo para los campos que estén siendo usados actualmente. Por ejemplo, puedes cambiar el color de fondo cuando un visitante haga clic en ese campo y empiece a escribir. Selecciona de la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Color del texto de los campos al enfocarse – Elige el color del texto cuando el campo esté enfocado. Selecciona de la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para elegir un color nuevo.

Margen de los campos – Los márgenes añaden espacio alrededor del elemento. Si deseas agregar espacio alrededor de los campos, hazlo aquí escribiendo un valor numérico en las cajas de texto o usando las flechas para aumentar o disminuir los márgenes.

Relleno de los campos – El relleno añade espacio dentro del elemento. Si deseas agregar espacio dentro de los campos, hazlo aquí escribiendo un valor numérico en las cajas de texto o usando las flechas para aumentar o disminuir el relleno.

Fuente de los campos – Elige la fuente que deseas usar para el texto. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.

Peso de la fuente de los campos – Haz clic en el menú desplegable para seleccionar el grosor de la fuente de los campos.

Estilo de fuente de los campos – Elige el estilo de la fuente de los campos:

• Cursiva

• Mayúsculas

• Versales (mayúsculas pequeñas)

• Subrayado

• Tachado

Alineación del texto de los campos – Elige la alineación del texto específicamente para los campos:

• Izquierda

• Centro

• Derecha

• Justificado

Tamaño del texto de los campos – Elige el tamaño de la fuente del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico.

Espaciado entre letras de los campos – Elige el espaciado entre letras del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico. El espaciado entre letras es el espacio entre cada letra. Cuanto mayor sea el número, más espacio habrá.

Altura de línea de los campos – Elige la altura de línea del texto de los campos arrastrando el control deslizante o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto. Cuanto mayor sea el número, más espacio habrá.

Sombra del texto de los campos – Puedes agregar una sombra al texto de los campos aquí. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque de la sombra y el color de la sombra.

Esquinas redondeadas de los campos – Si quieres redondear las esquinas de los campos, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se muestra por el icono de cadena azul resaltado en el medio); sin embargo, si quieres valores diferentes para cada esquina, haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados, siempre serán iguales y se actualizarán automáticamente si cambias uno.

Estilos de borde de los campos – Aquí puedes añadir un borde a los campos. Puedes añadir un borde en todos los lados o en lados individuales (superior, derecho, inferior e izquierdo).

Ancho del borde de los campos – Aquí defines el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para mostrarse.

Color del borde de los campos – Aquí puedes elegir el color del borde. Puedes seleccionar un color de la paleta de colores predeterminada de tu sitio o hacer clic en el icono del cuentagotas para encontrar un color nuevo.

Estilo del borde de los campos – Aquí puedes seleccionar el estilo de borde que prefieras: sólido, discontinuo, punteado, doble, ranurado, en relieve, insertado, sobresaliente o ninguno.

Texto

Esto establece los estilos generales de texto para este módulo; sin embargo, puedes configurar estilos específicos para textos concretos en otros apartados como Texto del Título, Texto del Cuerpo y Texto Meta.

Alineación de Texto – Te permite elegir cómo se alinea el texto: izquierda, centro, derecha o justificado.

Color del Texto – Selecciona la paleta de colores predeterminada para el texto de este módulo: claro u oscuro. Las paletas de colores claras y oscuras predeterminadas se pueden configurar en las Opciones del Tema Divi.

Sombra del Texto – Aquí puedes aplicar una sombra al texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplica a todo el contenido, tanto al número como al texto del título.

---

Texto del Título

Estos son los ajustes específicos de estilo y configuración solo para el Texto del Título.

Nivel de Encabezado del Texto – Elige el nivel de encabezado asignado al texto del título: h1, h2, h3, h4, h5 o h6.

Fuente del Título – Elige la fuente que quieres usar para el texto del título. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una diferente o subir una fuente personalizada desde el menú desplegable.

Grosor de la Fuente del Título – Haz clic en el desplegable para seleccionar la negrita del texto del título.

Estilo de Fuente del Título – Elige el estilo del texto del título:

• Cursiva

• Mayúsculas

• Versalitas

• Subrayado

• Tachado

Alineación del Texto del Título – Elige la alineación del texto solo para el título:

• Izquierda

• Centro

• Derecha

• Justificado

Color del Texto del Título – Elige un color específico para el texto del título. Selecciona de la paleta de colores de tu sitio o usa el cuentagotas para encontrar un nuevo color.

Tamaño del Texto del Título – Ajusta el tamaño de la fuente del título deslizando el control o escribiendo un valor numérico.

Espaciado de Letras del Título – Ajusta el espacio entre letras del texto del título deslizando el control o escribiendo un valor numérico. Mientras mayor sea el número, más espacio habrá.

Altura de Línea del Título – Ajusta la altura de línea del texto del título deslizando el control o escribiendo un valor numérico. Mientras mayor sea el número, más espacio habrá entre líneas.

Sombra del Texto del Título – Puedes agregar sombra al texto del título. Al seleccionar un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

---

Texto del Cuerpo

Estos son los ajustes específicos para el estilo y configuración del Texto del Cuerpo.

Fuente del Cuerpo – Elige la fuente para el texto del cuerpo. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir otra o subir una fuente personalizada.

Grosor de Fuente del Cuerpo – Selecciona el grosor del texto del cuerpo en el menú desplegable.

Estilo de Fuente del Cuerpo – Elige el estilo para el texto del cuerpo:

• Cursiva

• Mayúsculas

• Versalitas

• Subrayado

• Tachado

Alineación del Texto del Cuerpo – Elige la alineación del texto solo para el cuerpo:

• Izquierda

• Centro

• Derecha

• Justificado

Color del Texto del Cuerpo – Selecciona un color para el texto del cuerpo desde la paleta del sitio o usa el cuentagotas para un nuevo color.

Tamaño del Texto del Cuerpo – Ajusta el tamaño de la fuente del cuerpo deslizando o escribiendo un valor.

Espaciado de Letras del Cuerpo – Ajusta el espacio entre letras para el texto del cuerpo.

Altura de Línea del Cuerpo – Ajusta la altura de línea para el texto del cuerpo.

Sombra del Texto del Cuerpo – Puedes agregar sombra al texto del cuerpo y configurar dirección, desenfoque e intensidad, y color.

---

Botón

Usar Estilos Personalizados para el Botón – Por defecto, los botones se estilizan globalmente vía el Personalizador del Tema. Para aplicar estilos únicos a este botón, activa esta opción.

Tamaño del Texto del Botón – Ajusta el tamaño de la fuente del texto del botón.

Color del Texto del Botón – Selecciona el color del texto del botón.

Fondo del Botón – Estiliza el fondo del botón con color sólido, degradado o imagen. Puedes elegir de la paleta del sitio, usar el cuentagotas, añadir degradado o imagen de fondo.

Ancho del Borde del Botón – Ajusta el grosor del borde del botón.

Color del Borde del Botón – Selecciona el color del borde del botón.

Radio del Borde del Botón – Ajusta el radio de las esquinas redondeadas del botón.

Espaciado entre Letras del Botón – Ajusta el espacio entre letras del texto del botón.

Fuente del Botón – Elige la fuente del texto del botón.

Grosor de la Fuente del Botón – Selecciona el grosor del texto del botón.

Estilo de Fuente del Botón – Elige entre cursiva, mayúsculas, versalitas, subrayado o tachado.

Mostrar Ícono en el Botón – Activa o desactiva mostrar el ícono en el botón.

Ícono del Botón – El ícono predeterminado es ">". Puedes elegir otro.

Color del Ícono del Botón – Selecciona el color del ícono.

Posición del Ícono del Botón – Elige si el ícono aparece a la derecha o izquierda del botón.

Mostrar Ícono Solo al Pasar el Mouse en el Botón – Activa para mostrar el ícono solo al pasar el cursor; desactiva para verlo siempre.

Sombra del Texto del Botón – Puedes agregar sombra al texto del botón y configurar dirección, intensidad y color.

Margen del Botón – Añade márgenes externos al botón.

Relleno del Botón – Añade relleno interno al botón.

Sombra de Caja del Botón – Agrega sombra al botón con opciones para posición, intensidad, color y ubicación dentro o fuera del contenedor.

---

Dimensiones

Ancho – Define el ancho del módulo.

Ancho Máximo – Define el ancho máximo del módulo.

Alineación del Módulo – Si se define ancho o ancho máximo, puedes alinear el módulo a la izquierda, centro o derecha.

Altura Mínima – Define la altura mínima del módulo.

Altura – Define la altura del módulo.

Altura Máxima – Define la altura máxima del módulo.

---

Espaciado

Puedes añadir márgenes (espacio externo) o relleno (espacio interno) al módulo. Para bloquear las proporciones y mantener valores iguales, haz clic en el icono de cadena entre los valores correspondientes (ej. superior e inferior).

Valores predeterminados para márgenes y relleno son 0.

---

Borde

Añade borde completo o a un solo lado del módulo. Ajusta el grosor y el color. Elige estilo de borde desde el menú (sólido, punteado, doble, etc.).

Esquinas Redondeadas – Define el radio para las esquinas del borde. Puedes desvincular valores para cada esquina si quieres diferentes radios.

---

Sombra de Caja

Aquí, puedes añadir una sombra proyectada a todo el módulo.

Una vez que selecciones un estilo de sombra, podrás personalizar las siguientes opciones:

1. Posición Horizontal de la Sombra - Define la posición horizontal de la sombra proyectada.
2. Posición Vertical de la Sombra - Define la posición vertical de la sombra proyectada.
3. Intensidad del Desenfoque de la Sombra - Define la intensidad del desenfoque de la sombra. Mientras mayor sea el valor, mayor será el desenfoque y más amplia y tenue se verá la sombra.
4. Intensidad de la Expansión de la Sombra - Define la intensidad de la expansión del desenfoque. Aumentar esta intensidad incrementará la densidad de la sombra proyectada. Una mayor densidad resulta en una sombra más intensa.
5. Color de la Sombra - Define el color de la sombra.
6. Posición de la Sombra - Define la posición de la sombra. Puede estar dentro del módulo o fuera de él.
   

Filtros

Ajusta filtros del módulo como:

• Tono

• Saturación

• Brillo

• Contraste

• Invertir

• Sepia

• Opacidad

• Desenfoque

Modo de Mezcla determina cómo se mezcla el módulo con capas inferiores. Por defecto, está en normal.

---

Transformar

Opciones para escalar, mover (trasladar), rotar, inclinar y puntos de origen. Navega por opciones, ajusta con valores numéricos o arrastrando controles. Puedes bloquear valores para mantenerlos iguales.

---

Animación

Aplica animación al módulo. Ajusta:

• Duración

• Retardo

• Opacidad inicial

• Curva de velocidad

• Repetición (por defecto solo una vez; puedes poner en bucle)

---

Pestaña Avanzada

Opciones para usuarios con experiencia, como CSS personalizado. Puedes aplicar CSS personalizado, clases e IDs para estilos avanzados.

ID y Clases CSS

Asigna un ID o Clase CSS específica a este módulo. Esto es útil para aplicar CSS personalizado a un módulo usando la hoja de estilos de tu tema hijo.

---

CSS Personalizado

CSS de Forma Libre - Escribe CSS de forma libre usando el selector keyword para apuntar a este módulo. Ejemplo: selector h1 {color: red;}
Elementos del Módulo - También puedes aplicar CSS personalizado a este módulo pegándolo en esta pestaña. Al hacer clic en la pestaña Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.

---

Condiciones

Esta pestaña te permite elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo tiene, y más.
Puedes añadir una o varias condiciones.

---

Visibilidad

Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio marcando la casilla correspondiente.

Desbordamiento Horizontal - Define qué se muestra cuando el contenido se desborda por los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:

• Visible: El contenido se mostrará si se desborda la altura del módulo.

• Scroll: Si el contenido se desborda, aparecerá una barra de desplazamiento vertical para desplazarse por el contenido.

• Oculto: El contenido que se desborda se ocultará.

• Auto: El navegador decide si mostrar barra de desplazamiento.

Desbordamiento Vertical - Define qué se muestra cuando el contenido se desborda por los bordes superior e inferior de un elemento de nivel bloque. Las opciones son iguales a las del desbordamiento horizontal.

---

Transiciones

Controla la duración, el retraso y la curva de velocidad de la animación al pasar el cursor (hover).

Duración de la Transición - Define la duración (en milisegundos) de la transición de la animación hover.
Retraso de la Transición - Define el retraso (en milisegundos) antes de que empiece la animación hover.
Curva de Velocidad de la Transición - Define la curva de velocidad de la animación hover.

---

Posición

Posición - Define la posición del módulo:

• Relativa (valor por defecto) - El módulo se posiciona según el flujo normal del documento y los desplazamientos son relativos a sí mismo. No afecta la posición de otros elementos.

• Absoluta - El módulo se elimina del flujo normal y se posiciona respecto a su ancestro más cercano con posición definida o al contenedor inicial.

• Fija - El módulo se elimina del flujo y se posiciona relativo a la ventana del navegador (útil para módulos pegajosos).

Desplazamiento Vertical - Define la posición vertical del módulo.
Desplazamiento Horizontal - Define la posición horizontal del módulo.
Z-index - Define el orden del módulo en la página. Los módulos con un z-index más alto se superponen a los de menor z-index.

---

Efectos de Desplazamiento

Define cómo se comporta el módulo al hacer scroll. Puedes hacer que el módulo sea “sticky” (pegajoso) en la parte superior, inferior o ambos.
También puedes activar movimiento vertical para ajustar la velocidad con la que el módulo se desplaza sin afectar a los elementos circundantes.

El efecto disparador de movimiento permite elegir cuándo se activa el efecto de scroll: cuando la parte superior, media o inferior del elemento esté visible.

---

Guardar Tu Diseño

Cuando termines de configurar el módulo, haz clic en la flecha verde en la esquina inferior derecha para guardar tu diseño. Si cierras el módulo sin guardar, se perderán los cambios.

---

Guardar el Diseño de la Página

Para guardar el diseño de la página, presiona CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi para guardar haciendo clic en el ícono morado con tres puntos para expandir y luego en el botón verde de Guardar.

---

Salir del Constructor Visual

Una vez guardados los cambios, haz clic en “Salir del Constructor Visual” en la barra de administración superior para salir del modo visual.

---

Seguir Aprendiendo

• Cómo crear entradas de blog exclusivas para miembros con las opciones de condición de Divi

• Cómo añadir un formulario de inicio de sesión desplegable en el encabezado Divi

• Cómo mostrar un formulario de inicio de sesión solo para usuarios no conectados