Elementor

Cómo crear una tabla de precios en Elementor

widget tabla de precios

Tabla de contenidos

¿Qué es el widget de Tabla de precios en Elementor?

El Widget de Tabla de precios en Elementor te permite crear tablas de precios para mostrar los diferentes planes, servicios o productos que ofreces en tu sitio web. Puedes personalizar el diseño de la tabla, añadir columnas con información, precios e incluso incluir un botón para que los usuarios puedan suscribirse o comprar directamente desde la tabla de precios. Es muy útil si ofreces servicios de suscripción, planes de membresía o packs de productos.

¿Cómo usar el widget de Tabla de precios en Elementor?

Paso 1. Añade el Widget al lienzo

Widget Tabla de precios
Widget Tabla de precios

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

Paso 2. Elige una de las cinco secciones

En la pestaña Contenido, encontrarás cinco secciones: Cabecera, Precios, Características, Pie de página y Cinta. Cada sección tiene ajustes de personalización que se desplegarán al seleccionarlas.

En la sección Cabecera:

Sección Cabecera
Sección Cabecera
  • Título: Añade un título para tu plan de precios. Como ejemplo podrías usar: Básico, estándar y Premium.
  • Descripción: Escribe información adicional o una breve descripción sobre el plan de precios.
  • Etiqueta HTL de título: Elige una etiqueta HTML para el título entre H2 y H6.

En la sección Precios:

Sección Precios
Sección Precios
  • Símbolo de la moneda: Selecciona el símbolo de moneda que quieres usar o elige Personalizado para escribir uno.
  • Precio: Escribe el precio exacto que quieres cobrar, incluidos los decimales.
  • Formato de moneda: Elige si quieres que los decimales se vean del tamaño del precio o más pequeños.
  • Oferta: Activa esta opción para mostrar el precio original tachado y el precio de venta con descuento.
  • Periodo: Especifica cada cuanto tiempo se van a realizar los pagos (por ejemplo, cada mes o cada año).

En la sección Características:

Sección Características
Sección Características

Haz clic sobre el botón + Añadir elemento para agregar una nueva Característica.

Al hacer clic en el botón, encontrarás las siguientes opciones de personalización:

  • Texto: Escribe una característica (por ejemplo, Atención al cliente 24//, 7 días a la semana…).
  • Icono: Elige un icono usando la Biblioteca de icono o sube un icono en SVG. La biblioteca de iconos tiene varios, pero siempre puedes añadir alguno que no exista.
  • Color de icono: Elige un color para el icono.

Repite estos pasos para cada una una de las características que quieres añadir al menú. Escribe un texto, elige un icono y elige el color del icono.

Para duplicar o eliminar elementos, haz clic sobre el icono de Duplicar o Eliminar.

En la sección Pie de página:

Sección Pie de página
Sección Pie de página
  • Texto del Botón: Escribe el texto que quieres que aparezca en el botón. Por ejemplo:
  • 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.
  • Información adicional: Añade información adicional o exepciones de responsabilidad debajo del botón.

En la sección Cinta:

Sección Cinta
Sección Cinta
  • Mostrar: Activa esta opción para mostrar el elemento de cinta en la tabla de precios.
  • Título: Escribe el texto que quieres que aparezca en la cinta.
  • Posición: Elige donde quieres que aparezca la cinta. Puedes elegir que la cinta aparezca a la derecha o la ziquierda de la tabla.

Escrito por:

Richi Pérez

Richi Pérez

06/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...