Create a new Global Style
Step 1: Head to the EcomSolid Dashboard > Styles and click on “Create new style.”
Step 2: Input your Global Style name and select your preferred style from the templates. Hit “Next step” when finished.
Step 3: Next, you will see all the options to customize the Preset as below.
Color
Under the Color section, you can define four fixed colors used for different positions of your page. Select your preferred color or input the hex color code into the box.
- Brand: The Brand color will be applied to the top bar, price, button, icon, hover/active text, and the tab bar.
- Highlight color: This color will be used for the points that need to draw visitors’ attention.
- Background: Determine the background color for the entire page or the sections at this point.
- Custom Color: Pre-define three preferred colors and later use these colors in the process of building your pages.
Typography
Choose a consistent font type, font-weight, and color for the different parts across your site.
- Heading
- Body & Subheading
- Custom font
- Base size
- Line height
- Link
Button
Button color: Select a color or input a hex color code into the button color and hover color box.
Button style: Style your button further by adjusting the font size, font weight, border-radius, and border width.
Form
Customize your form field to ensure a consistent appearance throughout your pages.
Responsive
Input the number into the fields to decide the suitable width among different devices in pixel or percentage.
Hit “Save Preset” after all configuration is done. Your global style is now ready to use.
Apply the Global Style for your theme
Step 1: From the EcomSolid Dashboard, head to the Theme Editor.
Step 2: Click on the orange icon on the right corner of the Editor. There will be an opened window showing you all the predefined global styles.
Step 3: Select your preferred preset from the ones you created before. Otherwise, please navigate to the EcomSolid Presets tab to choose from our pre-designed preset.
When finished, click on “Apply Preset”; the preset will be applied to all your theme pages.
Apply the Global Style for your page
Step 1: Go to the EcomSolid Dashboard > Page and select your preferred page to start editing.
Step 2: Click on the orange icon on the right corner of the Editor. There will be an opened window showing you all the predefined global styles.
Step 3: Select your preferred preset from the ones you created before. Otherwise, please navigate to the EcomSolid Presets tab to choose from our pre-designed preset.
Click on “Apply Preset” when finished. By choosing the preset from the Page Editor, the style will be applied to the selected page only.
That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.