Before going into specific steps, you can consult this video to have a better demonstration on how to add a section with images and text with PageFly.
Install PageFly for Free here
In this article, you’ll learn how to build a section with image and text from scratch and how to control its layout.
Create a 1-column section
Step 1: Build the layout
First, select Add Element from the left sidebar menu > Layout. Pick the 1/1 section layout and drag it onto the page.
- Choose Styling tab > Background > Insert the image background for the section.
To make the section a banner, you can adjust the Padding and Margin in the SPACING parameter and adjust Background Position or Background Size or anything related to the Background Image in More Settings.
With this example, the section is set for the Padding at the top: 200px and bottom: 200px. The Background Position is Center; Background Size is Cover.
Go to Add Element > Heading and drag one of the variations into the section. Stylize it as you want. And repeat with the Button element.
Et voila! This is the design on the live view of a 1-column section with a heading and a button.
Important: When a fixed value is set in the “All” view, it will be applied to all other views (tablet and mobile) and makes the design not responsive by default anymore. Scroll down to learn how to fix this.
Step 2: Optimize the mobile design
You can check the design on mobile by choosing Mobile in Device switcher on the top bar.
The image doesn’t look good on mobile.
PageFly allows you to customize the styling for individual devices, so choose the Section > Styling tab > SPACING > Set 30px to the top-padding and bottom-padding.
Edit heading and button’s size to make them fit with the image.
Hit Publish and check the page on Live View.
Create a 2-column section
Step 1: Build the layout
- In the Editor, choose Add Element of the left sidebar menu > Layout > choose the 1/2 – 1/2 layout.
You can click plus icon on any column to create more columns in the layout. The columns will have the same width.
Back to the 2-column section that we’re building.
- Choose Add Element > drag an Image element to the column on the right.
- Then, drag a Heading and a Button element into the left column and add styles to them in the Styling tab.
Select the left Column > choose Styling tab > SPACING > set 30px to the top-padding and 30px to the left-padding.
Step 2: Optimize mobile design
Check the design on mobile by choosing Mobile in Device switcher on the top bar.
If you want to remove the space above and the left of the content, choose the top column in the section > visit Styling tab > Padding > set the top-padding and left-padding to 0.
- Hit Publish, and you’re good to go!
If you want to learn how to add text on an image, check the video below: