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. For more information about GemPages’ responsive feature, check out this article.
Spacing
In the Spacing section, you can adjust all 4 dimensions of the Margin and the Padding. Margin is the space outside of an element’s border while Padding is the space inside of an element’s border, between the content and the border itself. To adjust the Margin, modify the four values outside the square, and for the Padding, change the four values inside the square.
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 Advanced 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 Advanced 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. You can get color codes from HTML Color Codes.
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.
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.
Animations
Toggle on this button to add animations for GemPages element. Animations are categorized into appearing and hovering effects. Choose your preferred one and configure it to align the animation with your expectations.
CSS Class
This section is exclusively designed for developers or tech-savvy users. If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.
For any further assistance, our GemPages Support Team is here to help. Please reach us via email or live chat.