Page Editor - Styling Tab

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.

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 you want to style. The settings menu will appear on the right side.

• Step 3: Go to the Styling tab to adjust the element’s design settings.

Customize Page Editor - Styling Tab

Gen 2 Editor - Styling Tab

With the PageFly 4.16 version, parameters in the Styling tab are organized into 8 distinct groups: Size, Layout, Overall, Spacing, Typography, Background, Border, Effects and Advanced.

Before we get into the specifics, let’s take a look at this video tutorial. It will give you a good overview and visual explanation of the new update.

Additionally, users can easily modify Global Settings across their site by clicking the “Edit global style” button, ensuring consistent styling throughout their content.

Size Settings

The Size group in PageFly's styling settings allows you to control the width and height of elements. These parameters help in determining how much space an element occupies within its container.

Width - Fill container: The element will automatically expand to fill the entire width of its parent container. - Hug content: The element’s width will adjust to the size of its content. - Fixed width: This allows you to set a specific width for the element.
Height - Fill container: Similar to the width option, this ensures the element will expand to fill the available vertical space within its parent container. - Hug content: The element’s height will adjust according to the content it contains. - Fixed height: You can set a specific height for the element.
More settings - Max width/Max height: Set the maximum width or height the element can reach to prevent it from growing too large. - Min width/Min height: Set the minimum width or height to ensure the element doesn't become too small.

Note: Not all elements have the Size settings. For instance, images and icons might not include these options, as their dimensions are typically controlled by their inherent size or image properties.

Layout Settings

The Layout group in PageFly's styling settings is designed to control the overall structure and arrangement of container elements.

Note: This group is only available for container elements.

Key parameters are:

Content Width (only available for Flex Sections): - Fill container: Ensures the content inside fills the entire width of the container. - Max width: Allows you to set a maximum width for the content, ensuring it doesn't exceed a certain limit while still being responsive.
Direction: Defines how the items inside the container are arranged, either in a horizontal (left to right) or vertical (top to bottom) direction.
Reverse Order: This is particularly useful for responsive designs. It allows you to reverse the order of items within a container, which helps adjust the layout for different screen sizes.
Horizontal Gap: Adjusts the spacing between items within the container horizontally
Vertical Gap: Adjusts the spacing between items within the container vertically.
Align Items: Helps you control how items are lined up inside a container. You can align the items: - Items are placed at the top (in a vertical layout) or on the left (in a horizontal layout). - Items are placed in the middle of the container. - Items are placed at the bottom (in a vertical layout) or on the right (in a horizontal layout). Other options include: - Stretch: Items stretch to fill the container's height (in a vertical layout) or width (in a horizontal layout). - Baseline: Items are aligned based on their text baselines.
Justify Content: Determines how the items are distributed in a container. Options include: - Items are grouped at the beginning of the container. - Items are placed in the middle of the container, with equal space on both sides. - Items are grouped at the end of the container. Other options include: - Space between: Even space between items, none at edges. - Space around: Equal space around each item. - Space evenly: Equal space between items and edges.

Overall, Spacing, Typography, Background, Border, Effects and Advanced Settings

| Overall: You can change the content color. The color parameter allows you to choose the color for the content, which can be text or icon. |

Overall: You can change the content color. The color parameter allows you to choose the color for the content, which can be text or icon.
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
Background: You can customize its color, gradient color and background image.
Background Gradient: The Background Gradient feature allows you to apply smooth transitions between multiple colors to any element with three key parameters for customization: - Color Stop: This parameter lets you generate a gradient with up to 10 color stops. Each stop allows you to assign a specific color, creating seamless color transitions across the element. - Gradient Type: This function lets you change the display style of the gradient. You can choose between two options: - Radial Gradient: Applies the gradient in a circular manner, transitioning colors from the center outward. - Rotational Gradient: Displays the gradient along a 360-degree rotation, creating a smooth circular transition around the element. - Position: This section gives you control over the placement of each color stop along the gradient path, helping you adjust precisely where each transition occurs.
Border: You can customize the element’s border style and set border radius.
Effects: - 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 box shadow.

Advanced

The Advanced setting lets you customize your design by adding your own CSS code. This is useful if you want to make specific changes that the regular options don’t offer.

• CSS Code: You can type in custom CSS to control the look of your elements, like colors, layout, fonts, or anything else you need.

• Override Theme Styling: Turn this on if your live page looks different from what you see in the editor. It makes sure your custom styles show up correctly on your website.

This option is perfect if you want more control over how your page looks and functions.

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

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, like the Image element, don’t have this parameter.
Horizontal Alignment	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. 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 select the Shopify theme font under Font Family. And 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
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: - 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 box shadow.

Common Cases

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, 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 the 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.

Custom CSS

• All the setups you made for the element will be displayed in the CSS code box..

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

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.

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.

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:

Overlay Color

If you have a background image with a background color/gradient color and want to combine them together, you will need to lower the color opacity in order for the image to be shown

Version Update

In version 4.16.0, PageFly introduced new Size and Layout settings to the Styling configurations. These additions allow users to have more control over how elements are sized and arranged within their containers, making it easier to design responsive and well-structured pages.

In version 4.18.0, PageFly introduces the new Gradient Color Picker, available exclusively to users on the PAYG pricing model (slot plans). This feature allows you to apply gradient colors to any element background. You can customize the gradient’s style with radial and rotational options, and precisely control the position of each color stop. This enhancement offers greater design flexibility, helping you create more dynamic and visually appealing pages.

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.

You can watch this video tutorial to set up Global Styling in PageFly:

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

Note: 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.