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

Es muy probable que hayas llegado a una página 404 y hayas abandonado inmediatamente el sitio web porque no te resultó útil. Una página 404 es lo que WordPress muestra cuando alguien ingresa o hace clic en una URL que no existe en su sitio web. Esta página es un error genérico que solo informa al visitante que no se encontró la página. En este artículo, exploraremos cómo crear una página 404 personalizada para WordPress. En el camino, veremos diseños buenos y malos.

¿Por qué crear una página 404 personalizada para WordPress?

Es tentador omitir el diseño de la página 404 porque espera que nadie la vea. Sin embargo, debe ser útil para sus visitantes. Puede ser tan importante como cualquier otra página. Un mensaje general es una mala experiencia de usuario. No se ve bien y no les da ninguna razón para permanecer en su sitio web.

Primero, veamos la página genérica que estamos tratando de evitar.

Página 404 genérica

La página 404 estándar que muestra WordPress es solo un mensaje de error. Se coloca dentro del área de contenido del cuerpo y muestra su encabezado, pie de página y barras laterales si las tiene.

Desafortunadamente, no es útil. Es como preguntarle a un empleado de una tienda si hay algo que está buscando en el pasillo en el que se encuentra y simplemente dice que no. Quiere que le indiquen el pasillo correcto. Quieres más información.

Una página 404 debería brindarle más información. Debería ser útil. Debe proporcionar herramientas, enlaces, consejos o algún tipo de ayuda. No querrá quedarse solo en el pasillo sin saber adónde ir a continuación.

Ejemplos de páginas 404 personalizadas

Hay miles de increíbles páginas 404 en la web. Algunos son divertidos, otros son serios. Algunos son más útiles que otros. Algunos son sencillos, mientras que otros son hermosos. Aquí hay algunas páginas 404 para tener una idea de cómo están diseñadas. Algunos son simples y aburridos, mientras que otros son útiles y se ven geniales.

1. Google

La página 404 de Google (no WordPress) es simple. Es un área pequeña de contenido en el centro de la pantalla. El mensaje solo le dice que hay un error y proporciona un gráfico de un robot en piezas. No proporciona otra información, pero es Google, por lo que todo lo que tiene que hacer es escribir algo más en la barra de búsqueda.

2. WordPress.org

La página 404 de WordPress.org muestra su encabezado y pie de página estándar. El cuerpo incluye un título para mostrar que la página no se encontró, una breve explicación con un toque de humor y luego una lista de enlaces para ayudarlo a guiarlo. Los enlaces se centran en ser útiles.

3. WordPress.com

La página 404 de WordPress.com elimina el encabezado y el pie de página. Muestra un gráfico, un título, una descripción con enlaces en los que se puede hacer clic, un cuadro de búsqueda y el logotipo de WordPress.com. Los enlaces son útiles.

4. Temas elegantes

La página 404 de Elegant Themes (porque sé que vas a mirar de todos modos) muestra el encabezado ET, un título grande con una pequeña explicación y un botón como CTA. Tienes acceso a casi todo desde aquí.

5. Veintiuno

El tema Twenty Twenty-One de WordPress tiene una página 404 que usa los menús principal y de pie de página. Tiene un título grande. El cuerpo tiene una breve descripción y un cuadro de búsqueda. Las líneas se utilizan para peinar. El fondo coincide con el sitio.

6. Veinte veinte

El tema Twenty Twenty de WordPress muestra el encabezado y el pie de página. El cuerpo muestra un título grande en el centro, una explicación y un cuadro de búsqueda. Todos usan los colores del tema.

7. Holgura

La página 404 de Slack (no WordPress) muestra un cuadro en el centro con información sobre el error con un enlace al centro de ayuda. Todos los menús también están aquí. La parte interesante es el fondo. Es un fondo de dibujos animados que se desplaza hacia la derecha o hacia la izquierda para seguir al mouse. Los animales animados se mueven por la pantalla.

8. Amazonas

La página 404 de Amazon (tampoco WordPress) incluye el logotipo de Amazon con un cuadro de búsqueda, un mensaje grande, un mensaje más pequeño con un enlace a la página de inicio y una foto de un animal con un enlace para obtener más información. Incluye muchas fotos diferentes que se pueden mostrar. Son elegidos al azar.

Contenido de la página 404

Entonces, ¿qué necesita una página 404? Vemos algunos elementos comunes en los ejemplos anteriores.

Primero, debe ser útil. No debería decirle al visitante que hay un error. Debería decir qué significa el error. Imagine que se enciende una luz de error en su automóvil. Tu primera pregunta sería "¿qué significa eso?" No proporcionar información útil sobre el error es frustrante.

Los visitantes deben saber si hicieron algo mal o si el contenido no existe. Si no lo saben, seguirán buscando el contenido hasta que abandonen furiosamente el sitio web, prometiendo no volver nunca. Esto se hace mejor con un mensaje simple y posiblemente una imagen que llame la atención. Algo que se destaque de su contenido normal que atraiga a su audiencia.

