Advanced WordPress Backgrounds

Description

AWB let you to use parallax backgrounds with images, videos, youtube and vimeo. Gutenberg and Visual Composer support.

Links

Features

  • Background Types:
    • Color
    • Image
    • Pattern images
    • Local Hosted Video
    • Youtube / Vimeo Video
  • Parallax options powered by high performance JavaScript plugin Jarallax
    • Custom speed option
    • Enable / Disable for mobile devices option
    • Scroll effect
    • Opacity effect
    • Scale effect
    • Scroll + Opacity effect
    • Scroll + Scale effect
  • Mouse Parallax
  • Custom video start & end time
  • srcset supported (i.e. Google love it)
  • Overlay color with transparency options
  • Stretch option. Will be useful on boxed websites.
  • Visual shortcode maker. You can create shortcode using visual builder
  • Gutenberg supported
  • Visual Composer supported (extended row and col options + separate shortcode)
  • Custom CSS offsets (paddings + margins)

Real Examples

Screenshots

  • Background color
  • Background image
  • Background video
  • Background parallax and Mouse parallax
  • Extended Visual Composer ROW options

Installation

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser. To do an automatic install of AWB, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type AWB and click Search Plugins. Once you’ve found our plugin you can view details about it such as the point release, rating and description. Most importantly of course, you can install it by simply clicking “Install Now”.

Manual installation

The manual installation method involves downloading our AWB plugin and uploading it to your webserver via your favourite FTP application. The WordPress codex contains instructions on how to do this here.

FAQ

Installation Instructions

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser. To do an automatic install of AWB, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type AWB and click Search Plugins. Once you’ve found our plugin you can view details about it such as the point release, rating and description. Most importantly of course, you can install it by simply clicking “Install Now”.

Manual installation

The manual installation method involves downloading our AWB plugin and uploading it to your webserver via your favourite FTP application. The WordPress codex contains instructions on how to do this here.

How to enable `Stretch` with Gutenberg

Since the Gutenberg support Wide blocks, you can make stretch for AWB in theme code:

  1. Enable support for Wide blocks in theme. Read here how
  2. Add this JS code to your theme or in 3rd-party plugin:
    `javascript
    (function ($) {
    var $body = $(‘body’);

    // fullwidth gutenberg feature.
    function stretchAWB() {
    var wndW = $body.width();

    $('.nk-awb.alignfull > .nk-awb-wrap').each(function () {
        var $this = $(this);
    
        var rect = this.getBoundingClientRect();
        var left = rect.left;
        var right = wndW - rect.right;
    
        var ml = parseFloat($this.css('margin-left') || 0);
        var mr = parseFloat($this.css('margin-right') || 0);
    
        $this.css({
            'margin-left': ml - left,
            'margin-right': mr - right,
        });
    });
    

    }
    stretchAWB();
    $(window).on(‘resize orientationchange load’, stretchAWB);
    }(jQuery));
    `
    Note: this code for example only, your theme may not work with it properly (it may not work correctly with theme sidebars). So, you will need to change this code manually depending on your theme styles.

Reviews

This plugin is awesome.

What an amazing plugin. Works perfectly out-of-the-box.

You might have issues if you are using Autoptimize or a minifying plugin, but it’s just a case of excluding the plugins JS from the cache and/or minification (easy fix, plus the JS is minified anyhow).

I’ve wrapped this up in an Advanced custom field to tailor the interface and output it on the site with the do_shortcode function.

Works perfectly, and is a simple solution to what is normally quite a complex one and is now a new must-have in all our new WordPress builds.

5 stars aren’t enough!

Dave @ Toast

This plugin is AWESOME!!

Parallax has been my fav go to site flavor for 4 years (Adobe Muse was amazing like that and butter smooth on mobile 5 yrs ago, but the platform has gone downhill so 90% of my clients and own site designs are on WP these days) but there are some even top notch themes like Salient and Enfold that still don’t have a mobile parallax option in 2018 and That is How/Why I found this incredibly effective and easy to use (and free?!) plugin! #AWBSAVESTHEDAY 🙌🏻

