By using Layout in elements, you can easily make visual adjustments such as padding and sizing. You can edit the Layout settings by following the steps below:
Step 1: Click on the Element
Activate the element you want to edit by selecting it from the screen.
Step 2: Open the Styling Panel
Open the Styling Panel on the right side to adjust the visual settings for the selected element.
Step 3: Padding Settings
- Go to the Padding section in the Layout area.
- Set the internal spaces by entering the required values for the top (Top), bottom (Bottom), right (Right) and left (Left) sides of the element.
Step 4: Size Settings
- Go to Size in the Layout area.
- Enter the width (Width) and height (Height) of the element.
- You can define the values in px (fixed pixel size) or % (ratio-based size) format.
Step 5: Min Size Settings
- Min Size specifies the minimum width and height to which an element can be reduced.
- Go to Min Size in the Layout area and enter the appropriate values and select px or % as the unit.
Step 6: Max Size Settings
- Max Size determines the maximum width and height of an element.
- Go to Max Size in the Layout field and enter the required values and select px or % as the unit.
Step 7: Align Settings
- With the Align option you can set the alignment of the element.
- Vertical Alignment: Up, down or centered.
- Horizontal Alignment: Left, right or centered.
Step 8: Display (Display Format)
- Use the Display settings to determine the position of the element in the Container it is in.
- Block: Allows the element to be placed alone on the line where it is located.
- Inline: Allows elements to appear side by side.
The properties in Layout may vary depending on the element type. Some elements may have all Layout properties available, while others may have a limited number of properties active.
With these steps, you can effectively adjust the Layout settings to ensure the visual harmony of the elements.
