Escribe un caso práctico.

Aprende DXPR BuilderCrear páginasSigue un tutorial

Aquí redactas el proyecto de un cliente en tres partes: el reto, la solución y los resultados. Terminas con siete bandas: un hero de foto, un resumen con la cifra principal, el reto, la solución junto a una foto, tres contadores, una cita y una llamada a la acción. Para mostrar muchos proyectos en una página, sigue Crea una galería de portafolio en su lugar.

El vídeo redacta el trabajo de una agencia para Northwind Retail.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto ancha para el hero y una foto de lo que entregaste.
  • 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 sección o columna. Añade los elementos de una columna en orden inverso, o arrástralos a su sitio después.

Paso 1: añade el hero

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño. Pasa el cursor sobre ella y abre Más > Ajustes.
  2. En Clases HTML elige Centrar texto.
  3. Abre el panel Estilo. En Imagen de fondo haz clic en Seleccionar imagen, marca una foto y haz clic en Insertar selección. Pon Estilo de fondo en Cubrir.
  4. Elige un Fondo azul marino oscuro y un Color de fuente blanco, y haz clic en Guardar. El color se muestra mientras carga la foto.
  5. Haz clic en + en la sección y elige Botón. Pon Título en «Visita el sitio», Enlace en la URL del cliente, Tipo en Claro y Tamaño en Grande, y haz clic en Guardar.
  6. Haz clic en + de nuevo y elige Texto; cae encima del botón. Escribe el nombre del cliente como Encabezado 2 y un resumen de una línea debajo. Pon Color de fuente en blanco en el panel Estilo 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 el resumen

  1. Pasa el cursor sobre el hero y haz clic en Añadir sección debajo. Añade una Fila a la sección nueva, haz clic en su icono de cuadrícula (Diseño de columnas), elige el ajuste 2/3 + 1/3 y haz clic en Guardar.
  2. Haz clic en + en la columna ancha y elige Texto. Escribe «Resumen» como Encabezado 2, añade el resumen y haz clic en Guardar.
  3. Haz clic en + en la columna estrecha y elige Texto. Escribe la etiqueta de la métrica, «Más pedidos en línea», y haz clic en Guardar.
  4. Haz clic en + en la columna estrecha de nuevo y elige Contador numérico; cae encima de la etiqueta. Pon Fin en 32, Sufijo en %, Separador de miles en Coma, pon Velocidad en 2500, y haz clic en Guardar.

El contador no tiene campo propio de etiqueta; el elemento Texto bajo él hace ese trabajo.

Paso 3: añade el reto

  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 «El reto» como Encabezado 2, describe el problema y haz clic en Guardar.

Paso 4: añade la solución

  1. Añade una cuarta sección, luego una Fila; llega con dos columnas iguales.
  2. Haz clic en + en la columna izquierda y elige Texto. Escribe «La solución» como Encabezado 2, describe lo que creaste y haz clic en Guardar.
  3. Haz clic en + en la columna derecha y elige Imagen. Haz clic en Seleccionar imagen, marca una foto del entregable y haz clic en Insertar selección. Escribe el atributo Alt en el panel SEO y haz clic en Guardar.

Paso 5: añade los resultados

  1. Añade una quinta sección y abre Más > Ajustes. Elige Centrar texto en Clases HTML, luego el Fondo azul marino y el Color de fuente blanco en el panel Estilo. Haz clic en Guardar.
  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. En cada columna, añade primero una etiqueta de Texto, luego un Contador numérico encima, como en el paso 2: Fin 32 con Sufijo %, Fin 2 con Sufijo s, y Fin 15000.

Paso 6: añade la cita

  1. Añade una sexta sección.
  2. Haz clic en + en la sección y elige Cita en bloque. Escribe las palabras del cliente, rellena Atribución con su nombre y rol, y haz clic en Guardar.

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

  1. Añade una séptima 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 «Escríbenos», 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 «¿Lista para empezar?» como Encabezado 2 y añade una línea. Pon Color de fuente en blanco y haz clic en Guardar.

Paso 8: 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.

Lo que ves

El nombre del cliente y el botón Visita el sitio quedan centrados sobre la foto. El resumen muestra 32 % junto a su texto; las personas visitantes lo ven contar hacia arriba cuando entra en vista al desplazar. El reto queda sobre una banda gris, y la solución junto a su foto.

En la banda azul marino los tres resultados cuentan hacia arriba al entrar en vista al desplazar: 32 %, 2 s y 15 000. La cita del cliente y una banda morada de Escríbenos cierran la página.

Si no ves la página como se muestra

  • La foto del hero no llena la sección. Estilo de fondo aún está en Valores por defecto del tema. Abre el panel Estilo de la sección y ponlo en Cubrir.
  • El último contador dice 15000 sin coma. Separador de miles aún está en Ninguno. Abre los ajustes del contador y elige Coma.
  • Una etiqueta queda encima de su contador. El contador entró antes que su etiqueta, y los elementos nuevos caen arriba de su columna. Arrastra la etiqueta debajo del contador por el tirador de su barra de control.
  • 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?