Créer une section avec image et texte

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.

create a section with image and text

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!

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now