Page Editor – Styling Tab

About Pagefly Element StylingClick to copy

PageFly Element Styling is powerful, with all styling options for all elements.

Configure the Styling ParametersClick to copy

To illustrate how they work, we will look at 2 examples with Image and Paragraph elements.

Overall – Editing ContentsClick to copy

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

Page Editor - Styling Tab

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

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

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

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

You can add more fonts by opening the Font Manager.

Page Editor - Styling Tab

With every font, you can configure the following parameters:

  • Font size
  • Text alignment
  • Text style

Page Editor - Styling Tab

The More Settings button gives you 4 extra options:

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

Page Editor - Styling Tab

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

Page Editor - Styling Tab

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

Background ColorClick to copy

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

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

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

DisplayClick to copy

Manage the element arrangement via CSS display options:

  • Inline
  • Block
  • Flex

EffectClick to copy

Under Opacity, you can adjust the opacity of the element.Page Editor - Styling Tab

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

Page Editor - Styling Tab

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

AdvancedClick to copy

Override Theme StylingClick to copy

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.

Page Editor - Styling Tab

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 NoteClick to copy

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.

Page Editor - Styling Tab

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

Page Editor - Styling Tab

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 CssClick to copy

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

Page Editor - Styling Tab

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

Device-Specific SettingsClick to copy

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.

Frequently Asked QuestionsClick to copy

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 Feature for more details.

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

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.

Page Editor - Styling Tab

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us