Crea una página de contacto.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página de contacto: un mapa de tu dirección, tres formas de localizarte cada una con su icono, y un formulario de contacto. Úsala para la página que tu menú enlaza como «Contacto». Para poner solo un formulario dentro de otra página, sigue Añade formularios a las páginas en su lugar.

El vídeo crea la página de contacto de un ayuntamiento.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • Tu formulario de contacto existe como bloque, por ejemplo como formulario web abierto hecho con el módulo Webform.
  • 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 mapa

  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 Mapa en la pestaña Contenido.
  3. Escribe tu Dirección, pon Alto de mapa en 400 y haz clic en Guardar.

El mapa incrusta Google Maps centrado en la dirección.

Paso 2: añade los datos de contacto

  1. Pasa el cursor sobre la sección y haz clic en Añadir sección debajo. Abre Más > Ajustes de la sección nueva, elige Centrar texto en Clases HTML, luego un Fondo gris claro en el panel Estilo. Haz clic en Guardar.
  2. Haz clic en + en la sección y elige Fila; llega con dos columnas iguales. 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 «Visítanos» como Encabezado 3, añade la dirección y el horario, 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 location-dot y haz clic en el icono. Pon Tamaño en Extragrande (2x) y haz clic en Guardar.
  5. Repite en la segunda columna con «Llámanos» y el icono phone, y en la tercera con «Escríbenos» y el icono envelope.

Elige el mismo Tamaño para los tres iconos para que la fila quede alineada.

Paso 3: añade el formulario

  1. Añade una tercera sección con Añadir sección debajo y dale la clase Centrar texto.
  2. Haz clic en + en la sección y abre la pestaña Bloques de Drupal.
  3. Elige el bloque de tu formulario de contacto y haz clic en Guardar en su diálogo de ajustes; el formulario aparece en la sección.
  4. Haz clic en + en la sección de nuevo y elige Texto; cae encima del formulario. Escribe «Envíanos un mensaje» como Encabezado 2, añade una línea y haz clic en Guardar.

Los formularios creados en Estructura > Formularios de contacto (/admin/structure/contact) no tienen bloque en el núcleo de Drupal. El módulo contribuido Contact Block añade un bloque de Contacto a la misma pestaña.

Paso 4: 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:

  • Toca para llamar: selecciona el número de teléfono en el texto, haz clic en el botón de enlace de la barra de herramientas e introduce tel:+31104001234
  • Clic para escribir: selecciona la dirección y enlázala a mailto:info@example.com
  • Cualquier bloque: la pestaña Bloques de Drupal incrusta los bloques de tu sitio, como formularios de búsqueda, altas al boletín y bloques personalizados

Lo que ves

Un mapa de 400 píxeles de tu dirección llena lo alto de la página. Debajo una banda gris muestra tres columnas centradas, cada una con un icono, un encabezado y tus datos. El formulario cierra la página bajo su encabezado centrado «Envíanos un mensaje».

Si no ves la página como se muestra

  • El mapa muestra el sitio equivocado. Google Maps busca la dirección tal como está escrita. Añade el código postal, la ciudad y el país a Dirección y guarda de nuevo.
  • Tu formulario no está en la pestaña Bloques de Drupal. El constructor solo lista formularios web abiertos, y los formularios de contacto del núcleo necesitan el módulo Contact Block. Pon el estado del formulario web en Abierto en Estructura > Formularios web (/admin/structure/webform).
  • Los iconos tienen distintos tamaños. Cada icono conserva su propio Tamaño. Abre los ajustes de cada icono y elige el mismo.
  • 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?