How to Build a Section with Image and Text

Overview

This guide shows how to build 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 Installation: 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.

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:

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.

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

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.

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.

Step 2: Optimize Mobile Design

1. Switch to mobile view by clicking the Mobile icon in the device switcher on the top bar.

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.

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.

To see the parallax effect, you need to check the page on both preview and live view.

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.

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.

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.

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.

For further instructions on how to create a sticky section, you can check more here.

Gen 2 Layout – How To Create A Basic Section With Image And Text

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.

2. Select the Flex section > Choose Styling tab > Background >  Insert the background image for the section by clicking on “Select image”.

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.

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 parameters in the Styling tab > select Fixed width and set your desired width for the flex section.

Step 2: Add A Heading

1. Go to Elements > Heading 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.

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.

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.

Step 2: Optimize Mobile Design

1. Switch to mobile view by clicking the Mobile icon in the device switcher on the top bar.

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

The steps to create a parallax effect in the Gen 2 editor are almost the same as in the Legacy editor. You still 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.

How To Create A Sticky Section

Creating a sticky section in the Gen 2 editor follows the same process as in the Legacy editor. 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.

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.

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.

You can find more tips on using the Flex option by checking this article here.

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

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
• How to Use PageFly Saved Section and Premade Section?