Element's Design tab

This article will show the design options under the Design tab.

The Design tab is an effective tool of GemPages that allows you to style your elements. These settings are available for all elements inside GemPages.

It contains 7 main parameters: Visibility, Spacing, Background, Border, Shadow, Opacity, and Interaction (Beta) 



With GemPages's visibility feature, you can go as far as hiding elements on specific devices to create a variety of designs on 1 single page. Select the Design tab and toggle on or off each screen mode under Visibility settings.


Visibility shouldn't be overused as it could make your page speed slower (the invisible elements are just hidden to users and always loaded along with other elements).


Parameters in this group allow you to control the Margin (the space outside an element's border) and Padding (the space inside an element, between its content and its border). In the Padding and Margin parameters, each of them has 4 empty boxes that allow you to fill in the value for 4 sides: top – right – bottom – left.



In the background settings, you can add a background image or color to any element. 


Borders define the radius of an element’s edges or create outlines on one or more sides of an element's boundary. You can adjust the element’s border styling via Border Style, Border Color, Border Width, and Border Radius. 


You can make a circle button by adjusting the Border Radius and Border Width up to the maximum value in More settings.


Shadows add styling outside or inside of an element’s rectangular boundary. Shadows are normally used to add focus or depth to buttons, text blocks, or any other element on your page.



In More Settings, you can customize further the type, angle, distance, blur, and size of the shadow.

  • Type: changes the shadow from an outer shadow (outset) to an inner shadow or vice versa.
  • Angle: changes the direction of the box-shadow. Adjust the angle by clicking and dragging the dial, clicking anywhere on the dial to set that position, clicking the arrows to rotate the angle, or entering the angle value in the input field.
  • Distance: moves the shadow closer or further in the direction specified by the set angle.
  • Blur: the higher the number, the more blurred the shadow will be.
  • Size: specifies the spread radius of the shadow.


This parameter allows you to customize the transparency level for an element. You can change the opacity by entering a value in the input field or by dragging the opacity slider to your desired value.

Interaction (Beta)

The Interaction feature has just been released this September 2020. It is still in beta however you can try this experimental feature and let us know how your experience is. We will work on it to bring you the most friendly interactive animations. 


Click on the plus icon on the upper right corner, you will see multiple options for animations:

  • Mouse click: Animate on mouse click
  • Mouse hover: Animate when hovering on
  • Mouse leave: Animate when the mouse leaves the object
  • While pressing: Animate when pressing on the element then stop when stop pressing
  • Scroll into view: Animate when the element scrolls into view or first appear
  • While scrolling in view: Animate when the element scrolls through the viewport
  • After page finish loading: Animate trigger after page load


If you're interested in learning more about powerful, user-friendly GemPages, please feel free to figure out more articles here or reach our Support Team. We'd be happy to answer any questions you have.

Was this helpful?