Personalizar la página de acceso a la administración de WordPress con Divi

30 de abril - 2024

El formulario de acceso a la administración de WordPress tiene siempre el mismo aspecto, austero y sencillo, independientemente de quien haya creado la web, el idioma que se haya utilizado o la parte del mundo donde se creó o esté alojada.

Esta página se muestra a menudo a diferentes usuarios, los cuales acceden al contenido del sitio para añadir nuevas cosas, gestionar propiedades o acceder a zonas restringidas.

Ofrecer un aspecto personalizado de la página de acceso a la administración de WordPress puede ser una buena práctica para dar un toque de calidad y profesionalidad cuando, por ejemplo, entregamos un nuevo proyecto terminado a un cliente, o queremos ofrecer una marca blanca donde no aparezcan indicios de WordPress.

Suscríbete:

Formulario de acceso con Divi

En este tutorial vamos a realizar el diseño de una página de acceso a WordPress con el constructor Divi, así que si no lo tienesl, no podrás seguir los pasos.

Puedes conseguir el tema Divi de forma gratuita si te suscribes a Elegant Themes y cancelas la suscripción antes de que pasen 30 días, pero te recomiendo que adquieras la suscripción de por vida (liftime) y te quedes con ella, así no tendrás problemas de versiones, de seguridad, de actualizaciones o compatibilidades con otros elementos de WordPress en el futuro.

Instalar el tema Divi en WordPress

Esquema de instalación de Divi

Antes de empezar a diseñar la página de acceso a la administración de WordPress con Divi, es necesario tener instalado el tema, subiéndolo a nuestro WordPress desde la pestaña "Temas".

Seguidamente ya podemos crear una nueva página, pero antes de usar el constructor "Divi Builder", en lugar del editor por defecto de WordPress, tenemos que poner un nombre al título de la página y seleccionar en la columna de la derecha "Blank Page" (página en blanco) en la opción "Plantilla".

Preparación de la página del formulario de acceso a WordPress en Divi
Propiedades de la nueva página de acceso

Dentro de las opciones que aparecen para iniciar el diseño de una nueva página, elegimos la primera, "Construir desde cero", y a partir de ahí empezamos con la magia de los módulos, secciones y filas de Divi.

Configurar el acceso a la administración de WordPress con Divi

Al contar con numerosos módulos, vamos a poder diseñar y colocar casi cualquier cosa que queramos en la página de acceso a WordPress, y no limitarnos a mostrar sólo los campos de un simple formulario. Desde cualquier tipo de imagen, enlaces personalizados, artículos publicados o productos, si se tratase de una tienda.

Añadir los módulo de Divi para la página de acceso

Para este ejemplo voy a ser muy básico y a respetar los elementos que muestra WordPress, pero adaptados y modificados a mi gusto.

  1. Imagen de Logotipo (módulo de imagen)
  2. Formulario de acceso (módulo de iniciar sesión)
  3. Enlace a página principal (módulo de texto)
  4. Enlace a textos legales (módulo de texto)
Página por defecto del formulario de acceso a la administración de WordPress
Página por defecto del formulario de acceso a la administración de WordPress
Resultado de la página de acceso creada con Divi
Resultado de la página de acceso creada con Divi

El esquema de los módulos quedaría de la siguiente manera:

Módulos de la página de acceso a WordPress
Módulos de Divi para la página de acceso

Al instalar todos los módulos de una vez sin ir configurándolos, quedará todo descolocado, pero ahora lo solucionaremos paso a paso empezando de abajo arriba, esto es, empezando por la sección que contiene el resto de elementos.

Configurar la sección de divi de la página de acceso

Primero vamos a ver lo que haremos y luego aplicamos los cambios. La sección debe ocupar toda la pantalla, independientemente del dispositivo donde se muestre, para que la imagen de fondo que utilizaremos llene siempre todo el espacio.

Antes de empezar a modificar las opciones de la sección, debemos tener presente que la imagen que utilicemos de fondo tiene que contar con una calidad decente para que no se vea borrosa o pixelada.

Como recomendación, si la imagen es abstracta, bastará con un tamaño de 1200 píxeles de ancho intentando reducir el peso del archivo al máximo que se pueda.

En el apartado "Fondo" de la pestaña "Contenido", añadimos la imagen que hemos elegido para el fondo e indicamos, en el apartado del tamaño, que cubra siempre toda la pantalla.

Dependiendo de la parte que más nos guste de la fotografía, elegimos la posición más adecuada.

Imagen de fondo para la sección de Divi
Imagen de fondo de la sección

En la pestaña "Diseño", añadimos los valores del tamaño:

  • Anchura 100%
  • Alineado al centro
  • Altura 100vh (altura vertical completa)
Tamaño de la sección
Tamaño de la sección

Y también ponemos a cero todos los espacios de las separaciones.

Separaciones de la sección de la página de acceso
Separación de la sección

Colocar logotipo o marca principal

Si queremos mostrar un logotipo o una marca, utilizaremos un módulo de imagen, como el que hemos añadido al configurar la página. Puede ser identificativo de la web a la que accedemos o, por ejemplo, de la empresa que ha diseñado el sitio.

