Crea una galería de portafolio.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página de portafolio: un encabezado centrado, tres proyectos lado a lado con una foto de portada y un resultado de una línea cada uno, y una llamada a la acción. Úsala para mostrar tu trabajo de un vistazo y enlazar cada proyecto con su historia. Para redactar a fondo un proyecto, sigue Escribe un caso práctico.

El vídeo crea una página de agencia llamada «Nuestro trabajo».

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto de portada para cada proyecto, recortadas a las mismas proporciones.
  • 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 columna, así que cada foto de portada entra tras su texto.

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.
  2. Pasa el cursor sobre la sección y abre Más > Ajustes. En Clases HTML elige Centrar texto, y haz clic en Guardar.
  3. Haz clic en + en la sección y elige Texto en la pestaña Contenido.
  4. Escribe «Nuestro trabajo» como Encabezado 2, añade una línea de presentación 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 cuadrícula de proyectos

  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 un Fondo gris claro en el panel Estilo y 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 el nombre del proyecto como Encabezado 3, añade el resultado de una línea y haz clic en Guardar.
  4. Haz clic en + en la misma columna y elige Imagen; cae encima del texto. Haz clic en Seleccionar imagen, marca la foto de portada y haz clic en Insertar selección. Escribe el atributo Alt en el panel SEO y haz clic en Guardar.
  5. Repite para la segunda y la tercera columna.

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

  1. Añade una tercera sección con Añadir sección debajo 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 «Trabajemos juntos» como Encabezado 2 y añade una línea. Pon Color de fuente en blanco en el panel Estilo y haz clic en Guardar.

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:

  • Enlaza cada proyecto: pon Enlace de imagen en la foto de portada a la página del caso práctico.
  • Relieve al pasar el cursor: en el panel Estilo de cada imagen pon Radio de bordes en 4 y Sombra paralela en 1. En Estilo al pasar el cursor sube Sombra paralela a 3.
  • Más proyectos: añade otra Fila con el mismo ajuste bajo la primera.

Haz la cuadrícula filtrable

La cuadrícula estática vale para pocos proyectos. Para dejar que las personas visitantes filtren por tipo, guarda cada proyecto como contenido y muéstralos con una vista que tenga un filtro expuesto. Views forma parte del núcleo de Drupal.

1. Crea el tipo de contenido Portafolio

  1. Ve a Estructura > Tipos de contenido > Añadir tipo de contenido (/admin/structure/types/add).
  2. Nómbralo «Portafolio» y guarda.
  3. En la pestaña Gestionar campos, añade un campo Imagen con etiqueta «Imagen de portada».
  4. Añade un campo Lista (texto) con etiqueta «Tipo de proyecto» y valores como web|Web, branding|Branding y campaign|Campaign.
  5. Crea algunos elementos de Portafolio en Contenido > Añadir contenido > Portafolio.

2. Crea la vista

  1. Ve a Estructura > Vistas > Añadir vista (/admin/structure/views/add).
  2. Nómbrala «Cuadrícula de portafolio»; en Ajustes de vista muestra Contenido de tipo Portafolio.
  3. Marca Crear un bloque, pon el formato de pantalla en Cuadrícula de campos y guarda.
  4. En el editor de vistas, añade los campos Imagen de portada y Título, y pon la cuadrícula en 3 columnas en sus ajustes de formato.
  5. En Criterios de filtro, haz clic en Añadir, elige Tipo de proyecto y marca Exponer este filtro a las personas visitantes. Ponle etiqueta «Filtrar por tipo».
  6. En Avanzado, pon Usar AJAX en Sí. Los filtros expuestos en una página del constructor solo funcionan con AJAX.
  7. Guarda la vista.

3. Inserta la vista en la página

  1. De vuelta en DXPR Builder, vacía las tres columnas estáticas o añade una Fila nueva.
  2. Haz clic en +, abre la pestaña Vistas de Drupal y elige Vista: Cuadrícula de portafolio (Bloque).
  3. En el diálogo de ajustes, marca Mostrar filtros expuestos y haz clic en Guardar. La cuadrícula se muestra con el desplegable «Filtrar por tipo» encima, y los elementos nuevos de Portafolio aparecen solos.
  4. Haz clic en Guardar en la barra de herramientas del constructor.

Lo que ves

El encabezado centrado «Nuestro trabajo» abre la página. En la banda gris de abajo, tres proyectos quedan lado a lado, cada uno una foto de portada sobre su nombre y resultado. Una banda morada cierra la página con Escríbenos.

Si no ves la página como se muestra

  • Una foto de portada queda debajo de su texto. La foto entró antes que el texto, y los elementos nuevos caen arriba de su columna. Arrastra la foto encima del texto por el tirador de su barra de control.
  • Las portadas tienen distintos altos. Sus proporciones difieren. Recórtalas a las mismas proporciones, súbelas de nuevo y elige las copias nuevas.
  • Cuadrícula de portafolio no está en la pestaña Vistas de Drupal. La vista está desactivada, o tu perfil de usuario del constructor la esconde. Actívala en Estructura > Vistas, o pide a una persona administradora que la marque en Vistas en tu perfil de usuario.
  • El editor muestra «Turn on Ajax on this view to use exposed filters». La vista no usa AJAX. Pon Usar AJAX en Sí en Avanzado en el editor de vistas; lee Un elemento se ve o se comporta mal.
  • Falta el desplegable «Filtrar por tipo». Mostrar filtros expuestos está desactivado en el elemento. Abre los ajustes del elemento de vista, márcalo y haz clic en Guardar.

¿Qué sigue?