# How to create a basic section with image and text ### Overview This guide shows [how to build a section with image and text](https://help.pagefly.io/manual/create-a-section-with-image-and-text/) in PageFly. By following these instructions, you'll learn to integrate visual and textual elements effectively on your webpage. ### Requirements * [PageFly](https://pagefly.link/mEPbwpPx) [Installation](https://pagefly.link/mEPbwpPx): Before creating pages for your store, you will need to install the app PageFly. * Images And Text Content Preparation: High-quality images and clear text content prepared for your section. ### Gen 2 Layout - How To Create A Basic Section With Image And Text {% hint style="warning" %} **Important Note**: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ([slot plans](https://help.pagefly.io/manual/pricing-plans/)). {% endhint %} This section will guide you through creating basic sections in PageFly using the Gen 2 editor, including: * One-column * Two-column * Parallax effect * Sticky #### How To Create One-Column Section **Step 1: Add A Background Image** 1. Navigate to PageFly and access the Elements option on the left sidebar. Select Layout > choose the Blank section layout and drag it to your page. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-10ff3eef48c6c6e4e642686d0c8c5eab6e3a0c4c%2FAD_4nXdvaPp6sLMJsKMN8KOCERblPDmmz4LPwp7is8IJ6gdkvqY70a2dDkg1D0mexuCpvVLegoM9OMgDOdh67sDKalPb3_dDwv1ggHMdwHB1xqfY5MiJtPIW-HqE02Bsnn1ZEGHiO4a5pi2c8t7OVhd8IwkeywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) 2. Select the **Flex section** > Choose **Styling** tab > **Background** > Insert the background image for the section by clicking on “**Select image**”. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8c6d559c1052853e1c0c1e5bdce6dd82d69a1fb3%2FAD_4nXfxL9R2H8BrDHJAIkm8KpYsUjzs1ZTNvuB3Sdosec2BJUMQlKfd9Sfy4aSX2d-vgNdQEKFKKDZjXRw0lY4mLFkGns0lEFGQOHww6tRtOWf6tEzkE_xPGRDC3Vqn-tLiPAVKq6AdgIvdAOzG6RO_keywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) 3. To make the section a banner, adjust the **Padding** and **Margin** in the **Spacing** parameters and use **More settings** to center and enlarge the background image. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-fdcbb939c509800dc743f9365d96d1e5f4d3361b%2FAD_4nXd-ZqrhVHmhSHgNn_ssaiAvveObZB1XfYt6cJBx4SPFKveqBmRx6XeA4ewb3Nsi4yvBqZE6HK3IM3NwDkb4fwZVTu0bC824MbroQv9XAxqE6Vo89heL0vLrumZESaT1SyxSXZuR1SzbtSMrk_QpkeywCDPvMOO-g18bVpC-nvghQ-4%20\(1\).gif?alt=media) In this example, the section’s top and bottom padding are set to 200px. The **Background** position is **Center** and the Background size is **Cover**. Otherwise, you can set the width for the flex section to make it a banner. Simply select the flex section > navigate to [Size](https://help.pagefly.io/manual/elements-style-settings/%23size-settings) [parameters](https://help.pagefly.io/manual/elements-style-settings/%23size-settings) in the **Styling** tab > select **Fixed width** and set your desired width for the flex section. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d0275da5c2c07235ac4d00827be0792cb0e9758b%2FAD_4nXeYMzYmNM1AtuusAWqQEQtZwsC8NTC5RJQCjj4NX_dJS1WkSEx2VKABs739h1wVmA4J9SLyzTv3NV9Nh3VFQPpzsnK98M0IpXIWg-fPP2V7o1LonfYWYNWldsCgmilr11GQ53fYjQkrgUdkP80TPwkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) **Step 2: Add A Heading** 1. Go to **Elements** > [Heading](https://help.pagefly.io/manual/heading-element/) and drag one of the variations into the section. Style it as you want. Repeat with the Button element if needed. 2. For alignment, select the flex section > navigate to the **Styling** tab > scroll down to find the “**Align items**” feature under the **Layout** parameters > Choose your desired option. You can read more about **Layout** settings [here](https://help.pagefly.io/manual/elements-style-settings/%23layout-settings). ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-60e82405b0c0859fea6bb1d8cc68089b78357622%2FAD_4nXc5oPaQVvuoZgbLpANFcsebrtROAlU3fpT7XIRebI6A-LQG7aIoWKfd3W_J5GRA7eQg0Xg9jGVnX0PVRjLkpF8azuGEBzYm2VSEhBwkXZLCZiBDO0asLYZqJDeO6CQT3KOoPAgmj5u18sF-W3T-keywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) Above is a design example of a one-column section with a heading and a button. **Step 3: Optimize The Mobile Design** 1. Switch to the mobile view by clicking the **Mobile** icon in the device switcher on the top bar. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-fdcbb939c509800dc743f9365d96d1e5f4d3361b%2FAD_4nXeSym0bPHZfnXETYFWB6pOT3O8B3xK2Z2mU418BbFivEq4blQnhDrauCKGgKCmbi1qdsbhAbfrUeS-YFc-UAKn2PuNCEWOK9iS8hG_MUH_P92q8lycN47Q-PsQrlpgQ-2UK_efHcJqoVs_yP9oSRQkeywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) 2. Go to the **Styling** tab and modify the margin and padding to suit the mobile view. Changes in mobile view mode will not affect other view modes. 3. Edit the heading and button sizes to fit the image and mobile view mode. 4. Click on **Publish** and check the page in **Live View**. #### How To Create A Two-Column Section **Step 1: Build The Layout** 1. Go to **Elements** > Layout and select **the 1/2 – 1/2 layout** from the left sidebar. 2. Drag a **Heading** and a **Button** element into the left column. You can change their styling in the **Styling** tab. 3. Choose **Elements** > drag an **Image** element to the right column. 4. Upload the image to the **Image** source. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-86a2e26d873efe511143a95ca1a360744caa48e2%2FAD_4nXcyEfL0-zsGxeNr4w1Zpa_qtr2CrJOQtFXSz61YrQC8XrJmURrwLXT3a7U_PJsYU2Wi8ySSyL04ILZZecxYQaxdVrVs7p7CfM7x-uiwj7MKLL9ZsER1i_N9Mh5PId7mlIBSfAJbzWDnAc20pcvukeywCDPvMOO-g18bVpC-nvghQ-1.gif?alt=media) **Step 2: Optimize Mobile Design** 1. Switch to mobile view by clicking the **Mobile** icon in the device switcher on the top bar. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-582d453ddc1fa449a2b98001030af0459b602c58%2FAD_4nXe1KmtgJtYq04zQW1m8aDevCZE9ucjX0OrnXTDWCA-SdanJdstcI1Vg7Mr8H3J0ij2mf419gfJQx6Y1RudzXUZT2wsPhiVz3pBSj8HeMT0B2rR7m-f4DxoApVnWL6IIerkFICNXLTBqsHQBDR_ykeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) 2. Go to the **Styling** tab and modify the margin and padding to be suitable for mobile view. Changes in mobile view mode will not affect other view modes. 3. Edit heading and paragraph sizes to make them fit with the image and mobile view mode. 4. Click on **Publish** and check the page in **Live View** #### How To Create A Parallax Effect Section You will need to select the section, go to the **Styling** tab, and enable the **Parallax** option in the **Background** settings. Please check the full instructions [here](https://help.pagefly.io/manual/create-a-section-with-image-and-text/#how-to-create-a-parallax-effect-section). ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-35922030d39abb7bbd307b9e9f34cad93bd94e31%2FAD_4nXdof1Xq0_CTEaETW2KhiQhUIn_2oRTlfr3SxgO1nl7s5EGFyIyE_j6eBYJyKTfPI8M4PleK65zkYKxmhFNkCDEP9-mT9ALASNE9f7jAFkdRdoeTsyyBPwNsg9PY2yimnhmWFBh14grI-x_sUH4BsQkeywCDPvMOO-g18bVpC-nvghQ-9.gif?alt=media) #### How To Create A Sticky Section Simply select the section, go to the **General** tab, and turn on the **Sticky top** option. For full details, check the Legacy editor instructions [here](https://help.pagefly.io/manual/create-a-section-with-image-and-text/#how-to-create-a-sticky-section). ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-678df25ba62a73e288ae329ed7969e11f4ccb682%2FAD_4nXczNZNUpHn8OJCu_ib1z4gsw3ikUyhrkkUGB2lsQHjqOG_XHs1fVscM3GhfYo4ksr6SOYmLUEjsZQhf10oyLl1yyeVP71jPB_DnPTKVTCKhuy5Aw2kgb0oMhNKQvm67q5g_EhT4MnyUOTZ1LpRtkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) ### Legacy Layout - How To Create A Basic Section With Image And Text This section will guide you through creating basic sections in PageFly using the Legacy editor, including: * One-column * Two-column * Parallax effect * Full-width * Sticky sections Consider watching this video tutorial for visual step-by-step instructions: {% embed url="" %} #### How To Create One-Column Section **Step 1: Add A Background Image** 1. Navigate to PageFly and access the **Elements** option on the left sidebar. Select **Layout** > choose the **1/1 section layout** and drag it to your page. 2. Choose **Styling tab** > **Background** > Insert the background image for the section. 3. To make the section a banner, you can adjust the **Padding** and **Margin** in the **Spacing** parameter and use More settings to center and enlarge the background image. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-2695dce0b9f6a594d7840ac866beb6e186d5b7d9%2FAD_4nXcTKXEMwDHDeAVoszCS5i2VkUIWqo8798s61kiCaYPXakmyOexoo3POoxsbALx0QMMMyI4oBj7bZnbDA93s3duKhiXaty2BGLo3_77xMp0NPA4xuDJo8Z5Il_vQCfx5U1nvQqq0_kyzZ8TDVxatSwkeywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) In this example, the section’s top and bottom padding are set to 200px. The Background position is Center and the Background size is Cover. **Step 2: Add A Heading** 1. Go to **Elements** > [Heading](https://help.pagefly.io/manual/heading-element/) and drag one of the variations into the section. Style it as you want. Repeat with the **Paragraph** and **Button** element if needed. 2. For alignment, adjust the margin of the column under the **Styling** tab. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-e9a5689a848a0042d4557db8e373751083116648%2FAD_4nXfiSaimAR8UXX9FocorbhkhYZyIHsrscfV1YK4ZXcxr64UHb9nqU7HfcX3gpQx252ZFPBXKY93nfNEEGkpRGA4f1kItxGQPfnBrKHYgKX-wZLPnP57_MCT910GoDDsU9wKrCE_0UcY-_pPz6e_bVQkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) Above is a design example of a one-column section with a heading and a button. **Step 3: Optimize The Mobile Design** 1. Switch to the mobile view by clicking the **Mobile** icon in the device switcher on the top bar. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-d27141f8f1418ee958c8704f877a43a1baa2a6ce%2FAD_4nXfP1JEQD0yeM2IptRzfjMbAzqSBeLsXt8D9UEm5KQ0S4vAPf1-v8amIalpdjR1S0FgJ_Jd6g1Gb4tRcwTVEMCng2UEh1YXbQTO410sI-6w5IxMsxuPr03e6fSfdtvCaEKwfEyUNtXWcs4Q0afya7AkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) 2. Go to the **Styling** tab and modify the margin and padding to be suitable for mobile view. Changes made in mobile view mode will not affect other view modes. 3. Edit the heading and button size to make them fit with the image and mobile view mode. 4. Click on **Publish** and check the page in **Live View** #### How To Create A Two-Column Section **Step 1: Build The Layout** 1. Go to **Elements** > **Layout** and select **the 1/2 – 1/2 layout** from the left sidebar. 2. Choose **Elements** > drag an Image element to the right column and upload your image to the Image source. 3. Drag a **Heading** and a **Paragraph** element into the left column. You can change their styling in the **Styling** tab. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-fadb8a5ebca9780c18a24867c42767371e69e020%2FAD_4nXcEHJptT798UGLdPtDxJjTcjWerlAdTSFu0O0-rPNt2o4dwt-XgIcctrme1-f1wlrxdO9tBSmx0MXzb2WUkhRIYNr3Jm8E3B4k3B6jEhU_Xw9n7X7v7b6kLG19JVqYTC1VwxlDdsoUpZXOvMvInXwkeywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) **Step 2: Optimize Mobile Design** 1. Switch to mobile view by clicking the **Mobile** icon in the device switcher on the top bar. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-f4a17a60a1a764551fa85c079e76c4f314e408c8%2FAD_4nXfPvFg7ZIvQnYJykwmQwu5wtdB2G2s0mir2CjDeDq9Vm0T_btC_RStKZmQESVwDoprB9fMgEdg-l1pHKdv7n2Gilg1MoANSMBNlDNzKk-J4eeBQeTWBEjHTi2qRfH3nuHWL7XpsE7Vu49fIL7xZ0wkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) 2. Go to the **Styling** tab and modify the margin and padding to suit the mobile view. Changes made in mobile view mode will not affect other view modes. 3. Edit the heading and paragraph sizes to fit the image and mobile view mode. 4. Click on **Publish** and check the page in **Live View** #### How To Create A Parallax Effect Section The parallax effect in web design makes background images move slower than foreground content as you scroll, creating a sense of depth. This technique enhances a webpage's interactivity and dynamism, engaging users with a more immersive experience. **Step 1: Set The Parallax Background Image** 1. Select the section that you want to add the parallax background to. 2. On the inspector panel, select the **Styling** tab. 3. Find the **Background** parameter and select the **Parallax** option. 4. Then select the image you want to set as the background. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-35922030d39abb7bbd307b9e9f34cad93bd94e31%2FAD_4nXdof1Xq0_CTEaETW2KhiQhUIn_2oRTlfr3SxgO1nl7s5EGFyIyE_j6eBYJyKTfPI8M4PleK65zkYKxmhFNkCDEP9-mT9ALASNE9f7jAFkdRdoeTsyyBPwNsg9PY2yimnhmWFBh14grI-x_sUH4BsQkeywCDPvMOO-g18bVpC-nvghQ-8%20\(1\).gif?alt=media) **Step 2: Adjust The Settings** 1. Click on **More settings** button after you set up the parallax image. 2. You can see the settings for parallax speed and overlay color. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-b8d64d92c3f77fdc6e32b00c6c043c539c589f91%2FAD_4nXfyXNYvFoComCaSWiFSGBw9ZoUoc-AjNkbIEEA1-gIzfygxc-ZjU3_vTaLrXtHrM6tXqCkf4-p4ifq4eHvh7QyOqy9EXnCY1peVUQOuZIiAKBoki4_R3Z67sfr9oJx-DK_v8w1zQsG9dP-IWP3fygkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) To see the parallax effect, you need to check the page on both preview and live view. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-824b0a0db817bc89b9cacce7adb74c9cabf63805%2FAD_4nXcYCgURePyrwGjDl5BtkLECQFZnJFD-YHVkSfRQwzgjfbDVG9bUKX_iIvou985ij12wXp6G2QTbH53caPhJNrpJRdshcRiHXulbweRaCng5zp-p1aH1-UBjHdRNGJdv5OPZvE9ToAR3kNqJHJ69bwkeywCDPvMOO-g18bVpC-nvghQ-4.gif?alt=media) #### How To Create A Full-width Section A full width section in web design refers to a horizontal block that stretches across the entire width of the browser window, from left to right, fitting any screen size. This design helps differentiate sections on a webpage, making it more visually appealing and easier to read. **Step 1: Set The Full-width Section** 1. Select the section that you want to set full-width. 2. On the inspector panel, select the **General** tab. 3. Find the **Set fixed width** parameter and change to **No**. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-bc125e2b286f831b0c8a9204e2204a386e4a1186%2FAD_4nXdkYyvZemSwonJciZV_DAhqloZoFhrnJvNQfLTYFY7rkZJFlD7sH6DxgPox5LRRWFHy50HeWwjAg3HkIQf4VNqDhhQ3mUzR01_BVTlu4pl8nyrE6WI-YAWrhvAD9RddbjdXUpvXR2t6yh0MIrE8HQkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) **Step 2: Set The Padding For The Section** 1. On the inspector panel, select the **Styling** tab. 2. Find the **Padding** parameter and adjust the padding left and right. You should use the horizontal padding for the section to prevent content from pushing to the edges. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ee8ee09d4d273eaf2cafa58d4d7610d8ab4cb388%2FAD_4nXdc4Oq4RqrHvcV8s7HSvyB7psNTdatp5rVUoex0cdtOG8vRitnTB_xotRDQwoCwIQeNQds6xZVHnuQPjcIfor4QzXHRNVxk59BUKUrElMKsTfuivVa7ezIo48b_115QRxOod3GHzuxM9ySX2CTOhAkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) #### How To Create A Sticky Section A sticky section on a website sticks in place as you scroll, making it always visible. **Step 1: Set The Sticky Section** 1. Select the section that you want to make sticky. 2. On the inspector panel, select the **General** tab. 3. Find the **Enable sticky top** parameter and change it to Yes. Now the section will be sticky to the top, and a little sticky indicator will appear on the section. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-10851cdcc4cc558a5461eb2835c05a5735e59b42%2FAD_4nXfAM-z8m2k_visW282t6ht47DGQOkyHeEygRqPu-fRvCxoKKdvlrbySaEQOy42flmtC4WB_bk3F7ExtsmKVXMuFfi4opvO_qm7_8RuG0qhpGkGJjrlb5CQ-wsfWH5FdPpYmNytssShhA6U2sFn3keywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) **Step 2: Adjust The Settings** Adjust the following settings for your sticky section: * **Top offset**: This sets the space between the section and the top of the screen. For example, a 20px top offset means it will remain 20 pixels away from the top. * Apply **Elevation**: This determines which elements appear on top when there's overlap. A higher elevation means the sticky section will cover other content that has a lower elevation, ensuring it stays visible. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8642aea5c19a7ef63edbcab9c94fb13ec50e1caf%2FAD_4nXc1A6InTSWkcxJn4BX-Iq74Qrt7Cb0eV1uYWag9mHDTaxGxFTQKIj9o8mhLe7x60km2mvZVXnUKF-V1YbKnEc_f8vn7ZYN4BuXN1NBsTUbhCA1KKDE2fg2Zoopup71YJMyZejinmtwQrXbupNJfyAkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) For further instructions on how to create a sticky section, you can check more [here](https://help.pagefly.io/manual/make-a-sticky-section/). ### Use Cases * **Homepage Design**: Create an engaging home page with a full-width banner to welcome visitors. * **Product Features**: Use a two-column layout to detail product features alongside images. * **Storytelling**: Employ parallax effects for a dynamic storytelling or company history section. * **Contact Information**: Make contact details or a call-to-action button sticky for easy access. * **Landing Pages**: Design captivating landing pages using a mix of these section types to guide visitors through your content or sales funnel. ### Tips And Best Practices #### Choose High-quality Imagery For Parallax Effect Choose high-quality imagery to maintain focus and enhance the depth effect. This keeps your page elegant and engaging without overwhelming the user. #### Use High-resolution Images for Full-width Sections Use high-resolution images to avoid quality loss on larger screens. They make your sections visually striking and effective for highlighting key messages or calls to action. #### Don’t Overuse Sticky Sections Employ these for essential elements (like navigation or key CTAs) to keep them accessible. However, avoid overusing to prevent screen clutter and distraction from the main content. #### Switch Column If you have a section with more than one column and want to switch column position, you can follow the steps below: * Select the row that includes your columns * Navigate to the **General** tab > **Contents** > **Columns** * Click and hold the handle of each column to switch position as you want Note that this action will change the order of the columns across all view modes. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-56ad52f585c8ea50fe76f4803a4a9d55e2855bb3%2FAD_4nXdl_cnA5whwCiEX25jvEqkhCjXNj9JSP6OfjR5Y4QpIoT2rFLl-4RQdYVk_O8WLv9PinrEn9FuMCyKyXaflIvM5wAAdoa2stM9XY1JiMi8PrLgkuHTv7jQw9KRbyydZQqoLJCEq6MqvbJhd3M9TTwkeywCDPvMOO-g18bVpC-nvghQ-3.gif?alt=media) #### Switch Column Position On Mobile Only * In Legacy Editor For sections with a layout consisting of one column for an image or video and another for text, you can customize their arrangement specifically for mobile viewers. Here’s a simple guide: 1. Select the row that includes your columns 2. Navigate to the **Styling** tab, choose **Display** style, select **Flex** 3. Set **Flex Wrap** to **Wrap Reverse**. This action will change the order of the columns, allowing you to customize their arrangement for mobile viewing only. For example: Say you have a section where the text appears above an image on mobile. To flip them on mobile view and keep the current layout on other view modes, applying **Flex wrap** > **Wrap reverse** will move the image above the text. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-6b29de9bca99e4145ecf82473025492b26732895%2FAD_4nXf4YAakte3J4ntbmDDGX8XQsqyqlzQQmDjQJEQ9ghB6lNAKwQnB5SKPEUR1qiX6CPyxtmF-UK-QxaYOEt9fRTrewbJe3X0Wnfu0WEc7C5aBno9lJJUH94xkZsd2kntlGjMK4atCoCDTUBeCrK-9cwkeywCDPvMOO-g18bVpC-nvghQ-3.gif?alt=media) You can find more tips on using the Flex option by checking this [article here](https://help.pagefly.io/manual/flex-feature/). * In Gen 2 Editor: In Gen 2 editor, you can switch column position on mobile by using the **Reverse order** feature in the **Layout** parameter. 1. Select the flex section that includes your columns 2. Navigate to the **Styling** tab > Look for **Layout** parameters 3. Set **Top to bottom** for the Direction and choose **Yes** for the **Reverse order**. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8aff300f11213849906fe0246a9d273d292cd2e4%2FAD_4nXdMAmN_hANizP-WGeBcW3dEHIyofNpenFrdHWYjrqxO6i0VGY2sNen7F3I32oX7Uhj-cLT4BuTRTBW_VeyJtaXurrH9IzRTKN0mBhjoJasR6-etvzFi-YFeLXBZXYjYjcxSkdSM2gVYI5c9ih1xaAkeywCDPvMOO-g18bVpC-nvghQ-4.png?alt=media) ### Frequently Asked Questions 1. **Can I use the Parallax effect on Mobile devices?** Yes, but be mindful of performance and readability, as excessive motion can be distracting or slow down the site on mobile devices. 2. **How do I change the background image for different screen sizes?** PageFly allows you to customize backgrounds for different devices. Use the device switcher and styling options to set unique backgrounds for mobile, tablet, and desktop views. ### Additional Resources * [5 Steps to Create Full-width Section on PageFly Pages](https://help.pagefly.io/manual/create-a-full-width-section/) * [How to Use PageFly Saved Section and Premade Section?](https://help.pagefly.io/manual/saved-section/)