PageFly - Align elements on a page

184 views 0

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

Step 1: Select element’s container

In an example below, we have a Section with 2 Columns.

In the right Column, we have Heading, Paragraph and Button elements.

A column that contains Heading, Paragraph and Button elements

To start off, let’s look at how elements are contained on the page.

When we select the Button element, the breadcrumbs will show its containers, including: Section > Row > Column > Button. This means the most outer element is the Section, and the most inner one is the Button

We want to align the Button element compared to its outer container, so 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 in the selected container

To center-align the Button element,  with the Column chosen go to Styling tab > Text section > click Center icon under Alignment.

Alignment parameter in Styling tab of Column

As a result, you will see all inner contents, including Heading, Paragraph and Button, are centered in the Column.

Everything in the column is center-aligned

Step 3: Align a specific element inside a container

What if we want to keep the Heading and Paragraph left-aligned? Just do this:

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

Alignment parameter in Styling tab of Heading element

Do the same thing for the paragraph by selecting Paragraph element > Styling tab > Text section >  under Alignment > choose Left icon.

As a result, you’ll see something like this.

Left-aligned Heading, Paragraph and center-aligned Button

The priority of stylings

In a nutshell, keep in mind that stylings of inner elements have higher priority than those of their outer containers. For example, if you set the Column alignment as “center”, but the Paragraph inside that column is set to “left-alignment”, the Paragraph will be left-aligned.