In my tutorial requests Trello board, a user asked:
Hello, I'm looking to add to add an opt in form under header using the Infinity Pro theme, and embed a video with image background showing. Does require adding a welcome widget? For example the website that has the look I would like to create is http://nishamoodley.com/ that shows on homepage as well as on other pages of the website. It also shows different images but plays the same website. Can you please create a tutorial on this, I think it's a beautiful design. Many thanks! :)In this tutorial for Infinity Pro, we are going to
- register a custom Welcome Widget section
- set up a
Welcome Widget Imageimage field using Advanced Custom Fields and set the field group to appear on static Pages so that each Page can have its own unique background image for the above section.
- show Welcome Widget section below header and set the background image URL to the one from custom field's value (if present), otherwise to that of a fallback image.
- drag a Genesis eNews Extended widget into the widget area and write CSS to align it to the right on desktop widths and to the bottom at smaller widths using Flexbox.
- drag a text widget into the widget area having the HTML to display video in a lightbox using Modaal jQuery plugin and position this absolutely so it appears in the middle on the left portion.
- enqueue the js and css files needed for Modaal and initialize it.
Step 1Upload modaal.min.js to Infinity Pro's
jsdirectory. Upload modaal.min.css to Infinity Pro's
Step 2Install and activate ACF. Create a custom field group named say,
Page Metahaving a
Welcome Widget Imageimage field. Set the return value to
Image ID. Set the field group to appear on static Pages.
Step 3Add/edit static Pages and upload/select your desired Welcome Widget's background image in the
Page Metameta box. To make this work on homepage, create a blank Page titled say "Home", set it as Front Page at Settings > Reading. Then edit the Page and set the Welcome Widget's background image.
js/global.js. Above the last line in the file i.e., above
To view the full content, please sign up for the membership.
Already a member? Log in below or here.