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
ÍNDICE CÓMO CREAR UNA LISTA DE PRECIOS CON WORDPRESS
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
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes