Tutorials, tips and tricks for Oxygen Builder

Our catalog of articles and premade design elements will help you master the skills of working with Oxygen — a great WordPress plugin that provides endless possibilities for the visual creation of responsive websites.

Article categories:

Polylang condition in Oxygen: how to use one template for different languages

Polylang condition in Oxygen: how to use one template for different languages

When creating a multilingual website in Oxygen, the question of choosing the optimal plugin for content...
Read more
Eva Icons SVG icon set for Oxygen

Eva Icons — 480 beautifully crafted free icons set for Oxygen

Continuing the conversation about SVG icons, today I would like to present you with an excellent set of icons that...
Read more
Loading Lazy attribute in HTML

Enable for native Lazy Loading Images for the Image element in Oxygen

The loading="lazy" attribute allows the browser to delay loading the content of <img> elements that are...
Read more
Add margin for Section in Oxygen

How to add margin to the Section element in Oxygen?

The Oxygen Section element by default does not have options for setting margins. But you can easily add margin in...
Read more
Suppose you have a task to create a gallery that displays only three thumbnails, and when you open full-size images in a lightbox, you should be able to view the entire gallery of 10 images. To do this for the Oxygen Gallery, add the following code to your stylesheet: .oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item { display:none } Moreover, instead of a piece of code :nth-child(3), you can specify the required number of displayed thumbnails. Also, if you use multiple galleries on the site, then you may need to specify the selector more specifically to refer to a specific gallery (by specifying the gallery ID): #_gallery-4-426 .oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item { display:none } How to show the first few thumbnails and hide the rest in the Oxygen Gallery? Important! I do not recommend using this method for creating large galleries, because hiding the thumbnails this way will still be in the source code and using too many can negatively affect page load speed. Use this to create galleries with no more than 10-15 images in total. For example, this gallery has 6 images, but only three thumbnails are shown

How to show the first few thumbnails and hide the rest in the Oxygen Gallery?

Suppose you have a task to create a gallery that displays only three thumbnails, and when you open full-size...
Read more
How to call Modal when clicking on one of the images of the Gallery in Oxygen?

How to call Modal when clicking on one of the images of the Gallery in Oxygen?

In the French Oxygen Facebook group, I saw a question how to make it so that when you click on one specific image...
Read more
Sign All Shortcodes Oxygen

6 Steps to Successful Oxygen Site Migration

In this article, I want to share my personal experience on the successful migration of Oxygen sites. Also, these...
Read more
How to disable Animate On Scroll for a mobile viewport in Oxygen

How to disable Animate On Scroll for a mobile viewport in Oxygen

Sometimes it is necessary to animate an element while scrolling only on the desktop. There are two ways to disable...
Read more
The color of the icon in the Toggle element does not work on the frontend

The color of the icon in the Toggle element does not work on the frontend

Fixed in version Oxygen 3.8! Long known bug (since Oxygen 2.1.2) with setting the icon color in the Toggle...
Read more
Oxygen bug fix: Images in content are not responsive

Oxygen bug fix: Images in content are not responsive

In the official Oxygen group, you can often see a similar question: "Why are images posted in content not...
Read more
Oxygen bug: Sticky Header overlaps Modal and Gallery lightbox

Oxygen bug fix: Sticky Header overlaps Modal and Gallery lightbox

I'm sure many of you have come across a situation where the Oxygen Header element, with the "Enable Sticky Header"...
Read more
Splitting content into another column when using Masonry Grid Preset in Easy Posts

Splitting content into another column when using Masonry Preset in Easy Posts

When using the Easy Post element in Oxygen and selecting the Masonry Preset, you may encounter strange layout...
Read more
Elements are not visible in the Oxygen editor when using animate on scroll

Elements are not visible in the Oxygen editor when using animate on scroll

When setting up animation effects, sometimes you may come across a situation that animated elements are not...
Read more
Phosphor svg icon set for Oxygen

Phosphor — free Icons Set for Oxygen

I accidentally found another set of interesting icons on the net called Phosphor, which includes about 600 icons...
Read more
Converts email addresses characters to HTML entities to block spam bots in Oxygen

How to hide email address from spam bots in Oxygen?

WordPress has an excellent native anti-spam function that converts email addresses characters to HTML entities to...
Read more
Toggle in Oxygen: how to initially close all toggles on smaller screen sizes

Toggle in Oxygen: how to initially close all toggles on smaller screen sizes

Sometimes a situation may arise when you need one Toggle element on the desktop to be initially open, while on...
Read more
Bootstrap Icons Set for Oxygen free download

Free Bootstrap Icons Set for Oxygen

I recently discovered a great new set of free icons from Bootstrap. There are more than 500 icons in the set (MIT...
Read more
How to temporarily hide any element inside the Oxygen editor?

How to temporarily hide any element inside the Oxygen editor?

There are situations when you need to temporarily hide a certain element (or several elements) only inside the...
Read more
Баг в Oxygen: эффект яйца в селекторе выбора цвета

How to fix the shape of the egg in the color picker in the Oxygen UI?

Fixed in version Oxygen 3.2! After the release of WordPress 5.3 in the Oxygen interface for any elements, the...
Read more

How to pause Slides autoplay when you hover over?

The basic Slider element in Oxygen has no option to stop the automatic playback of slides when you hover over the...
Read more
Easy Posts: how to dynamically add special css classes for posts?

Easy Posts: how to dynamically add special css classes for posts?

On one of the projects, I needed to separately stylize the display of a specific post in Easy Posts. I began to...
Read more

Disabling page scrolling when opening the Modal in Oxygen

At the moment, the basic Modal element in Oxygen does not have an option to disable page scrolling when a pop-up...
Read more

How to change or delete the title of SVG icons in Oxygen?

The built-in sets of SVG icons in Oxygen have such a feature — when you hover the cursor on an icon, a tooltip...
Read more
set cookie conditions in Oxygen

Conditions in Oxygen: how show/hide content based on UTM tags?

Starting from version 2.4, Oxygen has a powerful and useful "Conditions" functionality. More details can be found...
Read more
Бесплатный набор SVG иконок для Oxygen

Free SVG icon set from Unicons for Oxygen

Oxygen initially includes 500 SVG icons FontAwesome and Linearicons, and also provides us with a great opportunity...
Read more
How do I prevent certain javascript from running inside the Oxygen editor?

How do I prevent certain javascript from running inside the Oxygen editor?

Sometimes there is a situation when a certain script that you have inserted through Code Block causes problems in...
Read more

Toggle in Oxygen: how to close the rest when opening one tab?

In this article I want to tell how to make the automatic closing of the open tab of the Toggle element, at the...
Read more
How to make a smooth opening of Toggle in Oxygen?

How to make a smooth opening of Toggle in Oxygen?

The standard component "Toggle" in Oxygen does not have the ability to adjust the smooth disclosure of hidden...
Read more
arrow-up