En esta lección, te mostraremos cómo crear tu propia página de inicio de sesión para tu red multisitio. Esto es genial porque tus usuarios no tendrán que usar la página de acceso normal de WordPress. En su lugar, podrás diseñar una hermosa página de inicio de sesión con Elementor.
Sigue estos pasos para crear tu página personalizada de inicio de sesión:
1- AÑADE UNA NUEVA PÁGINA A TU SITIO PRINCIPAL
La versión 2.x de WP Ultimo te permite crear páginas de registro e inicio de sesión por defecto. Son páginas normales con la apariencia del tema que tengas instalado en tu sitio principal.
Si no quieres crear una nueva página, puedes editar la página creada por defecto al momento de instalar WP Ultimo 2. Esto depende de la configuración que hayas creado.
Si no has creado tu página de sesión por defecto, puedes crear una nueva.
Abre el escritorio del sitio principal de tu red y ve a Páginas > Añadir nueva.
Ahora debes hacer clic en Editar con Elementor.
2- AÑADE EL CÓDIGO CORTO DE WP ULTIMO A TU PÁGINA
Ya en Elementor, puedes cambiar la estructura de la página a Elementor Canvas. Así podrás editar tu página desde cero, añadiendo tu logo, fondo, textos, columnas, y cualquier otro elemento. Puedes diseñar la página como quieras.
El elemento esencial de esta página es el shortcode de inicio de sesión de WP Ultimo:
[wu_login_form]
Necesitas pegar este código corto donde quieras desplegar el formulario de inicio de sesión.
Una vez edites la página, debes publicarla.
3- SELECCIONA LA NUEVA PÁGINA DE INICIO DE SESIÓN EN LOS AJUSTES DE WP ULTIMO
Para seleccionar esta página como página de inicio de sesión en los ajustes de WP Ultimo, debes ir a Administrador de la Red > WP Ultimo > Ajustes > Inicio de Sesión y Registro.
Así es como lucirá la página de inicio de sesión al guardar los cambios:
Ahora tus usuarios no tendrán que usar la página normal de WordPress para iniciar sesión en tu plataforma multisitio, sino que podrán hacerlo usando esta bonita página que has creado.
Veamos cómo crear una página de inicio de sesión con Elementor. Esta página será completamente diferente de la página de inicio de sesión de WordPress y contendrá tu logotipo, tu fondo y tus colores preferidos.
En primer lugar, tenemos que abrir el wp-admin del dashboard.
Ir a Administrador de la Red > Sitio y haz clic en Escritorio en la lista de sitios.
Ahora solo tienes que seguir estos pasos:
1- CREA UNA NUEVA PÁGINA
Una vez que estés en el wp-admin del sitio del dashboard, ve a Páginas > Añadir nueva.
A continuación, ingresa el título de la página y haz clic en Editar con Elementor.
2- EDITA LA PÁGINA DE INICIO DE SESIÓN CON ELEMENTOR
Ahora que nuestra página ha sido creada, necesitamos editarla para añadir y configurar todos los elementos que necesitamos para la página de inicio de sesión.
Básicamente, tenemos que personalizar el fondo de la página, el título, poner nuestro logotipo y nuestro formulario de acceso.
Nota. Puedes usar cualquier diseño que quieras.
- Haz clic en Ajustes.
- Selecciona Elementor Canvas en Estructura de página.
- Haz clic en Añadir plantilla para añadir una plantilla de dos columnas para tu página de inicio de sesión.
- Ve a la pestaña Bloques y busca Services.
- Desliza hacia abajo y selecciona la plantilla del bloque Image Service.
Como solo estamos usando este elemento como plantilla, necesitamos personalizarlo para poner nuestro contenido en él, así que necesitamos personalizar el texto y cambiar los elementos de la columna.
- Cambia el título de la plantilla del bloque por Inicio de sesión.
- Haz clic con el botón derecho en el botón de configuración de la columna izquierda.
- Haz clic en Borrar para eliminar el cuadro de imagen de esta columna.
- Haz clic con el botón derecho en el botón de configuración de la columna derecha.
- Haz clic en Borrar para eliminar el cuadro de imagen de esta columna.
Una vez que hayas eliminado los cuadros de imagen, tienes que usar la función de arrastrar y soltar de Elementor para añadir nuevos elementos.
Usa el panel izquierdo para buscar los siguientes elementos y añadirlos a la página:
- Imagen: Añade tu logo en la columna de la izquierda.
- Shortcode: Añade el siguiente shortcode en la columna de la derecha: [wp_frontend_admin_login_form]. Este shortcode viene incluido con WP Frontend Admin y te permite mostrar el formulario de inicio de sesión.
Después de eso, abre la configuración de la sección principal. Vamos a cambiar el fondo de la sección.
Para cambiar el fondo de la sección:
- Ir a Estilo en la configuración de la sección.
- Haz clic en Elegir imagen y selecciona la imagen de fondo de la biblioteca de medios o de tu ordenador.
Ahora vamos a cambiar el color de la cabecera de la página:
- Haz clic en Editar Cabecera.
- Ir a Estilo > Cabecera > Color del texto, y selecciona el color que quieras añadir al texto.
Después de eso, podemos establecer un fondo suave para nuestro logotipo:
- Haz clic en Editar columna.
- Ir a Estilo > Fondo > Color, y selecciona el color y la transparencia que quieras.
A continuación, vamos a añadir un fondo blanco a nuestro formulario de acceso:
- Haz clic en Editar columna.
- Ir a Estilo > Fondo > Color, y selecciona color blanco.
Una vez que hayas terminado con eso, puedes hacer clic en Publicar y la página de inicio de sesión se publicará.
Una vez que hemos publicado nuestra página de inicio de sesión, podemos verla desde otro navegador en el que no hayamos iniciado sesión. Debería tener el mismo aspecto que hemos configurado.
Ahora tienes que añadir un botón de “Iniciar sesión” en la página de inicio.
- Ir al wp-admin del sitio principal de la red.
- Ir a Páginas.
- Edita la página de Inicio con Elementor (la que creamos inicialmente).
- Editar el botón de “Inicio de Sesión”.
- Pega la URL de la página de Login o Inicio de Sesión que acabas de crear en el campo Enlace.
- Haz clic en Actualizar para guardar los cambios.
TU PÁGINA DE ACCESO ESTÁ LISTA.
Después de estos sencillos pasos, cada vez que los usuarios hagan clic en el botón de inicio de sesión, serán enviados a la nueva página de inicio de sesión en el sitio del dashboard y permanecerán en el dashboard frontend.