i

Please enable JavaScript to view this site.

This element is a structure built of a set of items and allows to structure them based on different styles: column, row, stripe and mosaic. Such items are containers, which allows to add other elements. These elements can be moved with each item when the layout structure is resized.

 

The element properties are represented by icons in its context menu, where its operations are also available.

Subtypes

 

Column

Row

Stripe

Mosaic

Structure Properties        

 

The structure properties panel of an element opens when selecting the icon PropiedadesEstructura of the context menu.

 

 

MPA-PropiedadesEstructura-010

Alignment

 

Allows to align the element by selecting one of the available icons.

 

AlineamientoIzq Align to the left.

 

AlineamientoCentro   Align to horizontal center.

 

AlineamientoDer Align to the right.

 

AlineamientoArriba Align up.

 

AlineamientoCentroVert Align vertical center.

 

AlineamientoAbajo Align bottom.

Size

 

MPA-PropiedadesTamaño-001

 

All size properties can be expressed in pixels (px), percentage (%), viewport width (vw), and viewport height (vh). Additionally, for Width and Height properties, the “auto” option is added.

Position Type

MPA-PropiedadesTipoPosicion-002

 

Possible Values

 

Default: The element has a relative position with respect to the superior element where it was placed (container or section).

Fixed: Fixes the element to the page so that it is always visible in the same position. It allows to increase the visibility of important content.

Docking

MPA-Acoplamiento-001

 

Determines the vertical and horizontal position of elements within the page section or container, when the screen is resized.

 

Although the modeler automatically docks the element when it is added, it can also be configured in order to be docked to any side (to the top, bottom, left, right, or even in the center of the section or container it is in). Just click on the arrows or in the center of the side to be docked to.

Margins

MPA-PropiedadesMargenes-001

 

It allows to define the distance of elements from the borders of their top element. The behavior of margins depends on the docking of the element. It can be expressed in pixels (px), percentage (%), viewport width (vw), and viewport height (vh).

 

Top

Distance to the top border of the highest ranking element.

 

Bottom

Distance to the bottom border of the highest ranking element.

 

Left

Distance to the left border of the highest ranking element.

 

Right

Distance to the right border of the highest ranking element.

 

iconobordes Allows the value entered in one of the margins to be copied to the other ones automatically.

iconomargenes Allows to indicate different values for each margin.

Advanced

 

MPA-PropiedadesAvanzado-008

 

Name

Name used to reference the element during modeling.

 

Identifier

Uniquely identifies the element. It is used in the Javascript SDK.

Style Properties

 

The style properties panel of an element opens when selecting the icon PropiedadesEstilo of the context menu.

 

 

MPA-PropiedadesEstilo-009

Padding

 

MPA-PropiedadesEspacioRelleno-002

 

All padding space properties allow you to create a space around the borders (top, bottom, sides) and the bottom elements. It can be expressed in pixels (px), percentage (%), viewport width (vw), and viewport height (vh).

 

Items Gap

Defines the gap between the design items.

 

iconobordes Allows values entered in one of the paddings to be copied to the other ones automatically.

iconomargenes Allows to indicate different values for each padding.

 

Configuration Properties

 

The configuration properties panel of an element opens when clicking the icon iconoConfiguracion of the context menu.

 

MPA-PropiedadesConfiguracion-007

Styles

MPA-PropiedadesDiseñoEstilos-001

 

Indicates the style type.

 

Proportion of the items

Pressing the “Equalize” button adjusts the size of the items proportionally within the layout.

Items List

 

MPA-PropiedadesDiseñoLista-001

 

The items contained in the design are visualized and can change position by dragging them within the list.

Send us your comment
Share on Twitter Share on Linkedin Send by Email Print