Es muy probable que haya aterrizado en una página 404 e inmediatamente abandone el sitio web porque no fue ú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 simplemente 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.
Es tentador saltarse 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 el encabezado, el pie de página y las barras laterales, si las tiene.
Desafortunadamente, no es útil. Es como preguntarle al empleado de una tienda si algo que estás buscando está en el pasillo en el que estás y simplemente dice que no. Quiere que le indiquen el pasillo correcto. Quiere más información.
Una página 404 debería darle más información. Debería ser útil. Debe proporcionar herramientas, enlaces, consejos o algún tipo de ayuda. No querrás quedarte solo en el pasillo sin saber a dónde ir después.
Ejemplos de páginas 404 personalizadas
Hay miles de increíbles páginas 404 en la web. Algunos son divertidos, algunos son serios. Algunos son más útiles que otros. Algunos son simples, mientras que otros son hermosos. Aquí hay un vistazo a 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 una pequeña área de contenido en el centro de la pantalla. El mensaje simplemente le dice que hay un error y proporciona un gráfico de un robot en pedazos. No proporciona otra información, pero es Google, así que todo lo que tienes 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 no se encontró la página, una breve explicación con un toque de humor y luego una lista de enlaces para 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 utiliza 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 el estilo. 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 están aquí también. Lo interesante es el fondo. Es un fondo de dibujos animados que se desplaza hacia la derecha o hacia la izquierda para seguir el movimiento del 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. Se eligen al azar.
Contenido de la página 404
Entonces, ¿qué necesita una página 404? Vemos algunos elementos comunes en los ejemplos anteriores.
En primer lugar, tiene que ser útil. No debería simplemente 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. Su primera pregunta sería «¿qué significa eso?» No proporcionar información útil sobre el error es frustrante.
Los visitantes necesitan 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, jurando no volver nunca más. Esto se hace mejor con un mensaje simple y posiblemente con 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 de 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.
- Unos botones que proporcionan al visitante algunas indicaciones.
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. Puedes personalizarlos como quieras. Son una excelente manera de obtener una ventaja inicial en un diseño de página 404. Si lo prefiere, puede construir uno desde cero.
El ejemplo anterior es del paquete de diseño del cuarto generador de temas. Hay muchas páginas 404 disponibles en el blog de ET. Para encontrarlos, busque «paquete de diseño de generador de temas» o échales un vistazo aquí:
- Descargue el primer paquete de creación de temas GRATIS para Divi
- Descargue el segundo paquete de creación de temas GRATIS para Divi
- Descargue el tercer paquete de creación de temas GRATIS para Divi
- Descargue el cuarto paquete de creación de temas GRATIS para Divi
- Descarga el quinto paquete de creación de temas GRATIS para Divi
- Descarga GRATIS el Sexto Theme Builder Pack para Divi
Importación de una página 404 personalizada en Divi Theme Builder
Encontrarás Divi Theme Builder en el panel de control 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 obtener tutoriales sobre el uso de Divi Theme Builder, busque «theme builder» aquí en el blog de 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 se seleccionan 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 Crowdfunding .
Al importar una página 404, se asigna automáticamente. A continuación, haga clic en el icono de edición para abrir el generador.
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 generador.
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 404 Página 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 agregarlo 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. Estás listo.
Pensamientos finales 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 genérica de WordPress 404 no es útil y proporciona una experiencia de usuario deficiente. Afortunadamente, puedes crear tu propia página 404 usando Divi Theme Builder.
Usando la información que proporcionamos aquí, está bien encaminado para crear una hermosa página 404 que brinde a los usuarios una gran experiencia y se vea increíble mientras lo hace.
Queremos escuchar de ti. ¿Ha creado una página 404 personalizada para su sitio web de WordPress? Cuéntanos nuestra experiencia en los comentarios.
Imagen destacada a través de Letters-Shmetters / shutterstock.com