Para una variedad de personas y organizaciones que usan sus sitios web para impulsar el negocio, mostrar precios en sus sitios web no es algo a lo que puedan renunciar. Si no tiene una tienda en línea, pero aún desea que la gente sepa sus precios, solo hay una buena manera de mostrárselos: utilizando una lista de precios.
Algunos temas de WordPress vienen con un código abreviado de lista de precios. Si ese es el caso con su tema, genial, todo lo que necesita hacer es agregar el código corto a una página. Pero si por casualidad encuentra un tema de WordPress que es perfecto en todos los aspectos excepto en uno, no tiene una lista de precios, ¿qué debe hacer?
Usará un complemento para agregar una lista de precios, por supuesto.
Con ese fin, hemos creado el complemento QI Addons para Elementor. Es una colección gratuita de 60 widgets y elementos que puede usar con el popular creador de páginas Elementor para expandir sus capacidades y expresarse de maneras nuevas y emocionantes en su sitio web. Uno de los widgets incluidos con el complemento es el widget de lista de precios, justo lo que necesita para agregar maravillosas listas de precios a su sitio web de WordPress.
En este artículo, le mostraremos cómo crear una lista de precios de tres columnas utilizando el widget de lista de precios. Si prefiere ver videos en lugar de leer artículos, también hemos creado un video que cubre el mismo tema.
Así que elige tu medio favorito, siéntate y prepárate para inspirarte y crear tus propias listas increíbles.
Complementos de QI para Elementor es, como su nombre lo indica, un complemento que funciona con Elementor. Para usarlo para agregar una lista de precios a su sitio web de WordPress, necesitará obtener el Creador de sitios web Elementor primero. Si necesita repasar sus habilidades con Elementor, no se preocupe, tenemos una guía útil lista para usted.
Para el siguiente paso, debe agregar el complemento. Desde el back-end de su sitio web, diríjase a Complementos> Agregar nuevo, busque QI Addons para Elementor e instale y active el complemento una vez que lo haya encontrado. Si intenta editar una página o publicación usando Elementor, notará una sección completamente nueva de elementos y widgets en el panel de elementos.
Entonces, si ha creado una nueva página o publicación, es posible que desee elegir el número de columnas en su primera sección como primer paso. Elegimos tres porque estábamos construyendo una lista de tres columnas. Puede agregar menos o más, lo que quiera.
A continuación, puede desplazarse por los widgets para encontrar la lista de precios, o simplemente puede escribir «lista de precios» en la barra de búsqueda de elementos, una opción más rápida. Una vez que se encuentra el widget de lista de precios, simplemente arrastrándolo a una columna libre debería comenzar a crear una lista de precios.
Lo que es importante recordar es que cuando está creando una lista de varias columnas, crear una columna, hacer las ediciones básicas en ella y luego copiarla es una excelente manera de preservar algunas de las configuraciones minuciosas, como márgenes y rellenos. Esa es la estrategia que hemos implementado en el futuro.
El widget le permite editar el contenido y diseñar su apariencia desde dos paneles diferentes y, primero, nos hemos centrado en editar el contenido. Cuando abre la pestaña Contenido, le muestra las opciones generales: el lugar donde elige el diseño, agrega o elimina los elementos y edita el contenido y, hasta cierto punto, la apariencia de los elementos.
Lo que hemos hecho aquí es elegir el diseño estándar y utilizar el botón «+ Agregar elemento» para agregar un nuevo elemento a la lista. Si se adapta mejor a sus necesidades, también puede eliminar un elemento o agregar dos elementos más, o incluso usar el diseño de imagen primero para una apariencia inicial diferente.
Cuando hace clic en cualquier elemento individual en el panel izquierdo, se abre un nuevo conjunto de opciones que le permite editar ese elemento.
Las opciones incluyen darle un nombre, una imagen, una descripción, el precio y el precio con descuento. También hay una opción de selección de color para el título y el precio; puede ser muy útil si desea tener títulos y precios de artículos en diferentes colores, o si solo necesita que algunos de ellos se destaquen. Sin embargo, también hay una opción para cambiar todos los colores, a la vez, en la barra de estilo.
Para nuestra lista, hemos decidido nombrar los cuatro elementos que tenemos aquí, acortar su descripción, eliminar la imagen y agregar precios.
Pasando a las opciones de Botón e Icono de botón. Además de las opciones para cambiar el diseño del botón, el texto del botón subrayado y el tamaño del botón, tendrá muchas formas de personalizar el aspecto del botón.
Hemos optado por seguir con el diseño predeterminado, ignorar las opciones de texto y subrayado, y elegimos el tamaño normal. Hemos cambiado el texto del botón y hemos utilizado un hashtag en el campo Enlace del botón para dejar al usuario en la misma página. Puede vincular el botón a cualquier página que desee y elegir cómo desea que se abra la página utilizando la opción Destino.
Para el toque final, puede dirigirse a las opciones del icono del botón y elegir un icono que aparecerá en el botón. Hay una opción para cargarlo o elegir uno de la biblioteca de iconos: hemos optado por lo último y hemos elegido el icono de «ángulo recto». La última opción le permite elegir la posición del icono: y hemos elegido el nuestro para que esté a la derecha del texto.
Con nuestro contenido listo, podemos ir a la pestaña Estilo y comenzar a cambiar el aspecto de nuestra Lista de precios. La primera opción con la que te encontrarás te permite elegir la etiqueta de título definida por el tema que estás usando. Nos hemos quedado con el predeterminado. Las opciones más interesantes son las opciones de color y tipografía que puede establecer para el título y la descripción.
Hemos realizado dos cambios en las opciones de Estilo. Usamos el color # df9a9a para el título y # 1e1e1e para la descripción. Puede utilizar cualquier color que desee en su lista de precios.
En Estilo de precio, las opciones de color y tipografía son prácticamente las mismas que en las opciones de Estilo, con la adición de elegir el color de fondo para el precio y establecer su relleno y radio de borde. Hemos cambiado el color para que coincida con el color del título. También aumentamos el tamaño de las letras a 20 píxeles y su peso a 500; queríamos ayudarlo a destacar.
Si está buscando personalizar cómo se ve la línea entre el artículo y el precio, el Estilo de contenido es donde puede hacerlo. También podrá utilizar opciones como el grosor de línea y los márgenes para afectar la prominencia y el espaciado de varios elementos. Los ajustes que hicimos en esta sección incluyen cambiar el color de la línea a # e1e1e1 y el margen superior de la descripción a 5.
La opción Estilo general es donde puede ajustar el espacio entre los elementos, así como el espacio entre el elemento final de la lista y el botón. Hemos hecho ambas cosas: cambiamos el espacio entre elementos a 30 píxeles y el margen superior del botón a 60.
Puede habilitar el separador de elementos si lo desea: no lo haremos. Si lo hace, obtendrá algunas opciones adicionales que lo ayudarán a elegir el color, el grosor y la posición de los separadores en relación con otros elementos.
Las opciones de Estilo de botón son un poco más complicadas porque básicamente estás diseñando dos botones: el normal y el que aparece al pasar el mouse. Las opciones de tipografía serán las mismas para ambos. Hemos cambiado el tamaño de las letras a 16 píxeles y el peso a 500 en el nuestro.
La opción Normal le permite elegir el color del texto, el fondo y el borde del botón. La opción Hover le permite hacer lo mismo pero con el botón Hover. Siguiendo con la pestaña Normal para editar, hemos cambiado el color del texto a #ffffff y el color de fondo a # 1e1e1e.
A continuación, notará opciones que incluyen ancho de borde, radio de botón y relleno. Después de establecer todos los valores en cero para el radio del borde, también cambiamos los valores del relleno a 14, 40, 14, 40.
En las opciones de Estilo de icono de botón, puede cambiar el tamaño del icono y su margen. Incluso puede afectar la pequeña animación que ocurre al pasar el mouse. Hemos dejado todo por defecto, excepto el tamaño del icono, que cambiaremos a 16, y el margen izquierdo, que cambiamos a 10 píxeles.
Para mantener todos los márgenes y opciones en la siguiente columna, hicimos clic derecho en la columna existente y la duplicamos. El duplicado apareció debajo de la columna existente; simplemente arrastrándolo a la columna vacía a la derecha fue todo lo que se necesitó para avanzar en la finalización de nuestra lista de precios.
Para empezar, agregamos otro elemento a la segunda columna de la lista y agregamos nuestro texto. Algunos de los elementos de la lista también tienen sus propias imágenes.
En las opciones de Estilo en la pestaña Estilo, hemos cambiado el color del título para que coincida con el de la descripción – # 1e1e1e. Hemos hecho lo mismo en las opciones de Estilo de precio para el color de precio. Todo esto es completamente opcional, por supuesto. Finalmente, si las imágenes en los elementos del menú se ven un poco apagadas, podemos ajustar su margen en Estilo de contenido.
Para crear la tercera columna, hemos usado el mismo método que usamos para crear el segundo – haga clic con el botón derecho, duplique, arrastre al espacio libre de la columna. Editar y diseñar fue el paso final en la creación de la lista de precios.
No nos alejamos mucho de la pestaña Contenido para realizar los cambios en la columna final. En primer lugar, obtuvimos el número de elementos en la columna de nuevo a cuatro, por lo que no más fideos de Singapur en la columna tres. Hemos eliminado las imágenes de los elementos número uno y tres de la tercera columna.
Para los artículos dos y cuatro, agregamos nuevas imágenes y cambiamos su precio para incluir un descuento. Puede hacer todo esto desde las opciones de Elemento si no desea que los cambios sean globales; de esta manera, afectarán solo a los elementos seleccionados. También hemos establecido el color del precio en # 495caf para ayudar a que los precios con descuento se destaquen aún más.
El último ajuste sería separar un poco las columnas. Hacer clic en el botón Editar sección y cambiar el ancho del contenido a ancho completo y el espacio de las columnas a más ancho debería ser suficiente. Hacer clic en el botón de cambios de vista previa en la parte inferior del panel puede mostrar algo como esto en la ventana de vista previa.
¡Vamos a envolverlo!
Cuando se trata de crear listas de precios para su sitio web de WordPress, la combinación del constructor de páginas Elementor y el elemento de la lista de precios del complemento gratuito QI Addons para Elementor es difícil de superar. Puede crear listas de precios increíbles cambiando solo un par de opciones, o puede hacer que la lista sea realmente suya eligiendo diferentes fuentes, colores e imágenes. El complemento QI Addons para Elementor le permite tener esa opción.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
