Crea una página Quiénes somos.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página Quiénes somos: un encabezado de misión, tu historia junto a una foto, tres números que cuentan hacia arriba, tarjetas de equipo y una llamada a la acción de cierre. Úsala cuando una página deba contar a las personas visitantes quién eres. Para una página que lista a cada colega, sigue Crea un directorio de equipo en su lugar.

El vídeo crea la página para un estudio de diseño de Róterdam.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto de tu oficina, tu equipo o tu producto.
  • La página existe: ve a Contenido > Añadir contenido > Página de destino (/node/add/landing_page), escribe «Quiénes somos» como Título y haz clic en Guardar. La página se abre con el constructor en ella.
  • 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 las filas de una sección, o los elementos de una columna, en orden inverso, o arrástralos a su sitio después.

Paso 1: añade un encabezado de misión

  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. Abre el panel Estilo, elige una muestra de Fondo oscura y haz clic en Guardar.
  3. Haz clic en + en la sección y elige Jumbotron en la pestaña Contenido.
  4. Escribe tu misión como Título: «Creamos sitios web que la gente disfruta usando».
  5. Escribe una frase de apoyo en el campo Entrada: «Un estudio de 24 personas en Róterdam que trabaja con marcas de toda Europa desde 2012».
  6. Pon Tipo en Primario para texto blanco sobre tu color primario, y haz clic en Guardar.

Paso 2: cuenta la historia de tu compañía

  1. Pasa el cursor sobre la sección y haz clic en Añadir sección debajo, el + que hay debajo.
  2. Haz clic en + en la sección nueva y elige Fila; llega con dos columnas iguales. Haz clic en el icono de cuadrícula (Diseño de columnas) en la fila, elige el ajuste 2/3 + 1/3 y haz clic en Guardar.
  3. Haz clic en + en la columna ancha y elige Texto. Escribe «Nuestra historia» como Encabezado 2, luego dos párrafos cortos: cómo empezaste y cómo va un proyecto. Haz clic en Guardar.
  4. Haz clic en + en la columna estrecha y elige Imagen.
  5. Haz clic en Seleccionar imagen, busca en la biblioteca de medios con Aplicar filtros, marca una foto de tu oficina o equipo y haz clic en Insertar selección.
  6. Abre el panel SEO, rellena el atributo Alt y haz clic en Guardar.

Consejo

Cuenta la historia corta y divídela con un subtítulo. Las personas visitantes escanean antes de leer.

Paso 3: añade cifras clave con contadores

  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 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 un elemento Texto con la etiqueta de la cifra: «Proyectos entregados», «Años de actividad», «Clientes que repiten».
  4. En cada columna, haz clic en + de nuevo y elige Contador numérico; cae encima de la etiqueta. Fija:
    • Fin: la cifra (140, 12, 98)
    • Sufijo: «+» o «%» donde aplique
    • Separador de miles: Coma
    • Velocidad: 2500, los milisegundos que tarda la cuenta
  5. Haz clic en Guardar en cada contador.

El contador no tiene campo propio de etiqueta, por eso un elemento Texto queda debajo.

Paso 4: crea una sección de equipo

  1. Añade una cuarta sección con Añadir sección debajo.
  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, haz clic en + y elige Tarjeta. Abre Más > Ajustes, pon Encabezado en el nombre de la persona («Sofia Andersen») y Título en su rol («Directora creativa»), y haz clic en Guardar.
  4. Haz clic en + en la propia sección y elige Texto; cae encima de la fila de tarjetas. Escribe «Conoce al equipo» como Encabezado 2, céntralo y haz clic en Guardar.

Paso 5: añade una sección de cierre

  1. Añade una sección final con Añadir sección debajo y abre Más > Ajustes. En Clases HTML elige Centrar texto, para que el texto y el botón se centren juntos. En el panel Estilo elige tu color de marca como Fondo y blanco como Color de fuente, y haz clic en Guardar.
  2. Haz clic en + en la sección y elige Botón. Pon Título en «Ponte en contacto», Enlace en /contact, Tipo en Claro y Tamaño en Grande, y haz clic en Guardar.
  3. Haz clic en + en la sección de nuevo y elige Texto; cae encima del botón. Escribe «¿Quieres trabajar con nuestro equipo?» como Encabezado 2, luego «Aceptamos unos pocos clientes nuevos cada trimestre». En el panel Estilo 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.
  3. Recorre la página para revisar cada sección.

Ve más allá

No sale en el vídeo, pero vale la pena añadir:

  • Un Texto de bio y una Imagen de retrato dentro de cada tarjeta, y Enlaces sociales debajo
  • 100% de alto en los ajustes de la primera sección para un encabezado que llena la pantalla

Lo que ves

La vista previa muestra cinco bandas. El encabezado oscuro lleva tu misión y su entrada en blanco. Tu historia queda junto a la foto. En la banda gris los tres números cuentan desde cero cuando entran en vista al desplazar.

El encabezado de equipo queda centrado encima de tres tarjetas, cada una con un nombre y un rol. La banda de cierre centra un encabezado blanco sobre un botón claro Ponte en contacto. Elige Editar en el menú de ojo para seguir trabajando.

Si no ves la página como se muestra

  • No hay botón Añadir elementos en la página vacía. El asistente de creación de páginas está desactivado, así que la página solo ofrece Elegir una plantilla. Haz clic en el área vacía para abrir el selector de elementos en su lugar.
  • Un elemento nuevo queda encima del que añadiste antes. El constructor inserta elementos nuevos arriba de su sección o columna. Arrástralo a su sitio por el tirador de su barra de control.
  • Falta Contador numérico o Tarjeta en el selector. Tu perfil de usuario del constructor lo esconde. Pide a una persona administradora que lo marque en Elementos, en DXPR Studio > DXPR Builder > Perfiles de usuario (/admin/dxpr_studio/dxpr_builder/profile).
  • 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?