About Page Editor – Styling Tab
Summary: The Page Editor – Styling Tab is a comprehensive tool that offers a full range of styling options for every element on your webpage.
The Page Editor – Styling Tab allows users to customize the appearance of their website elements, including text, images, buttons, and more, to achieve a professional and cohesive look.
For more visualization, you can watch this video tutorial to set up Global Styling in PageFly:
How To Access Page Editor – Styling Tab
In PageFly dashboard, follow these steps to access the Page Editor – Styling Tab feature:
- Step 1: Access any PageFly editor page
- Step 2: Click on the element to see the Element settings for it
- Step 3: Switch to Styling tab
Customize Page Editor – Styling Tab
To illustrate how they work, we will look at elements of Page Editor – Styling Tab.
| Editing Contents | The color parameter allows you to choose the color for the content, which can be text or icon.
To edit Global Styling Settings, click on “Edit global style” button.
Note: Some elements don’t have this parameter. |
| Horizontal Alignment | Horizontal alignment parameters only show with inline elements:
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:
The More Settings button gives you 4 extra options:
|
| Background | You can customize its color and image.
|
| Editing Border | You can customize the element’s border styling via Border Style and Border Color.
You can also choose the custom color from the configured settings in the Global style.
|
| Display | Manage the element arrangement via CSS display options:
|
| 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:
Please note that the shadow effect only works as the box shadow. |
Common Cases
1. Override Theme Styling Behavior
- You can still add !important manually after turning this parameter on.
- 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.
- After turning Override Theme Styling on, if you manually remove !important from the CSS code box, this parameter will automatically be turned off.
- If you manually add !important for all styling in Custom CSS parameter, the Override Theme Styling will be turned on.
- 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.
2. 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.
3. Device-Specific Settings
- 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.
You can check the video to learn how to adjust spacing and align elements.
4. 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.
Frequently Asked Questions
1. 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 Feature for more details.
2. 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.
Previous article
