Cómo editar página 404 en WordPress con Elementor

En este pequeño tutorial te enseñaré cómo utilizar Elementor Pro para crear una página 404 en Wordpress 100% personalizada en simples pasos.
Escrito por: Mat QV
Actualizado: 27 junio, 2020

Cuando un visitante llega a tu web a una página que no existe (porque la borraste o cambiaste la URL), lo que generalmente se encontrará será una página vacía sin mucha información. Esto es una pésima práctica, sobre todo porque muy probablemente ese usuario se vaya de tu web sin explorar nada más.

Ante esto, traigo la solución.

Gracias a Elementor Pro, tu página 404 en WordPress puede ser mucho más que una página con error, puede ser una parte íntegra del funcionamiento de tu web, optimizada para capturar a tus visitantes y guiarlos hacia contenidos que puedan interesarles.

En este tutorial les enseñaré cómo transformar sus páginas 404 de esto:

Personalizar tu pagina 404 en WordPress con Elementor

A diseños como estos:

Personalizar tu pagina 404 en WordPress con Elementor

Partamos.

¿Cómo identifico si tengo errores 404 en mi sitio WordPress?

Hay varias formas de identificar tus errores 404, una de las más comunes es haciendo uso de Google Analytics para explorar cuántas personas están llegando a una página con error. Sin embargo, en este tutorial asumiré que no estás usando Google Analytics y te daré una alternativa más simple (y gratis).

Solución: Instala Rank Math SEO ¿por qué?, porque aparte de ofrecerte una suite completa para la optimización del SEO on-page de tus sitios WordPress, también incluye un monitor 404 con el que no sólo podrás ver a qué páginas inexistentes están llegando tus usuarios, también (si activas el módulo de redirecciones) podrás programar redirecciones en caso de que lo necesites.

Personalizar tu pagina 404 en WordPress con Elementor

Qué incluir en una página 404 en WordPress

El principal objetivo que deberías tener a la hora de personalizar tu página 404 en WordPress, es que dicha página ayude a guiar a tus visitantes hacia el contenido que estaban buscando u otro que pueda ser de su interés.

Para lograr esto, primero debes preguntarte qué cosas quieres destacar de tu sitio y cómo esas cosas pueden ayudar a tu visitante a tener una buena experiencia en tu web. Estas son algunas de las cosas que te recomendaría agregar en tu página 404:

  • Agrega un mensaje o una explicación de por qué no están viendo el contenido que esperaban. La mayor parte de las personas no tiene idea qué significa un “error 404”, por lo mismo, comunicar que se encontraron con un error es una buena práctica.
  • Aparte de el mensaje (opcional, pero útil), es recomendable dejar una pequeña caja de búsqueda para que el usuario pueda buscar y, quizás, encontrar lo que venía a ver en tu web.
  • Enlaces a tu contenido más atractivo e importante, de esta forma, incluso si no encontraban lo que habían venido a buscar, quizás se queden con otro artículo de tu sitio y eviten abandonarlo.
  • Puedes incluso agregar tus últimas publicaciones del blog.
  • Puedes agregar enlaces de contacto para resolver dudas o problemas y capturar a tus visitantes.

De todas formas, una página 404 debería hablar el mismo lenguaje de tu marca o, es decir, si quieres poner algo serio, o algo chistoso, la decisión es tuya, la idea es convencer al usuario que aunque se haya encontrado con un error, en tu sitio encontrará lo que busca y más.

Y si puedes sacarle un par de carcajadas aparte de ayudarlo ¿qué mejor?, con Elementor Pro tienes infinitas posibilidades en cuanto al diseño de tu página 404.

Ejemplos de páginas 404

Buzzfeed

Buzzfeed tiene un acercamiento simple para su página 404, un pequeño mensaje que le avisa al usuario que llegó a una página inexistente y le entrega la opción de volver al Home.

Personalizar tu pagina 404 en WordPress con Elementor

Pixar

Pixar hace uso de la comedia para sorprender y divertir a los visitantes que llegan a una página con error.

Personalizar tu pagina 404 en WordPress con Elementor

Elementor

Y ya que hablamos de elementor ¿qué hacen ellos?, simple, le avisan al usuario que llegó a una página con error que contiene una animación interactiva con la que el usuario puede divertirse en caso de que quiera hacerlo (yo estuve pegado varios minutos), y también le suman un llamado a la acción donde le enseñan al usuario a crear una página como esa usando Elementor Pro, ingenioso ¿no creen?

Personalizar tu pagina 404 en WordPress con Elementor

Pero bueno, ya pudieron ver algunas ideas de qué hacer para personalizar su página 404 en WordPress, ahora, les mostraré paso por paso cómo creé la página 404 de este sitio, es simple, minimalista, pero mejor que una página en blanco.

Cómo crear una página 404 con Elementor paso a paso

