Connect with us

Solution Review

Oxygen Builder Tips and Tricks for Beginners

Published

on

Oxygen Builder Tips and Tricks for Beginners

The process of modifying websites, which was formerly the exclusive purview of web programmers and other technically skilled persons, has been revolutionized with the introduction of software applications such as the Oxygen page builder. 

Without having to touch any code, Oxygen allows users to make changes to their whole website, including its intelligent features. Oxygen makes it possible for non-programmers to develop and create websites by eliminating the need for them to know HTML and CSS. 

Combining original and creative designs with easy instructions that even a beginner can understand and execute successfully. It is simple to comprehend the factors that have contributed to the meteoric rise in popularity of the Oxygen page builder among many webmasters.

The following are a few easy tips and tricks for beginners: 

How to just display a subset of thumbnails from the Oxygen Gallery?

You have been entrusted with the creation of a gallery that displays just three thumbnails but provides a lightbox where all ten pictures may be seen in their full quality.

You can get this effect for the Oxygen Gallery by using the following code in your CSS file:

.oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item {
display:none
}

In addition, the required number of thumbnails that should be shown maybe supplied in place of the following piece of code: nth-child (3).

In addition, if your website has many galleries, you may need to provide extra information in the selector (such as the gallery ID) to make a specific reference to the gallery you want to access.

#_gallery-4-426 .oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item {
display:none
}

When you use motion on scroll, elements in the Oxygen editor might vanish.

While defining animation effects in the Oxygen editor, you could run into a situation in which animated components become invisible to the user. Common ways to make the element visible again include refreshing the page or re-selecting the motion effect. 

Having to do this each and every time, especially if the page has several different moving pieces, may be a real pain. Simply adding the following CSS to your stylesheet will give you motion effects that are only visible on the front end and permanent visibility in the Oxygen editor.

#ct-builder [data-aos] {
    opacity: 1;
    transform: translate(0) scale(1);
}

Margin is required for the Section element in Oxygen; however, you cannot figure out how to add it.

By default, the margin customization options for Oxygen Section elements are not available for use. On the other hand, adding a margin is very simple to accomplish within the Section settings of the Advanced > Custom CSS menu.

If you need to add the same margins to several sections, you should create a class for the Section and then add a custom CSS for this class. Simply apply this style to any and all Sections that need margins that are the same throughout the document.

Oxygen’s mobile viewport has an option called Animate On Scroll.

When scrolling, some of the biggest Oxygen Builder Agency find it crucial to animate a component that is only available on desktops. There are two distinct ways to disable animation on scrolling in Oxygen: the first is for more significant breakpoints, while the second is for less significant ones.

A choice that may be made across the board is to pause the animation.

To turn off the animation that occurs as you scroll, go to Manage > Settings > Global Styles > Animate On Scroll and choose the “Disable On” option from the drop-down menu. This change will impact everything that you have in your animations.

Second, you could disable the animation for a specific component.

While you are in the edit mode for the element, go to the smaller breakpoint, and then copy and paste the following code into the Advanced > Custom CSS tab.

opacity: 1;
transform: translate(0) scale(1);

Conclusion

Oxygen builder is simple to understand, but like with any platform, there is a learning curve. These easy-to-understand tips should help you get ahead a bit quicker. Keep in mind that everything is always trial and error. Do not be afraid to experiment and try out new things. That’s the best way of learning.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published.