Añade un contenedor de capas posicionadas.
Usa Capas posicionadas cuando quieras que los elementos se superpongan o queden en un punto exacto, lo que las filas y columnas no pueden hacer. Obtienes un lienzo en el que arrastras cada elemento donde lo quieres, como un titular sobre una foto. El ejemplo superpone un titular blanco de jornada de puertas abiertas sobre una imagen. Para contenido normal lado a lado, las filas y columnas son más fáciles de mantener ordenadas en teléfonos.
Añade un contenedor de capas posicionadas
- Pasa el cursor sobre la columna y haz clic en + en su barra de control, o en el + del centro de una columna vacía, para abrir el selector de elementos.
- En la pestaña Diseño, haz clic en Capas posicionadas.
- Sus ajustes se abren primero. Pon Alto para que quepa tu capa más alta, y haz clic en Guardar. Aparece un lienzo vacío.
- Pasa el cursor sobre el lienzo y haz clic en + en su barra de control para añadir un elemento, como Texto o una Imagen. Cada elemento que añades se vuelve una capa que puedes posicionar.
Lo que ves
El lienzo conserva el alto que pusiste, y cada capa queda donde la colocaste, encima o debajo de las demás. Las personas visitantes ven la composición como se ve en el editor. Las posiciones se guardan como parte del lienzo, así que una capa conserva su sitio cuando el lienzo se estrecha. El texto conserva su tamaño salvo que actives Adaptable.
Configura tus capas posicionadas
Abre los ajustes desde Más > Ajustes en la barra de control de Capas posicionadas.
| Ajuste | Efecto | Valor por defecto |
|---|---|---|
| Ancho | Ancho del lienzo, como 100% o 600px | 100% |
| Alto | Alto del lienzo en píxeles | 500 |
| Adaptable | Escala el alto del lienzo y el texto con el ancho del lienzo, para que la composición conserve sus proporciones en pantallas pequeñas | Desactivado |
Posiciona las capas
- Seleccionar: haz clic en una capa. Aparecen tiradores en sus esquinas y bordes.
- Mover: arrastra la capa por su nombre en su barra de control, como Texto o Imagen. Las capas quedan dentro del lienzo.
- Cambiar tamaño: arrastra un tirador de la capa seleccionada.
- Añadir en un punto: haz doble clic en una parte vacía del lienzo. Se abre el selector de elementos, y el elemento nuevo cae donde hiciste clic.
El menú Más de cada capa tiene cuatro elementos extra. 100% de ancho y 100% de alto estiran la capa por el lienzo. Traer adelante y Enviar atrás la mueven encima o debajo de las demás capas.
Si no lo ves
- Una capa no se mueve al arrastrarla. Las capas solo se mueven por el tirador con su nombre en la barra de control. Pasa el cursor sobre la capa y arrastra ese tirador.
- Una capa se esconde detrás de otra. Está más abajo en la pila. Abre el menú Más de la capa y elige Traer adelante.
- Las capas se superponen o se desbordan en teléfonos. Adaptable está desactivado, así que el alto del lienzo y el texto conservan su tamaño. Activa Adaptable en los ajustes de Capas posicionadas.
- Capas posicionadas no está en el selector dentro de un lienzo. Un lienzo no puede guardar otro lienzo. Añade el elemento nuevo de Capas posicionadas a una columna en su lugar.
- Capas posicionadas no está en el selector en ninguna parte. Tu perfil de usuario de DXPR Builder lo excluye. Una persona administradora marca Capas en Elementos de tu perfil, en
/admin/dxpr_studio/dxpr_builder/profile.
¿Qué sigue?
- Secciones: dale al área alrededor del lienzo un color o una imagen de fondo.
- Anidamiento: combina capas con filas y columnas en diseños más complejos.
- Pestaña de animación: deja que cada capa aparezca con su propio efecto de entrada.