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.

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.

Global Styling Feature 1

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.

Access 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.

Properties

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

To customize the color, please select each type and go to Styling tab and select the color you want.
Global Styling Color
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 4 Global Styling colors, the Color type will automatically change to Custom.

Global Styling Color

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.

Global Styling Font Family

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.

Global Styling Font Family

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.

Global Styling Icon

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.

Global Styling Icon

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

Global Styling Icon

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.

Global Styling Image

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.

Global Styling Image

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

Global Styling Image

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.

Global Styling Button

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.

Global Styling Button

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

Global Styling Button

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.

Global Styling Heading

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.

Global Styling Heading

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

Global Styling Heading

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.

Global Styling Paragraph

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.

Global Styling Paragraph

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

Global Styling Paragraph

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.

Global Styling Divider

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.

Global Styling Divider

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

Global Styling Divider

NOTE:

  • When you publish Global Styling, changes in Global Styling Properties and Elements will be applied to all pages that are using 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.

Navigate this category

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!