[Editor 7.0] An overview of the Design tab

Unlike the Settings tab, all of the Design tab’s configurations are the same across all elements, these are settings to help you customize the look and feel of an element on the live page.

Visibility

The Visibility section is used to hide an element from one or more particular views.

By default, an element is visible to all 3 different views (Desktop, Tablet, and Mobile). By toggling the corresponding view in Visibility, you can decide exactly which view to show, and which view to hide the element.

Spacing

Within the Spacing section, it is possible to modify the four dimensions of both the Outside and Inside space. The Outside space pertains to the area outside an element’s border, while the Inside space refers to the region between the content and the border itself, inside an element’s border.

Opacity

You can change the transparency of the entire section at this point. The lower the numerical value, the greater the level of opacity.

Effect

Border

Hit the three-dot button to personalize the border according to your preferences.

Corner

Hit the three-dot button and customize a corner style for your image.

Keep in mind that any modifications made to the settings in the Design tab will affect the entire section containing the element, rather than just the element itself. As a result, if you wish to adjust an element’s border or corner, you should make the changes in the Settings tab.

For instance, if you add a Button element to the Editor and adjust the corner value in the Design tab, you won’t observe any changes because it only affects the section covering the button. To make your button circular, go to the Settings tab and select the Circle option under the Corner section.

Shadow

Toggle on this switch if you want a shadow for the image and you will see the options to adjust the shadow.

Angle: Adjust the shadow angle by moving the dot or entering a value to achieve the desired angle.
Distance: Use the slider or input box to determine the distance between the shadow and the element itself.
Blur: Drag the slider or use the box to determine the blurriness of the shadow.
Size: Adjust the size of the shadow.
Color: Choose a color for the shadow in the color palette or use a hex color code.

Position

CSS position is an important attribute for positioning elements on a web page. This attribute allows you to control how an element is positioned on a web page using different values.

This is a complex setup that requires coding knowledge. If you don’t have experience with coding or feel uncomfortable doing it, please contact our GemPages Support Team for help.

You can set up an element in 5 positions:

Static: The default value for elements, and cannot be positioned using the top, bottom, left, or right attributes.
Relative: If Static is the default way to display an element’s position, then Relative is the way to display its relative position. The initial position will still occupy a space on the page.
Absolute: the position of an element relative to the nearest scrolling parent element.
Fixed: the position of an element relative to the viewport.
Sticky: the position of an element relative to its parent element.

To specify the exact position of an element, select a type from the dropdown menu and enter the desired values for top, bottom, left, or right.

Z-index: this value is used to handle the stacking order of overlapping elements.

For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.