Crea contenido de varias columnas.

Learn DXPR BuilderBuild pagesVolg een tutorial

Aquí creas una página con los cuatro diseños de columnas que más usarás: contenido con barra lateral, dos mitades iguales, tres tercios y cuatro cuartos. Cada uno recibe un encabezado encima. Úsala para aprender qué ajuste encaja con cada contenido. Para cada ajuste de fila, lee Filas y columnas.

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

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • 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. Por eso cada encabezado entra tras su fila: cae encima.

Elige un diseño

Diseño Va mejor para Ajuste
Contenido con barra lateral artículos con enlaces relacionados 2/3 + 1/3
Dos mitades iguales comparaciones, antes y después el valor por defecto de la fila
Tres tercios iguales funciones destacadas, servicios 1/3 + 1/3 + 1/3
Cuatro cuartos iguales estadísticas, tarjetas pequeñas 1/4 + 1/4 + 1/4 + 1/4

Una Fila nueva llega con dos columnas iguales. Cada otro diseño sale del icono de cuadrícula de la fila (Diseño de columnas).

Paso 1: contenido con barra lateral

  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 Fila. Haz clic en su icono de cuadrícula (Diseño de columnas), elige el ajuste 2/3 + 1/3 y haz clic en Guardar.
  3. Haz clic en + en la columna ancha y elige Texto en la pestaña Contenido. Escribe el artículo, pon la primera línea en Encabezado 3 y haz clic en Guardar.
  4. Haz clic en + en la columna estrecha y elige Texto. Escribe «Relacionado» como Encabezado 4, añade una línea por página relacionada y haz clic en Guardar.
  5. Haz clic en + en la sección y elige Texto; cae encima de la fila. Escribe «Contenido con barra lateral» como Encabezado 2 y haz clic en Guardar.

Paso 2: dos mitades iguales

  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. Dos columnas iguales es el valor por defecto, así que no hay nada que cambiar.
  3. Añade un elemento Texto en cada columna: «Antes» y «Después» como Encabezado 4 con una línea cada uno.
  4. Añade el encabezado «Dos mitades iguales» igual que en el paso 1.

Paso 3: tres tercios iguales

  1. Añade una tercera sección con Añadir sección debajo y dale la clase Centrar texto.
  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. Añade un elemento Texto en cada columna: «Papel», «Vidrio» y «Orgánico» como Encabezado 4 con una línea cada uno.
  4. Añade el encabezado «Tres tercios iguales».

Paso 4: cuatro cuartos iguales

  1. Añade una cuarta sección con un Fondo gris claro y la clase Centrar texto.
  2. Añade una Fila, haz clic en su icono de cuadrícula (Diseño de columnas), elige el ajuste 1/4 + 1/4 + 1/4 + 1/4 y haz clic en Guardar.
  3. Añade un elemento Texto en cada columna: el día como Encabezado 4 y lo que se recoge.
  4. Añade el encabezado «Cuatro cuartos iguales».

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) y elige Vista previa.

En pantallas pequeñas

Las columnas quedan lado a lado desde 768 píxeles de ancho, así que las tabletas muestran el mismo diseño que los escritorios. En teléfonos cada columna toma todo el ancho, y las columnas se apilan en su orden. Para otro diseño en tabletas, haz clic en el icono de cuadrícula de la fila (Diseño de columnas) y elige Añadir tamaño de pantalla.

Ve más allá

No sale en el vídeo:

  • Estrecha, ancha, estrecha: el ajuste 1/4 + 1/2 + 1/4 mantiene legible el texto largo con márgenes vacíos.
  • Reflejar fila: actívalo en los ajustes de la fila para intercambiar las columnas en tabletas y escritorios. Los teléfonos conservan el orden original, así que la primera columna sigue primera allí.

Lo que ves

Cuatro bandas se siguen, cada una con su encabezado arriba. El artículo y sus enlaces relacionados comparten la primera, dos mitades quedan sobre gris, y siguen tres tercios centrados. Cuatro cuartos centrados sobre gris cierran la página.

Si no ves las columnas como se muestra

  • La fila tiene un número equivocado de columnas. El ajuste solo se aplica cuando haces clic en Guardar en el diálogo de diseño. Haz clic en el icono de cuadrícula de la fila (Diseño de columnas) de nuevo, elige el ajuste y haz clic en Guardar.
  • Un encabezado queda debajo de su fila. El encabezado entró antes que la fila, y los elementos nuevos caen arriba de su sección. Arrastra el encabezado encima de la fila por el tirador de su barra de control.
  • Las columnas se apilan en una tableta. La tableta mide menos de 768 píxeles, como una tableta pequeña en vertical. Añade un diseño para ese ancho con Añadir tamaño de pantalla en el diálogo de diseño de la fila.
  • 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?