El módulo de inicio de sesión (iniciar sesión) muestra un formulario Inicio de sesión de WordPress, estilo Divi, en cualquier lugar de su página. Si usa WordPress con un área de miembros, agregue un formulario conectarse directamente a una página puede ser muy útil (en lugar de redirigir a la gente al formulario Inicio de sesión de WordPress que utiliza un estilo diferente al de su tema).

página de inicio de sesión divi wordpress.png tutorial

Cómo agregar un módulo de inicio de sesión a su página

Antes de que pueda agregar un módulo de inicio de sesión a su página, primero debe acceder al Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

constructor divi

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.

conectar el módulo divi.png

Busque el módulo de inicio de sesión en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "Conectar" y luego hacer clic en "Entrar" para buscar y agregar automáticamente el módulo de conexión. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: agregar un formulario de inicio de sesión personalizado a la página de inicio de sesión del área de un miembro

Dado que los sitios de membresía requieren que el usuario inicie sesión en parte o en todo el contenido, el módulo de inicio de sesión facilita la adición de un formulario de inicio de sesión a su propia página de inicio de sesión. Además, puede optar por redirigir a los usuarios a este formulario en lugar de a la página de inicio de sesión predeterminada de WordPress.

Aquí hay una página de inicio de sesión simple con el módulo de inicio de sesión que le mostraré cómo crear:

conectarse a blogpascher.png

Con Visual Builder, agregue una nueva sección estándar a la página de inicio de sesión de membresía con una fila de ancho completo (1 columna). Luego inserte el módulo de conexión en la línea.

conectar el módulo divi.png

Actualice la configuración de conexión de la siguiente manera:

Opciones de contenido

Título: Conexión
Contenido: [ingrese una breve descripción del curso o instrucciones para iniciar sesión]
Redirigir a la página actual: SÍ

Opciones de diseño

Color de fondo del campo: # f0f0f0 Color del texto: Oscuro Fuente del encabezado: 35px Color del encabezado: # 888888 Tamaño de la fuente del cuerpo: 16px Borde: Sí Color del borde: # 0c71c3 Ancho del borde: 1 px Relleno personalizado: 50 px Superior, 50 px Derecha, 50 px Inferior, 50 px Izquierda Usar estilos personalizados para el botón: SÍ Tamaño del texto del botón: 26 px Color del texto del botón: #ffffff Color del botón: # 0c71c3 botón: 0px Botón de fuente: predeterminado, mayúscula Agregar icono de botón: SÍ Icono de botón: Mostrar solo el icono cuando el botón está colocado: NO

ejemplo de página de inicio de sesión divi.jpg

Es todo. El sitio del área de miembros ahora tiene un formulario de inicio de sesión personalizado donde los usuarios serán redirigidos cuando necesiten iniciar sesión en el curso. No es necesario conformarse con el formulario de inicio de sesión predeterminado de WordPress.

blogpascher login page.png

Opciones de contenido del módulo de conexión

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

módulo de opción de contenido connection.png

Título

El título aparecerá en el cuadro de inicio de sesión, encima del formulario de inicio de sesión.

Contenido

El contenido se mostrará en el cuadro de inicio de sesión, debajo del título. Si desea agregar una descripción adicional, puede utilizar el campo. De lo contrario, déjelo en blanco.

Redirigir a la página actual

Aquí puede elegir si el usuario debe ser redirigido a la página actual.

Usa el color de fondo

Si desea darle a su formulario de inicio de sesión un color de fondo sólido, seleccione "sí" para esta opción y se utilizará el color de fondo que seleccione en la siguiente opción.

Color de fondo

Seleccione un color de fondo para mostrarlo como fondo de su cuadro de inicio de sesión. Si elige desactivar los colores de fondo en la opción anterior, ese color no tendrá ningún efecto.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de estilo para el módulo de inicio de sesión

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.

opción diseño módulo connection.png

Color de fondo del campo de formulario

El formulario de inicio de sesión contiene dos campos de entrada para el nombre de usuario y la contraseña. Puede utilizar esta configuración para ajustar el color de fondo de estos campos.

Color de texto del campo de formulario

El formulario de inicio de sesión contiene dos campos de entrada para el nombre de usuario y la contraseña. Puede utilizar esta configuración para ajustar el color del texto de estos campos. Si ha ajustado el color de fondo del campo del formulario, también puede ajustar el color del texto para garantizar una relación de color uniforme.

Color de fondo

Cuando un campo de entrada se enfoca con el mouse de un visitante, los colores cambian para indicar claramente qué campo está activo. Aquí puede definir el color de fondo de los campos enfocados.

Color del texto de enfoque

Cuando un campo de entrada se enfoca con el mouse de un visitante, los colores cambian para indicar claramente qué campo está activo. Aquí puede definir el color del texto de los campos enfocados.

Use el color del borde de enfoque

