Before going into specific steps, you can check out this video to have a better demonstration on how to add a section with image and text.
In this article, you will learn how to create a section with images and text from scratch and control its layout.
Create a 1 column section
Step 1: create the layout
First, select Add Element from the left sidebar menu > Element > Layout . Choose a full section layout and drag it onto the page.
When you select the section element, go to the element inspector on the right. Choose Style tab > Background > Image > Insert image background for section here.
To make the section a banner you can adjust the padding and margin in the SPACING setting and adjust the background position or background size or anything about the background image in More Settings .
With this example, the section is set for top padding : 40 px; right: 500px; bottom: 500 px and left: 0 px. The background position is Center; The background size is the cover according to the picture below.
Important : When a fixed value is set in the “All” view, it will be applied to all other views (tablet and mobile) and will make the design more responsive by default. Scroll down to find out how to fix this problem.
Go to Add Element > Element > Header and drag some of the variations into the section. Style it however you want and repeat with the Button element .
And There you go! This is the design on the live view of a 1 column section with a header and a button.
Step 2: Optimize Mobile Design
You can check the design on mobile by choosing Mobile from the device selector on the top bar.
Because the section originally has a top padding: 40px; right padding: 50px; bottom padding: 500px and left padding: 0px, on Mobile the title and button got longer and doesn’t look good.
PageFly lets you customize the style for each device, so choose Section > Style tab > SPACING > Set 0px on Right Padding.
Tap Save & Publish .
Create a 2 column section
Step 1: create the layout
In the editor , choose Add element from the left sidebar menu > Element > Layout > choose 1/2 – 1/2 layout .
You can play around with the layout element a bit to figure out what it can do. Go from 2 columns to 3 columns, 4 columns or even 10 columns in the General tab > CONTENT > Add column .
Let’s go back to the 2 column section we are building. Choose Add Element > Element > drag an Image element to the right column.
Next, drag a Header and Button element to the left column and add styles to them in the Style tab .
To make them float in the middle of the column, we need to add some space to the column. Select the column > choose Style tab > SPACING > set 30% to Top Padding .
Step 2: Optimize Mobile Design
Check the design on mobile by choosing Mobile from the device selector on the top bar .
If you want to remove the space above the content, choose the first column in the section > visit the Style tab > Styles Box > set the top padding to 0.
Click Save & Publish , and you’re set!
