X

Cómo crear una página de error 404 personalizada en WordPress

404 error page in wp

¿Está intentando crear una página de error 404 en WordPress?

Una página de error 404 es donde su público aterrizará si intentan abrir o acceder a una página que no se pudo encontrar en el servidor. Al mostrar una página 404, básicamente haces saber a tus visitantes que la página no existe.

Mientras que las páginas de error 404 son geniales para hacer saber a tus visitantes sobre el error que ha ocurrido, también tiene el potencial de hacerte perder a tus visitantes.

Esto se debe a que la página 404 correcta puede perjudicar o ayudar a su experiencia de usuario (UX).

Al diseñar esta página correctamente, puede guiar estratégicamente a sus usuarios para que encuentren la página que están buscando. Esta es una excelente manera de retener a los visitantes en su sitio web y disminuir su tasa de rebote en lugar de hacer que abandonen su sitio.

En esta guía, le mostraremos cómo diseñar una página de error 404 de la forma más sencilla y sin necesidad de codificación.

También le diremos qué causa un error 404 y cómo solucionarlo. Al final, le mostraremos algunos de los mejores e inspiradores ejemplos de páginas de error 404 para que los consulte antes de crear su página.

No dude en utilizar este índice para encontrar la sección adecuada para usted:

  1. Cuáles son las causas del
  2. error 404

  3. C
  4. ómo

  5. solucionar
  6. el error 404

  7. C
  8. ómo

  9. diseñar una página de error 404 con SeedProd
  10. Los

  11. mejores ejemplos de páginas de error 404 para inspirarse

Comencemos.

Cuál es la causa de la página de error 404

Generalmente, una página de error 404 aparece cuando sus visitantes intentan encontrar un contenido que ha sido borrado, eliminado o trasladado a otra URL.

Pero puede haber otras razones por las que sus visitantes vean este mensaje de error. Por ejemplo:

  1. La URL slug de la página buscada ha sido cambiada sin la redirección adecuada. Así que cuando buscan una página, sus usuarios encuentran la página original con la URL original. Echa un vistazo a estos plugins de redirección cuidadosamente seleccionados para WordPress.
  2. El nombre de dominio que se ha buscado ya no existe. Lo más probable es que esto se deba a que el usuario ha introducido una URL incorrecta
  3. El servidor responsable del sitio web no está funcionando o la conexión está interrumpida.

Y una vez que identifique el problema, tendrá que averiguar cómo solucionarlo.

Cómo solucionar el error 404

Aterrizar en una página de error 404 puede ser frustrante. Y por eso debes saber cómo solucionarlo. Aquí tienes algunos consejos que puedes probar si alguna vez ves una página de error 404 en tu sitio o en el de otra persona.

  1. Comprueba si hay errores en la URL: Lo primero que hay que hacer es comprobar si hay errores en la URL. Asegúrate de que la URL que has introducido es correcta y no contiene palabras mal escritas ni caracteres que falten, como una barra oblicua, un guión, etc.
  2. Borra la caché y las cookies de tu navegador: Esta solución funcionará como por arte de magia si sólo puedes ver la página de error 404 desde un determinado ordenador. En estos casos, intenta borrar la caché de tu navegador así como todas las cookies de este sitio e inténtalo de nuevo.
  3. Recarga la página: A veces la solución a una página de error 404 puede encontrarse simplemente recargando tu página. Por lo tanto, actualiza tu página para ver si la página funciona.
  4. Compruebe los niveles del directorio: Si la URL que muestra el error tiene la siguiente estructura: ejemplo.com/Directorio1/Directorio2/Directorio3, puedes volver a un directorio anterior. Por ejemplo, puede ir a ejemplo. com/Directorio1/Directorio2/ para comprobar si la página deseada se encuentra allí. Si no funciona, vuelva a otro directorio.
  5. Ponte en contacto directamente con el sitio web: Otro buen paso para encontrar una solución sería contactar directamente con el sitio web. Encontrará los datos de contacto en algún lugar de la página de inicio del sitio web. Ellos deberían poder decirte si han eliminado completamente la página.
  6. Utiliza la función de búsqueda del sitio web: También puedes utilizar la función de búsqueda del sitio web e introducir una o varias palabras clave para encontrar la página que buscas.

