Conclusiones clave
- El widget de la tabla de precios de complementos maestros incluye cinco plantillas de tablas de precios de Elementor como menú desplegable Diseño: Predeterminado, Contenido de alineación a la izquierda, Tabla redondeada, Tabla con imagen BG y Patrón BG sesgado.
- Cambiar el menú desplegable Diseño mantiene el nombre del plan, el precio, las funciones y el botón en su lugar, por lo que se puede obtener una vista previa de un conjunto de contenido en los cinco diseños en menos de un minuto.
- La biblioteca de plantillas de complementos maestros tiene secciones de precios listas para usar, que incluyen diseños oscuros, de dos, cuatro y de cambio de facturación, que se importan a cualquier página de Elementor desde el editor.
- Cada ejemplo de tabla de precios en esta página sigue el mismo orden: nombre del plan, para quién es, precio y período, de tres a siete filas de funciones, un botón y una línea de confianza opcional.
- Una tabla de precios oscura se lee mejor con un acento brillante solo en el plan resaltado; Los ejemplos siguientes utilizan verde, cian o rosa para esa tarjeta única.
- Un cambio mensual y anual en una sección de precios necesita dos juegos de tarjetas y el widget Alternar contenido de Master Addons Pro.
Una plantilla de tabla de precios de Elementor le ahorra la parte del trabajo que lleva más tiempo: las decisiones de diseño. Los diseños de los widgets a continuación le brindan una forma de tarjeta con un solo clic, y las secciones ya listas para usar le brindan un bloque de precios completo con encabezado, cambio y tarjetas ya organizados. De cualquier manera, reemplaza los nombres, precios y características del plan y mantiene el diseño.
Esta página recopila doce ejemplos de tablas de precios creados con Complementos maestros para Elementor. Los primeros cinco son diseños propios del widget con la configuración exacta utilizada, para que puedas reproducir cada uno. Las siguientes siete son secciones de la Biblioteca de plantillas, elegidas para cubrir las formas comunes de las páginas de precios: tres planos, dos planos, cuatro planos, oscuro, claro y un interruptor de facturación.
Tabla de contenidos
Cómo utilizar estas plantillas
Hay dos tipos de plantillas en esta página. Los ejemplos 1 a 5 son diseños de widgets: elimine el archivo Widget de tabla de precios en un contenedor, elija el diseño del menú desplegable y copie las configuraciones enumeradas en cada ejemplo. Los ejemplos 6 a 12 son secciones completas: abra el Biblioteca de plantillas, importe la sección y edite el texto en su lugar.
Las configuraciones enumeradas para cada diseño son las que cambian el aspecto. Todo lo demás está en su forma predeterminada. Los colores se dan como valores hexadecimales para que puedas pegarlos en la pestaña Estilo, y las cinco tarjetas de diseño usan el mismo contenido: un plan de $29 con tres funciones y un botón “Iniciar”.
Los cinco diseños de widgets de la tabla de precios
1. Predeterminado
El diseño predeterminado es el que debe comenzar. El encabezado está centrado, el precio se encuentra debajo del nombre y las características y el botón siguen en el cuerpo. Funciona para cualquier recuento de planos y es la opción más segura para una fila de tres columnas.
- Diseño: Predeterminado
- Esquema de color del encabezado: Personalizado, gradiente del #6938EF al #B497FF a 135 grados
- Título y color del precio: #FFFFFF; subtítulo y período: #E4DBFF
- Icono de característica: comprobar, #6938EF; texto de característica: #1A1033
- Botón: fondo #F1EEFF, texto #6938EF, radio 6 px
- Información adicional: “Cancelar en cualquier momento”, #6B7280
2. Alinear el contenido a la izquierda
Left Align Content mueve el nombre, el precio y las funciones al borde izquierdo. Se lee más rápido cuando los nombres de los planes son largos o cuando la tarjeta se encuentra junto a un párrafo de texto, y coincide con las páginas de precios de estilo editorial donde todo lo demás se deja alineado.
- Diseño: Contenido de alineación izquierda
- Todos los colores como en Predeterminado
- Alineación de botones: izquierda, con acolchado izquierdo de 24 px en el pie de página
3. Mesa Redondeada
La tabla redondeada coloca el precio dentro de un círculo grande en el encabezado, lo que hace que el número sea lo primero que cualquiera vea. Necesita un encabezado más alto, así que dale el mismo recuento de funciones en cada carta o la fila se verá desigual. El subrayado amarillo en las filas de funciones es parte del diseño.
- Diseño: Mesa Redondeada
- Gradiente del encabezado como en Predeterminado; gradiente circular de #F50A7F a #FF6FB1 a 135 grados, o déjelo en el tinte predeterminado
- Texto de características: #1A1033, color de subrayado #FFD600 (diseño predeterminado)
4. Tabla con imagen BG
La tabla con imagen BG llena toda la tarjeta con una imagen, degradado, video o presentación de diapositivas, con el encabezado y las funciones flotando en la parte superior. Se adapta a un plan destacado o a una página de precios para un producto visual. El panel de funciones necesita un fondo oscuro semitransparente para que el texto siga siendo legible en cualquier foto.
- Diseño: Tabla con imagen BG
- Fondo: Imagen, posición centro centro, tamaño de portada
- Fondo de características: rgba(20, 10, 45, 0.6); texto de características: #FFFFFF
- Gradiente del encabezado como en Predeterminado, con un 70 por ciento de opacidad, por lo que la foto se muestra
5. Patrón BG sesgado
Skew BG Pattern corta el encabezado en ángulo y agrega dos franjas blancas, lo que le da a la carta movimiento sin imagen. Utilice un color de acento; un degradado lucha con las rayas. Es el diseño elegido con mayor frecuencia para una sola carta en una página de destino.
- Diseño: Patrón BG sesgado
- Esquema de colores del encabezado: personalizado, sólido #6938EF
- Radio de la tarjeta: 20 px; fondo de la tarjeta #FFFFFF
- Subrayado de función, botón como en Predeterminado
6. Tres planos con una tarjeta del medio resaltada
La fila de precios estándar de SaaS: tres widgets de la tabla de precios en un contenedor de tres columnas, el del medio elevado. La tarjeta elevada utiliza la tabla destacada, una cinta que dice “Más popular”, un botón rosa sólido en lugar del contorno y el interruptor de venta con $69 como precio original y $49 como precio actual. Las tarjetas exteriores utilizan el color de cuerpo más claro, por lo que la del medio se adelanta.
- Contenedor: tres contenedores para niños con un ancho del 31,5 por ciento, espacio de 28 px, alinear artículos: estirar
- Tarjeta del medio: Tabla destacada en; cinta “Más popular”, vertical 18, horizontal -10; fondo del botón #F50A7F, texto #FFFFFF
- Tarjetas exteriores: fondo del cuerpo #F6F5FA; carta del medio: #FFFFFF con una sombra de 0 24px 60px rgba(105, 56, 239, 0,28)
7. Tabla oscura de precios de cuatro planos
Cuatro planos sobre fondo negro, con un solo acento lima en el borde y la etiqueta del plan resaltado. Las características son idénticas entre tarjetas, lo cual es una elección deliberada: la diferencia entre los planes es solo el precio y el lector debe elegir por presupuesto. Los botones utilizan el widget Creative Button, por lo que los efectos flotantes provienen de ese widget en lugar de CSS personalizado.
Utilice esta plantilla cuando los planes difieran por límites en lugar de características. El texto de la función en negrita en la primera tarjeta y el texto normal en las demás es la única jerarquía visual, así que manténgalo así.
8. Precios de Dark SaaS con un plan personalizado
Del kit de plantillas Finix, esta sección muestra cómo manejar un plan sin un precio fijo. La tercera tarjeta imprime “Personalizado” donde estaría el número e intercambia el texto del botón por “Háblanos”. Una descripción de una línea debajo de cada precio explica para quién es el plan, y una nota a pie de página debajo de la fila cubre la facturación y el descuento anual en una oración.
Los débiles círculos concéntricos detrás de las tarjetas son una imagen de fondo de sección, no parte del widget. Reemplace la imagen o retírela y las tarjetas permanecerán como están.
9. Tabla de precios de la luz de dos planos
Dos planes son una decisión de sí o no, por lo que este diseño hace que sea imposible pasar por alto la tarjeta paga: toda la tarjeta está llena del color del acento y el botón se invierte a oscuro. Los íconos de verificación grises en las funciones básicas de marcas de tarjetas que no están incluidas, lo que permite que ambas tarjetas mantengan las mismas cuatro filas.
Úselo cuando haya un nivel gratuito y un nivel pago. Con tres o más planes, la tarjeta a todo color se vuelve demasiado ruidosa.
10. Tarjetas de precios con interruptor de facturación
Esta sección ya tiene la opción de alternancia mensual y anual creada. El cambio es el widget Alternar contenido de Master Addons Pro, y cada estado carga una fila de precios guardada. Las tarjetas imprimen “facturadas mensualmente” o “facturadas anualmente” bajo el precio para que el lector sepa qué estado se muestra. Importarlo, abrir Plantillas > Plantillas guardadas y editar las dos filas de precios allí. Para construir lo mismo desde cero, incluido el captura de plantilla de tipo Sección, siga el guía de alternancia mensual y anual.
11. Comparación en cuatro planos con garrapatas de características
Cuando los planes difieren por características más que por límites, los tics y cruces permiten al lector escanear una columna. Más allá de unas siete filas, a tabla comparativa hace este trabajo mejor que las cartas. Las cuatro cartas tienen las mismas siete filas en el mismo orden y el icono cambia según el plan. El plano resaltado está lleno del color del acento, con un botón blanco, y ocupa el tercer lugar en lugar del segundo porque la página espera que la mayoría de los lectores elijan el nivel superior.
12. Precios oscuros con alternancia mensual y anual
Una sección oscura con tarjetas claras es lo contrario del ejemplo 7 y hace que las tarjetas sean lo más brillante de la página. El interruptor se encuentra entre el encabezado y las tarjetas, la nota por usuario debajo del nombre de cada plan establece expectativas y “No se requiere tarjeta de crédito” debajo de cada botón elimina la última objeción. Las formas decorativas en las esquinas son elementos de fondo de sección.
Cómo importar una sección de precios
- Abra la página en Elementor y haga clic en el icono de plantilla de complementos maestros en el editor, o abra Plantillas > Plantillas de complementos maestros.
- Busque “precios”, obtenga una vista previa de la sección y haga clic en Importar. Las secciones creadas con widgets Pro necesitan Master Addons Pro activo.
- La sección aterriza donde estaba tu cursor. Edita el texto de cada tarjeta en el panel; el diseño permanece.
- Para secciones con un interruptor, edite las dos filas de precios en Plantillas > Plantillas guardadas.
El guía de importación de plantillas cubre el botón del editor, la pantalla Importar páginas y lo que sucede con la copia importada.
¿quieres los cinco diseños sin importar nada? El Widget de tabla de precios los tiene en un menú desplegable y el Biblioteca de plantillas tiene las secciones completas que se muestran arriba.
Preguntas frecuentes
¿elementor tiene plantillas de tablas de precios?
La biblioteca de plantillas de Elementor tiene bloques de precios para usuarios Pro y su widget de tabla de precios también es Pro. En Elementor gratuito, las plantillas de precios provienen de un complemento: el widget Master Addons Pricing Table tiene cinco diseños y su biblioteca de plantillas tiene secciones de precios completas.
¿Cuántos planes debe tener una plantilla de tabla de precios?
Tres es el número más seguro y cuatro funcionan cuando un plan es un nivel personalizado o empresarial. Los ejemplos anteriores muestran dos, tres y cuatro planos; Después de las cuatro, las tarjetas una al lado de la otra dejan de caber en la pantalla de una computadora portátil.
¿Puedo cambiar el diseño después de construir la mesa?
Sí. El menú desplegable Diseño en el widget de la tabla de precios de complementos maestros cambia entre los cinco diseños y mantiene el nombre del plan, el precio, las características y el botón en su lugar. Sólo cambian las configuraciones de estilo que pertenecen a un diseño, como el círculo o el sesgo.
¿cómo hago una tabla de precios oscura en Elementor?
Establezca el fondo de la sección en negro o azul marino oscuro, déle a cada tarjeta un cuerpo gris oscuro con un borde más claro de un píxel y use un color de acento para el borde, la etiqueta y el botón de la tarjeta resaltada. Los ejemplos 7, 8, 10 y 12 anteriores muestran cuatro versiones de esto.
¿Los ejemplos de la tabla de precios son responsivos?
Sí. Las tarjetas se apilan en una columna en los teléfonos. Coloque el plan resaltado primero o segundo en el orden contenedor para dispositivos móviles, mantenga las listas de funciones en aproximadamente cinco filas y verifique la tabla en el punto de interrupción móvil en el modo responsivo de Elementor antes de publicarlo.
Pensamientos finales
Las doce plantillas vienen por dos rutas. Los cinco diseños de widgets cubren la forma de la tarjeta y realizan un cambio desplegable cada uno. Las siete secciones de la biblioteca cubren las formas de las páginas: tres planos con un medio resaltado, cuatro planos oscuros, SaaS con un nivel personalizado, luz de dos planos, un interruptor de facturación, tics y cruces de cuatro planos y tarjetas oscuras con luz. Cada uno mantiene el orden que funciona: nombre, para quién es, precio, lista corta de funciones, un botón.
Comience con el diseño o sección más cercana a sus planos en el Página del widget de la tabla de precios, cambie el texto y revíselo en un teléfono antes de que entre en funcionamiento.
Lectura relacionada
- Diseño de tabla de precios: 10 consejos con ejemplos
- Biblioteca de plantillas de complementos maestros
- Kits de plantillas Elementor
- Plantillas de sección Elementor
- Documentación del widget de la tabla de precios
- Cómo agregar un cambio mensual y anual a una tabla de precios de Elementor
- Tabla de precios de Elementor versus tabla comparativa: cuál usar
- Cómo crear una lista de precios o un menú en Elementor
