You can refer to the following example to see how the section looks in a live site: http://vinetemplate.weebly.com/home-2.html
Step 1: Drag & drop X element
1.1. Within Weebly Editor, click on Build tab, navigate to STRUCTURE then drag and drop three Section elements into the right position of your building page.
1.2. Click on each section then choose Edit Background > Image > Add Image to upload a background image.
1.3. Navigate to THIRD PARTY then drag and drop X into each section.
The following steps (from Step 2 to Step 4) are the applied for the first and third X elements. You can configure the second X element in a very similar way.
Step 2: Choose display mode
Click on a blank area of X and choose Normal in a pop-up Settings box.
Step 3: Choose column structure
In the Setting box, click on Configure Layout Settings to show the Settings panel.
3.1. Click on LAYOUT.
3.2. Choose the 2/3 - 1/3 layout.
*Note: For the second X element, choose 1/3 - 2/3 instead.
3.3. Click on SETTING.
3.4. Enable Background Transparent to allow the section's background image to show through.
3.5. Set negative value for top margin; and set font sizes for title and text.
3.6. Turn on Equalize Column Heights option to make sure you set equal height for all columns inside.
Step 4: Customize each column
Corresponding to each column, click on each box to create your own custom settings that include: background; title and text color; border color, thickness, types; padding; effect; etc.
Click on Done button at the right top of the screen when you have finished with editing.