The biggest complaint I've heard about WordPress is that it's too limiting. That may have been the case 15 years ago, when WordPress was primarily a blogging platform, or when it was stuck with specific themes that could only be modified through code. But the truth is, WordPress now offers complete freedom over the look, feel, and features of your site. In fact, it's maybe a little too much freedom at times.
For many businesses, the question is, "Which theme should I choose?" Out of tens (possibly hundreds) of thousands themes and templates, how do you know if you chose the right one? How do you decide if it's well-made and won't look cheesy in three years. The truth is, with trends and technology constantly changing, there's no good way to tell!
Our solution? Go with a builder that lets you skip the "theme" and just use solid web design principles, accessibility standards, and good copywriting to design an effective site. That's the route we took, and never looked back.
So now... how do you choose a builder?! There are dozens of them available, but really only a few standout options: Elementor, Beaver Builder, Divi, and Oxygen Builder.
There are pros and cons to every builder, but instead of spelling those all out here (that's what Google's for), we'll just straight to the chase: We use Oxygen Builder.
The short answer is that Oxygen Builder is not a single theme or a template. Instead, it's a complete WordPress builder that offers complete control of your website. Not only does it give you full control, but it manages to do so without sacrificing either speed or clean code. If you're new to web stuff, these are two factors that can noticeably affect your search ranking on Google and overall user experience.
More than that, Oxygen Builder gives developers powerful tools to pull your website's data straight into the design. Maybe you're a car dealership, and you want a custom-designed listing for all your inventory. Oxygen can do that. Or maybe you own a restaurant, and you want a beautiful, dynamic online menu that can be easily updated with the "special of the week." Oxygen can do that. It's really limitless in terms of how you design your site.
With Oxygen Builder, all the posts and pages are built with a separate editing interface. The elements you add to the site get stored as shortcodes. Shortcodes are WordPress' special code system for showing different types of data. WordPress understand and translates shortcodes into elements that show on the frontend (or public view) of your website pages or posts.
Whether you're logged in and viewing a page from the frontend of your website, or looking at the backend (editing screen) of a page or post, you can bring up the page editor. If you're logged in from the frontend, hover over "Oxygen" in the top bar menu, and click "Edit in Oxygen Builder." Or, from the backend, click edit on any page, post, or custom post, and click "Edit in Oxygen Builder."
The Oxygen editor screen will look similar to what you'd normally see on your site—just a little more zoomed out and with the addition of some tools and panels to help make edits to your site.
In the top left, there's a bright, blue "Add" button which allows you to add more elements to the page. Once you click the Add button, you can search for elements by name or scroll down the list to see what's available.
On the left side of the editor is the Options panel. This gives you the specific details and options for the element you have selected. Use these options to change the look/color/size/spacing of whatever element you have selected. The Options panel has tabs for Primary settings, which are the main options you might use, and for Advanced settings, which give you more fine-tuned control.
On the right side of the editor screen, is a Structure panel. The Structure panel gives you a view of your page as if it was made of building blocks. It shows you the "bones" of each page. It's also useful to help drag and drop elements more smoothly than simply dragging them around the page. Use any element's "handles" (the dots on the left of an element) to drag, drop, and move elements to different places in the page's structure.
Two important building blocks you have to work with in Oxygen Builder are sections and divs. Think of sections as your main content areas (for example, "pricing," or "testimonials"). And divs are simply a web-developer's way of saying "container." Divs are useful for arranging your page into columns, rows, and layouts. They're great for grouping related elements together. Your page elements can be moved inside of sections or divs to help organize them and arrange your page in the way you want.
You have lots of options for which elements you add to a page into those sections and divs. In fact, there are so many that can take a little while to understand what each one does and how it works. For example, heading, text, and rich text all add different types of text to the page, but each one serves a different purpose.
You also have other elements made for specific, more-obvious purposes: Buttons, Pricing Tables, and Video Embeds. If you're just learning Oxygen for the first time, it's worth a look through the list of elements to see what tools are available to you.
Here are some that I tend to use a lot for Outstand Brand projects:
One really powerful feature that many different types of elements have in common is the ability to use dynamic data. Dynamic data is any kind of information that lives in one place on your website but can be shown in many places at once.
Here's an example of using dynamic data: Imagine you have some contact info, office hours, or an author bio you want to include on your site (in other words, something you know you want to use in more than one place). Easy! Just add it to the pages you want. But... what if you later want you go back and change or even just "tweak" a little bit? You're going to have a headache trying to remember and find all the places that info now exists. It's a recipe for errors and inconsistencies.
Now, imagine if you could put that bit of info in just one location at a time. And if it could be changed instantly everywhere just by changing it in that one location. (Sign me up!)
Dynamic data is so useful, because it allows you to quickly pull in details like a page title, featured image, author info into nearly any element, and use it in really cool, customizable ways. And you don't have to remember which pages it lives in.
You can add dynamic data to an element clicking the data button on the righthand side of a text box, link field, image field, and some other fields. Then, you'll get a popup of different sources and types of data you can pull into it.
The sky's the limit here. You can pull in something simple like a page title, or add your own crazy code concoctions if you're into that kind of thing. You don't need to know code, but this can be a little much for anyone new to WordPress or Oxygen. (I remember saying "Whoa!" out loud when I saw all the options.) However, just knowing that dynamic data exists and that it can be used to make your site more connected, editable, and powerful is a big part of the battle.
The beauty of Oxygen Builder is that it doesn't "dumb-down" the process of building a real website. It uses real terms for things used in web design, so that you don't walk around making a fool yourself in front of your web developer friends. (Oh, wait, that's just me?)
That also means Oxygen Builder comes with a learning curve. A couple of the terms you'll want to learn about right off the bat are ID and class. These are two different properties of each element that make a big difference when setting up your elements' styles and options.
Each element only has one ID and only one element with that ID can exist—so, kind of like a driver's license or social security number for your page elements. In the website's HTML code, a "#" denotes an element's ID (usually like #homepage-gallery or vague like #_div_block_567). When you make changes or style that element's ID, those changes apply only to that element. Oxygen automatically assigns each new element a random ID (which you can change later), and so there's no need to keep track.
Each element can also have multiple classes. Classes are kind of like the "tags" used to apply styles. Classes are designated with a "." (so, you'll see things like .h4, .text-sm, .background-dark for classes). Any changes you apply to a class will apply to all the elements assigned that same class.
So, for example, I could give every level 2 heading a class of .h2. Then, if I ever wanted to come back and edit the size of, I could just change the styling for .h2 and every element would change along with it. Whoa!
It's a powerful way to more quickly build and style a site, but in the words of Spider-Man... with great power comes great responsibility!
As you can imagine, making sweeping site-wide changes can get a little touchy. It really helps to get as descriptive as-possible with your classes. For example, using .button-dark-medium is way better than .homepage-button. Because no one knows what a .homepage-button looks like, but you can actually picture a .button-dark-medium. (To start, I like naming things first by what it is, then what color it is, then what size it is if-applicable.)
There are entire frameworks and theories dedicated to naming web classes, because (as this rambling guide has proven) all of this stuff can quickly get messy and complicated. However, just knowing the simple difference can make a BIG difference. An ID is for changing/targeting one thing; a class is for changing/targeting many things.
OK, OK. So practically speaking, let's imagine this with our main page titles that show up across the top of every page...
Titles are generally something that makes sense to have consistent across our site. So, in order to make it easy, we're going to give every page title a class of .h1. We style our .h1 with whatever font size, color, and font weight we want. BUT THEN... * dun dun DUN * what if we want the homepage .h1 to be a just liiiiiiittle bigger?
All we have to do is... * drumroll * change the size for #homepage-title (or whatever ID the element it's assigned), and it will override the settings for just that element. Perfecto! This way, any colors, font weights, etc. we've specified for .h1 stuff will still carry over, and only the size of #homepage-title will be bigger. So when your boss tells you to, "Make it pop!" you don't have to make everything pop—just the title on the homepage.
Remember, ID styles > Class styles. So whatever style you give an ID is going to override the class styles. Just remember, the changes you make on the ID only affect that specific element.
Whew... maybe we are back in school!