Our front page is going to be made up of these sections:
- Header (sitewide) - site title/logo at left and custom menu in 'Header Right' widget area.
- Home Slider - Full width Soliloquy slider.
- Home Horizontal Opt-in (appears below header on inner pages) - using Genesis eNews Extended plugin.
- 2-column (50/50) Home Featured section - Text widget at left and a image widget in the right.
- Home Blog Posts section - 4 Posts set to appear side-by-side using Genesis column classes via Genesis Sandbox Featured Content Widget plugin's widget.
- Home Testimonials section - Hard-coded i.e., pre-set (can be set to be pulled from a Testimonials CPT, but not covering that now) Testimonials text being shown 1 at a time with carousel powered by bxSlider.
All the sections in the above list except the header are custom widget areas.
The solution below is written for Genesis Sample child theme and might need to be modified if you are using another Genesis child theme. Mobile responsiveness has been taken care of incl. a hamburger menu that's set to appear at screen widths of 1024px and less.
- Soliloquy Premium
- Regenerate Thumbnails
- Genesis Sandbox Featured Content Widget
- Genesis eNews Extended
- Image Widget
External jQuery script used: bxSlider for Testimonials carousel.
Download jquery.bxslider.zip and extract its contents.
Upload ‘jquery.bxslider.css’ and ‘images’ folder to your child theme directory/css (create, if not existing).
Upload ‘jquery.bxslider.min.js’ to your child theme directory/js (create, if not existing).
Create a file named bxslider-init.js to the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.