MANUAL OXYGEN BUILDER

layouts oxygenados
Layout y Spacing

Cuando se arrastran elementos muy grandes, se arrastran elementos a una distancia muy larga, o cuando se crea una anidación complicada,  a menudo el Panel de Estructura es  una forma más fácil de posicionar el elemento donde se quiere.

Haz clic en el conmutador de Structure, cerca de la esquina superior derecha de la pantalla, para abrir el Panel de Estructura, a continuación, haz clic en la zona de puntos y arrastra un elemento para reposicionarlo. Siempre resulta mas efectivo el movimiento hacia arriba, por lo que si tienes problemas, prueba a hacer el movimiento hacia arriba en la medida de lo posible.

AJUSTAR EL ESPACIO DE LOS ELEMENTOS
El espacio alrededor y dentro del elemento activo puede ajustarse arrastrando las barras púrpuras de espaciado alrededor del límite del elemento.
En primer lugar, activa el elemento para el que desea ajustar el espaciado haciendo clic ken él; a continuación, sitúa el puntero del ratón sobre el borde interior o exterior del elemento hasta que aparezca una barra de arrastre de color púrpura.
Haga click y arrastra la barra para ajustar el espaciado.

 


Las fechas circulares corresponden a las acciones de Deshacer y Rehacer, mientras que la figura que está al lado con el texto Structure sirve para mostrar u ocular el Panel de Estructura.  Así mismo, abajo tenemos un detalle del Panel de Historial, con el que se pueden revertir los cambios que se han realizado basándose en la hora en las que fueron realizados.

 


-- ESPACIADO -- (Spacing)

Pasa el ratón por encima del borde de un elemento para que aparezca la barra de arrastre del espaciado. Hacer click y arrastrar esta barra para ajustar el espaciado.

Hay dos tipos de espaciado:

  • Padding (Relleno) - espacio dentro de un elemento.
  • Marging (Margen) - espacio fuera de un elemento.
  • En lugar de utilizar la barra de arrastre, puedes especificar manualmente estos valores en Advanced > Size & Spacing (Avanzado > Tamaño y espaciado).

    LA CUADRÍCULA CSS ESTÁ DISPONIBLE COMO OPCIÓN DE DISEÑO EN LOS ELEMENTOS SECTION, DIV, GALLERY, EASY POSTS Y REPEATER.
Puedes obtener más información sobre Grid aquí y aquí también.

 

-- GRID LAYOUT -- (Diseño de rejilla)

Hay una casilla de verificación para Activar/Desactivar la cuadrícula CSS

--Rows-- (Filas)

Comportamiento de las filas o Rows

  • Auto: Se utilizará, de manera automática, el número correcto de filas en función de la cantidad de elementos que tengas en el Grid (cuadrícula)
  • Explicit: Aquí eres tú el que establece la cantidad de filas y las alturas mínimas y máximas.
  • Row Count: Se establece el número de filas que quieres en la cuadrícula.
  • Min Height: Altura mínima de las filas.
  • Max Height: Máxima altura de las fila.
  • Match Height of Tallest Child: Esta opción hace que todas las filas tengan la misma altura, basándose en el el valor de rejilla mas alto.
  • Gap: Establece el espaciado o separación entre filas.
  • Vertical Item Alignment (Start, Center, End, Stretch): Cuando la rejilla no ocupa  toda al altura disponible, este ajuste alineará el contenido dentro de su celda de la cuadrícula basándose en la selección de la alineación vertical del elemento.

--DEFAULT CHILD SPAN-- (Espaciado por defecto)

  • Column Span (Extensión de Columna):  Establece el número por defecto  de columnas que abarque cada elemento.
  • Row Span (Extensión de Filas): Establece el número de filas que queremos que abarque cada elemento por defecto.

 

--CHILD SPAN OVERRIDE-- (Anulado de la extensión)

Este control refleja el número de elementos de la rejilla. Se hace click en uno de ellos para establecer explícitamente el número de filas o columnas que abarcarán.

  • Column Span: El número de columnas que abarcará el cuadro seleccionado.
  • Row Span: El número de filas que abarcará el cuadro seleccionado.
  • Reset Grid Children: Restablece todo lo establecido anteriormente.

 

 

El motor de diseño de Oxygen está basado en flexbox lo que facilita la creación de cualquier diseño que te puedas imaginar.
Puedes definir la estructura de tu página mediante secciones, columnas y divs.

Coloca tu contenido, como encabezados, texto, vídeos, etc., dentro de estos elementos, y controla su diseño y alineación utilizando los controles de diseño de Oxygen.

-- SECCIONES --

En general, las páginas se construirán a partir de múltiples elementos de Sección. Todos los demás elementos  se colocarán dentro de estas secciones.

El elemento Section restringe automáticamente el contenido dentro de él para que no sea más ancho que el ancho de la página. Puedes especificar un ancho personalizado para la sección en Advanced > Size & Spacing > Container Width (Avanzado > Tamaño y espaciado > Ancho del contenedor).

 -- COLUMNAS --

El elemento Columns es para el contenido basado en columnas. Puedes elegir entre los diseños de columna preestablecidos o especificar manualmente el ancho de cada columna.

El elemento Columns tiene controles de respuesta, de modo que por debajo de un ancho de pantalla especificado, puede:

  • apilar las columnas verticalmente
  • invertir el orden de las columnas
  • forzar el ancho de las columnas al 50%.

-- DIVS --

El elemento Div se utiliza más comúnmente para agrupar elementos dentro de una Section o Column para controlar el diseño de sólo esos elementos, sin afectar el diseño de otros elementos dentro de la Section o Column.

Por ejemplo, puedes colocar un Div apilado horizontalmente dentro de una Section apilada verticalmente para crear un diseño horizontal dentro de un diseño vertical.

-- CONTROLES DE DISEÑO Y ALINEACIÓN --

SectionsColumns, and Divs tienen ajustes para controlar el diseño y la alineación de los elementos colocados dentro de estos.

-- CHILD ELEMENT LAYOUT --   (Disposición de elementos hijo)

Los elementos hijo de una sección, column o div pueden apilarse horizontal o verticalmente.

Se puede cambiar la configuración del Diseño del Elemento Hijo (Child Element Layout) basándose en el ancho de la pantalla para que su diseño sea responsive.

-- ALINEADO DE ELEMENTOS --
Una vez que elijas cómo apilar los elementos hijos dentro de un contenedor, verás ajustes adicionales para alinear los elementos dentro de este contenedor. Estos ajustes permiten alinear los elementos a un lado o al otro, centrarlos en el medio, o colocarlos cerca de la parte superior o inferior del contenedor.

pencilmagic-wanddatabasedicestarpaperclipfile-emptyfile-addbookcartmapconstructionrocketcodethumbs-upchevron-downlayerspointer-right