Your cart is currently empty!
Responsive Inline Widgets With Full Width Background
โ
by
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:
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
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:
Related Tutorials
Free
$0
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Monthly
$75
Access to 10 premium tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Yearly
$500
Access to 15 premium tutorials per month.
Monthly Tutorial Request
Includes code guarantee and priority coding support.
Was This Tutorial Helpful?