Landing Page - 3 Image Box Columns

We will be creating three image boxes like this:

Activate Section 1

  1. Go to Appearance >> Customize >> Landing Page Options >> Section 1
  2. Check the box next to “Enable Section 1” so that this adds sidebars for us to use
  3. Click “Save & Publish“

Prepare Your Images

Before we move on to the next part, you want to make sure you have your images prepared by cropping and sizing them. As a guideline, you can use the same image size that I used on the live demo site:

Images = 400 x 265 pixels

Now We Need a Widget

You have two options available to add this kind of content:

  1. Text Widget
  2. Black Studio TinyMCE Widget - a text widget with a built-in content editor

I used the optional Black Studio widget for the demo site because you can do everything in it without leaving the window, so we will do this tutorial based on that. If you don’t have this plugin already, then we need to get it.

  1. Go to Plugins >> Add New
  2. Search for Black Studio TinyMCE Widget
  3. Install and activate it

Create Our First Image Box

Now it’s time to make our first image box with content, followed by our second and then third one.

  1. Go to Appearance >> Widgets
  2. Drag the “Visual Editor” widget into the “Section 1a” sidebar position (these were activated from the earlier step)
  3. Title your widget and put an ! (exclamation mark) right before the title. This hides the widget title from the front-end when using the “Remove Widget Titles” plugin (I would recommend you get this plugin).
  4. Next, we need to add our first image, so click on the editor’s “Add Media” button and upload your first image.
  5. Right after the image, we now need to write a title, and using the editor, we need to turn this into an H3 heading (or whatever you decide).
  6. Right after this, we now add our paragraph content.
  7. Click “Save“
  8. Repeat the above steps for the second and third image boxes, excerpt we are dragging the Visual Editor widget into the “Section 1b and Section 1c” sidebar positions.

Example Code for the First Image Box

If you want to see what the code is for the first image box on the live demo, the code below can be used as a template snippet if you decide to use a basic Text Widget instead of the Black Studio plugin. Remember that with this method, you will need to use the Media Library to upload your images and then you will need to get the File URL for that image to paste into the code below:

<p><img class="aligncenter size-full wp-image-22" src="IMAGE LINK HERE" alt="image box" width="400" height="266" /></p> <h3>Loaded with Features</h3> <p>Curabitur ut ultricies lorem. Nunc pulvinar mauris non gravida feugiat. Integer tincidunt semper hendrerit. Proin id vulputate ante. Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p>