Ahora le mostraremos cómo crear una página de error 404 para su sitio web. Esta sección es útil para los propietarios de sitios web que quieran mostrar esta página de error a sus usuarios.

Cómo diseñar una página de error 404 con SeedProd

Para diseñar la página de error 404 en este tutorial, vamos a utilizar el constructor de páginas SeedProd.

SeedProd landing page builder for WordPress

SeedProd es un poderoso plugin constructor de páginas de arrastrar y soltar que le permite crear hermosas páginas de destino para su sitio web, sin necesidad de saber ningún código. Esto incluye páginas de error 404, páginas de modo de mantenimiento, próximas páginas, páginas de ventas y mucho más.

SeedProd ofrece plantillas de páginas 404 diseñadas profesionalmente para que pueda empezar rápidamente. Además, puede personalizar fácilmente su página de error 404 con bloques listos para usar como formularios de suscripción, botones, imágenes, vídeos y mucho más.

Puede obtener más información sobre SeedProd en esta revisión detallada.

Paso 1: Instalación de SeedProd en su sitio web

Para empezar, primero necesita instalar y activar el plugin SeedProd en su sitio web WordPress.

Una vez instalado y activado, puede introducir la clave de licencia para acceder a todas las funciones, activar el soporte y recibir actualizaciones. Puede encontrar la clave de licencia en su cuenta SeedProd que se creó cuando compró el producto. Copie la clave y péguela en el campo correspondiente. A continuación, haga clic en el botón Verificar clave.

add seedprod license

Una vez validada la clave de licencia, podrás empezar a utilizar el plugin.

Desplácese más abajo en la página y haga clic en el botón Crear su primera página. Serás redirigido al panel de SeedProd donde podrás crear una página de error 404.

Paso 2: Crear una página de error 404

En la parte superior del panel de SeedProd, hay 4 páginas diferentes que puede crear:

  • Modo Coming Soon: Crear expectación antes del lanzamiento de su sitio.
  • Modo demantenimiento: Ponga su sitio en modo de mantenimiento para trabajar en él entre bastidores.
  • Página de inicio de sesión: Cree una página de inicio de sesión personalizada para su sitio web.
  • Página404: Reemplaza la página 404 por defecto con una página 404 personalizada.

set up a 404 page with seedprod

Haz clic en el botón Configurar una página 404 para empezar.

A continuación, se le pedirá que elija una plantilla para su página de error 404. SeedProd ofrece una serie de elegantes plantillas diseñadas específicamente para páginas de error 404. También puede elegir una plantilla en blanco para empezar desde cero.

choose from the 404 error page templates

Elija cualquier plantilla que le guste pasando el ratón sobre ella y haciendo clic en el botón de marca de verificación.

Paso 3: Personalice su página de error 404

Después de elegir una plantilla, serás redirigido al constructor visual de SeedProd donde puedes empezar a personalizar tu página de error 404.

En el lado izquierdo de la pantalla, hay Bloques y Secciones ya hechas que puede agregar a su página 404. Y en el lado derecho, puede ver una vista previa en vivo de su página de error 404.

use the visual builder to customize 404 page

Simplemente arrastra y suelta cualquier Bloque que quieras de la derecha y suéltalo en tu página 404 de la izquierda.

Por ejemplo, puedes añadir un formulario de suscripción para recopilar direcciones de correo electrónico en tu página de error 404, como en el ejemplo siguiente:

También puede añadir imágenes, vídeos, botones, perfiles sociales, secciones de preguntas frecuentes, formularios de contacto y mucho más. Y puede hacer clic en cualquier sección para personalizarla aún más cambiando el texto, el estilo, el color, etc.

Cuando estés satisfecho con el aspecto de tu página de error 404, haz clic en el botón Guardar.

Paso 4: Conectar su servicio de marketing por correo electrónico

Si ha añadido un formulario de suscripción a su página de error 404, como hicimos en el ejemplo anterior, deberá conectar su servicio de marketing por correo electrónico.

Para ello, haga clic en la pestaña Conectar en la parte superior de la pantalla. Puede elegir entre cualquiera de los proveedores de servicios de correo electrónico más populares, como Constant Contact, Drip, Mailchimp y otros.

