PageFly Element Styling | Ultimate Guide to Edit Effectively

About PageFly Element StylingClick to copy

Can I add Shopify Elements to PageFly Page Builder? Yes
How many are there in the Styling Parameters Editing Section? 15
Can I edit PageFly stylings for tablet and mobile mode? Yes

What is PageFly Element Styling?Click to copy

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

About Styling parametersClick to copy

Overall – Editing ContentsClick to copy

The colour parameter allows you to choose the color for the content, which can be text or icon.

Element’s style settings

To edit Global Styling Settings, click on Edit property global style.

Note: Some elements, like the Image element, don’t have this parameter. You can watch this video tutorial to set up Global Styling in PageFly:

Horizontal AlignmentClick to copy

Horizontal alignment parameters only show with inline elements:

  1. Image
  2. Icon
  3. Countdown
  4. Button
  5. Product Media
  6. Product Add to cart button
  7. Product Quantity
  8. Product View Details
  9. Collection View Details
  10. Collection Image
  11. Blog Post Image
  12. Blog Post View Details
  13. Customer Form Button
  14. Contact Form Button
  15. QR Code

This parameter allows you to align selected elements horizontally.

Element’s style settings

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

Element’s style settings

SpacingClick to copy

Spacing parameter allows 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

Under the Typography section, go to the Font Family parameter to change the font family.

The Font family has six predefined fonts. You can edit them in Global Styling Settings.

Element’s style settings

You can add more fonts by opening the Font Manager.

Element’s style settings

With every font, you can configure the following parameters:

  • Font size
  • Text alignment
  • Text style

Element’s style settings

The More Settings button gives you 4 extra options:

  • Font weight
  • Line height
  • Letter spacing
  • Text transform

Element’s style 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:

Background – Standard StyleClick to copy

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

For the Background section, there are 3 styles of background to choose from:

  • Standard
  • Video
  • Parallax

Element’s style settings

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

Background colorClick to copy

Element’s style settings

The Background color has 8 predefined colors. You can edit these background colors in Global Styling Settings.

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.

Element’s style settings

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

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

Check this video tutorial to learn more about Background Image:

Video styleClick to copy

You can paste the video URL from Youtube, Vimeo, or MP4 video here.

Element’s style settings

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

Parallax effectClick to copy

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

Editing Border,Click to copy

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

You can also choose the custom colour from the configured settings in the Global style.

For example, as you can see below, we style the image border with the solid border style and red border colour.

Element’s style settings

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 3 px for all sides and the Border Radius is set to 50 px for 4 sides.

Element’s style settings

Display

Manage the element arrangement via CSS display options:

  • Inline
  • Block
  • Flex

Effect

Under Opacity, you can adjust the opacity of the element.

Element’s style settings

Turn on Enable shadow option to add a shadow effect to your elements. Here, you can customize the shadow effect with a variety of settings:

  • Shadow horizontal offset
  • Shadow vertical offset
  • Shadow blur
  • Shadow color

Element’s style settings

Please note that the shadow effect only works as the boxhadow.

Advanced

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. The Override Theme Styling parameter prioritizes PageFly styling over the theme styling and somehow fixes this situation.

When you turn the Override Theme Styling on, all the CSS styling in Custom CSS below will be automatically added “!important” at the end of each line. 

Element’s style settings

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 can still add !important manually after turning this parameter on.

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

Element’s style settings

3. After turning Override Theme Styling, if you manually remove !important from the CSS code box, this parameter will automatically be turned off.

Element’s style settings

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

5. When you copy the element’s style and paste it onto another one, the same setting will carry over to the new element and the Override Theme Styling will automatically be turned on. 

Custom CSS

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

Element’s style settings

You can edit the CSS code and apply all the changes to your page editor.

What is The Global Style Element?Click to copy

The Global Style element lets you choose different styles for your element configured on Global Style in Settings.

If you still need to set something up, the style presets come with default styles for each element. Check out The Global Styling Feaature for more details.

Element’s style settings

What is State Styling?Click to copy

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.

Element’s style settings

Note: 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, one more state is called the Disabled state.

You can set different styles for different states.

Element’s style settings

Device-specific settingsClick to copy

Can I edit elements on each device? Yes you can! All element style settings can be configured once for all devices and specifically for individual devices like laptops, tablets or mobiles.

To edit the styling for the specific device, use the Device Switcher to switch the editing mode to target the machine and adjust the style settings.

Note: Parameters configured in “All Devices” will affect all devices and automatically work correctly. In rare cases, you will only have to do the configuration for specific devices.

You can check the video to learn how to adjust spacing and align elements.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us