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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Responsive Inline Widgets With Full Width Background

This code enables you to display 3 responsive widgets inline with a background image or background color, covering the full width of the widgets and the screen.

Here’s the demo showing the image added via the customizer, displaying behind all 3 widgets:

inline-widgets

If no image is added, a background-color is added using CSS via your child themes style.css file:

.inline-widgets  {
    padding-top: 40px;
    background-color: pink!important;
}

You can simply remove or change the background image via the WordPress customizer.

Mobile Responsive Demo

mobile

Code Installation

Firstly, Download Inline Widgets Files below.

Step 1 : Upload the bg-js folder to your child theme’s root directory.

Step 2 : Copy the PHP code from the functions.php file to the end of your child themes functions file.

Step 3 : Upload the front-page.php file to your child theme’s root directory.

Step 4 : Add a background image named inline-widgets.jpg to your child themes images folder.

Step 5 : Add the CSS from the style.css file to your child theme’s style.css file.

Note: If using a background image, you can remove the declaration for the background-color: pink!important; from the CSS in the style.css file included in the download folder. Also note, when adding additional structural wraps, you must merge the custom structural wrap with your existing wraps in your functions file.

Example:

/* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	'site-inner',
	'footer-widgets',
	'footer',
	'inline-widgets', //This has been added to existing structural wraps
) );

Here’s the code for logged in members:

Register for full access

Related Tutorials

  • Responsive Images Inline Full Screen

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.