Ya entramos de lleno en la implementación del diseño de la renovada web de Kodyto. Y de la misma forma en que concluimos el diseño comenzamos con la implementación, y es que ya está listo el nuevo header, footer, el blog y las entradas. Detallamos a continuación cada uno de estos componentes que han sufrido cambios, empezando por el header.
Header
El header, al igual que el footer, ha quedado tal como está en el diseño. Lo único que se ha hecho adicional a esto es el efecto de los enlaces de la navegación al pasar el ratón por encima. Al hacerlo, una línea del color del enlace parte desde el centro en ambas direcciones hasta cubrir todo el ancho del mismo.
Además, se ha establecido este widget de seleción de idiomas del plugin GTranslate en la parte inferior izquierda del sitio, ahora de forma más visual.
Footer
Si comparas la imagen del diseño con esta de la implementación tampoco notarás la diferencia. Lo único que es diferente es el color de las líneas separadoras, que es más suave. Además, el logo es un poco más pequeño.
Blog
Aquí de igual manera se mantiene fiel al diseño, con el único recorte del buscador, y que luego diré por qué. Aquí he añadido un efecto de «fade in down» de duración normal al contenedor con el título y el texto complementario. El header que se ve aquí es otro que he creado con los estilos apropiados para esta sección. Este tiene dos logotipos, el principal y el naranja.
Lo he hecho así porque sólo esta sección tiene el fondo naranja. Más abajo el fondo es del color blanco habitual. Por lo tanto, lo que he hecho ha sido establecer este header inicial y pasados cierto número de píxeles los estilos cambian, convirtiéndose en el header primario de la web. Y para no tener que hacer peticiones al servidor por el logo cada vez que el header cambiara lo que hice fue agregar dos logotipos con opacidad variable. Esto, sumado a la propiedad «transition» hace que el cambio sea gradual y óptimo.
Luego, tenemos a la nueva sección de «Artículo Destacado»:
La idea con esta sección es mostrarle a potenciales clientes el contenido que yo quiero que vean. Lo he hecho sobre la base de una plantilla «loop item» de Elementor y luego lo he añadido a la página del blog con el elemento «loop grid», y desde este se selecciona el artículo. Por parte del diseño poco ha cambiado, así que pasamos directamente a las cards de las entradas.
Como ves, aquí está el buscador que debería estar en principio en la sección inicial. ¿A qué se debe este cambio? Hay dos razones. La primera es que el plugin que se ha utilizado para añadir esta funcionalidad, Ajax Smart Filter, no permite separar el filtrador del contenedor con las cards. Intentar hacerlo es más complejo porque requiere escribir código, aunque es posible. Pero esto nos lleva a la segunda razón.
En principio no tenía pensado crear una sección de Artículo Destacado, la agregué más tarde al diseño. Pero después de darle vueltas he llegado a la conclusión de que es más intuitivo para el usuario el diseño que está establecido por defecto en el plugin. Y no se ve nada mal además.
Por lo demás poco hay que decir. El buscador filtra por palabras clave, categorías y etiquetas. Las cards hacen una consulta a las entradas en la base de datos y muestran un artículo en cada una de ellas; estas se muestran en orden descendente comenzando por las más recientes. Y cada card contiene los metadatos básicos: imagen, categoría, título, excerpt, fecha, autor y «leer más». Por supuesto, de nada sirve que el blog se vea bien si las entradas no tienen una bonita apariencia.
Entradas
El contenido de las entradas ahora está centrado, no más información ruidosa e innecesaria alrededor; cuando sea oportuno se añadirá un panel en uno de los laterales con información realmente útil. Al inicio de la entrada está, típicamente, la imagen destacada del artículo. Debajo está el título y más abajo la meta información: autor, fecha, hora y categoría; todos este texto se encuentra en un formato perfectamente legible y no está enlazado de ninguna manera.
Justo debajo de eso están los enlaces para compartir en redes sociales, con un color sobrio. Abajo está primer párrafo del artículo y debajo de este está la tabla de contenidos.
La tabla de contenidos la he insertado mediante el plugin Easy Table of Contents. No he usado la tabla de contenidos que viene con Elementor porque ésta se inserta siempre antes de todo el contenido del artículo. Sin embargo, Easy Table of Contents permite insertar la tabla antes del primer encabezado, por lo que queda después del primer párrafo. Como este resultado es más deseable he acabado utilizando el plugin también en la nueva web.
Después de todo el contenido del artículo está el bloque con la información del autor: nombre, email y biografía.
Y abajo del todo está la prometedora sección de artículos relacionados. El diseño de las cards está hecho igualmente sobre un «loop item» de Elementor e intenté hacerlo lo más parecido posible al diseño de las cards de Ajax Smart Filter para mantener la consistencia. Estas cards están agrupadas en un elemento «loop grid» que muestra entradas según las etiquetas. Debajo están los botones de anterior y siguiente. Estoy seguro de que esta nueva sección será provechosa.
Lo más difícil
El blog, las entradas y otros componentes del sitio como el header y el footer ya están correctamente implementados en la nueva web, así que en cuanto a diseño muy poco queda ya. Sólo falta crear la página de inicio. En esta página hay dos secciones que, por ser hechas a medida, serán un poco más complejas de crear: la sección de testimonios y la sección de proyectos. En ambas habrá un slider que posiblemente sea diseñado desde cero. Y dentro del slider de proyectos habrá también un botón switch para cambiar entre vista desde escritorio y desde móvil. ¿Qué plugins utilizaré? ¿Hará falta escribir código? Ya lo veremos. Sólo queda por tu parte esperar y por la mía trabajar.
