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.
In this article, you’ll learn how to build a section with image and text from scratch and how to control its layout. You can check this video tutorial for more details:
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. Then choose the column> Styling tab > change the Margin left to 150Px
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 column> Styling tab > change the Margin left to 0Px, then click 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.
- 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. You can change styling for them in the Styling tab
- Next, upload the Image on the Image Source.
Select the left Column > choose Styling tab > SPACING > set 100px to the top-padding and 50px 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 0 Px like this:
- Hit Publish, and you’re good to go!
If you want to learn how to add text on an image, check the video below:
Previous article