Divi’s Double Parallax: A Must-Have for Stunning Website Design!
Welcome to another Divi theme video! This is Jamie from System22 and Web Design Detectives. We’ve got an exciting tutorial for you today—a double parallax section! Parallax effects create a stunning 3D illusion by moving elements at different rates. In our example, the website will scroll down, the background will remain fixed, and a planet will move at a different rate, creating a captivating effect. Let’s dive in and show you how it’s done.
First, let’s see it in action. As we scroll down the site, you’ll notice a section with a starry background and a planet that moves at a different rate than the background. A call-to-action element fades in as the planet scrolls down, disappearing below the screen. This creates a visually striking 3D effect. Now, let’s start from scratch and create this effect step-by-step.
We’ll begin by enabling the visual builder and creating a new section. Click on the blue tab to add a regular section with a single column. Inside this column, add a call-to-action module. For now, leave it as it is. Next, add another row with a single column and place an image module inside it. Choose an image of a planet or any other graphic you like. To avoid displaying the image title on hover, go to the Advanced tab and remove the title text in the attributes section.
Now, we need to make this image full width. Save the changes, then go back to the row settings, and under the Design tab, adjust the sizing to 100% width. Copy this value to the max-width field as well. With the full-width section ready, it’s time to add our parallax background. Go back to the section settings, select the Background tab, and choose an image with a starry background.
To ensure the section’s height is appropriate, go to the Design tab, adjust the height to 100 VH (viewport height), and save the settings. This creates a full-screen section with a fixed starry background. Now, we need to make the background parallax. In the section settings, enable the parallax effect under the Background tab. Choose CSS parallax for a fixed background effect.
Next, we’ll make sure elements that spill outside the section are hidden. In the Advanced tab, go to the Visibility section and set the horizontal and vertical overflow to hidden. This ensures that our planet image remains within the section even if we make it larger.
To create the movement effect, we’ll use scroll effects. Save the section settings, then go to the row containing the planet image. In the Advanced tab, enable vertical motion under Scroll Effects. Adjust the settings to control the speed and direction of the motion. We want the planet to move differently than the background, creating a parallax effect.
Now, let’s style the call-to-action module. In the module settings, enter your desired title and button text. To make the button visible, add a link in the Link tab. Adjust the background color and opacity in the Design tab to ensure it stands out against the background. Save the changes.
Finally, add scroll effects to the call-to-action module. In the Advanced tab, enable the fade effect under Scroll Effects. Adjust the settings so the module fades in and out as you scroll. This adds an extra layer of visual interest.
Once everything is set, save your changes, exit the visual builder, and preview your page. You’ll see the starry background, the moving planet, and the fading call-to-action module working together to create a stunning double parallax effect.
This effect not only enhances your website’s visual appeal but also captures the attention of visitors, making it more engaging. If you enjoyed this tutorial, please give it a thumbs up, ring the bell for notifications, comment, share, and subscribe to our YouTube channel. We have plenty more tutorials coming up, and you won’t want to miss them. If you’re interested in more scroll effects, check out our scroll effects playlist for more great ideas. Once again, this has been Jamie from System22 and Web Design Detectives. Thanks for watching, and have a great day!
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Why Divi?
Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.
The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.
The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.
The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.
The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.
The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.
Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.
Divi Supreme: Revolutionizing Your Divi Experience
In the dynamic realm of web design, staying ahead of trends is paramount to crafting captivating websites. Enter Divi Supreme, the game-changing enhancement for the Divi theme by Elegant Themes. While Divi is renowned for its flexibility and user-friendly interface, Divi Supreme takes innovation to the next level with an extensive array of enhancements and features. This 1000-word exploration delves into why Divi Supreme is the ultimate companion for Divi users, unlocking a world of possibilities for creating stunning websites.
1. Extensive Module Library: Dive into Divi Supreme’s vast collection of modules that seamlessly integrate with Divi, offering new functionalities and design elements. Whether it’s advanced buttons, creative image effects, or interactive content, Divi Supreme provides the tools to create unique and dynamic layouts effortlessly.
2. Time and Effort Savings: With highly customizable modules that require minimal coding knowledge, Divi Supreme streamlines the web design workflow. Say goodbye to tedious custom CSS and third-party plugins, as Divi Supreme empowers users to achieve complex designs in a fraction of the time.
3. User-Friendly Interface: Seamlessly integrated into the Divi Builder, Divi Supreme ensures a minimal learning curve for users. Whether you’re a seasoned Divi pro or a novice, navigating the intuitive interface is a breeze.
4. Advanced Design Possibilities: Divi Supreme expands creative horizons with modules designed to align with modern web design trends. From shape dividers to gradient text and sticky elements, the plugin unlocks endless design possibilities, keeping you at the forefront of innovation.
5. Frequent Updates and Support: Committed to delivering an unparalleled user experience, the Divi Supreme team regularly updates the plugin based on user feedback. Combined with a vibrant community and excellent support, Divi Supreme ensures users stay ahead in the ever-evolving landscape of web design.
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Latest YouTube Videos