Instala Elementor Pro

Lo primero que necesitarás es Instalar Elementor Pro, si aún no lo tienes, acá puedes adquirir una licencia.

Una vez instalado y activado en tu sitio WordPress, navega a Plantilas Theme Builder Agregar Nueva

Personalizar tu pagina 404 en WordPress con Elementor

Luego, en el tipo de plantilla que quieres crear selecciona “Single“, en el Post Type selecciona “Página 404” y finalmente, elige el nombre que quieras para la plantilla (con ese nombre la identificarás una vez quieras utilizarla.

Personalizar tu pagina 404 en WordPress con Elementor

Al precionar crear plantilla, te llevará directamente al editor visual de Elementor donde comenzarás a personalizar (como quieras y cuanto quieraS) tu página 404 de WordPress. Lo primero que verás será la galería de diseños predefinidos de Elementor Pro, éstas pueden ser de gran ayudas si no tienes una idea en mente y pueden servirte como base para comenzar tu diseño.

En este caso, yo elegí la que está seleccionada porque me servía para la idea que tenía en mente. Lo único que tienes que hacer es presionar en “INSERTAR” y el diseño se importará desde los servidores de Elementor directamente a tu página.

Personalizar tu pagina 404 en WordPress con Elementor

Personaliza tu página 404

Una vez importada el diseño base elegido (ojo, también puedes partir desde 0 en caso de que quieras hacerlo), es momento de personalizar a gusto. Lo primero que quise modificar, fue la fotografía de fondo del costado derecho por algo que fuera más conmigo, estos son los pasos que seguí:

Personalizar tu pagina 404 en WordPress con Elementor
  • Presioné el botón para editar la columna con la foto,
  • Luego fui a la pestaña de estilo y seleccioné una imagen que fuera más acorde a lo que quería (en este caso, busqué un gif de Matrix y lo subí reemplazando el rostro del bebé).
  • Como no quería que la imagen abarcara todo el fondo, cambié el tamaño de Abarcar a Contiene, luego cambié la opción de “Repetir” desde Por defecto a No Repetir de esta forma la imagen no se repetiría ni estiraría en la columna.
  • En la pestaña avanzado hice algunos cambios en el margen derecho para darle un poco más de espacio, pero nada más, obviamente estas son mis elecciones, tú puedes hacer lo que quieras para personalizar a tu gusto.
  • Luego seguí con el texto, primero cambié el color del número 404 haciendo click en el título y luego en la pestaña de Estilo.
Personalizar tu pagina 404 en WordPress con Elementor
  • Edité el texto del mensaje para que hiciera un juego con la famosa escena de Matrix
  • Finalmente, como quería que hubiesen dos botones uno al lado del otro, inserté el bloque de “Sección Interior”, para poder tener dos columnas en vez de una.
Personalizar tu pagina 404 en WordPress con Elementor
  • Dupliqué el botón básico, le modifiqué los colores al de la izquierda para que se asemejara a la “píldora roja” y luego cambié el segundo botón para que fuera la “píldora azul”.
  • Y listo, mi página estaba completa.
Personalizar tu pagina 404 en WordPress con Elementor

Como pueden ver, personalizar tu página 404 de WordPress con Elementor es bastante simple, y en este tutorial sólo hice una exploración básica de lo que se puede lograr en pocos minutos. Sin embargo, con la cantidad de bloques y opciones que te ofrece el Theme Builder de Elementor, puedes hacer lo que literalmente se te de la gana; agregar productos de tu tienda, agregar un formulario de contacto, artículos de tu blog, imágenes, videos, lo que tengas en mente.

Si les interesa ver el resultado en vivo, pueden hacer click aquí para verla funcionando, si no, acá les dejo una imagen (ojo, en la versión en vivo pueden ver el gif moverse, obviamente).

Personalizar tu pagina 404 en WordPress con Elementor

Conclusión

Con la cantidad de herramientas que tenemos disponibles en la actualidad, no debería existir ningún sitio sin una página 404 personalizada. Tener el error básico y horrible, no sólo da un mensaje pésimo de tu página web, sino también, se convierte en una oportunidad perdida gigantesca.

Si bien no todos los días alguien llegará a una página 404, es importante tenerlas optimizadas o personalizadas para que cuando llegue ese alguien, no de media vuelta y nunca más vuelva a tu sitio.

Haz la prueba! Ponle comedia, datos, juegos, lo que estimes conveniente, no sólo lo pasarás bien diseñándola, también estarás sumándole puntos a tu web y, la próxima vez que alguien llegue a una página de error, lo primero que hará será sorprenderse con tu diseño y luego pensará en si quiere irse o no.

Como siempre, si tienen dudas, déjenlas acá abajo, las responderé en el menor tiempo posible. Respondo todos los comentarios.

¡Nos leemos!

Deja un comentario

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

Ir arriba