Elementor

Cómo añadir un listado de iconos en Elementor

Cómo añadir un listado de iconos en Elementor

Tabla de contenidos

¿Qué es el Widget de Listado de iconos en Elementor?

El Widget de Listado de iconos en Elementor sirve para crear listas de características, puntos destacados, servicios o cualquier otro tipo de información.

Puedes personalizar el color de los iconos, subir un icono propio, modificar el tamaño del texto o el espacio entre el icono y el texto. Esto te permite tener el control total sobre el diseño.

¿Cómo usar el Widget de Listado de iconos en Elementor?

Paso 1. Añade el Widget al lienzo

Widget Listado de iconos
Widget Listado de iconos

Haz clic en el Widget de Listado de iconos, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Elige la disposición del listado de iconos

Disposición
Disposición

En la pestaña Contenido > Listado de iconos > Disposición > elige entre Por defecto o Integrado.

  • Por defecto: ordena los iconos uno debajo del otro, en formato vertical.
  • Integrado: ordena los iconos horizontalmente, uno al lado del otro.

Paso 3. Añade o eliminar nuevos elementos

Listado de iconos
Listado de iconos

Cuando creas un nuevo listado de iconos, viene con tres elementos por defecto. Puedes eliminar o añadir elementos a esta lista según lo que necesites.

  • Haz clic en el botón + Añadir elemento para agregar un nuevo elemento a la lista.
  • Para duplicar o eliminar elementos, haz clic en los iconos Duplicar o Eliminar elemento.

Paso 4. Edita las características

Elementos
Elementos

Haz clic sobre un elemento individual para empezar a editar sus características.

  • Texto: Usa este campo para escribir el texto que acompaña al icono.
  • Icono: Elige un icono. Esta opción te permite elegir un icono de la Biblioteca de iconos o subir un icono en formato

Paso 5. Añade un Enlace

Enlace
Enlace

Usa el campo Enlace para escribir una URL y enlazar el icono a una página de tu web.

Paso 6. Configura el enlace

Aplicar el enlace en
Aplicar el enlace en

En el campo Aplicar el enlace en, puedes elegir entre dos opciones: Ancho completo o Integrado.

Paso 7. Personaliza el Estilo de la Lista

Estilo de la Lista
Estilo de la Lista

Personaliza el estilo del espacio intermedio entre el texto y el icono, la alineación del listado y añade una separación entre cada uno de los elementos del listado.

Paso 8. Personaliza el Estilo del Icono

Estilo del Icono
Estilo del Icono

Personaliza el color del icono, el tamaño, el espacio entre el icono y el texto, la alineación horizontal y vertical y ajusta la posición vertical.

Paso 9. Personaliza el Estilo del Texto

Estilo del Texto
Estilo del Texto

Personaliza la tipografía, la sombra del texto, el color y la duración de la transición.

Escrito por:

Richi Pérez

Richi Pérez

09/05/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Cuál es el color del signo de Aries? Signo: Aries Color: Rojo Planeta: Marte Gema/metal: Rubí Razón: Marte...

¿Qué es el widget de Ancla de menú en Elementor? El Widget de Ancla de menú en Elementor te...

¿Qué es el widget de HTML en Elementor? El Widget de HTML en Elementor te permite incrustar código...