Crea un sitio web de una página con desplazamiento.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas un sitio web entero en una página: un hero de alto completo cuyos botones saltan a las secciones Quiénes somos, Servicios y Contacto de abajo. Cada sección lleva un ID de HTML, el destino de su botón. Úsalo para un negocio pequeño, una campaña o un portafolio. Para una página alrededor de una oferta, sigue Crea una página de destino de marketing en su lugar.

El vídeo crea el sitio de un estudio de diseño llamado Studio Nord.

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 equipo.
  • 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, así que los botones del hero entran del último al primero.

Paso 1: crea 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.
  2. Pasa el cursor sobre la sección y abre Más > Ajustes. Pon ID de HTML en hero y, en Clases HTML, elige Centrar texto.
  3. Activa 100% de alto para que la sección llene la pantalla, y Centrado vertical para que el contenido quede en el centro.
  4. 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, elige el Fondo azul marino y el Color de fuente blanco, y haz clic en Guardar.
  5. Haz clic en + en la sección y elige Botón. Pon Título en «Contacto», Enlace en #contact y Tipo en Claro, y haz clic en Guardar. Añade dos botones más igual: «Servicios» con #services, y luego «Quiénes somos» con #about. Cada uno cae encima del anterior.
  6. Haz clic en + de nuevo y elige Texto; cae encima de los botones. Escribe «Studio Nord» como Encabezado 2 y añade el lema. 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 la sección Quiénes somos

  1. Pasa el cursor sobre el hero y haz clic en Añadir sección debajo. Abre Más > Ajustes de la sección nueva, pon ID de HTML en about y haz clic en Guardar.
  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 una foto 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 Texto. Escribe «Quiénes somos» como Encabezado 2, añade tu historia y haz clic en Guardar.

Paso 3: añade la sección Servicios

  1. Añade una tercera sección con Añadir sección debajo y abre Más > Ajustes. Pon ID de HTML en services, elige Centrar texto en Clases HTML y un Fondo gris claro en el panel Estilo. Haz clic en Guardar.
  2. Añade una 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 «Marca» 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 pen-nib 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 «Sitios web» con laptop-code y «Analítica» con chart-pie.

Paso 4: añade la sección Contacto

  1. Añade una cuarta sección y abre Más > Ajustes. Pon ID de HTML en contact, elige Centrar texto en Clases HTML y haz clic en Guardar.
  2. Haz clic en + en la sección y elige Enlaces sociales. Escribe linkedin como marca de la primera fila y pega la URL del perfil, y luego instagram y su URL en la segunda. Pon Estilo en Círculo y Tamaño en 2x, y haz clic en Guardar.
  3. Haz clic en + de nuevo y elige Botón; cae encima de los enlaces. Pon Título en «Escríbenos», Enlace en mailto:hello@studionord.example y deja Tipo en Primario, y haz clic en Guardar.
  4. Haz clic en + de nuevo y elige Texto; cae encima del botón. Escribe «Ponte en contacto» como Encabezado 2 y tu dirección de correo y número de teléfono debajo, 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), elige Vista previa y haz clic en un botón del hero, como Contacto.

Ve más allá

No sale en el vídeo:

  • Menú fijo: crea un menú en Estructura > Menús > Añadir menú con un enlace por sección, como /studio-nord#about, o <front>#about en la portada. Ponlo en la región de encabezado en Estructura > Diseño de bloque. En DXPR Theme, activa Encabezado fijo en Apariencia > Ajustes > DXPR Theme.
  • Portada: haz la página tu portada en Configuración > Sistema > Ajustes básicos del sitio.
  • Formulario de contacto: inserta un formulario desde la pestaña Bloques de Drupal en lugar del texto inicial; lee Añade formularios a las páginas.

Lo que ves

La foto llena la pantalla con «Studio Nord», el lema y tres botones claros. Un clic en un botón desplaza la página con suavidad hasta su sección. Quiénes somos muestra la foto de equipo junto a la historia, Servicios tres iconos en círculo sobre gris, y Contacto el encabezado «Ponte en contacto» y el botón Escríbenos encima de dos iconos sociales redondos.

Si no ves la página como se muestra

  • Un botón no salta a su sección. Su Enlace no coincide con el ID de HTML de la sección. El enlace es # más exactamente el mismo ID, como #about para el ID about.
  • Una sección queda bajo tu encabezado fijo. El constructor no conoce el alto del encabezado. En Ajustes avanzados, en DXPR Studio > DXPR Builder > Ajustes generales (/admin/dxpr_studio/dxpr_builder/settings), pon Selector de desplazamiento en el selector CSS de tu encabezado.
  • Un enlace social muestra «No matching brand icon found». La marca no es un nombre de icono conocido. Escríbela en minúsculas, como linkedin o instagram.
  • 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?