Crear una tarjeta con efecto hover en Elementor es una excelente manera de añadir interactividad y dinamismo a tu sitio web. A continuación, te guiaré paso a paso para lograr este efecto, incluso si no tienes experiencia previa con Elementor. Mi propósito, en esta entrada, es que dispongas de un tutorial sencillo en el que, paso a paso, consigas el objetivo de crear una card con efecto hover que realce el diseño de tu proyecto personal y profesional.
Creando la tarjeta con efecto hover paso a paso
Partimos de la base de que ya tienes instalado el plugin en tu sitio web, adecuadamente configurado, y has instalado un theme compatible con Elementor. A partir de aquí, seguiremos paso a paso:
Paso 1: Creación de una nueva página o entrada
Para comenzar a diseñar con Elementor:
1. Ve a «Páginas» o «Entradas» en el panel de WordPress.
2. Haz clic en «Añadir nueva».
3. Asigna un título a tu página o entrada.
4. Presiona el botón «Editar con Elementor».
Paso 2: Añadir una sección y una columna
Dentro del editor de Elementor:
1. Haz clic en el botón «+» para añadir una nueva sección.
2. Selecciona la estructura de una sola columna.
Paso 3: Insertar el widget «Caja de imagen»
El widget «Caja de imagen» es ideal para crear tarjetas con imagen, título y descripción:
1. En el panel de widgets de Elementor, busca «Caja de imagen».
2. Arrastra el widget a la columna recién creada.
Paso : Personalizar el contenido de la tarjeta
Configura el contenido de tu tarjeta:
1. Imagen: Haz clic en el área de la imagen para subir o seleccionar una desde tu biblioteca.
2. Título: Escribe el título que desees.
3. Descripción: Añade una breve descripción o texto informativo.
Paso 6: Aplicar estilos a la tarjeta
Para mejorar la apariencia:
1. Ve a la pestaña «Estilo» del widget «Caja de imagen».
2. Ajusta parámetros como el color del texto, tipografía, alineación y espaciado según tus preferencias.
Paso 7: Añadir el efecto hover con CSS personalizado
Para incorporar un efecto hover que amplíe la imagen al pasar el cursor:
1. Selecciona el widget «Caja de imagen».
2. Ve a la pestaña «Avanzado».
3. En el apartado «Clases CSS», escribe una clase personalizada, por ejemplo, tarjeta-hover.
4. Desplázate a «CSS personalizado» y añade el siguiente código:
.tarjeta-hover .elementor-image-box-img {
transition: transform 0.3s ease;
}
.tarjeta-hover:hover .elementor-image-box-img {
transform: scale(1.1);
}Explicación del código:
– .tarjeta-hover .elementor-image-box-img: Selecciona la imagen dentro de la caja de imagen con la clase tarjeta-hover.
– transition: transform 0.3s ease;: Define una transición suave de 0.3 segundos para transformaciones.
– .tarjeta-hover:hover .elementor-image-box-img: Aplica estilos cuando el cursor esté sobre la tarjeta.
– transform: scale(1.1);: Aumenta el tamaño de la imagen al 110% al pasar el cursor.
Concluyendo con el proceso
Siguiendo estos pasos, puedes crear fácilmente una tarjeta con efecto hover en Elementor, mejorando la interactividad y estética de tu sitio web. Este método es accesible incluso para quienes tienen poca o ninguna experiencia con el plugin.
Para complementar este tutorial, te recomiendo visualizar el siguiente video que muestra cómo implementar efectos hover en tarjetas utilizando Elementor:
Si necesitas crear tu propio proyecto web, ya sea personal o profesional, no dudes en contactar conmigo a través de mi página de linkedin o de mi sitio web. Estaré encantado de trabajar para convertir tus objetivos en una realidad.