En este tutorial aprenderás a personalizar tu página de error 404 en WordPress sin la necesidad de usar Elementor Pro o instalar plugins adicionales. Este método te permite ofrecer una mejor experiencia a los usuarios cuando llegan a una página que no existe en tu sitio web.

¿Qué es la Página de Error 404?

La página de error 404 es la que aparece cuando un visitante intenta acceder a una URL que no existe en tu sitio web. Puede deberse a un enlace roto o a que el usuario haya escrito mal la dirección. Personalizar esta página es importante para guiar al usuario de vuelta a tu sitio de manera amigable y profesional.

Pasos para Crear tu Página 404 Personalizada

1. Crea la Página 404 en Elementor Aunque no tengas Elementor Pro, puedes crear una página en blanco y diseñarla como quieras utilizando la versión gratuita de Elementor. Agrega elementos como un mensaje de error personalizado, un botón de retorno a la página de inicio, o incluso un campo de búsqueda.
2. Asignar el Estilo a la Página 404 desde el Archivo PHP Una vez tengas tu página diseñada en Elementor, necesitamos conectarla con el archivo 404.php de tu tema para que WordPress la utilice cuando ocurra un error 404. Si estás usando un tema hijo (recomendado para mantener tus personalizaciones seguras), crea un archivo llamado 404.php en la carpeta del tema hijo.
3. Código PHP para Mostrar la Página Personalizada A continuación, coloca el siguiente código en tu archivo 404.php. Este código se encargará de llamar a la página que creaste en Elementor.

Explicación del Código:

• ID de la página: Reemplaza 2370 con el ID de la página 404 que creaste con Elementor.
• Contenedor personalizado: El div principal asegura que el diseño de Elementor se mantenga intacto y no sea sobreescrito por estilos del tema.
• Estilos: Se incluyen algunos estilos CSS básicos para asegurarse de que las proporciones y fuentes de la página no se vean alteradas al mostrarse en diferentes dispositivos.

Encuentra el ID de la Página 404 Para obtener el ID de la página 404 creada en Elementor, ve al panel de WordPress, busca tu página de error 404, y en la URL del navegador verás algo como post=2370. Ese número es el ID de tu página.

Sube el Archivo al Servidor Una vez hayas creado y guardado el archivo 404.php, sube este archivo a la carpeta de tu tema hijo en el servidor a través de cPanel o FTP en la ruta wp-content/themes/tu-tema-hijo/.

Conclusión y Pruebas

Personalizar tu página de error 404 sin necesidad de Elementor Pro o plugins adicionales es una excelente manera de mejorar la experiencia del usuario en tu sitio web. Siguiendo estos pasos, podrás crear una página visualmente atractiva y funcional que ayude a los visitantes a encontrar lo que buscan.

Realiza Pruebas

Después de implementar tu página 404 personalizada, es importante realizar pruebas para asegurarte de que funciona correctamente:

1. Prueba en diferentes navegadores y dispositivos: Verifica que la página se vea bien en dispositivos móviles, tablets y pantallas de escritorio. Asegúrate de que los estilos y el diseño de Elementor se mantengan intactos.
2. Prueba enlaces rotos: Ingresa a cualquier URL inexistente de tu sitio para ver si se muestra correctamente la página 404 personalizada. Por ejemplo, prueba una URL como tusitio.com/esta-pagina-no-existe para confirmar que se activa el diseño que has creado.
3. Verifica la carga de scripts y estilos: Asegúrate de que todos los scripts y estilos de Elementor se carguen correctamente, incluso si el visitante llega a la página 404 desde diferentes partes del sitio.

Si todo está en orden, tu página 404 personalizada estará lista para ser usada, ofreciendo una experiencia más profesional y atractiva a tus visitantes. ¡Buena suerte!