About Global Styles
Global Styles, a key feature of GemPages, is designed to help you establish a consistent style for specific sections and elements across your webpage. As the number of pages you create grows, maintaining a uniform design becomes increasingly challenging. By leveraging the Global Style functionality, you can save time and effortlessly achieve a polished and professional appearance for your website.
In Version 7, the Global Style feature has been streamlined. Unlike in version 6, where multiple presets were available, version 7 offers just one preset. However, you now have the flexibility to pre-define specific styles and apply them to your page. Any adjustments made to these settings will be automatically reflected across all connected pages after confirmation.
How to access the Global Styles
Step 1: From the GemPages Dashboard, select your preferred template to access the Editor.
Step 2: Within the Editor’s left sidebar, click on the second icon to access the Global Styles.
How to customize Global Styles
Colors
Global Styles supports 15 global colors divided into the following categories:
- Button color
- Text Color
- Background Color
- Line Color
- Accent Color
These colors will be generated from your published theme. To replace the existing color, click on it and choose another one from the pallet.
Font Manager
Global Styles provides two types of text styles, namely Heading and Paragraph. You can select your preferred option from the drop-down menu, and the font used is taken from Google Fonts.
Typography
GemPages supports 6 types of Headings and 3 types of Paragraphs. In the element settings, all settings related to text styles will be selected from these Global typography settings.
When you install GemPages, it will synchronize the global typography with text styles from your themes. The typography information synced from your Shopify theme includes Font Family, Font-size, Line Height, Font Weight, Font Style, and Letter Spacing.
Spacing
GemPages allows you to synchronize spacing on your website by configuring global spacing values. There are 10 types of global spacing available, each of which can be customized with values for three devices: Desktop, Tablet, and Mobile. The default unit for global spacing is pixels (px). Global spacing can be used for configuring margin, padding, item spacing, or column gaps.
Default Row Width
About Default Row Width
A page usually consists of multiple sections, each of which requires a distinct style. For instance, sections like Hero Banner usually have backgrounds, and you may prefer to set them to full width. However, other sections have a fixed width to maintain the layout and center the content on the screen. Thus, a universal value is required to automatically adjust the width of such sections.
How to use
- Width
GemPages sets the default width value to 1200px for Desktop and 100% for Tablet and Mobile, which is suitable for all current templates. You don’t need to make any adjustments as GemPages will automatically apply this value.
However, if you prefer a different width value, you can enter a number in the box. For instance, if you enter 1000px, the default width for non-full-width sections/rows will be 1000px.
- Page Padding
Enter a number for your preferred padding for sections/ rows. Please note that this padding will not be applicable for full-width sections/rows.
Corner
GemPages allows you to synchronize the corners used on your website by configuring a global corner value. You can define three corner styles: Small, Medium, and Large. Simply click on the pencil icon to input the value in pixels.
