Crea una tabla de precios.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una tabla de precios: tres planes lado a lado, cada uno un panel con un precio, una lista de funciones y un botón de ancho completo, y el plan central destacado. Úsala en una página de precios o dentro de una página de producto. Para la página de producto completa a su alrededor, sigue Crea una página de producto.

El vídeo crea tres planes para una herramienta de informes.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La página está abierta en el constructor. Para una nueva, ve a Contenido > Añadir contenido > Página de destino (/node/add/landing_page) y haz clic en Guardar.
  • Los elementos nuevos caen arriba de su contenedor, así que en cada panel el botón entra antes que el precio.

Paso 1: añade la sección y las columnas

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño.
  2. Pasa el cursor sobre la sección y abre Más > Ajustes. En Clases HTML elige Centrar texto. Abre el panel Estilo, elige un Fondo gris claro y haz clic en Guardar.
  3. Haz clic en + en la sección y elige Fila; llega con dos columnas iguales.
  4. Haz clic en el icono de cuadrícula de la fila (Diseño de columnas), elige el ajuste 1/3 + 1/3 + 1/3 y haz clic en Guardar.

Paso 2: crea el primer plan

  1. Haz clic en + en la primera columna y elige Panel en la pestaña Contenido.
  2. Pasa el cursor sobre el panel y abre Más > Ajustes. Pon el Título en «Inicial», deja el Tipo en DXPR y haz clic en Guardar.
  3. Haz clic en + en el panel y elige Botón. Pon Título en «Elige un plan», Enlace en /signup y Tipo en Primario. Activa Botón de bloque para que llene la columna, y haz clic en Guardar.
  4. Haz clic en + en el panel de nuevo y elige Texto; cae encima del botón. Escribe el precio como Encabezado 2, añade las funciones una por línea y haz clic en Guardar.

Paso 3: crea los otros planes

  1. Repite el paso 2 en la segunda columna para «Profesional». En el panel Estilo del panel elige el Fondo morado, y pon el Tipo del botón en Éxito, para que el plan destaque.
  2. Repite el paso 2 en la tercera columna para «Empresa», con «Precio personalizado» como precio.

Consejo

La columna central atrae la mirada. Pon allí el plan que más quieres vender.

Paso 4: añade el encabezado

  1. Haz clic en + en la sección y elige Texto; cae encima de la fila.
  2. Escribe «Elige tu plan» como Encabezado 2, añade una línea como «Precios mensuales simples. Cancela cuando quieras» y haz clic en Guardar.

Paso 5: guarda y muestra la vista previa

  1. Haz clic en Guardar en la barra de herramientas del constructor.
  2. Abre el menú de vista (el icono de ojo) y elige Vista previa.

Ve más allá

No sale en el vídeo:

  • Cuatro planes: elige el ajuste 1/4 + 1/4 + 1/4 + 1/4 en su lugar y crea una cuarta columna.
  • Insignia de más popular: añade un elemento Texto arriba del panel destacado con «El más popular» en negrita.
  • Anual y mensual: añade una línea de Texto encima de la fila como «Mensual | Anual (ahorra 20 %)». La línea es estática; un conmutador en directo necesita el elemento HTML con tu propio script.
  • Marcas de función: pega una marca de verificación antes de cada línea de función, o añade un elemento Icono encima de la lista.

Lo que ves

«Elige tu plan» queda centrado encima de tres planes en una banda gris. Cada panel muestra su nombre en la barra de título, el precio, tres funciones y un botón Elige un plan de ancho completo. El plan central destaca en morado con un botón verde.

Si no ves los planes como se muestra

  • Un panel se abre sin diálogo de ajustes. Los paneles se abren vacíos, sin diálogo. Pasa el cursor sobre el panel y abre Más > Ajustes para fijar su Título.
  • Un Tipo de panel como Primario no muestra color. Tu tema no da estilo a ese tipo de panel. Deja Tipo en DXPR y elige un Fondo en el panel Estilo del panel, como en el paso 3.
  • Los botones solo son tan anchos como su texto. Botón de bloque está desactivado. Abre los ajustes de cada botón y actívalo.
  • Tus cambios desaparecieron tras recargar. Saliste de la página antes de hacer clic en Guardar en la barra de herramientas del constructor. Si Guardar muestra un error, lee Los cambios no se guardan.

¿Qué sigue?