Video background to website homepage using Elementor
Latest posts by StartupWebTraining (see all)
- Video background to website homepage using Elementor - October 25, 2019
- Vantage Theme with Site Origins Page Builder – An example Site with Instructions - April 2, 2019
- WordPress Block Editor - March 4, 2019
Lots of modern WordPress websites use a big banner image on the home page with a button to emphasise their Call to Action such as Book Now for an event. You also have the option of using a Slider with several buttons to separate calls to action. This blogpost with video-based instructions focuses on replacing the image with a background video such as a timelapse of flowers blooming.
Theme and Page Builder
I am using the Phlox Theme with the Elementor Page Builder but the instructions work with any theme.
Step by step
The steps outlined in the video are as follows:
- Open up the homepage and click to edit with Elementor
- Add a page template – i selected a Services page with 4 sections.
- I didn’t want all 4 sections so i deleted two of them by clicking the delete section icon.
- Clicking on the top section, the Tab that you need is STYLE and there you can replace the background image. Click on the icon for Video (beside image) and you can paste in a video link. We got one from YouTube of flowers blooming. You can set the start and finish time within Elementor.
- Update and preview. I then went back in to ensure that Stretch Section option was activated.
- To remove the White space between the first section and the menu navigation area, the ADVANCED settings TAB is clicked. I changed the Margin to minus 70 at the top.
- After the video I changed the Text in the heading and subheading. I also changed the colour and text of the button and added a link.
- I then selected the 2nd section and activated the stretch section there. I also modified the margin to remove the white. BTW, white is sometimes nice on a website so you don’t always have to get rid of such space.
- To remove the page title, this is a WordPress settings. Click on the button to EXIT to DASHBOARD. The settings are at the bottom of the screen. Click the drop down to show PAGE OPTIONS and select TITLE BAR SETTINGS and select No on the dropdown menu to turn off the display of the Title Bar section.
Hope you find this blogpost interesting and useful in outlining the steps followed.
Check out upcoming Training Dates delivered by Donncha Hughes for LEO Galway – SEO and Creating a Business Website using WordPress – book direct via LEO Galway.