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.
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.
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.
Step 3: Align a specific element inside a container
- 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.
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.
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.