Cómo crear una lista de precios o productos – Tarifa precios – con wordpress y Elementor Pro + Vídeo

En este post te voy a mostrar cómo podemos crear una lista de precios con wordpress (tarifa de precios), utilizando el Elementor Pro. Muy habitual para mostrar cartas de restaurantes en páginas web, precios peluquerías, dermoestéticas, y cualquier otra tarifa de precios.

Primero te he de aclarar, que no estoy hablando de una tabla de precios, sino de una lista de precios, que no es lo mismo.

Una lista de precios nos sirve para mostrar en una página web un listado de productos con su precio. Es decir, título de producto + breve descripción + precio. El título del producto y el precio siempre estarán en una misma línea horizontal, independientemente del tipo de dispositivo en el que se visualice la página web. Es decir, siempre se va a mostrar una línea horizontal que une el nombre de producto y el precio, y dicha línea modificará su longitud para adaptarse a los diferentes tipos de dispositivos (tablet, móvil o escritorio). Es decir, será responsive.

Este tipo de recurso de lista de precios o tarifa de precios nos puede servir para:

• Crear la carta de un bar o restaurante y mostrarla en nuestra página web
• Lista de precios o tarifa de una peluquería
• En definitiva, crear una tarifa de precios de nuestro negocio y mostrarlo en nuestra web.

 

Como te decía, una tabla de precios es otra cosa. Las tablas de precios sirven para comparar 2, 3 o 4 servicios. En cada uno de los bloques se pone el título del servicio, su precio y sus características y de un vistazo el cliente pude comprarlos todos.

QUIERO ELEMENTOR PRO

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES

VER CURSOS

 

 

 

 

Crear una lista de precios o tarifa con Elementor Pro y WordPress

 

Estamos creando una web con WordPress, y para utilizar este recurso de lista de precios necesitaremos la versión Pro de Elementor page builder.

Elementor, es un constructor, maquetador visual o page builder, como quieras llamarlo y sirve para crear contenido en páginas web realizadas con WordPress. Es, sin duda, uno de los mejores constructores para wordpress.

Elementor tiene una versión gratuita en la que incluye unos elementos básicos. Pero, la lista de precios es un elemento que está incluido en la versión de pago.

Aquí tienes más información sobre Elementor Pro, planes y precios: Elementor Pro

QUIERO ELEMENTOR PRO

 

Elemento Lista de precios o Price List de Elementor

 

El elemento que vamos a utilizar para crear una lista de productos con precio o tarifa de precios en la web es el elemento “Price list” (Lista de precios) del page builder Elementor Pro.

Una vez añadido el elemento veremos que disponemos en su configuración de 3 pestañas: Contenido, Estilo y Avanzado

 

 

Elemento Price List (Lista de precios) – CONTENIDO

 

En esta pestaña crearemos el contenido de la lista de precios. Es decir, los diferentes productos con su correspondiente precio.

Si hacemos clic sobre un elemento de la lista se desplegará y podremos ver las opciones de personalización de cada elemento de la lista:

• Price: precio del producto
• Title: Nombre del producto
• Description: Breve descripción del producto (opcional)
• Image: imagen asociada al producto (opcional). La personalización del tamaño se realiza desde “Estilo”.
• Link: enlace para que al hacer clic en el producto nos lleve a otra página (opcional). Si no queremos enlace debemos poner el símbolo almohadilla.

 

 

Acciones sobre productos de la lista:

• Eliminar: para eliminar un producto de la lista debemos hacer clic en el aspa “x”
• Duplicar: para duplicar un producto de la lista haremos clic en el icono en forma de dos hojas
• Editar: para editar un producto de la lista haremos clic con el botón izquierdo del ratón sobre el producto en cuestión para desplegar las opciones de personalización.
• Añadir Producto a la lista: para añadir un nuevo producto a la lista, haremos clic en el botón “+ AÑADIR ELEMENTO”.

 

 

Elemento Price List (Lista de precios) – ESTILO

 

En esta pestaña encontraremos las opciones de estilo o diseño de la lista de precios o tarifa de precios que hemos creado.

Estas opciones se clasifican en tres apartados: List, Image e Item

 

Apartado List

Title & Price

Color: color del nombre y precio de los productos de la lista

Tipografía: opciones de fuente del título y precio de los productos de la lista, como: tipo fuente, tamaño, peso (grosor), estilo, altura de línea, espaciado de letras, etc.

Description

Color: color descripción del producto de la lista

Tipografía: opciones de fuente de la descripción de los productos de la lista

Separator

Style: tipo de línea que une cada nombre de producto con su precio (lisa, de puntos, rayas, etc.)

Weight: grosor de la línea

Color: color de la línea

Spacing:  espacio o margen entre nombre de producto y línea. Así como entre precio de producto y línea.

 

Apartado Image

Tamaño de la imagen: aquí podremos elegir diferentes opciones de tamaño para la imagen asociada a productos de la lista. Al final, tenemos la opción “personalizado” para establecer una dimensión personalizada.

Border radius: curvatura esquinas de la imagen

Spacing: separación horizontal entre la imagen y el título del producto de la lista

 

Apartado item

Rows gap: separación vertical entre productos de la lista

Vertical align: alineación de imagen con respecto al producto de la lista

 

 

Elemento Price List (Lista de precios) – AVANZADO

 

En este apartado encontraremos elementos globales de todo el bloque de lista de precios. Estas opciones son iguales que en el resto de elementos del paga builder como:

Márgenes y padding (relleno), efectos de movimiento, color o imagen de fondo, bordes, opciones visualización en diferentes dispositivos, etc. Todas estas opciones las puedes ver en mi curso de Elementor

 

 

 

Donde usar una lista de precios o tarifa de precios

 

Existen muchos tipos de páginas web donde seguramente necesitaremos crear una lista de precios, como por ejemplo:

• Carta online de un restaurante o bar
• Menú del día en la web de un bar o restaurante
• Precios en la web de una peluquería
• Precios en la web de una esteticien o esteticista
• Precios en una web de comida para llevar
• Carta precios de una cervecería en su página web
• Precios clínicas dermoestéticas
• Etc.