Responsive Image Backgrounds For Inline Widgets – Infinity Pro

The code in this tutorial enables you to display 3 text widgets inline, each with a different background image. The widget title, text and HTML for buttons display over each image like this:

Demo Video

Here’s the demo video showing how each text widget displays on smaller screen widths.

This tutorial has been written in response to the following question from a member.

Hi Brad. I love what you are doing and I just subscribed to your membership area few days ago. I have the infinity pro genesis theme. and I was after some help please in some customization. I was wanting to add images with clickable links on the front page section but unsure on how to do that and whether it needs the coding etc.

Tested using the Infinity Pro themes front page 2 widget area. Code may need tweaking for use in other widget areas and themes as the widgets display inline using PHP & CSS code for flexible widgets which is not included in all StudioPress or Genesis child themes.

Add Widget Background Images Using Customizer

Rather than add your background images to your themes images folder, you can also add them via the customizer as seen in the following video.

Code Installation & Widget Setup

Step 1 : Add 4 text widgets to the Infinity Pro themes front page 2 widget area as seen in the following screenshot:

Step 2 : Add the following HTML to the 4 text widgets.

Step 3 : Add images named fp-1.png, fp-2.png & fp-3.png to the Infinity Pro themes images folder.