Element’s style settings

PageFly provides powerful styling options for all elements. To illustrate how they work, we will look at 2 examples with Image and Paragraph elements.

Styling parametersClick to copy

OverallClick to copy

Content color – this parameter allows you to choose the color for the content, which can be text or icon.

PageFly content colors

Styling color now can give you the option to choose 4 predefined Global Styling colors: Primary, Secondary, Foreground, Background. You can edit them in Global Styling Settings

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

Global Style color in PageFly

Note: Some elements like “Image” don’t have this parameter.

Horizontal AlignmentClick to copy

This parameters only show with inline elements:

  • Image
  • Icon
  • Countdown
  • Button
  • Product Media
  • Product Add to cart button
  • Product Quantity
  • Product View Details
  • Collection View Details
  • Collection Image
  • Blog Post Image
  • Blog Post View Details
  • Customer Form Button
  • Contact Form Button
  • QR Code

This parameter allows you to align selected elements horizontally.

horizontal alignment

Note: When using this parameter, you can not adjust the Margin left and Margin right for the selected elements.

horizontal alignment

SpacingClick to copy

Parameters in this group allow you to control the spacing around and inside the element. In the Padding and Margin parameters, each of them has 4 empty boxes that allow you to fill in the value for 4 sides: top – right – bottom – left.

You can read the details for this in the Edit Spacing article.

TypographyClick to copy

You can change the font family here.

Font Family

Font family has 3 predefined Global Styling fonts: Primary, Secondary, Tertiary. You can edit them in Global Styling Settings.

predefined global styling

You can add more fonts by opening the Font Manager.

open font manager in pagefly

With every font, you can configure the following parameters:

  • Font Size
  • Text Alignment
  • Text Style

adjust font size in PageFly

The More Settings button gives you 4 extra options:

  • Font Weight
  • Line Height
  • Letter Spacing
  • Text Transform

more settings

Note for using custom fontsClick to copy

If you want to use custom fonts that are not listed in PageFly fonts, you can use custom code to do it. Read more here to know more details.

You can check the video on how to customize the paragraph element

BackgroundClick to copy

Let’s take an example with the section’s background.

For the section, there are 3 styles of the background to choose such as:

  • Standard
  • Video
  • Parallax

Standard StyleClick to copy

If you choose Standard style for the background, you can choose its color and image.

Background colorClick to copy

background color

Background color has 4 predefined global styles: Primary, Secondary, Foreground, Background. If you choose any other color different from 4 Global Styling colors, the Color type will automatically change to Custom.

Global Styling for content color

Background ImageClick to copy

You have 3 options to upload an image:

  1. Upload from computer
  2. Import from Internet
  3. Select from Image Manager

You can read more here to know more details about how to upload an image and use Image Manager.

In this example, we choose an image from the Image Manager

Background image

In case you want to set a full-width section with a background image, you can refer to this article for more details.

Once you have selected a background image, the More Settings button will provide you 4 more choices to configure the background image:

Video styleClick to copy

You can paste the URL of the video from Youtube, Vimeo, or MP4 video here. Let’s take a look at the example:

background video

Once you have selected a background video, the More Settings button lets you choose the Overlay color for the background video:

background video

Parallax effectClick to copy

You can check this article to know details about how to use the parallax effect for a section.

BorderClick to copy

You can the element’s border styling via Border Style and Border Color.

You can see the illustration with the Solid border style and red border color below.

border style

Border color has 4 predefined global styles: Primary, Secondary, Foreground, Background. If you choose any other color different from 4 Global Styling colors, the Color type will automatically change to Custom.

border colors

The More Settings button gives you 2 other choices to adjust the Border Width and Border Radius. In the example below, the Border Width is set to 10 px for all sides and the Border Radius is set up 40 px for 4 sides.

border style

DisplayClick to copy

Manage the element arrangement via CSS display options:

  • Inline
  • Block
  • Flex

Read more:

EffectClick to copy

Under Opacity, you can adjust the opacity of the element

adjust opacity

If you turn on Shadow, the element will have shadow effect. There are some settings in shadow effect that you will have:

  • Shadow Horizontal Offset
  • Shadow Vertical Offset
  • Shadow Blur
  • Shadow Color

enable shadow in PageFly

Please note that Shadow effect only works as box Shadow.

AdvancedClick to copy

Override Theme Styling

Sometimes the styling of the theme overrides PageFly’s styling. This is one of the reasons why your Live view is different from the editor page. Override Theme Styling parameter prioritize PageFly styling over the theme styling and somehow fix this situation.

When you turn the Override Theme Styling on, all the CSS styling in Custom CSS below will be automatically added !important behind. 

override theme styling

However, the Override Theme Styling will only affect a single element. For example, if you click in the heading and turn this parameter on, this will only affect the header element, other elements will not be affected until you turn this on for each of them.

Important note:

1. You still can add !important manually after turning this parameter on.

2. If you turn off the Override Theme Styling after turning it on, every !important codes that have been added by this parameter will be automatically removed.

override theme styling

3. After turning Override Theme Styling, if you manually remove !important from a styling, this parameter will automatically be turned off. 

override theme styling

4. If you manually add !important for all styling in Custom CSS parameter, the Override Theme Styling will be turned on.

5. When copy the styling of an element that the Override Theme Styling has been turned on and paste the styling to another element, this parameter will automatically be turned on with this element.

Custom CSSClick to copy

All the set up you made for the element will be displayed in the CUSTOM CSS parameter as per the image below.

CSS code

You can edit the CSS code and all the changes will be applied in your page editor.

Element Global StyleClick to copy

The Element Global Style is where you choose your elements that have been styled on Global Style in Settings. 

If you have not designed any Global Styling element yet, the style preset will include the predefined elements as default. Each element will include a specific number of styles. See more details in this article.

element global style

You can click on Edit element global style to edit them in Global Styling settings.

edit global element

State Styling

The State Styling is where you choose the state styling for your element. There are 3 options for you to choose from: Normal state, Mouse over state, and Active/Selected state.

elements style settings

This parameter only shows with the following elements (sub-elements):

  • Heading
  • Button
  • Icon
  • Image
  • Tabs (Tab Header)
  • Accordions (Accordion Header)
  • Product Title
  • Product Media
  • Product Add To Cart
  • Product View Details
  • Product Quantity (Quantity Button)
  • Collection View Details
  • Collection Title
  • Collection Image
  • Customer Form Button
  • Contact Form Button
  • Blog Post View Details
  • Product Variant

PLEASE NOTE that the State Styling only shows when the Combine Options is off for the Product Variant element. However, for Option Value [Variant image], the State Styling will show when the Combine Options is either on or off. When the Combine Options is on, there is one more state called Disabled state.

elements style settings

You can set different styles for different states.

elements style settings

Device-specific settingsClick to copy

All element style settings can be configured once for all devices as well as specifically for individual devices like Laptop, Tablet or Mobile. To edit the styling for the specific device just use the Device Switcher to switch editing mode to target device and adjust style settings for it.

Note: Parameters configured in “All Devices” will have effects on all devices and automatically work correctly. Only in rare cases will you have to do the configuration for specific devices.

You can check the video to know how to adjust spacing and align element

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

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

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!