Como personalizar la página de ingreso en WordPress

La página de ingreso de WordPress tiene un diseño que muy posiblemente no refleja el mismo estilo de diseño que tu sitio web o empresa. Modificar la página de ingreso normalmente requeriría que utilices código CSS y HTML para modificar los archivos de tu plantilla y de WordPress, pero en este video tutorial te mostraremos como puedes modificar la página de ingreso fácilmente y sin el uso de código.

https://vimeo.com/152050821

En este video tutorial utilizamos el plugin: Custom Login Page Customizer

[x_accordion_item title=»Transcripción del video»]

Buen día, bienvenido a este nuevo video de josel63.sg-host.com, mi nombre es José Lievano y en este video descubriremos como modificar la página de login de nuestro WordPress. La página de ingreso de WordPress puede parecer un poco simple y casi seguramente no se encuentra en la misma línea de diseño que tu empresa.

Entonces vamos a entrar en WordPress para poder modificar esta pantalla a nuestro gusto. Primero instalaremos un plugin llamado Custom Login Page Customizer, así que entramos en plugins, añadir nuevo y buscamos el plugin. Recuerda que si te encuentras viendo este video en nuestro sitio web, encontrarás el enlace al plugin abajo del video y si te encuentras en YouTube encontraras el link a este artículo en nuestra web debajo en la descripción.

Muy bien, instalamos el plugin y lo activamos. Ahora si vamos hacia apariencia, encontraremos el nuevo elemento en nuestro menú, llamado login customizer. Para iniciar con el diseño de nuestra página de ingreso, daremos clic en el botón rojo. Lo que hace este botón, es abrir el personalizador, y nos carga la página de ingreso dentro del personalizador. Desde el personalizador podremos encontrar todas las opciones que nuestra plantilla tiene, y lo haremos ahora es buscar las nuevas opciones que tenemos aquí, en login customizer.

Como puedes ver podemos modificar el logo, el fondo, el fondo del formulario, el estilo del formulario, los estilos de los campos, el estilo del botón para ingresar y más opciones. Iniciemos con el logo, desde aquí podemos ir al gestor multimedia para seleccionar o subir nuestro logo. Como puedes ver el logo no se ve muy bien, eso es debido a que desde aquí debemos indicarle el tamaño que debe tener la imagen de logo, y como ves actualmente se encuentra en 84 por 84 pixeles. Así que vamos a cambiarlo hacia 250 pixeles de ancho y 35 de alto. Y ahora nuestro logo se ve mucho mejor.

Vamos a regresar y entramos en las opciones del fondo. Aquí podemos seleccionar también una imagen para mostrarla como fondo pero si lo deseas puedes simplemente seleccionar un color desde aquí. En nuestro caso utilizaremos una imagen que hemos subido previamente. Solo con el cambio del logo y la imagen de fondo, nuestra página de ingreso ya se siente completamente diferente. Si deseas tener una mejor pre visualización dentro del personalizador, podemos contraer sus opciones con este botón. Y lo expandimos nuevamente aquí.

Si regresamos a todas las opciones, podemos incluso ir más lejos y modificar otras zonas de nuestra página de ingreso. Desde form styling podemos modificar el tamaño del formulario, por ejemplo, en este caso lo haremos un poco más ancho, y lo cambiaremos a 400px. Desde fiel styling podemos modificar el color de fondo, el texto y el texto label de los campos en el formulario, por ejemplo, cambiaremos a ver el color de fondo en los campos de texto.

Si nos equivocamos, siempre podemos dar clic en predeterminado dentro del selector de colores para regresarlo a su valor por defecto. Desde button styling puedes modificar los colores del botón de ingreso. Y en otros, nos permite modificar el color del texto que se muestra abajo del formulario, ahí se muestra la opción para recordar la contraseña o para regresar a la página principal.

El primero es el color normal y el segundo es el color al colocar el ratón sobre el texto. Si tienes conocimientos de CSS podrás modificar esta página prácticamente sin límites, ya que puedes añadir tu propio código CSS desde este campo. Espero que este video sea de ayuda, no dudes en visitarnos si deseas saber más sobre WordPress, contamos con tutoriales y video cursos completos sobre WordPress completamente gratis. Mi nombre es José Lievano y nos veremos en un próximo video tutorial de josel63.sg-host.com

[/x_accordion_item]

 

4 Comentarios

  1. maria helena lozano martinez

    hola, estoy tratando de entrar me pide correo lo escribo y no me da, pregunta, tengo que cambiar el correo y contraseña para poder asceder. Gracias

    Responder
    • upempresa

      Buen día, desde el personalizador no debe ingresar a WordPress, le muestra esa ventana únicamente para que pueda previsualizar los cambios que hace en el diseño de la ventana de ingreso.
      Saludos.

      Responder
  2. BERNA

    Excelente Video, Te felicito eres muy didáctico
    Tengo una inquietud,..tengo varias paginas o post y deseo que de acuerdo al tipo de usuario se dirija a su pagina correspondiente CON UN LOGIN

    Responder

Enviar un comentario

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