Elegant Themes Parallax

Parallax Elegant Themes

Divi makes Parallax really easy to use on any background image within a section, row, column or module. The only thing you need to do is to set the Parallax Effect option to "YES" and then select your Parallax method (CSS or True Parallax). Locate Divi Parallax layouts for the Divi Wordpress Theme by Elegant Themes in the Divi Layout Directory.

The ultimate guide to using parallax with Divi

Attempting to find the right parallax height can be a bit of a frustration. It may look like a normal wallpaper, but once you choose "Use parallax effect", the picture will inflate and nothing will look right. In order to prevent this deterioration in the near term, you need to know what parallax is and what happens to the picture when it is put into parallax state.

Today I will immerse myself deeply in the functionality of Parallax with Divi. I' ll be explaining exactly what happens when you use the two different parallax modes, what is the best picture fit, and I' ll even add some user-defined style sheet hooks to get your pictures exactly the way you want them to be. Parallax? What is parallax?

Parallax is a word used in web designing to describe an effect that enables the recognition of lifelike distances and movements through a kind of two-dimensional movement. In the foreground the elements were moving faster than the tree, mountain and cloud elements in the back. The effect is similar to the True Parallax effect in Divi.

Divi makes Parallax really simple to use on any wallpaper within a section, line, table columns or modules. The only thing you need to do is to check the Parallax effect box to "YES" and then check your Parallax method (CSS or True Parallax). One of two ways you can apply the parallax effect to your parallax is the method using which you can create them.

Probably you can tell what is going on by trying this on your website. It' called the CSS method because it only uses CSS to create the effect. It uses the CSS to fix the wallpaper in place while the other items on the page normally scrolls.

It gives the illusion that the contents are moved in front of the wallpaper. And the second way is named True Parallax. Probably named "True" because it illustrates the traditional concept of the parallax effect. Use CSS and JavaScript to generate a slightly slower scroll motion than the other items on the page.

It is a more lifelike depiction of motion due to the perceived range it generates between the slowly moved picture in the foreground and the more rapidly moved picture in the back. When parallax is active in Divi, what happens? It is therefore useful to know exactly what happens to the picture when parallax is on.

When I select the method using the CSS, what happens? Once Parallax is checked, the picture is wound into a new Div with an absolut location that extends over the entire width of the webpage. These are the classes and sections of codes that do this in Divi: Wallpaper repetition: no repetition; Wallposition: upper centre; Wallpaper size: covers; Wallpaper accessories: solid; Since the wallpaper width is 100% "cover", the picture will always "cover" every part of its canister.

If this is the case, the box is the web browsing area. That means that parts of the picture hide behind other areas of contents, because the wallpaper becomes bigger and smaller with the width of thewser. Just think, this is a normal wallpaper that is added to a headers modul at the top of a page.

Picture side ratios are accurate (1920×1080) and the picture cover sizes are good and fit well into the non-overlapping section when viewing it on a 1366×766 display area. At the bottom of the picture, the blank area is the remainder of the page. This happens when you choose the parallax for your picture.

