Crea una página de servicios.

Aprende DXPR BuilderCrear páginasSigue un tutorial

Aquí creas una página que lista lo que ofreces. Tiene un encabezado, tres servicios con iconos, un servicio en detalle junto a una foto, logotipos de clientes y una llamada a la acción. Úsala cuando vendas varios servicios. Para una página sobre una oferta, sigue Crea una página de destino de marketing en su lugar.

El vídeo crea la página de servicios de una agencia digital.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto para el servicio en detalle y cuatro logotipos de clientes.
  • 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.
  • En DXPR CMS, esconde el título de página del tema en esta página: en su formulario de edición, abre Ajustes de tema DXPR y marca Título de página en Ocultar regiones DXPR. El Título del Jumbotron es entonces el único Encabezado 1 de la página, como explica Crea páginas amables con el SEO.
  • 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 encabezado

  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, abre Más > Ajustes, elige el Fondo azul marino en el panel Estilo y haz clic en Guardar.
  2. Haz clic en + en la sección y elige Jumbotron en la pestaña Contenido.
  3. Pon el Título en «Nuestros servicios», la Entrada en una línea sobre lo que ofreces y el Tipo en Primario, y haz clic en Guardar.

Paso 2: añade el resumen de servicios

  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 «Diseño» 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 palette 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 «Desarrollo» con code y «Marketing» con bullhorn.

Paso 3: añade un servicio en detalle

  1. Añade una tercera sección con Añadir sección debajo, luego una Fila; llega con dos columnas iguales.
  2. Haz clic en + en la columna izquierda y elige Imagen. Haz clic en Seleccionar imagen, marca una foto y haz clic en Insertar selección. Escribe el atributo Alt en el panel SEO y haz clic en Guardar.
  3. Haz clic en + en la columna derecha y elige Botón. Pon Título en «Pide un presupuesto», Enlace en /contact y Tipo en Primario, y haz clic en Guardar.
  4. Haz clic en + en la columna derecha de nuevo y elige Texto; cae encima del botón. Escribe «Diseño» como Encabezado 2, añade la descripción y lo que incluye, y haz clic en Guardar.

Paso 4: añade los logotipos de clientes

  1. Añade una cuarta sección y abre Más > Ajustes. Elige Centrar texto en Clases HTML y un Fondo gris claro en el panel Estilo. Haz clic en Guardar.
  2. Haz clic en + en la sección y elige Marquesina. Quita las tres imágenes de muestra con la × de cada una. Haz clic en Seleccionar imagen, busca tus logotipos, marca cuatro y haz clic en Insertar selección. Activa Escala de grises y haz clic en Guardar.
  3. Haz clic en + en la sección de nuevo y elige Texto; cae encima de la marquesina. Escribe «Confían marcas líderes» como Encabezado 2 y haz clic en Guardar.

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

  1. Añade una quinta 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 «Agenda una consulta», 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 6: 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:

  • Una sección de detalle por servicio: repite el paso 3 para Desarrollo y Marketing. Activa Reflejar fila en los ajustes de cada segunda fila, para que las fotos alternen lados en tabletas y escritorios.
  • Enlaces de salto: pon el ID de HTML de cada sección de detalle (design, development, marketing). Añade un Botón bajo cada texto de resumen con Enlace #design y así.
  • Testimonios: añade una Cita en bloque por cliente encima de los logotipos.

Lo que ves

Una banda azul marino abre la página, con «Nuestros servicios» en tipo blanco grande sobre un resumen de una línea. Siguen tres servicios centrados, cada uno un icono en círculo sobre su nombre y línea. Diseño recibe su propia banda con una foto, una descripción y Pide un presupuesto. Logotipos grises de clientes desfilan sobre una banda clara, y una banda morada cierra la página.

Si no ves la página como se muestra

  • La marquesina aún muestra los logotipos de muestra. Las tres imágenes de muestra quedan hasta que las quites. Abre los ajustes de la marquesina, haz clic en la × de cada imagen de muestra y guarda.
  • Los logotipos están en color. Escala de grises está desactivada. Abre los ajustes de la marquesina, actívala y haz clic en Guardar.
  • 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.
  • 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?