# Align Elements on a Page

### Overview

This guide will show you how to [align elements on your PageFly page](https://help.pagefly.io/manual/align-elements-on-a-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:

{% embed url="<https://youtu.be/1Ge-5ExRbJo>" %}

#### Gen 2 Editor - Flex Section

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-e17984703ad3f1c368073bfbbf9e310d569ff229%2Fselect-editor.png?alt=media)

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**".

{% embed url="<https://youtu.be/zzGo7lOHUO4>" %}

Follow the below steps to add and configure **Flex** sections.

**Step 1: Go To Elements > PageFly > Layout**

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-22a31d2ebb52a10d112f0cdef8461c2ee1788a00%2FAD_4nXcu3FvJUjj4cKRuakdSKEKa4Yi7hYBDwii8g2Q08y8CDczjuJCrPAsmkfwofkDFm2WrsFQRLl2EZpPCGffe-UsTpDZpWh9hXWgRhIW3EBWuRiLIYcrwG7ATGH-fE1t0objqDgU3RdgbXJveFvo5Wwkey2FMdrAqNubtFf-y-X3kj6w.png?alt=media)

**Step 2: Select Blank Section Then Drag And Drop It Onto The Canvas**

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-7b163bcf8c4aaa2077eac4ca97855d43e4ba8a8f%2FAD_4nXfuoaNrb6w_wBOXAhY-PPmHhvwejllFosXTBJOS2GnbzRvFKBtOg3BNWlwn3-hNBlPs5jPC_Ruhp8rYX1sntlujtmaPXjl-At-YfFgYUmTSq5DyzGJSWaN7TLXKqXgoRYSN5z-OoLy-9cXPSu7K1gkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

**Step 3: Drag And Drop Desired Element(s) For The Flex Section**

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-a7e7a1799c10450a21839e0bc9e59fbbd5bffa23%2FAD_4nXdVKFKH7ovZwYHc2P08b2Euk_eo3XmY-TDI2s7nDMmQIgmCLn8ySh3t2_ilEgnkNl1BDDeg2c1SVubFaRK9fnRCKfo7LVpGmh8AVjp0z7t6au-qf9xq_RKU0pWdsjjVsg9zkHoleC1I-5rdez5FOAkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-810a57027bf11e6d6fa6afe5cd608b10094e0647%2FAD_4nXeWZ7Smc2x2jEr1KFfFHzmB42LbhHR4QfoIjUoUxnvI1JG-aDRj-kq3sUWkhKHlHgF4TkRNTmQ4y8TvyuTKK7qulkM6glhOtZGA425w4HBL-BxNHQdbtwDu9fE7wClL9A2A8CZyDYCcu9YWe461key2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

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.

{% hint style="info" %}
**Note**: Alignment of each element will overrule the alignment of the whole flex section.
{% endhint %}

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-7e5a8dcf7f64b4e34161626d46c2a0f7bf6b3341%2FAD_4nXf1MlTustQ-pfDwOcBEVPAjYZGs8hz0pqtR9VRGDAID5xu6Xk7WxLvAgpb1y7GEpFtWSEuvq1iQE7lJ3L_p6PLfiC7kC2udPzToPSbd7MGC6Ix3dZwU1Yhw1-XT5i-bfgscHFXxSv_IumekGbEkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

#### Legacy Editor - Section

**Step 1: Select Element’s Container**

