Style your elements with the Design tab

In this article, you will learn who to get the best out of the design options under the Design tab to create a stunning and functional website.  

The Design tab is an effective tool on GemPages that allows you to style your elements in a particular way. These settings are available for all elements on GemPages.

There are 7 key 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 impact the loading speed in general as the invisible elements are just hidden to users and always loaded all along with other elements.


Parameters in this group allow you to adjust the Margin (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 directions: top – right – bottom – left.



In the Background settings, you can change the color or insert an image for any elements. 


Border a band along or around the edge of an element. 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 border. Shadow effect is normally used to add focus or depth to buttons, text blocks, images, and so on. 



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

  • Type: To change the shadow from the outside or inside of the element's border.
  • Angle: To adjust the direction of the box-shadow, you can move the arrow around or enter an angle value in the input field.
  • Distance: To move the shadow closer or further into the direction specified by the set angle.
  • Blur: the higher the number, the more blurred the shadow will be.
  • Size: To determine the spread radius of the shadow.



This parameter allows you to customize the transparency level of 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.

Animations (Beta)

The Animation feature has just been released this September 2020. It is still under testing time however you can try this latest 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?