Global Styling Feature

In this article, you will learn about the Global Styling Feature and how to use it.

About Global Styling Feature

PageFly Global Styling Feature is designed to help merchants use predefined styling for elements across their store. These predefined styling can be customized by merchants. This feature allows merchants to build pages with speed and uniformity all across their online store. All value that has been set up in Global Styling will become Computed values on the Editor page.

You can check more details in the video tutorial below.

For example:

As you want to have the same heading style throughout the page, instead of having to copy and paste style from one heading to another, you can use the Global Styling option in the Styling tab.

If you want to change the style of all the headings that are using Global Styling, you only need to change the style in the Global Styling setting.

Another example is when you want to use your brand colors for many elements such as buttons or icons, you can set color for many elements in Global Styling or set your brand color in Global Styling Color then use it when building your store with PageFly.

Overall, using Global Styling for your pages will save your time and effort as well as increasing the page appearance as a whole in the process of building your store.

To understand how to use this feature, please continue to read the article.

Access Global Styling Feature

• Step 1: Inside PageFly app, select Settings on the bottom left of the navigation bar.
• Step 2: In Settings, click on Global Styling.

Global Styling Configuration

In Global Styling setting, we have two main parts:

Properties: Color and Font Family.

Elements: Icon, Image, Button, Heading, Paragraph and Divider.

You can change the name of these element’s styling. This name will show in the dropdown menu when choosing styling of Global Styling in the editor page.

Properties

Color

In Global Styling Color Setting, you can customize 8 predefined colors and later use these colors in the process of building your pages. These colors are named Primary, Secondary, Foreground and Background and Color from 5 to 8.

To customize the color, please select each type and go to Styling tab and select the color you want.

After all configuration is done, select Publish.

To use these predefined colors in the PageFly editor, please select the element you want to change color and go to the Styling tab. Then under Content Color and Background Color, choose the Global Styling Color you want.

If you choose any other color different from 8 Global Styling colors, the Color type will automatically change to Custom.

Font Family

In Global Styling Font Family Setting, you can customize 3 predefined fonts and later use these fonts in the process of building your pages. These fonts are named Primary, Secondary and Tertiary.

To customize the font family, please select each type and go to Styling tab and select the font family you want.

After all configuration is done, select Publish

To use these predefined fonts in the PageFly editor, please select the element you want to change the font family and go to the Styling tab. Under Font Family, select the font family you want.

If you choose any other fonts different from 3 Global Styling Font Family, the Font Family type will automatically change to Custom.

Elements

Icon

In Global Styling Icon Setting, you can customize 6 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each icon, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined icons in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Icon element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the icon and go to the Styling tab, under Element Global Style, select the icon style you want.

Image

In Global Styling Image Setting, you can customize 6 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each image, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined image styles in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Image element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the image and go to the Styling tab, under Element Global Style, select the image style you want.

Button

In Global Styling Button Setting, you can customize 6 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each button, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined image styles in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Button element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the button and go to the Styling tab, under Element Global Style, select the button style you want.

Heading

In Global Styling Heading Setting, you can customize 6 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each heading, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined heading styles in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Heading element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the heading and go to the Styling tab, under Element Global Style, select the heading style you want.

Paragraph

In Global Styling Paragraph Setting, you can customize 4 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each paragraph, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined paragraph styles in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Paragraph element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the paragraph and go to the Styling tab, under Element Global Style, select the paragraph style you want.

Divider

In Global Styling Divider Setting, you can customize 3 predefined styles and later use these styles in the process of building your pages.

To customize the styling of each divider, please select each type and go to Styling tab and make the configuration you want.

You can check more information about the Styling tab here.

After all configuration is done, select Publish.

To use these predefined divider styles in the PageFly editor, click on the Plus icon which is the Add element function, then Click on the Divider element in the dropdown menu. Finally, drag and drop the element into the page editor.

After that, please select the heading and go to the Styling tab, under Element Global Style, select the divider style you want.

NOTE:

• When you publish Global Styling, changes in Global Styling Properties and Elements will be applied to all pages that are using Global Styling.
• Global Styling parameters don’t have Reset button in Styling tab.
• If you apply Global styling for an element then edit some parameters that have been set up in Global Styling, the other parameters will still use the setting in Global Styling.

• After using Global Styling in the Styling tab, you also have the option to edit back the Global Styling from the Styling tab. Please select Edit element/property global styling