Editor X: acerca de la estructura de tu página (elementos principales, secundarios y relacionados)
4 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Al estructurar páginas en tu sitio, básicamente estás anidando elementos dentro de contenedores. Por ejemplo, colocar texto inside a container box. Esto crea una relación entre los elementos y su contenedor principal, derivada de los conceptos de HTML y CSS modernos.
En este artículo, aprenderemos sobre esta relación y cómo aprovecharla para crear un sitio adaptable:
Relaciones principales-secundarias entre elementos
Cuando un elemento se coloca dentro de un contenedor (por ejemplo, sección, caja contenedora, creador de estilo, etc.), adjunta el elemento y crea una relación principal-secundaria. Por ejemplo, si adjuntas tu logotipo al encabezado, se acopla automáticamente a los bordes más cercanos y se convierte en el "elemento secundario" del encabezado.
De manera similar a CSS, el diseño (es decir, el tamaño, la posición, el relleno, etc.) de un contenedor principal influye en sus elementos secundarios. Agregar relleno a un contenedor, por ejemplo, hace que los elementos sean más pequeños para adaptarse al cambio.
Nota:
Cuando apilas elementos para controlar su orden vertical, se colocan dentro de un contenedor flexible que actúa como principal.
Consejo:
Selecciona aquí para leer más sobre el tamaño de los elementos.
Crear la estructura de la página
Al planificar el diseño de tu sitio, es importante comenzar creando una estructura en capas. Recomendamos crear primero los contenedores principales y luego agregar elementos secundarios arrastrándolos y soltándolos en el lugar correcto.
Las capas de la página
En el Editor X, la estructura que creas se refleja en el panel Capas. Las siguientes capas conforman la estructura de tu sitio:
- Página: desde el panel Capas, puedes editar el color de fondo de la página y agregar relleno. Haz clic en el icono Mostrar más
junto a Página para controlar estos ajustes. - Secciones: cada página está compuesta por al menos una sección. Puedes crear tantas secciones verticales y horizontales como necesites. También puedes crear secciones master que aparecen en varias páginas.
- Contenedores: anida los elementos dentro de los contenedores para crear fácilmente una estructura adaptable y garantizar que permanezcan en su lugar. Agrega una caja contenedora o herramientas de diseño inteligentes como el Apilamiento, los Creadores de estilo y los Repetidores.
- Elementos: estos son los elementos que agregas desde el panel Agregar (por ejemplo, Texto, Botón, Formularios). Puedes acoplar elementos individuales o apilar varios elementos para garantizar que permanezcan en el mismo orden y espaciado en todos los tamaños de pantalla.
Importante:
Si bien las cuadrículas no forman parte del modelo jerárquico, pueden afectar el tamaño y la posición de los elementos. Más información
Re-parentalidad de elementos
Mover un elemento secundario a un nuevo contenedor principal se denomina "reorganización de los elementos primarios". Para volver a crear un elemento primario, simplemente arrástralo y suéltalo dentro del nuevo elemento principal.
Encontrar el lugar de un elemento en la jerarquía
Cada sección, contenedor y elemento de la página tiene rutas de navegación que indican su lugar en la jerarquía. Puedes navegar fácilmente entre las capas de tu página seleccionando las rutas de navegación.
Estructurar elementos relacionados
Los elementos relacionados comparten el mismo elemento principal directo. Por ejemplo, el texto y el botón dentro de este contenedor son hermanos, ya que el contenedor es su principal:
Si tus elementos relacionados están en contenedores Flexbox (por ejemplo, Apilamiento, Creadores de estilo, Repetidores), pueden afectar el tamaño y la posición de cada uno. Diseñar esta relación podría ser útil para crear un sitio adaptable, ya que puedes evitar que los elementos se superpongan en tamaños de pantalla más pequeños.
En el siguiente ejemplo, puedes ver los márgenes que se crean automáticamente entre elementos relacionados:
Cambios estructurales en todos los breakpoints
El panel Capas te permite ver la relación (es decir, la jerarquía) entre los elementos, los contenedores y las secciones de tu página y moverlos según sea necesario.
La jerarquía de páginas es parte de la estructura HTML de tu sitio, lo que significa que los cambios que realices se reflejarán en todos los breakpoints. Por ejemplo, cuando separas un elemento principal y un elemento secundario (por ejemplo, el texto y su contenedor), esa separación se aplica a todos los breakpoints.
Consejo:
Para obtener más información sobre el diseño en todos los breakpoints, selecciona aquí.
¿Te ha sido útil?
|