Si desea agregar un borde a los campos de entrada cuando están enfocados, puede habilitar esta opción.

Color del borde de enfoque

Al usar esta configuración, puede cambiar el color del borde que aparece en los campos de entrada enfocados.

Color del texto

Aquí puede elegir si su texto debe ser claro u oscuro. Si está trabajando en un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe ser oscuro.

Orientación del texto

Aquí puede ajustar la alineación de su texto.

Fuente de encabezado

Puede cambiar la fuente del texto del encabezado seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

encabezado de sección divi.png

Tamaño de fuente del encabezado

Aquí puede ajustar el tamaño del texto de su encabezado. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del encabezado

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su encabezado, elija el color deseado en el selector de color usando esta opción.

Espaciado entre letras del encabezado

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del encabezado, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la fila del encabezado

La altura de la fila afecta el espacio entre cada fila del texto del encabezado. Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Fuente del cuerpo

Puede cambiar la fuente de su cuerpo seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del cuerpo

Aquí puede ajustar el tamaño del texto del cuerpo. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del cuerpo

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras corporales

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en su texto, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea del cuerpo

La altura de la línea afecta el espacio entre cada línea de texto en su cuerpo Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espaciado deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

módulo de área de borde divi.png

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado del selector de color para aplicarlo a su borde.

Ancho del borde

De forma predeterminada, los bordes tienen 1 píxel de ancho. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a algo más como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, superpuesto e inicio. Seleccione el estilo que desee en el menú desplegable para aplicarlo a su borde.

Margen personalizado

El margen es el espacio que se agrega al exterior de su módulo, entre el módulo y el siguiente elemento arriba, abajo o a la izquierda y derecha de él. Puede agregar valores de margen personalizados a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

margen personalizado.png

Relleno personalizado

El relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Puede agregar valores de relleno personalizados a cualquiera de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. De forma predeterminada, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Use estilos personalizados para el botón

Habilitar esta opción revela varias configuraciones de personalización de botones que puede usar para cambiar la apariencia del botón de su módulo.

Tamaño del texto del botón

Esta configuración se puede utilizar para aumentar o disminuir el tamaño del texto en el botón. El botón se adapta a medida que aumenta y disminuye el tamaño del texto.

Color del texto del botón

De forma predeterminada, los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de texto personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del botón.

Color de fondo del botón

Por defecto, los botones tienen un color de fondo transparente. Esto se puede cambiar seleccionando el color de fondo deseado en el selector de color.

usando los botones divi module connection.png

Botón de ancho del borde

Todos los botones Divi tienen un borde de 2px por defecto. Este borde se puede aumentar o disminuir con esta configuración. Los bordes se pueden eliminar ingresando un valor de 0.

Color del borde del botón

De forma predeterminada, los bordes de los botones adoptan el color de acento de su tema como se define en el Personalizador de temas. Esta opción le permite asignar un color de borde personalizado al botón de este módulo. Seleccione su color personalizado con el selector de color para cambiar el color del borde del botón.

Radio del borde del botón

El radio del borde afecta la redondez de las esquinas de sus botones. De forma predeterminada, los botones en Divi tienen un pequeño radio de borde que redondea las esquinas en 3 píxeles. Puede reducir este valor a 0 para crear un botón cuadrado o aumentarlo significativamente para crear botones con bordes circulares.

Espaciado de letras de los botones

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su botón, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Fuente de botón

Puede cambiar la fuente del texto de su botón seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Agregar un ícono de botón

Desactivado, esta configuración eliminará los iconos de su botón. De forma predeterminada, todos los botones Divi muestran un icono de flecha en el desplazamiento.

Icono de botón

Si los íconos están habilitados, puede usar esta configuración para elegir qué ícono usar en su botón. Divi tiene diferentes iconos para elegir.

Botón de icono de color

El ajuste de esta configuración cambiará el color del icono que aparece en su botón. De forma predeterminada, el color del icono es el mismo que el color del texto del botón, pero esta configuración le permite ajustar el color de forma independiente.

Botón de ubicación del icono

Puede elegir mostrar el icono de su botón a la izquierda o derecha de su botón.

Mostrar icono solo al pasar el cursor sobre el botón

De forma predeterminada, los iconos de los botones se muestran solo cuando se desplaza. Si desea que el icono aparezca siempre, desactive esta configuración.

Color de texto de desplazamiento del botón

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Color de fondo del botón de desplazamiento

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de borde Color Hover

Cuando el botón de un visitante pasa por encima del botón, se utilizará este color. El color cambiará del color base definido en la configuración anterior.

Botón de radio del borde deslizante

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Botón de espaciado de nota apuntando

Cuando el mouse de un visitante pasa el mouse sobre el botón, se utilizará este valor. El valor cambiará del valor base definido en la configuración anterior.

Opciones avanzadas del módulo de inicio de sesión

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

módulo de acceso

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi