• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Register for full access

Infinity Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.