In our example, we have a [**Heading**](https://help.pagefly.io/manual/heading-element/), a [**Paragraph**](https://help.pagefly.io/manual/paragraph-element/) and a [**Button**](https://help.pagefly.io/manual/button-element/) element. And now you want to **align** these elements to be centered.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0d56fb8125594b6dafcd0d3ea839f11e2390e236%2FAD_4nXcS2ZEU1PMDXggUOTpdqF8W1n-mUMup4rPW5ek3Pv1kJsFl__z9JmfhyWVW6o5L7BTiKcBvF4B7xukTpbbI5r-xKZFRUnfn4PKUMVo4AJX3Pd3H6TcmgnHioKZyqDr0GTVTKxqImkFnNXOnsJpKkey2FMdrAqNubtFf-y-X3kj6w.png?alt=media)

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

{% hint style="info" %}
**Note**: You can use the Flex section, which provides more flexibility, to create more complex layouts.
{% endhint %}

Since we want to align this button, we need to select its container which is the **Column** in the breadcrumbs.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-e061271e0f573fb52bebc810f1c600b5d348f23a%2FAD_4nXf5m9DlVR5RZeTHRVwxKN4hNH7sL21kherTv1qubceGyeYSZWMP0C58xy8PG4Cy_XpniEnF9AyirkBl0kZwPvZkYuY3mNdUQEC8hUml7Bvgsd4ujVkwwk5u8daFfbKUXRWycux4iCHe8N0bGO-q8gkey2FMdrAqNubtFf-y-X3kj6w.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-18e4082b1b19a4824b55f1599efbba04b535fc6b%2FAD_4nXc6PTLvvy8iqDCw_WILbCsJjsYmAm8ilOej_1b22BqERmiZgUTdeLHwRI0Oe1SOVPVoMuyJv116lfsxYr0S0hfrx-nRAY1E7QIpxJSkCd7GDygPTCApEtpFx73Lx8_uF_XgpvMjXV6oL5rl3oDyQQkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-164fb9a4ff119e8124a0b3b2a7d4b98e8fb4e9fe%2FAD_4nXdgVCCPVynv3eL9z3FvCv_nWGpi5wylVsRy30BPPCDbxGP0Rg63CcRAjKnsryNqbtlKBkdU2_Gy-dP8unB0I1PTLPfeTRq77hALy6i_6q8hnJVGqbbfkmliae9nzsTTuEkfqRLbM9R11itlau6Rzgkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-dea3e57dd1ca3ee70f36fb3d9e6f5a2bf90d4eb8%2FAD_4nXfG95XLpKtgGi5huwyYn6v4UdKNx2YgUY9GpGRYTrz_LnIv8Gsn4rfv8gkw-z5Q-41dGXwltd5H2TSSYghwwWYwdYGm3_MsZshfgN7ET7mYN9seOqGC2gjjEfXgPN9uuLsR6TUgXuPizOcgipmpkey2FMdrAqNubtFf-y-X3kj6w.gif?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8cbaa43c4238cb842254002b0b7ccad5c485e38a%2FAD_4nXdXptESQqMmqrIyZe3Fd9vA2QsSRjht_mjekpeMXa7NCu8wtnK-EPASHTdWIZOdrYERKlr3VHgfbCg9XqUOIKKUvNpry9eVnK2HVeTzPBZjkOksLZnqfUHY0CQnRqe_4ZxAwqrQDWGUdEyEYOo0fwkey2FMdrAqNubtFf-y-X3kj6w.png?alt=media)

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

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ee26efe4499f9677d87c8fb60702bc9daeddf1d1%2FAD_4nXfScAGljFDQlRZGJmBX52aEe4z_foNMzmmmlIpDT8GMWsMERaTvDzGl7RZGHVW2qjJs66ra1UPqdKoEGQRGsWMKS68wjEfJLUG8-EmLQrp6AbaZtxTxpzAP6fVEtUsH1VGd3ZfgPqNB4XTtzT1uugkey2FMdrAqNubtFf-y-X3kj6w.png?alt=media)

**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.23.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](https://help.pagefly.io/manual/how-to-publish-or-unpublish-pagefly-pages/)
* [How to Use PageFly Saved Section?](https://help.pagefly.io/manual/saved-section/)
* [3 Steps to Export and Import PageFly Pages](https://help.pagefly.io/manual/export-import-pages/)
* [How to Edit Page Settings with PageFly](https://help.pagefly.io/manual/page-settings/)