Overview
Summary:
This guide will show you how to align elements on your PageFly page, achieving a visually balanced and organized layout.
As a result, you’ll enhance the professionalism and user experience of your PageFly creations. It also improves readability and user experience by guiding the user’s eye through your content. Consistent alignment strengthens your brand identity.
How To Align Elements On A PageFly Page
Before going to the specific steps, you can watch the video below:
Legacy Editor – Section
Step 1: Select Element’s Container
In our example, we have a Heading, a Paragraph and a Button element. And now you want to align these elements to be centered.
To do this, you need to choose the elements’ container.
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.
Step 2: Align All Elements Within Selected Container
Now we want to center-align all elements above. After selecting the container which is the Column here, head over to the Styling tab > TYPOGRAPHY section > click Center icon under Text Alignment.
Step 3: Align Specific Element Inside Container
In the case you only want the button to be center-aligned, the heading and paragraph to be still left-aligned, so do the following:
- Check if the Column, which contains the heading, paragraph and button is left-aligned (they are in left by default)
- If not, go to the Styling tab and click the Left icon under Text Alignment of the TYPOGRAPHY section
- Choose the Button element that you want to be center
- Go to the Styling tab and click the Center icon under Horizontal alignment of the ALIGNMENT section
As a result, you’ll see something like the image below.
Gen 2 Editor – Flex Section
PageFly Gen 2 introduces flex sections, which don’t rely on the traditional row-column container structure, giving you greater flexibility in element placement. For tips on aligning elements within these sections, watch the video “How to Align Elements in the Gen 2 Editor“.
Follow the below steps to add and configure Flex sections.
Step 1: Go To Elements > PageFly > Layout
Step 2: Select Blank Section Then Drag And Drop It Onto The Canvas
Step 3: Drag And Drop Desired Element(s) For The Flex Section
Step 4: Align The Elements
It’s best advised that you set alignment for the whole flex section as it will apply to all elements nested inside automatically. Click on the flex section then use “Align Items” and “Justify content” settings in the styling tab.
However, you can still set alignment for each independent element inside the flex section. Click on the desired element, then use the “Align self” function to align different elements in the flex section.
Use Case for Legacy Editor
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.
Devices Styling Settings
PageFly supports fine-tune text alignment for different devices. This means you can have your text left-aligned on desktops for a clean, professional look, while switching to center alignment on mobile devices to optimize readability on smaller screens.
Frequently Asked Questions
1. How do I vertically align the element with the legacy editor’s section?
- Best practice is setting the same values for the padding-top and padding-bottom of the containers. For example, you can choose the Row which contains the elements you want to vertically align > Then, set the same value 150 px for the padding-top and padding-bottom of the Row.
- While you have more than one column in a row and you want to have a better solution to align your content, PageFly also offers options for vertical alignment within a Row using the Content position options in the General tab.
2. Can I align each element separately within a column?
You can do it with some elements, such as Heading, Paragraph,… However, you can do it with a button. A column itself is a container for other elements like headings, text, buttons, etc. The key is to adjust the alignment of the container, to achieve the desired effect for all elements within that container. Then, you can adjust the text alignment inside.
3. What is the difference between section (Legacy) and flex section (Gen 2)?
Sections allow users to design page layout in row-column container structure and can be added both in PageFly Sections and PageFly pages. Flex sections, on the other hand, don’t have row-column structure. It allows adding elements directly on PageFly pages and more flexible customized layout by Flex blocks.
Version Update
In addition to the traditional page building mechanism (row, column), PageFly 4.16.0 adds Gen 2 Editor, a more flexible and efficient technology that allows creation of complex and highly customizable layouts, which comes with an intuitive and user-friendly interface.
Additional Resources
- How to publish or unpublish PageFly pages
- How to Use PageFly Saved Section?
- 3 Steps to Export and Import PageFly Pages
- How to Edit Page Settings with PageFly
Previous article
