AWB let you to use parallax backgrounds with images, videos, youtube and vimeo. Gutenberg and WPBakery Page Builder support.
Features
- Background Types:
- Color
- Image
- Pattern images
- Local Hosted Video
- Youtube / Vimeo Video
- Parallax options powered by high performant 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
- WPBakery Page Builder supported (extended row options + separate shortcode)
- Custom CSS offsets (paddings + margins)
Screenshots
Hello, I have installed the plugin, but how do I use it so I can add parallaxed video backgrounds? There is no AWB or Advanced Wordpress Background widget to add to New Row for me... Please help!
Hi. You can add it using default WordPress editor: https://uploads.disquscdn.com/images/a53aab423d23bac22ad90ffd2f06fd53e7b88bf94d46f4a9d913d28be65081a5.png Or if you use Visual Composer, you can see that default Row settings extended with new tab: https://uploads.disquscdn.com/images/0bdc03da0e5b5942d2316123c94f6dd586458256e081f880bbf5a79770214e3b.png Best regards, nK.
Thank you for your reply nK! Please forgive me for not understaning this, I have just started using WP... How do I add it using default WordPress editor? What / where is the default WordPress editor? I don't have the AWB button as you are showing in the picture, please help a noob out!
Hi, I am trying to add an overlay color, but it is not working, and not appearing in the code either. Do you know why this could be? Thanks.
Ryan Clements, I had the same problem you did and found the work-arounds. Please see the posts by L. E. Powers and Dwayne Baptist (above) to address the problem until the bug is repaired. Cheers- -db
Hi, continuing Ryan's comment below (I accidentally created a new thread because I needed to sign-up for Disqus), I have also been having problems with creating color blocks and color overlays. I did some testing and documented my efforts, showing successful and failed attempts to create tags, here. The bottom line is that the dialog box fails to create the awb_color attribute if you input padding or margins in the Style tab, or if you choose a parallax strategy when also wanting a color overlay with an image. I imagine that this problem would also be true for videos, but I did not actually test for that. Once the dialog box errors, it will only work correctly after you reload the page (Update/save/leave&return/etc.) The good news is that the awb_color tag works, and you can manually add it to a more complex tag. I love this plugin. Good work nkdev! Please feel free to reach out to me if you have more questions. Respectfully, db
I have a further update. I discovered that if you choose the overlay color LAST in the process of building your shortcode, you do not get any sort of error, and the tool continues to work correctly. So, as a short-term work-around, until nkdev can fix the dialog box bug, do things in the following order: 1. Choose your background type 2. Choose your "Styles" options 3. Select your parallax (if applicable) 4. Choose your background/overlay color 5. Insert your shortcode
Hi. Wow, you put a lot of effort to make this guide... Since AWB fully support Gutenberg editor we will no longer develop shortcode dialog box and will not fix it. The new Gutenberg editor will be added in WordPress 5.0 core, for now it is available as a separate plugin (https://wordpress.org/plugins/gutenberg/). How it look: https://snap.nkdev.info/2018-07-19-1532001586.jpg Regards, nK.
For some reason when I add an image it comes out super thin, I've gone back over this a couple times and double checked with expamples and this keeps happening. Is there something I'm missing? https://uploads.disquscdn.com/images/18d667fdf82f63854d9afce224ed7143ab45416169ef0820516e751747f3c304.jpg
yeap me too, i try mouse parallax and my image came out like a line.haha
Hi. Please, add more content inside. Also, you can add extra paddings to the AWB block. If you use shortcode inserter, you can add it here: https://snap.nkdev.info/2018-08-01-1533130528.png Regards, nK.
This looks great but after I installed it and haven't been able to get it to work in Visual Composer (latest version). I added a row and then in the AWB interface I added a video and a poster image and also tried just an image and nothing showed when I published and inspecting the code there was nothing there either. Is it possible for a theme to prevent this from working? (sorry my comment before was because AWB does not show up in a Visual Composer "Section" but I found the tab in Visual Composer's "Row")
Love this plugin. I see a pause icon in the center of the background Vimeo video for about 2 seconds while the video loads... it then disappears and never displays again. (until I reload the page). Is there a way to mute this loading pause icon?
Hi. I think it is possible in the future updates, but it will work for only paid Vimeo plans. See `background` option description in Vimeo API https://github.com/vimeo/player.js/#embed-options Regards, nK.
I have created a post with a video as parallax background, and then i have added a multiple lines of text on the video background. The problem I'm facing now is that the text are actually out of the parallax container, how can I fix this? [nk_awb awb_type="yt_vm_video" awb_stretch="true" awb_video="" awb_video_start_time="0" awb_video_end_time="0" awb_video_always_play="true" awb_video_mobile="true" awb_parallax="scroll" awb_parallax_speed="0.5" awb_parallax_mobile="true" awb_mouse_parallax="true" awb_mouse_parallax_size="30" awb_mouse_parallax_speed="10000" awb_styles=" position:relative; height:1000px; padding-top: 100px; padding-bottom: 100px; padding-left: 0px; padding-right: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"] You're probably familiar with SK-II’s iconic Facial Treatment Essence. The award-winning formula is made with proprietary ingredient PITERA, a bio-ingredient that promises a suite of skincare benefits. The essence is fondly known as "miracle water" by fans, and celebrities are known to transfer it into spray bottles to bring along with them on set. This hack inspired the conception of the Mid-Day Miracle Essence, a lightweight essence formulated for on-the-go skincare. [/nk_awb]
No body???
This working fine for me. Maybe problem in your theme styles or in 3rd-party plugin. Try this shortcode in default WP theme. Online example will be perfect.
Hello. I am trying to get your plugin to work on mobile. It seems that if you add "playinline" it will work with IOS devices. That would be half the battle. If you could tell me where I would add that instruction to the shortcode and or if you have a complete solution for mobile background autoplay. I am hoping 2019 is the year it finally happens! Thank you.
Hi. YouTube and self-hosted videos work fine for me. Vimeo for some reason is not working, we have issue on GitHub related to this https://github.com/nk-o/jarallax/issues/123
How and where would I add playsinline to the code? I want to test that out. I have found a code with self hosting, but wouldn't that slow down the site? Especially with larger file sizes? This works with self hosted videos....
Is it possible to stop the loop? I want my video to be played once and than stop. I put the end time on 15 seconds (my video is 15 seconds) but this don't work.
Hi, Is it possible to adjust the "background-position" value of the video? I've tried implementing this with a video. The container is less high than the video, but it shows the vertical center part of the video. I would like to align the video background so it always shows the top portion of the video. Is that possible? Thanks!
Hi. Not possible without code customization. Parallax script - https://github.com/nk-o/jarallax
Sorry if this has been asked before but a search turns up nothing. All I want to know is if the images inserted with your plugin are supposed to be responsive? Because mine are not responsive although they display beautifully at large sizes on a desktop. Otherwise just a great little plugin!
Hi, I'm trying to achieve a parallax effect as it's on Snoop Dogg website (http://snoopdogg.com/). On the home page, it seems that there is a blue parallax overlay as you scroll, but actually these are two photos (one full color, one with blue overlay) in perfectly alligned parallax. I figured it's done with one parallax being pinned to the center bottom and the other one to the center top. I can't seem to find that option in your plugin appart of the % position, which i don't really understand. Do you think it would be possible to recreate using your plugin?
Hi. Everything you need is set parallax speed = 0. See a working example here https://wpbackgrounds.com/snoop-dogg/ Regards, nK.
Is it possible to keep the audio of a video background? I have a cool video with some cool audio and I wanted to have the audio be heard. Thanks!
Hi. No, it is not possible https://developers.google.com/web/updates/2017/09/autoplay-policy-changes Regards, nK.
I really love the idea of a parallaxing background image as the background of a Gutenberg block, however it seem that after I set up the first one on a page, I cant get any other ones after that to work properly. Can you only have 1 per page?