Creando una página 404
Lo siguiente para mí fue crear una página 404, la cual es una plantilla de WordPress que se utiliza cuando el usuario intenta localizar un recurso en la página que no existe. Entonces el sitio le dirá que el recurso solicitado no existe.
Usualmente el servidor te da una respuesta, pero estas son feas y sin gracia, usualmente esta te saca del sitio. Pero esto no tiene que ser así, en un tema de WordPress puedes utilizar una plantilla específica para la página 404. Yo me puse a crear una y para buscar inspiración recurrí a Figma.
No soy un diseñador gráfico, así que con las imágenes no me llevo bien. Entonces use el trabajo de una buena persona de la comunidad de Figma, el señor Dimitri Atrash (le agradezco mucho por su trabajo y le mando un saludo). El cual es un marciano simulando un 404.
El archivo SVG es muy bonito, me encanto, pero pensé que animarlo sería bueno, así que hice que la nave del marciano volara al momento de cargar la página, mientras que la luz no se viese sino hasta que estuviera en posición, le quite el botón de abajo, ya que en el sitio estará el encabezado y el pie de página que te permitirá ir a cualquier lado.
Entonces utilice el programa Inkscape hice unos pequeños ajustes, al ser un SVG son muchos trazos sin agrupar así que hice algunos ajustes. Por ejemplos, los números 4, la imagen del marciano y el «not found» son imágenes separadas, todo excepto el marciano los inserte con una etiqueta «img».
El marciano lo inserte como un svg directo en el html. Agrupe las partes que queria animar con la nave del marciano y la luz que sale debajo. Utilizando CSS logre crear la animación.
#grouped-ufo{
animation-name: rotate-ufo;
animation-duration: 1.5s;
}
#descending-light ,.nofound{
visibility: hidden;
animation-name: show-light;
animation-duration: 0.5s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
@keyframes rotate-ufo {
from {
transform: translate(15rem , -20rem) scale(0.5) rotate(-20deg);
transform-origin: center;
}
to {
transform: translate(0 , 0);
transform-origin: center;
}
}
@keyframes show-light{
from{
visibility: hidden;
}
to{
visibility: visible;
}
}
Ya realizado esto solo queda incluirlo en el tema, el cual puedes encontrar aquí. El post con los cambios anteriores los puedes encontrar aquí.
