PageFly - Align elements on a page

67 views PageFly 0

In this article, you will learn how to align elements on your PageFly page

Step 1: Select element’s container

In our example, there is a Section with 02 Columns. On the right Column, we have Heading, Paragraph and Button elements.

A column that contains Heading, Paragraph and Button elements

First of all, we need to understand how elements are contained on the page. For example, we select the Button element and the breadcrumbs show its containers: Section – Row – Column – Button. Since we want to align this button, we need to select its container which is the Column in the breadcrumbs.

Check breadcrumbs to find container of element

Step 2: Align all elements within the selected container

Now we want to center-aligned the Button element,  select the Column > Styling tab > Text section > click Center icon under Alignment

Alignment parameter in Styling tab of Column

As the result, you will see the whole content including Heading, Paragraph and Buttons are centered within the column.

Everything in the column is center-aligned

Step 3: Align a specific element inside a container

In this case, we still want the heading and paragraph to be left-aligned, do following:

  • Choose the container of the heading’s text, which is the Heading element.
  • Go to the Styling tab in Element Inspector on the right.
  • Click Left icon under Alignment of the Text section.

Alignment parameter in Styling tab of Heading element

Do the same thing for paragraph by selecting Paragraph element > Styling tab > Text section >  Left icon under Alignment. As the result, you’d see something like the image below.

Left-aligned Heading, Paragraph and center-aligned Button

The priority of styling settings

Just keep in mind that settings of nested elements have higher priority than those of their containers. For example, if you set the column alignment as “center”, but the paragraph element in that column is set to “left”, that paragraph will be left-aligned.