About PageFly Element Styling
| 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?
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 parameters
Overall – Editing Contents
The colour parameter allows you to choose the color for the content, which can be text or icon.
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 Alignment
Horizontal alignment 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.
Note: When using this parameter, you can not adjust the Margin left and Margin right for the selected elements.
Spacing
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.
Typography
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.
You can add more fonts by opening the Font Manager.
With every font, you can configure the following parameters:
- Font size
- Text alignment
- Text style
The More Settings button gives you 4 extra options:
- Font weight
- Line height
- Letter spacing
- Text transform
Note for using custom fonts
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 Style
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
If you choose Standard style for the background, you can customize its color and image.
Background color
The Background color has 8 predefined colors. You can edit these background colors in Global Styling Settings.
Background Image
You have 3 options to upload an image:
- Upload from computer
- Import from Internet
- 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.
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:
- Background Position. Read more.
- Background Repeat. Read more.
- Background Size. Read more.
- Background Attachment. Read more.
Video style
You can paste the video URL from Youtube, Vimeo, or MP4 video here.
Once you have selected a background video, the More Settings button lets you choose the Overlay colour for the background video.
Parallax effect
You can check this article to learn details about how to use the parallax effect for a section.
Editing Border,
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.
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.
Display
Manage the element arrangement via CSS display options:
- Inline
- Block
- Flex
Effect
Under Opacity, you can adjust the opacity of the element.
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
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.
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.
3. After turning Override Theme Styling, if you manually remove !important from the CSS code box, this parameter will automatically be turned off.
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.
You can edit the CSS code and apply all the changes to your page editor.
What is The Global Style Element?
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.
What is State Styling?
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.
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.
Device-specific settings
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.
