Element’s style settings

This element is available on all PageFly plans

PageFly provides powerful styling options for all elements. To illustrate how they work, we will look at 2 examples with Image and Paragraph elements.

Styling parameters

Overall

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

PageFly Element style settings

Note: Some elements like “Image” don’t have this parameter.

Spacing

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.

Typography

You can change the font family here.

PageFly Element style settings 1

You can add more fonts by opening the Font Manager.

Element style settings 2

With every font, you can configure the following parameters:

  • Font Size
  • Text Alignment
  • Text Style

Element style settings 4

The More Settings button gives you 4 extra options:

  • Font Weight
  • Line Height
  • Letter Spacing
  • Text Transform

Element style settings 5

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

Let’s take an example with the section’s background.

For the section, there are 3 styles of the background to choose such as:

  • Standard
  • Video
  • Parallax

Standard Style

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

Background color

Background Image

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

In case you want to set a full-width section with a background image, you can refer to this article for more details.

Once you have selected a background image, the More Settings button will provide you 4 more choices to configure the background image:

Video style

You can paste the URL of the video from Youtube, Vimeo, or MP4 video here. Let’s take a look at the example:

Once you have selected a background video, the More Settings button lets you choose the Overlay color for the background video:

pagefly style settings

Parallax effect

You can check this article to know details about how to use the parallax effect for a section.

Border

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.

pagefly styling tab 7

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.

pagefly styling tab 8

Display

Manage the element arrangement via CSS display options:

  • Inline
  • Block
  • Flex

Read more:

Custom CSS

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

pagefly styling tab 9

You can edit the CSS code and all the changes will be applied in your page editor.

Style presets

PageFly provides pre-made style presets that allow you to quickly have styling configured.

pagefly styling tab 10

Currently, this feature is available only for some elements, but in the near future, we will update style presets for all elements.

Device-specific settings

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.

pagefly styling tab 11

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 the configuration for specific devices.

You can check the video to know how to adjust spacing and align element

Was this helpful?

Top 9 PageFly's features to Boost your Holiday Sales

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages