PageFly provides powerful styling options for all elements. To illustrate how they work, we will look at 2 examples with Image and Paragraph elements.
Content color – this parameter allows you to choose the color for the content, which can be text or icon.
Note: Some elements like “Image” don’t have this parameter.
Parameters in this group allow 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.
You can change the font family here.
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
Parameters in this group allow you to configure the element’s background color and image.
Once you have selected a background image, the More Settings button will provide you 4 more choices to configure the background image:
- Background Position. Read more.
- Background Repeat. Read more.
- Background Size. Read more.
- Background Attachment. Read more.
You can the element’s border styling via Border Style and Border Color.
You can see the illustration with the Solid border style and red border color below.
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 10 px for all sides and the Border Radius is set up 40 px for 4 sides.
Manage the element arrangement via CSS display options:
All the set up 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 all the changes will be applied in your page editor.
PageFly provides pre-made style presets that allow you to quickly have styling configured.
Currently, this feature is available only for some elements, but in the near future, we will update style presets for all elements.
All element style settings can be configured once for all devices as well as specifically for individual devices like Laptop, Tablet or Mobile. To edit the styling for the specific device just use the Device Switcher to switch editing mode to target device and adjust style settings for it.
Note: Parameter configured in “All Devices” will have effects on all devices and automatically works correctly. Only in rare cases will you have to do configuration for specific devices.