Hover Effects

    Si eres un apasionado de las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aqui tienes un módulo que te facilitará este proceso. Se trata del módulo contribuido Hover Effects, que una vez instalado, te permitirá aplicar una gran cantidad de efectos en tus contenidos, modificando ligeramente tus plantillas twig, obteniendo un aspecto más atractivo en tus diseños.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     El módulo no tiene página de configuración, así que lo único que necesitarás, una vez lo hayas instalado y activado, es visitar la página de muestra, que está en su página oficial, para que puedas ver y compiar en tus plantillas y elegir la combinación de efectos que más te convenga.

Requisitos

     Tener instalado un Subtema basado en Bootstrap.

     Para aprender a instalar un subtema basado en Bootstrap 3 HAZ CLIC AQUÍ
 

     Para aprender a instalar un subtema basado en Bootstrap Barrio 4/5 HAZ CLIC AQUÍ
 

     Para aprender a instalar un subtema basado en Bootstrap 5 HAZ CLIC AQUÍ

Cómo instalar y configurar el módulo:

Paso 1 Descargar el módulo:

     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Paso 2 Activación del módulo :

     Para activar el módulo Hover Effects, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en hover_effects -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.   

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Paso 3 - Visitar y elegir el efecto y estructura que quieres:

     Tan pronto como tengas activado el módulo hover effects, sólo tendrás que visitar la página de demostración, el enlace lo tienes en su página oficial:

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

 

     Una vez sepas cuál es el efecto que deseas añadir a tus contenidos, tendrás que activar el modo debug, para conocer los nombres de las plantillas sugeridas por drupal, y de esta forma modificar sólamente el o los contenidos que te interesen. 

     Hay varias formas de activar el modo debug, puedes hacerlo según la Página oficial de Drupal, pero yo suelo recomendar esta manera: HAZ CLIC AQUI .

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   Cómo aplicar los efectos del módulo Hover Effects

        En este caso, ya hemos activado el modo debug, para conocer los nombres sugeridos por drupal, y así afectar al contenido que nos interesa, en este ejemplo, serán los artículos, así que he creado dos artículos, que es uno de los tipos de contenido que nos viene con Drupal por defecto, y lo único que he añadido es una imagen a cada uno y un poco de texto.

        No he modificado nada más de los artículos, ni del drupal, así que si hacemos clic en el logo o vamos a nuestra página principal de Drupal, deberíamos ver los dos artículos en modo de vista resumido o teaser, con un aspecto parecido a la siguiente imagen.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

        Colocados en la página principal, haremos clic en la tecla F-12 o Clic derecho sobre la pantalla y buscaremos la opción Inspeccionar, para ver el siguiente resultado:

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Drupal nos está sugiriendo utilizar la plantilla de la vista que muestra los contenidos por defecto en la página principal, en este caso, el listado de los artículos que hemos creado. 

     A continuación, buscaremos la plantilla modelo, la copiaremos en nuestro tema personalizado y le cambiaremos el nombre, para poder aplicar los cambios necesarios.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Con la plantilla copiada dentro de nuestro subtema, y con el cambio de nombre aplicado, siguiendo las sugerencias de drupal, podremos comenzar con el resto de la implementación del módulo y sus efectos.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

 Primera comprobación

     Para saber si estamos modificando la vista con nuestra plantilla, copiaremos el código que está en el primer ejemplo de la página de efectos y sustituiremos todo el contenido de nuestra plantilla, por él.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Una vez sustituido el código, borraremos la caché de Drupal y volveremos a la página principal para comprobar el resultado obtenido...

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Desgraciadamente, nos daremos cuenta de que el módulo funciona correctamente, pero que lo que se imprime dentro de los elementos, no tiene nada que ver con lo que tenermos en nuestra vista.

     Para solucionarlo, crearemos nuestra propia vista, del tipo campos en este caso, de esta manera, podremos añadir todos los campos relacionado, dento de cada una de las etiquetas que vienen en el modelo.

     Creando nueva vista de "Artículos destacados"

     Ahora crearemos una nueva vista del tipo bloque, que mostrará los campos título e imagen, con la modificación de que el valor para el campo imagen, será la url en lugar de la imagen renderizada.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     El siguiente paso será activar el bloque de esta vista, en la url "/admin/structure/block", para que se muestre en la página principal.

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Si ahora volvemos a la página principal de nuestro Drupal, deberíamos ver algo como la siguiente imagen:

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Este es el momento en el que repetiremos los pasos de la vista anterior, para conocer el nombre de la plantilla sugerida, copiarla, cambiarla el nombre y al final, sólo neceistaremos añadir los valores de cada campo donde corresponde:

 

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

hover effects drupal module | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Categoría