Si es pertinente, colocamos un link que dirija a un destino concreto al picar sobre el logotipo.

Imagen con logotipo
Módulo de imagen con logotipo y enlace

Desde la pestaña "Diseño" ajustamos el tamaño, procurando que no exceda de unos 200 o 250 píxeles para que se pueda ver bien en los dispositivos móviles.

Tamaño del logotipo de la página de acceso a la administración de WordPress
Tamaño del logotipo

Configuración del módulo de inicio de sesión

Este módulo puede tener muchas interpretaciones, puedes dejarlo como aparece en dos columnas, cambiar los colores y modificar todas las opciones que quieras dentro de las propiedades del módulo, ya que los campos más importantes, el nombre y la contraseña, ya están configurados.

En mi caso sí que voy a cambiar el aspecto a una sola columna para que ocupe menos espacio, y para eso accedemos a la pestaña "Avanzado", opción "CSS Personalizado", y a los elementos del módulo para añadir lo siguiente en los campos de "Descripción de inicio de sesión" y "Formulario de inicio de sesión":

CSS del módulo de inicio de sesión de Divi
CSS del módulo de inicio de sesión de Divi

En la pestaña "Contenido" cambiamos el texto del título del módulo y de la descripción. En el apartado "Fondo" cambiamos o elegimos otro color:

  • Título: ACCESO A LA ADMINISTRACIÓN
  • Descripción: Datos de acceso
  • Fondo: Transparente

Dentro de la pestaña "Diseño" lo más importante es el tamaño y la separación, configurando una anchura máxima de 350px y una separación de 0px en todas partes.

Anchura del módulo de inicio de sesión
Anchura y separación del módulo de inicio de sesión

El resto de opciones son más personales y pueden ir a gusto de cada persona, o siguiendo una línea corporativa del sitio.

En mi caso he añadido una sombra a los campos del usuario y contraseña, personalizado el botón con fondo negro y cambiado el tamaño y la posición del título.

Enlaces a la página principal y textos legales

Los links, o enlaces de la página de acceso a la administración de WordPress creada con Divi, se realizan con módulos de texto, podemos utilizar módulos independientes para cada enlace o utilizar un solo módulo donde añadir los dos links.

Ambos enlaces se configuran igual cambiando el texto y el link usando las opciones del editor de texto que trae el módulo.

Enlaces en la página de acceso a la administración de WordPress
Enlaces en la página de acceso

Con todo esto ya tendríamos terminada la página de acceso a la administración de WordPress, pero falta el paso más importante, sustituir la página actual por defecto de WordPress por la que hemos diseñado nosotros.

Cambiar la URL de acceso a la administración de WordPress

Aquí se complica la cosa un poco, pero no tanto como para tener que abandonar, aunque no tengas conocimientos de programación, yo te voy a dar todo el código y donde debes colocarlo.

Son tres líneas de código php que se pueden colocar en diferentes sitios según las preferencias, puedes añadirlo al archivo "functions.php" de un tema hijo o crear tu propio archivo que puedes subir a WordPress como si fuese un plugin para activarlo y desactivarlo cuando quieras.

En el siguiente código tienes que poner la URL de la página que hemos creado sustituyendo donde pone "Aquí tu URL" manteniendo las comillas, en mi caso, la URL de mi nueva página es "https://www.aprendepasoapaso.com/accesowp". (Por supuesto que la cambiaré por seguridad una vez que termine de publicar este artículo).

Si tienes un tema hijo

El código de arriba es el que tendremos que colocar al final del archivo "functions.php" del tema hijo.

Puedes aprender a crear un tema hijo desde cero en este tutorial.

Cambiar URL de acceso con tu propio archivo

Los pasos a seguir son muy sencillos:

  • Crear el archivo php
  • Guardarlo en una carpeta y comprimirlo en .zip
  • Subirlo a WordPress como un plugin y activarlo

Si no quieres crear un tema hijo, la mejor opción es abrir un bloc de notas o un editor de código gratuito como "Visual Studio Code" (no uses el WordPad o el Word de Office porque no valen para escribir código y te dará un error) y colocar el siguiente código:

Los datos que aparecen puedes personalizarlos con los tuyos sin problema.

A la hora de guardarlo lo nombramos con un nombre sencillo, sin espacios y con la extensión .php, por ejemplo "funcion.php" o "cambiourlacceso.php"

El archivo resultante hay que meterlo en una carpeta con el mismo nombre que aparece en la cabecera del código, en el apartado "Plugin Name", que es AccesoWP, y comprimirlo en formato .zip (Si tienes acceso al hosting puedes subir la carpeta sin comprimir dentro de la ruta donde se colocan los plugins).

Con el archivo comprimido, accedemos a WordPress, al apartado de plugins, y lo subimos e instalamos como cualquier otro plugin. Luego lo activamos y ya empezaría a funcionar.

Sal del administrador y accede de nuevo, aparecerá directamente la nueva página de acceso a la administración de WordPress que hemos diseñado y personalizado.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento