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 > Element > Layout. Pick a full section layout and drag it on to the page.
When you select the section element, navigate to the Element Inspector on the right. Choose Styling tab > Background > Image > Insert the image background for the section here.
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: 40px; right: 500 px; bottom: 500 px and left: 0 px. The Background Position is Center; Background Size is Cover as per the image below.
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.
Go to Add Element > Element > Heading and drag some 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.
Step 2: Optimize the mobile design
You can check the design on mobile by choosing Mobile in Device switcher on the top bar.
Because the section originally has top-padding: 40px; right-padding: 50px; bot-padding: 500px and left-padding: 0px, on Mobile, the Heading and the Button got stretched out and does not look good.
PageFly allows you to customize the styling for individual devices, so choose the Section > Styling tab > SPACING > Set 0px to the right-padding.
Create a 2-column section
Step 1: Build the layout
In the Editor, choose Add Element of the left sidebar menu > Element > Layout > choose the 1/2 – 1/2 layout.
You can play around with the layout element a little bit to understand what it can do. Change from 2-column to 3-column, 4-column or even 10-column layout in the General tab > CONTENT > Add Column.
Back to the 2-column section that we’re building. Choose Add Element > 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.
To set them floating in the middle of the column, we need to add some space to the column. Select the Column > choose Styling tab > SPACING > set 30% to the top-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 the content, choose the first column in the section > visit Styling tab > Box styles > set the top-padding to 0.
Hit Publish, and you’re good to go!