connecct email marketing services to your 404 error page

Elige tu proveedor de marketing por correo electrónico y haz clic en Conectar.

A continuación, rellena los datos de tu cuenta y vuelve a hacer clic en Conectar.

connect 404 page to email marketing provider

A partir de ese momento, todos los correos electrónicos recogidos en tu página de error 404 se añadirán automáticamente a tu lista de correo electrónico.

Paso 5: Publicación y activación de la página de error 404

El último paso es publicar y activar su página de error 404. Para ello, haga clic en la flecha desplegable situada junto al botón Guardar en la esquina superior izquierda de la pantalla. Haga clic en el botón Publicar.

publish the 404 error page

Para activar la página, vaya a SeedProd ” Páginas de su área de administración de WordPress y luego ir a la sección 404 Página.

activate the 404 error page

Simplemente cambia el botón de Inactivo a Activo.

Su página de error 404 estará ahora activa. Cualquiera que haga clic en un enlace roto verá esta página.

live 404 page example from seedprod

Y ya está. Su página 404 está lista. Fácil, ¿verdad?

Veamos ahora algunos ejemplos de páginas 404 que te pueden servir de inspiración para diseñar la tuya.

Los mejores ejemplos de páginas de error 404 para inspirarse

Para ayudarte a diseñar mejor tu página de error 404, te traemos algunos ejemplos para que te inspires.

1. Página de error 404 de Themeisle

Themeisle 404 error page

La página de error 404 de Themeisle no sólo es visualmente atractiva, sino que también ofrece una solución a los visitantes para encontrar lo que estaban buscando. Ha añadido a su página un campo de búsqueda en el que los visitantes pueden introducir una o varias palabras clave de la página que querían visitar.

Es una forma estupenda de retener a sus usuarios y dirigirlos al lugar donde originalmente querían estar.

2. Página de error 404 por Andrew Colling

404 error by Andrew Collin

La página de error 404 de Andrew es otro ejemplo que puede servirte de inspiración. Añade un bonito gráfico que resuena con la descripción añadida justo debajo del título e intenta con humor redirigir a sus visitantes de vuelta a la página de inicio. Añade un pegadizo botón de llamada a la acción (CTA ) para dirigir a la gente a una página en la que puedan navegar por el sitio web.

3. Página de error 404 por Ryan Duffy

404 erro by Ryan Duffy, inspiring 404 error page

El diseño de Ryan Duffy es sencillo pero impactante. Indica a sus visitantes que, al igual que un accidente, aterrizar en la página de error 404 no es intencionado. Pero al mismo tiempo, también les muestra una salida de esa página mediante la CTA de vuelta a la página de inicio.

4. Página de error 404 por Matt

404 error by Matt

Esta página es diferente de las otras mencionadas anteriormente. No sólo informa a sus visitantes de que la página no existe, sino que también ofrece diferentes soluciones. Añade diferentes enlaces en la cabecera que pueden ayudar al visitante a ir a otras secciones del sitio web.

En realidad, esta es una forma estupenda de atraer al visitante porque le estás dando diferentes opciones, así que es libre de elegir lo que quiere hacer.

Y así es como se crea una página de error 404 en WordPress. Esperamos que este artículo le ayude a crear una hermosa página de error 404 para su sitio.

Una vez que hayas terminado de crear tu página de error, puede que quieras echar un vistazo a algunos plugins que pueden ayudarte a encontrar y arreglar enlaces rotos fácilmente en tu sitio web.

Esto le ayudará a aumentar la UX al deshacerse de enlaces muertos o rotos en su sitio.

Esperamos que le haya gustado esta guía. Puede que también quieras ver nuestros otros recursos:

Estas publicaciones le ayudarán a mejorar la experiencia del usuario, atraer más tráfico a su sitio y mejorar las conversiones.

Comentarios   Deja una respuesta

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Tenga en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de privacidad , y que todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

WordPress Launch Checklist

La lista definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de comprobación para el lanzamiento de su próximo sitio web de WordPress en un práctico ebook.
Sí, envíeme el ¡gratuito!