Elementor

Cómo crear una llamada a la acción en Elementor

Widget llamada a la acción en Elementor

Tabla de contenidos

¿Qué es el widget de llamada a la acción en Elementor?

El Widget de Llamada a la acción en Elementor tiene como objetivo mejorar la tasa de conversión de tu página web. Con este widget puedes crear banners para que los usuarios se suscriban a una newsletter, se descarguen un archivo, compren un producto, se registren en un evento o cualquier otra acción que quieras llevar a cabo.

Paso 1. Añade el Widget al lienzo

Widget Llamada a la acción
Widget Llamada a la acción en Elementor

Haz clic en el Widget de Llamada a la acción, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Elige el Estilo de la Imagen

En la pestaña Contenido > Imagen > Elige el Estilo entre: Clásico y Cubrir.

Estilo clásico
Estilo clásico

Si eliges el Estilo Clásico:

  • Posición: Elige la posición de la imagen en relación con el contenido. Las opciones son: Izquierda, Arriba y Derecha.
  • Seleccionar imagen: Presiona sobre este recuadro para elegir una imagen de la biblioteca multimedia o sube una imagen nueva.
  • Resolución de imagen: Configura el tamaño de la imagen.
Estilo cubrir
Estilo cubrir

Si eliges Estilo Cubrir:

Esta opción no te permite elegir la posición de la imagen. Sin embargo, la imagen cubrirá todo el fondo y se ajustará al tamaño de cualquier dispositivo.

  • Seleccionar imagen: Presiona sobre este recuadro para elegir una imagen de la biblioteca multimedia o sube una imagen nueva.
  • Resolución de imagen: Configura el tamaño de la imagen.

Paso 3. Elige el Elemento gráfico del Contenido

En la pestaña Contenido > Elemento Gráfico > Elige entre: Ninguno, Imagen o Icono.

Elemento gráfico Imagen
Elemento gráfico Imagen

Si eliges la opción de Imagen:

  • Seleccionar imagen: Elige una imagen de la biblioteca de medio o sube una imagen nueva.
  • Resolución de la imagen: Elige un tamaño para la imagen.

Revisa el tutorial Cómo insertar una imagen en Elementor para saber más.

Elemento gráfico Icono
Elemento gráfico Icono

Si eliges la opción de Icono:

  • Icono: Selecciona un icono de la biblioteca de FontAwesome o sube un icono personalizado en formato SVG.
  • Ver: Elige entre Por defecto, Apilados o Encuadrado.
  • Forma: Si has elegido Apilado o Encuadrado, elige Círculo o Cuadrado.

Revisa el tutorial Cómo añadir iconos en Elementor para saber más.

Paso 4. Edita el Contenido

Contenido
Contenido
  • Título: Escribe el encabezado de la llamada a la acción.
  • Etiqueta HTML del título: Elige la etiqueta HTML para el título y la descripción de tu caja de doble. Esto ayudará a los motores de búsqueda a entender mejor la jerarquía de información y mejorará el SEO. Puedes elegir entre H1 y H6, párrafo, span o div.
  • Descripción: Escribe un texto corto para la descripción.
  • Etiqueta HTML de la descripción: Elige la etiqueta HTML para el título y la descripción de tu caja de doble. Esto ayudará a los motores de búsqueda a entender mejor la jerarquía de información y mejorará el SEO. Puedes elegir entre H1 y H6, párrafo, span o div.
  • Texto del botón: Escribe el texto que aparece en el botón
  • Enlace: Usa el campo Enlace para añadir la opción de hacer clic en tu Cuadro de imagen. Puedes elegir entre: Ninguno, Archivo de medios y URL personalizada. Haz clic en el icono de ajustes (⚙️) para configurar el enlace. Ahora tienes la opción de abrir en enlace en una nueva pestaña o añadir la etiqueta “nofollow”. Además, puedes añadir atributos personalizados al enlace. Para hacerlo, separa las claves de los valores usando el carácter ‘|’ (barra vertical) y separa los pares de valores-clave con una coma.

Paso 5. Edita la Cinta

Cinta
Cinta
  • Título: Escribe el texto que quieres poner sobre la cinta.
  • Posición. Elige la posición de la cinta: Izquierda o derecha.

Escrito por:

Richi Pérez

Richi Pérez

11/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Por qué usar fuentes y colores globales en Elementor? Para unificar el aspecto de un sitio web, es...

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...