How to create a basic 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.
Gen 2 Layout - How To Create A Basic Section With Image And Text
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
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
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.
Select the Flex section > Choose Styling tab > Background > Insert the background image for the section by clicking on “Select image”.
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
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.
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
Switch to the mobile view by clicking the Mobile icon in the device switcher on the top bar.
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.
Edit the heading and button sizes to fit the image and mobile view mode.
Click on Publish and check the page in Live View.
How To Create A Two-Column Section
Step 1: Build The Layout
Go to Elements > Layout and select the 1/2 – 1/2 layout from the left sidebar.
Drag a Heading and a Button element into the left column. You can change their styling in the Styling tab.
Choose Elements > drag an Image element to the right column.
Upload the image to the Image source.
Step 2: Optimize Mobile Design
Switch to mobile view by clicking the Mobile icon in the device switcher on the top bar.
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.
Edit heading and paragraph sizes to make them fit with the image and mobile view mode.
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.
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.
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
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.
Choose Styling tab > Background > Insert the background image for the section.
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
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.
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
Switch to the mobile view by clicking the Mobile icon in the device switcher on the top bar.
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.
Edit the heading and button size to make them fit with the image and mobile view mode.
Click on Publish and check the page in Live View
How To Create A Two-Column Section
Step 1: Build The Layout
Go to Elements > Layout and select the 1/2 – 1/2 layout from the left sidebar.
Choose Elements > drag an Image element to the right column and upload your image to the Image source.
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
Switch to mobile view by clicking the Mobile icon in the device switcher on the top bar.
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.
Edit the heading and paragraph sizes to fit the image and mobile view mode.
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
Select the section that you want to add the parallax background to.
On the inspector panel, select the Styling tab.
Find the Background parameter and select the Parallax option.
Then select the image you want to set as the background.
Step 2: Adjust The Settings
Click on More settings button after you set up the parallax image.
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
Select the section that you want to set full-width.
On the inspector panel, select the General tab.
Find the Set fixed width parameter and change to No.
Step 2: Set The Padding For The Section
On the inspector panel, select the Styling tab.
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
Select the section that you want to make sticky.
On the inspector panel, select the General tab.
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.
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:
Select the row that includes your columns
Navigate to the Styling tab, choose Display style, select Flex
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.
Select the flex section that includes your columns
Navigate to the Styling tab > Look for Layout parameters
Set Top to bottom for the Direction and choose Yes for the Reverse order.
Frequently Asked Questions
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.
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
Last updated
Was this helpful?
