PageFly - Create a section with image and text

239 views PageFly 0

In this article, you will learn 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 > Element > Layout. Pick a full section layout and drag it to the page.

Where Full Section is located

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.

Remember to set the position, repeat, size and attachment attributes to suitable values.

To make the section a banner, set a fixed value to its height. Find Dimensions > fill a number into the second box.

Important: When a fixed value is set in “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.

Set image's height

Go to Add Element > Element > Heading and drag some of the variations into the section. Stylize it as you want and repeat with Button element.

Et voila! This is the design on live view of a 1-column section with a heading and a button.

Live page result of a full section with Heading and Button

Step 2: Optimize mobile design

You can check the design on mobile by choosing Mobile in Device switcher on the top bar.

We can see that because the section originally has a height of 600px, on Mobile, the image background got stretched out and does not look good.

Background image height inherited from All view mode

PageFly allows to customize the style for individual devices, so choose the Section > Styling tab > Box Styles > Set the height to 400.

Set different height for the same image in Mobile view mode

Hit Save & Publish.

Live page result of the section on Mobile

Create a 2-column section

2-columns section

Step 1: Build the layout

In the Editor, choose Add Element > Element > Layout > choose the 1/2 – 1/2 layout.

Where 1/2 - 1/2 layout is located

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 > Add Column > slide the Columns option.

Back to the 2-column section that we’re building. Choose Add Element > Element > drag an Image element to the column on the right.

Where Image element is located

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 > Box Styles > set 30% to the top-padding.

Box Styles parameter in Styling tab of the Column

Step 2: Optimize mobile design

Check the design on mobile by choosing Mobile in Device switcher on top bar.

Use device switcher to switch to Mobile mode

If you want to remove the space above the content, choose the first column in the section > visit Styling tab > Box styles > set top padding to 0.

Hit Save & Publish, and you’re good to go!