Beautiful.

The plugin I used to use hasn’t been updated in a while. Tried this one out, and it works great! For anyone custom theming with ACF fields, if you’re using an WSIWYG editor and trying to insert the parallax there, you’ll simply need to add space manually or via a class INSIDE the parallax shortcode. Adding the height style in a div around it doesn’t work.

Read all 11 reviews

Contributors & Developers

“Advanced WordPress Backgrounds” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.4.10

  • added Reset button to Color Picker in Gutenberg block
  • updated icons in Gutenberg block
  • fixed disable on mobile devices checkboxes in WPBakery Page Builder
  • fixed Vimeo autoplay on mobile devices
  • fixed self hosted video url building string in Gutenberg block

1.4.9

  • added Full Height option in Gutenberg AWB toolbar
  • added fallback for align full. If the theme don’t support align-wide, AWB will still show the button for it
  • added some helpful controls in Gutenberg block toolbar
  • changed icon to svg in Gutenberg block

1.4.8

  • fixed JS error “only one instance of babel-polyfill is allowed” in Gutenberg editor

1.4.7

  • added support for Gutenberg 3.7.0
  • added wp_admin > Settings > AWB page
  • added settings to disable parallax on mobile devices and in some browsers
  • updated Jarallax and object-fit-images scripts
  • removed Video Volume option since browsers don’t support autoplay with sound https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
  • fixed compatibility with WordPress Import/Export content (Gutenberg)
  • fixed drag event on image backgrounds (without parallax)

1.4.6

  • added support for Gutenberg 3.4.0
  • added support for Ghostkit Indents extension (you can add paddings and margins to AWB block)
  • fixed JS error when select image with specific image size title

1.4.5

  • fixed js error toUpperCase of undefined in Gutenberg editor
  • minor code improvements for Gutenberg blocks
  • changed jquery ready event to DOMContentLoaded

1.4.4

  • improved Gutenberg backgrounds preview
  • fixed conflict with YouTube Embed Plus plugin

1.4.3

  • updated Jarallax to 1.10.3

1.4.2

  • fixed adding styles from Visual Composer “Design Options” tab in AWB shortcode

1.4.1

  • updated Jarallax to 1.10.2

1.4.0

  • added support for Gutenberg blocks builder
  • added option to disable video on mobile devices
  • fixed Visual Composer and Stretch row JS error on mobile devices
  • fixed Visual Composer icon position
  • updated Jarallax to 1.10.1

1.3.2

  • updated Jarallax to 1.9.1

1.3.1

  • fixed parallax resize inside stretched Visual Composer row

1.3.0

  • added video volume option
  • added video always play option
  • added background image size option (support for pattern backgrounds)
  • added background image position option
  • changed background image to tag with srcset support
  • changed scripts enqueue to registration first (prevent some themes to override scripts)
  • updated jarallax plugin
  • updated wp-color-picker-alpha plugin to support WordPress 4.9

1.2.4

  • improved mouse parallax (removed GSAP, now this is pure CSS animation)

1.2.3

  • fixed url escaping in style attribute

1.2.1

  • fixed stretch columns in some situations
  • prevent stretch column when row is stretched

1.2.0

  • added support for Visual Composer column background
  • added icons with images and overlay in Visual Composer backend view
  • small fix for stretch option

1.1.1

  • added Mouse Parallax support with GSAP
  • added support to wrap selected content in default MCE shortcode
  • fix for safari image z position

1.0.1

  • fixed Vimeo videos autoplay
  • fixed video iframe – reset some styles like max-width
  • fixed parallax for speed > 1 (wrong calculation)
  • fixed local hosted video mute and loop
  • fixed showing Local hosted videos if image is not set
  • fixed video set aspect ratio (in some situations added black lines)

1.0.0

  • Initial Release