You can see that the picture stretches both vertical (to the bottom of the screen ) and horizontal (to maintain the picture's proportion). I' ve made the area for the blank contents at the bottom semi-transparent, so that you can see where the wallpaper is hiding behind it.

There, the picture remains stuck while being scrolled and other items move up and down in front of the picture. If the real parallax method is chosen, what happens? When you have enabled true parallax, the picture will be packed into a new div with the same CSS class: Wallpaper repeat: no repetition; Wallpaper position: top middle; Wallpaper size: artwork box; However, by using some JavaScript, the picture's elevation and location will be determined dynamic according to the width of the web page frame and as it scrolls down the page.

Both of the dynamic added value to the wallpaper are the px value for the elevation attribute and the translation value for the transformation attribute. While the value of the elevation characteristic defines the elevation of the picture, the value of the transformation characteristic translates the precise position of the picture on the page along the axes y and y. The value of the transformation characteristic translates the position of the picture on the page along the axes y and y.

This is the source that will be pasted into the picture tags of my parallax wallpaper, where my web interface is 1366×766: transform: translate(0px, 220. 5px ); note the two numbers in the transformation attribute. Both these numbers determine the position of the wallpaper. First number (ppx0 ) places the picture along the x-axis (horizontal).

Because it is seeded 00px, the picture is not shifted. A second number will position the picture along the y-axis (vertically). 3px, i.e. the picture is shifted down on page 220.5px. Please also note that the altitude value (960. 8px) is about 1200px higher than the altitude of my web page (766px).

That is for taking the picture to be slid 220. Five px behind the bottom edge of the webpage. If you have chosen the True Parallax method, you may have realized that your picture will be even more inflated than the CSS method. The reason for this is that the picture location is extended by another 30% of the web page width.

Recall our periodic wallpaper? This is what happens to the picture after True Parallax is chosen (before you of course begin scrolling): You can see that the picture is dragged a little further over the lower edge of the webpage. It' s about 1080×700, so it's pretty small, but I wanted to show you what happens on a smaller desktopscreen.

What's real parallax doing stretching the picture so far? As soon as the web browsing pane has reached a 1920×1080 display area, the wallpaper no longer stretches beyond the bottom of the pane and will fit well. But why does True Parallax use JavaScript? True Parallax's JavaScript needs to move at a different rate than the other items when it scrolls, which is the primary cause.

When I resize my web browsers with True Parallax, the altitude value also rises through JavaScript, so my picture is always big enough for the web browsers. Scrolling the page down causes the value for the translation location (in the above example 220. 5px) to rise and moves the picture's horizontal (y-axis) location down on the page.

Rolling up reduces the value of the translated location and pulls the picture back up. However, since the picture is scrolled down and up at a different rate than the other items, you get the Parallax effect. Which kind of picture should I use?

When you want to use the parallax effect on your website, the choice of the right wallpaper is critical. Do not want the backdrop to be too confusing or annoying. Pictures with too much going on cause bewilderment and divert attention from the contents. Ensure that your picture corresponds to the topic of your website.

The parallax picture (like the remainder of your pictures) should match the topic. Keep in mind that your parallax picture is also displayed on smaller screens. How large should the parallax background be? There'?s no single uniform dimension for all parallax pictures. Actually, there is no single dimension suitable for everything in web designing, at least not since there is an appealing one.

But even though I may not be able to give you a fixed set of rules, I can provide you with some general guidance for choosing the right parallax wallpaper with Divi for your parallax sizes. As the most common display format is about 1366×766, I would definitely make sure that all parallax backgrounds are at least thissized.

However, because of the widespread appeal of large screens, I would prefer a much smaller screen such as 1920×1080. In this way, it ensures that the user sees a high resolution picture on large workstations. With a 1920×1080 picture, the trouble is that you will seldom have a 1080px high section that can be seen.

In this way, you can rely on the underside of these pictures, which remain concealed. To make sure your picture is fully viewable and looks good, the simplest way is to use the Fullwidth Header modul. This way, your wallpaper will always look good, regardless of your monitor area. However, if you are using a parallax wallpaper with the Fullwidth Header Modules, you may need to apply cushioning to the top and bottom of the modules to display more of the wallpaper.

I would suggest that if you still don't have enough of the displayed picture, you crop the upper part of your picture and then load it up again. Try also to choose photographs that have unimportant contents at the bottom of the picture and more important contents at the top. You should only use the upper part of the parallax picture (700px) for header images.

Be sure to allow enough room around your contents to reveal the backdrop so that you get a complete view when the section approaches the user's middle viewing angle. To use Parallax, don't let your people get baffled and need to scrolling up and down just to see what the thumbnail is.

When you use the method using the CSS, you can anticipate seeing more of the bottom of your wallpaper (depending on how much room you have). When you use the True Parallax technique, you will mainly see the top of your pictures, so I would handle them like your headlines.

This is an example of real parallax backgrounds at the top, center and bottom of the page. That kind of picture of a jumper works well because it has a beautiful focus point to the side and the bottom of the picture is not as significant as the top, so the messages are never missed for the users.

This is the same page with the method using css. As you can really see, the wallpaper is solid and extends to the top of the screen. In fact, it looks like it's the same picture that's locked in the back all the while. And if you're still not happy after searching for the right picture, adding the necessary cushioning and cropping, you can always go for some kind of chopping.

You can use the CS CSfs elector ".et_parallax_bg" if you want to modify the parallax wallpaper location. This is the standard CSS for positioning the parallax effect picture. Parallax effect Parallax effect Parallax effect Background repetition: no repetition; Parallax position: upper centre; Parallax size: coverage Parallax effect Parallax effect Parallax effect Background repetition: no repetition; Parallax position: upper centre; Parallax size: coverage Parallax effect Parallax effect If you see the parallax effect Parallax effect Parallax effect Parallax effect Parallax effect Parallax effect Parallax effect Parallax effect

However, if I wanted to modify the initial location of the wallpaper, you can modify the value of the properties wallpaperlocation. When you want to keep your custom style sheet compressed to a specific picture and don't want it to affect your entire parallax wallpaper, you need to include a category in your section so that we can see in the style sheet which wallpaper we need to adapt.

When you use the CSS technique, you can create the wallpaper with a vertical centre by including the following customized CSS: To make the wallpaper look down, insert the following customized CSS: wallpaper position: bottom middle! important; To move the wallpaper up a certain number of pixel, insert the following customized CSS: wallpaper position: middle -150px ! important; If you use the True Parallax mode, you have to take into consideration the additional 200px (more or less dependent on your web browsing height) of the wallpaper hiding at the bottom.

In order to centre the wallpaper vertical, you need to change the background-position attribute with a minus value as follows: background-position: centre -100px ! important; To align the wallpaper down, you need to include the following user-defined css: background-position: centre -220px ! important; I truly trust that this manual was useful in getting a thorough grasp of how parallax works with Divi.

Fortunately, Divi takes over most of the weight by supplying us with parallax function. Using the CSS and True Parallax methods both produce great lifelike results. It is up to us, however, to find the right pictures and to optimize them just right so that they work for our website.

Mehr zum Thema