Centro de Ayuda Wix
    Inicio
  1. Wix Studio, Partners y Enterprise
  2. Wix Studio
  3. Usar el Editor de Wix Studio
  4. Diseñar en el Editor de Wix Studio
    5. Editor de Wix Studio: usar un contenedor para crear una sección vertical

Editor de Wix Studio: usar un contenedor para crear una sección vertical

5 min de lectura
Las secciones verticales no están disponibles en el Editor de Wix Studio. Sin embargo, puedes usar un contenedor y anclarlo para lograr un efecto similar, haciendo que se vea como una sección de la barra lateral.
Ejemplo del resultado final: una sección de la barra lateral que se usa para la navegación en un sitio online creado en el Editor de Wix Studio

Paso 1 | Agrega un contenedor y aplica una cuadrícula

Primero, agrega un contenedor y establece su altura en 100vh para que ocupe toda la altura de la pantalla. Luego, aplica una cuadrícula CSS avanzada con el tamaño de la fila configurado en Auto.   

Para agregar un contenedor y aplicar una cuadrícula

  1. Agrega un contenedor desde el panel Agregar elementos  en el Editor de Wix Studio.
  2. Cambia la altura del contenedor a 100vh:
    1. Haz clic en la flecha Abrir Inspector profesional  en la parte superior derecha del editor.
    2. Haz clic en el icono Más acciones  junto a Tamaño.
    3. Habilita la palanca Medidas avanzadas.
    4. Establece la Altura en 100vh.
      Consejo: Haz clic en la unidad de medida actual (por ejemplo, %, px) para cambiarla.
  3. Aplica una cuadrícula CSS al contenedor:
    1. (En el Inspector profesional) Desplázate hacia abajo hasta Estilo.
    2. Haz clic en Aplicar junto a Cuadrícula CSS avanzada.
    3. Haz clic en Filas.
    4. Haz clic en la medida de tamaño actual para cambiarla a Auto.
El tamaño de las filas de la cuadrícula está configurado en Auto en el panel Inspector profesional

Paso 2 | Adjunta el contenedor al encabezado

Arrastra el contenedor al encabezado de la página actual para adjuntarlo. Esto cambiará el tamaño del encabezado de acuerdo con el contenedor, pero volveremos a cambiarle la altura en el panel Inspector profesional. 
Luego, fija el encabezado para que el contenedor permanezca visible a medida que los visitantes se desplazan hacia arriba y hacia abajo en la página.

Para adjuntar el contenedor al encabezado:

  1. Arrastra el contenedor para adjuntarlo al encabezado de la página. 
  2. Cambia el tamaño del encabezado:
    1. Selecciona el encabezado.
    2. Haz clic en la flecha Abrir Inspector profesional  en la parte superior derecha del editor.
    3. Haz clic en el icono Más acciones  junto a Tamaño.
    4. Habilita la palanca Medidas avanzadas.
    5. Establece la Altura en el valor deseado en px.
      Consejo: haz clic en la unidad de medida actual (por ejemplo, %, vh) para cambiarla.
  3. Desplázate hacia abajo hasta Posición.
  4. Selecciona Anclada en el menú desplegable Tipo de posición.
Vista en paralelo del panel Inspector profesional y el encabezado con el contenedor adjunto

Paso 3 | Alinea el contenedor y agrega relleno a la página

Ahora es el momento de colocar el contenedor. Dependiendo de dónde quieras que aparezca, alinea el contenedor hacia la parte superior izquierda o hacia la esquina superior derecha.
El paso final es agregar un relleno al lado correspondiente de la página; esto evita que el contenedor tape el contenido de la página. 

Para alinear el contenedor y agregar un relleno:

  1. Selecciona el contenedor.
  2. (En el Inspector profesional) Alinea el contenedor hacia arriba y hacia la izquierda o hacia la derecha:
    1. Haz clic en el icono Alinear arriba .
    2. Haz clic en el icono Alinear a la izquierda o Alinear a la derecha .
  3. Agrega un relleno a la página:
    1. Haz clic en Página en la parte superior del Inspector profesional.
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. En Posición, configura el relleno para que tenga el mismo ancho que el contenedor.
      Por ejemplo, si el ancho del contenedor es del 20% y está ubicado en el lado izquierdo de la página, el relleno izquierdo también debe establecerse en el 20%.
      Setting the page padding in the Inspector panel

Paso 4 | Personaliza el contenedor

El contenedor ahora está listo para que lo uses como una sección de barra lateral. Agrega los elementos que necesites y diseña el contenedor desde el panel Inspector profesional. Debería verse como en el siguiente ejemplo: adjunto al encabezado y ocupando toda la altura de la pantalla a medida que te desplazas hacia arriba y hacia abajo en el lienzo. 
Ejemplo de un contenedor convertido en una sección de la barra lateral siguiendo las instrucciones del artículo

¿Te ha sido útil?

|

En este artículo

  • Paso 1 | Agrega un contenedor y aplica una cuadrícula
  • Paso 2 | Adjunta el contenedor al encabezado
  • Paso 3 | Alinea el contenedor y agrega relleno a la página
  • Paso 4 | Personaliza el contenedor