Crea una página de producto.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página para un producto. Una foto queda junto al nombre, el precio y el botón Comprar ahora, seguidos de tres funciones, una lista de especificaciones y una llamada a la acción de ventas. Úsala para todo lo que vendas. Para comparar varios planes, añádele una tabla de precios.

El vídeo crea la página de un producto de hardware llamado Insight Hub.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto del producto.
  • 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 columna. Por eso la columna derecha se crea desde el botón hacia arriba.

Paso 1: añade el producto

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño.
  2. Haz clic en + en la sección y elige Fila; llega con dos columnas iguales.
  3. Haz clic en + en la columna izquierda y elige Imagen. Haz clic en Seleccionar imagen, marca la foto del producto y haz clic en Insertar selección. Escribe el atributo Alt en el panel SEO y haz clic en Guardar.
  4. Haz clic en + en la columna derecha y elige Botón. Pon Título en «Comprar ahora», Enlace en tu tienda, Tipo en Primario y Tamaño en Grande, y haz clic en Guardar.
  5. Haz clic en + en la columna derecha de nuevo y elige Texto; cae encima del botón. Escribe el precio como Encabezado 2 y haz clic en Guardar.
  6. Haz clic en + una vez más y elige Texto; cae arriba del todo. Escribe el nombre del producto como Encabezado 2, añade una línea de descripción y haz clic en Guardar. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee Crea páginas amables con el SEO.

Paso 2: añade las funciones

  1. Pasa el cursor sobre la sección y haz clic en Añadir sección debajo. Dale a la sección nueva la clase Centrar texto.
  2. Haz clic en + en la sección y elige Fila. Haz clic en su icono de cuadrícula (Diseño de columnas), elige el ajuste 1/3 + 1/3 + 1/3 y haz clic en Guardar.
  3. Haz clic en + en la primera columna y elige Texto. Escribe el nombre de la función como Encabezado 3, añade una línea y haz clic en Guardar.
  4. Haz clic en + en la misma columna y elige Icono; cae encima del texto. Elige el juego Font Awesome Free Solid, busca plug y haz clic en el icono. Pon Tamaño en Muy grande (3x), abre Utilidades de icono, pon Estilo en Círculo y haz clic en Guardar.
  5. Repite para la segunda columna con cloud y la tercera con battery-full.

Paso 3: añade las especificaciones

  1. Añade una tercera sección con Añadir sección debajo. Abre Más > Ajustes, elige un Fondo gris claro en el panel Estilo y haz clic en Guardar.
  2. Haz clic en + en la sección y elige Texto. Escribe «Especificaciones» como Encabezado 2, luego una especificación por línea, y haz clic en Guardar.

Paso 4: añade la llamada a la acción

  1. Añade una cuarta sección y abre Más > Ajustes. Elige Centrar texto en Clases HTML, luego el Fondo morado y el Color de fuente blanco en el panel Estilo. Haz clic en Guardar.
  2. Haz clic en + en la sección y elige Botón. Pon Título en «Habla con el equipo comercial», Enlace en /contact, Tipo en Claro y Tamaño en Grande, y haz clic en Guardar.
  3. Haz clic en + de nuevo y elige Texto; cae encima del botón. Escribe «Insight Hub desde 249 euros» como Encabezado 2 y añade una línea. Pon Color de fuente en blanco 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:

  • Tabla de especificaciones: inserta una tabla con el botón Tabla de la barra de herramientas de texto en lugar de una línea por especificación.
  • Galería: cambia la foto única por un Carrusel de imágenes de fotos de producto.
  • Planes: enlaza el precio con una tabla de precios.

Lo que ves

La foto de producto llena la mitad izquierda, con el nombre, el precio y el botón Comprar ahora a la derecha. Siguen tres funciones centradas, cada una un icono en círculo sobre su nombre y línea. Las especificaciones quedan sobre una banda gris, y una banda morada cierra la página con Habla con el equipo comercial.

Si no ves la página como se muestra

  • El nombre, el precio y el botón están en orden equivocado. Entraron de arriba abajo, y los elementos nuevos caen arriba de su columna. Arrástralos a su sitio por el tirador de su barra de control.
  • Los iconos no tienen círculo. Estilo está en el panel Utilidades de icono, no en General. Abre los ajustes del icono, abre Utilidades de icono y pon Estilo en Círculo.
  • El encabezado queda oscuro sobre morado. El elemento Texto no tiene Color de fuente propio. Abre su panel Estilo y pon Color de fuente en blanco.
  • 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?