Align elements on a page

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 2 Columns. On the right Column, we have Heading, Paragraph and Button elements.

align 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.

align elements pagefly

Step 2: Align all elements within the selected container

Before going to the specific steps, you can watch the video below

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

Step 3: Align a specific element inside a container

In this case, we still want the heading and paragraph to be left-aligned, so do the 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 Text Alignment of the TYPOGRAPHY section.

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

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.

Was this helpful?

Try out all PageFly features with Free plan
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!