Cómo añadir animaciones con css en tema personalizado

webmaster — Tue, 28 Feb 2023 19:29:22 +0000

Descripción

Para hacer tus webs más atractivas, una de las alternativas es el uso de animaciones, en Drupal puedes añadir librerías externas siguiendo los siguientes pasos.

webmaster Mar, 28/02/2023 - 20:29

Instrucciones

Para añadir animaciones en tu tema personalizado o Subtheme:

Descarga la librería animate.css desde aquí y luego descomprime el archivo, renómbralo a animate.css y deja dentro solamente animate.min.css
Coloca el archivo renombrado dentro de tu subtheme en la carpeta css.
Abre el archivo TUSUBTHEME.libraries.yml ya añade la ruta para cargar las animaciones (Respetando los espacios).
A continuación visita la Página Oficial del Animate css para consultar los efectos disponibles en tiempo real.
Abre la plantilla en la que quieres aplicar el efecto de animación y añade las clases correspondientes como indican en su página oficial, primero "animate_animated" + "CLASE EFECTO" + "CLASE DURACIÓN"
No olvides refrescar CACHÉ para que el efecto pueda verse.

Paginador

Categoría

Portada

Hover Effects

webmaster — Sun, 26 Feb 2023 15:27:27 +0000

Hover Effects webmaster Dom, 26/02/2023 - 16:27

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

Si te apasionan las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aquí 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.

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.

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.

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.

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: http://gudh.github.io/ihover/dist/index.html

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 .

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.

Ahora, para hacerlo más interesante, crearemos una vista en formato bloque, donde mostraremos la imagen y el título de cada artículo. De esta manera, podremos apreciar mejor, la potencia de este módulo.

Paso 1 - Creación de la vista tipo bloque: Lo primero que tendremos que hacer, será crear una vista, tipo bloque, en la que mostraremos la imagen y el título para los artículos, así que nos iremos a la url "/admin/structure/views/add", o navegaremos por el menú superior, en caso de tener el módulo Admin_toolbar instalado.

Paso 2 - Configuración de la vista: Una vez creada nuestra vista, nos aseguraremos de haber seleccionado Campos, y añadiremos, para este ejemplo, el campo imagen, ya que, por defecto, se ha añadido ya el campo título.

Paso 3 - Ajustes en el campo imagen: Si volvemos a la página de muestas para los efectos, notaremos que utilizan la url de las imágenes, en lugar de la imagen propiamente dicha, por esta razón, modificaremos el campo imagen, para que muestre la url con su ubicación. Para ello, haremos clic en el botón editar a la dercha del campo y a continuación, cambiaremos en el selector, por el valor url.

Paso 4 - Activación de la vista Bloque: Ahora que tenemos los cambios necesarios, nos dirigiremos a la página de configuración para los bloques, ubicada en "/admin/structure/block", y activaremos nuestro bloque, para que se muestre en la página principal.

Paso 6 - Primera comprobación de resultados: Lo próximo que tendremos que hacer, será dirigirnos a nuestra página principal, para ver el resultado que hemos obtenido. Por ahora, deberíamos ver, los títulos de los artículos, acompañados por las urls de cada imagen principal.

Paso 7 - Reescribir la vista: Si todo lo anterior ha funcionado según lo que esperábamos, entonces es el momento de aplicar el código que asociado al efecto que más nos guste y a continuación, pegarlo en la plantilla sugerida por Drupal, sustituyendo los valores que hagan falta.

Si no sabes cómo se reescribe una vista, Te lo explico en estos dos artículos:

Personzalizando Vistas Parte 1: HAZ CLIC AQUÍ

Personalinzando Vistas Parte 2: HAZ CLIC AQUI

Categoría