Redux Video Background Module

Looping video backgrounds are very popular on home pages. I decided to make a homepage module so WordPress users could quickly build one on their home pages. Users only need a short video clip and some homepage module settings to complete this task. The configuration options for this module are: 

  • Select a video (mp4) from the WordPress Media Library.
  • Add any text content or basic HTML content to be overlayed over the looping video.
  • Select the overlaying text’s color.
  • Select the opacity of the video.
  • Select the height of the video.
  • Position the Video Background module on your homepage with the Redux Homepage Layout Manager. So fast!
Fullscreen Video Background settings

When you decrease video opacity, an underlying background line pattern reveals itself. Decreasing video opacity and exposing the background pattern improves the visibility and readability of the overlaying text content. There is a working example of this module at the bottom of my homepage but only temporarily.

See the Pen Basic Fullscreen Video Background by Matt Gross (@mattgrosswork) on CodePen.0

Fullscreen Video Background

Benefits of the Bootstrap Framework

I started playing around with Bootstrap in 2015 when I didn’t understand what Bootstrap was or why a web designer would build websites using Bootstrap. Since then, I have built 6 Bootstrap sites and can now give five broad reasons to choose Bootstrap as a theme/framework for building a website.

Bootstrap is more than a web site theme with a unique set of styles, fonts, and page templates. Bootstrap is a framework, which could be considered a super theme (technically a superset of HTML, CSS, and Javascript technologies). Many Bootstrap developers share and contribute to Bootstrap making it more than a theme but an entire website design framework. The Bootstrap framework is an open source (read: public) project that many developers and designers have contributed to mostly via the Github social network.

Five Benefits of Bootstrap

  1. speed of development
  2. responsiveness
  3. consistency
  4. customizable
  5. support
xxxx
Patagonia only needs one online version of their catalog–a Bootstrap website and no more expensive app(s) development

The first benefit of Bootstrap is speed of web site development. As a web designer and/or programmer, you don’t code to reinvent the wheel. Hundreds of developers have already contributed to the Bootstrap code base and all these developers share their chunks of code or design components. A web designer initially configures the web features desired, and then, the configured Bootstrap files are downloaded for initial site testing. Each configured Bootstrap site can be a unique design and each could be considered a Bootstrap theme. With all the Bootstrap resources available, the developer can quickly start creating a site structure without having to code individual site components.

The second benefit of Bootstrap is site responsiveness. Bootstrap is a mobile-first theme meaning it is designed for small smartphone screens. Bootstrap has a grid layout which scales nicely for wider screens. Bootstrap sites display correctly for almost any internet device available. As a developer, you don’t need to do as much device testing as in the past and this saves the developer even more time.

The third benefit of Bootstrap is consistency. Your Bootstrap site could be handed over to another Bootstrap experienced developer, and the web interface would remain consistent. For example, the menubar would function the same no matter which Bootstrap developer had last updated it. This consistency also relates to the many different web browsers available. The Bootstrap site responds and displays consistently when tested with most modern browsers.

The fourth benefit of Bootstrap is that it is easy to customize. The Bootstrap developer can choose any website components (buttons, sliders, date picker, popups, etc) to create the web experience that the client desires. With lots of Bootstrap components to choose from, the developer can create a unique customized theme.

The fifth benefit of Bootstrap is support. Github has over 600 developers sharing code and ideas on Bootstrap. The framework is always evolving and improving. A standard WordPress theme might be built and tested by a single developer or small team, but the worldwide community of Bootstrap developers would result in a superior theme.

When you combine the tools of faster development, device responsiveness, browser consistency, easy customization, and a good network of online support, the Bootstrap framework offers many time-saving advantages for web developers.

Some Bootstrap sites:

**Bootstrap sites I have built

Redux Homepage Theme Options

Your site’s homepage is the most important page of your site. It is where your visitors land and the homepage needs to be interesting to keep your visitors at your site. This is an introduction to creating a WordPress homepage with the Redux options framework installed within the WordPress theme. The framework allows non-technical content providers to create and modify the layout of the homepage without ever losing its professional design. The framework allows WordPress developers to create Dashboard theme options to further enhance the look and functionality of a great homepage.

The Redux framework can integrate with any part of a WordPress website but this post only covers using the theme options to configure the homepage. WordPress’ post editor is fine for creating a post or a simple webpage. But in many cases, content providers don’t have the time or knowledge to create a quality homepage. Not only does the homepage need to look good, but it needs to be a fully responsive page that displays properly with all internet devices. The Redux framework allows content providers to quickly refresh their home pages; resulting in a homepage that is never stale.

redux_modules_homepage_780
Homepage constructed with Redux theme options. (Inset: Homepage Layout Manager)

How does all this work? A nice homepage has blocks of content that make up the page’s design. The homepage highlights various content within the website. One block of homepage content might highlight a featured post known as a Jumbotron content block. Redux calls these blocks of content modules. Inside the theme’s options panel is the Homepage Layout Manager, where homepage modules are organized. Only enabled modules are displayed on the homepage. These draggable modules can also be reorder, which changes their positions on the homepage. The content provider never writes the homepage content, they configure the modules to create a homepage design.

My WordPress theme has ten homepage modules to choose from. If you enable all 15 of them your homepage would look like this test page. Below are some module descriptions and their settings.

  1. Hero Content
  2. Jumbotron
  3. Page Content
  4. Portfolio
  5. Divisor 1
  6. Services
  7. Hero Post
  8. Widgets (3 column)
  9. Divisor 2
  10. Two Columns
  11. Slider
  12. Wide Slider
  13. Google Map
  14. Tabbed Panels
  15. Video Player
  16. Fullscreen Video Background
  17. Parallax
  • The Hero Content is simply a header title and header image for the top of the homepage. The content provider can easily change the title and header image in a minute.
  • The Hero Post module if enabled displays the content of the latest post published.
  • The Jumbotron allows you to highlight any other web page or post with a bit of text, an image, and a connecting link.
  • Page Content brings in content that is on your designated front page.
  • The Two Columns module displays a title followed by two blocks of text. The content provider provides the title and two blocks of text in the module’s settings.
  • The Divisor modules are used to visually separate other modules. The overlay text and text color can be changed,  and the background image can easily be changed; its height and image opacity can be adjusted within the module settings.
  • The Portfolio module displays a thumbnail image (and link) to your latest three projects. The module’s settings allows you to change the number of displayed portfolio projects on the homepage.
  • If you like to work with WordPress widgets (Appearance>Widgets), you can enable the Widgets module to display widget content in a three column layout on the homepage.
  • The Services module displays text blocks of each service you offer. You decide how many to display and if you want to include an icon image from Font Awesome’s icon library.
  • The Slider module allows you create a Media Library gallery which slides each selected gallery image across the homepage. The Wide Slider gives you a full page width gallery.
  • With the Google Map module, you just enter your latitude and longitude values in the homepage theme options, then, drag the map module to its homepage position. This seems incredibly easy for clients to insert fully responsive Google maps into their WordPress site.
  • The tabbed panel module is very similar to the standard tabbed panels you find on many sites.
  • The video player module embeds videos from Vimeo or uTube. Just enter the URL to your movie.
  • This where you use a looping video (no video player) as a background to some text content.
  • The parallax module creates a fluid scrolling effect over a number of images and inserted text.

Configuring the homepage is easy with the Layout Manager in the Theme Options. Just enable the modules you want, order the module layout, and set any module settings that may exist. Content providers can quickly create a perfect responsive homepage layout without any coding or even messing with the WordPress editor.

modules
Homepage Layout Manager. Each button is a draggable homepage module