With this tutorial, we are going to create something like this:
Ultimately we can also apply this tutorial to create custom “Image Boxes” for anyone who wants to get a little more fancy with displaying images in widget groups. But we will focus more on the Team Box concept that you see in the screenshot above.
To make things easier, I used the Black Studio TinyMCE Widget plugin because it gives me a fully functional editor in a text widget format. You have access to everything your editor has, content, fonts, styling, Media, and more.
Prepare Your Image
To use the demo as a guideline, I made the images 560×450 pixels, although you can use whatever size you want, as long as they are consistent with each one. Once you’ve cropped and sized your image, you are ready to create your first Team Box using the Black Studio widget or a text widget (more on this later).
Create a Team Box
- Go to Appearance >> Widgets
- Drag a Visual Editor widget into a sidebar position
- Title your widget with an ! (exclamation mark) in front of it. If you’ve installed the Remove Widget Titles plugin, the ! will hide the title from the front-end, which is what we want to do.
- Use the editor’s Insert Media button to upload (or browse) your team image and to insert it.
- Right after/below the image, we are going to create a heading. Assign the H3 heading to it. Switch to the “Text” view on the editor because we’re going to adjust the H3 bottom margin (bottom space) by adding embedded styling like this:
<h3 style="margin-bottom: 0;">Christina Estiam</h3>
- Below the heading we can now add a subheading for our team member’s position. Assign the H4 heading to it, and then highlight the heading and let’s add a colour to it like the demo; we used grey. We will also change the font size using the Font Size setting on the editor to make it something like 16px.
- Below this, we can now add some content.
- If you have Display Widgets or Jetpack’s Widget Visibility enabled, you can select what page this will show on.
- Click on “Save“
- Repeat for the next Team Box.
Using a Text Widget
If you are not using the Black Studio plugin, you can still create a Team Box using a Text Widget, but using this HTML snippet, and then make changes to the image File URL and the other content.
<p><img src="http://yourdomain.com/yourimage.jpg" alt="short description" /></p> <h3 style="margin-bottom: 0;">Add Name Here</h3> <h4><span style="font-size: 16px; color: #999999;">Add Position Here</span></h4> <p>Add a team member introduction here.</p>