A continuación, debe proporcionar alguna dirección sobre qué hacer a continuación. Esto podría ser una lista de artículos, un cuadro de búsqueda, una lista de categorías, publicaciones más populares, publicaciones más recientes, una forma de contactarlo, etc.

Es así de simple. Las páginas 404 no necesitan mucho contenido. Solo lo suficiente para ser útil.

El ejemplo anterior incluye:

• Colores de fondo y patrones que coincidirían con el sitio web /
• Un título con un breve mensaje sobre el error.
• Texto grande que muestra que es una página 404.
• Algunos botones proporcionan al visitante algunas direcciones.

Es simple pero elegante y útil. Eso es todo lo que necesitas.

Veamos cómo crear una página 404 personalizada para WordPress usando las ideas de contenido que acabamos de discutir.

Cómo crear una página 404 personalizada en WordPress con Divi Theme Builder

Divi Theme Builder facilita la creación y asignación de una página 404. Elegant Themes tiene varias páginas 404 prefabricadas que puede descargar de forma gratuita. Puede personalizarlos de la forma que desee. Son una excelente manera de comenzar con un diseño de página 404. Si lo prefiere, puede construir uno desde cero.

El ejemplo anterior es del paquete de diseño Fourth Theme Builder. Hay muchas páginas 404 disponibles en el blog ET. Para encontrarlos, busque "paquete de diseño de creación de temas" o consúltelos aquí:

• Descargue el primer paquete de creación de temas GRATUITO para Divi
• Descargue el segundo paquete de creación de temas GRATUITO para Divi
• Descargue el tercer paquete de creación de temas GRATUITO para Divi
• Descargue el cuarto paquete de creación de temas GRATUITO para Divi
• Descargue el quinto paquete de creación de temas GRATUITO para Divi
• Descargue el sexto paquete de creación de temas GRATUITO para Divi

Importación de una página 404 personalizada en Divi Theme Builder

Encontrará Divi Theme Builder en el panel de WordPress yendo a Divi > Theme Builder . Esto abre la página donde puede crear o importar plantillas y asignarlas. En la esquina superior derecha, verá el icono de importación. Haga clic en este icono para importar su plantilla de página 404.

Nota: para ver tutoriales sobre el uso de Divi Theme Builder, busque "theme builder" aquí en el blog Elegant Themes.

Se abre un modal donde puede importar su plantilla. Seleccione Importar y navegue hasta su archivo en Elegir archivo . Las opciones para anular los valores predeterminados y las asignaciones están seleccionadas de forma predeterminada. Recomiendo dejarlos seleccionados. Haga clic para importar la plantilla en la parte inferior del modal. Estoy importando la página 404 para el paquete de diseño de financiación colectiva.

Al importar una página 404, se asigna automáticamente. A continuación, haga clic en el icono de edición para abrir el constructor.

Ahora, haga sus ediciones dentro de cada módulo agregando sus enlaces, imágenes, colores, texto, etc. Guarde el diseño y haga clic en la x en la esquina superior derecha para cerrar el constructor.

Finalmente, guarde los cambios para aplicar la plantilla. Ahora tiene una página 404 personalizada.

Creación de una página 404 personalizada con Divi Theme Builder

En Theme Builder, seleccione para agregar una nueva plantilla.

Esto abre la configuración de la plantilla. Desplácese hasta la parte inferior y seleccione Página 404 en Otro . A continuación, haga clic en Crear plantilla . La configuración de la plantilla se cerrará.

Ahora, puede crear la página 404. La mayoría no usa un encabezado o pie de página. Seleccione Agregar cuerpo personalizado .

Esto muestra dos selecciones que le permiten crear un cuerpo personalizado o agregar desde la biblioteca. Seleccione Crear cuerpo personalizado .

Cree la página 404 con Divi Builder como de costumbre. Guardar y Salir.

Finalmente, guarde sus cambios. Ya terminaste.

Poner fin a los pensamientos sobre la creación de una página 404 personalizada para WordPress

Ese es nuestro vistazo a cómo crear una página 404 personalizada para WordPress. Las páginas 404 deben ser útiles. Desafortunadamente, la página 404 de WordPress genérica no es útil y proporciona una mala experiencia de usuario. Afortunadamente, puede crear su propia página 404 utilizando Divi Theme Builder.

Con la información que proporcionamos aquí, está en camino de crear una hermosa página 404 que brinda a los usuarios una gran experiencia y se ve increíble mientras lo hace.

Queremos escuchar de ti. ¿Ha creado una página 404 personalizada para su sitio web de WordPress? Háganos saber nuestra experiencia en los comentarios.

Imagen destacada a través de Letters-Shmetters / shutterstock.com