~ On the blog ~
In today's blog post, we look at Oxygen WordPress Page Builder. Crafted by Soflyy, this powerful tool will help you amplify your website design and development.
Title: Level Up Your Site: Explore the Classic Oxygen Builder for WordPress
Disclaimer: This article centers on the Classic Oxygen Builder, outlining its functionality and strengths. It does not cover Oxygen 6, which remains in beta as its framework evolves. A forthcoming article will provide insights into Oxygen 6 once finalized—when available, we'll include a link here for reference.
Welcome back, esteemed readers, to another enlightening installment of our Page Builders & Themes blog series. We sincerely appreciate your continued engagement as we explore the fascinating horizons of website design and development. Today, we'll focus on the creative (Classic) Oxygen WordPress Page Builder. This powerful tool was engineered with developers and clients in mind with a promise to revolutionize how users create and manage websites.
Crafted by the innovative team at Soflyy, Oxygen Page Builder is arguably one of the foremost developer-centric WordPress website design utilities on the market. As a class-based, fundamentals-first builder for the WordPress CMS, Oxygen is known for its intuitive interface and robust feature set, empowering its users to unleash their creativity and build stunning websites.
In this concise post, we will examine the core features of the Classic Oxygen Page Builder, highlighting its versatility and efficiency. From Oxygen's dynamic data controls to seamless integrations with Gutenberg blocks, the page builder offers plenty of tools to streamline your website creation process.
Join us as we dig into the intricacies of the Oxygen Page Builder and showcase some of its potential for web designers and developers.
Note: While accessible to less experienced users, Oxygen truly shines in the hands of those proficient in HTML, CSS, and JavaScript. If that level of technical depth isn't quite your fit, you may prefer to learn about the user-friendly Divi Builder for WordPress, designed to assist beginners.
Modular Design with Total Control
At the heart of Oxygen lies its modular design philosophy, empowering users to construct custom layouts with precision and ease. With a vast array of building blocks at your disposal, designing your dream website has never been more intuitive. Let's explore this feature in action:
Drag-and-Drop Interface:
- With Oxygen Builder's user-friendly drag-and-drop interface, you can effortlessly arrange and customize elements to create visually stunning layouts tailored to your project specifications.
Some of the included elements are:
- Code Blocks: Developers deploy these to insert custom code such as JavaScript and PHP.
- Testimonials: This displays an image either horizontally or vertically with adjoining text.
- Sliders: Showcase your content within a standard carousel-type arrangement.
- Breadcrumbs: Adding this element will simplify navigation for your visitors.
- Pricing Boxes: A simple pre-styled, vertically stacked price box.
Responsive Design:
- Oxygen's customizable responsive breakpoints and extensive controls ensure your website looks impeccable on every device. Whether vertically stacking rows or hiding elements on specific devices, achieving complete responsiveness is effortless.
Sticky Headers for Enhanced Engagement:
- Increase user engagement and conversions with Oxygen's sticky header feature. Keep your website header visible at all times as visitors scroll up and down the page. Customize your sticky header design to encourage desired user interactions like product purchases or service sign-ups.
Dynamic Data Control for Personalized Experiences
Oxygen's dynamic data control capabilities take website personalization to the next level. This feature allows users to link design elements to their WordPress database. That means you can easily create dynamic and interactive experiences for your website visitors. Here's how it works:
Database Integration:
- Seamlessly integrate data from your WordPress database into your designs, including post data, user data, custom fields, and more.
Looping and Conditional Logic:
- Utilize Oxygen's visual development tools to iterate through posts or custom queries. You can also implement conditional logic to show or hide elements based on dynamic data values.
Membership Website Support:
- Leverage Oxygen's dynamic data controls to customize membership websites, restrict content access, and personalize user experiences based on membership levels or individual roles.
Copying Elements in Oxygen Page Builder: An Efficient Workflow
Did you know? Oxygen Page Builder allows you to easily copy elements within the same site or even between different sites. You can duplicate elements with their styles and classes using the keyboard shortcuts CMD/CTRL+c and CMD/CTRL+v. Moreover, if you need to transfer elements between different sites, Oxygen provides a convenient export and import feature. Just export the desired element from the source site and import it into the destination site using the built-in tools. Doing so ensures that the styles and classes of parent and child elements get accurately copied. Be sure to check out the Oxygen Builder documentation for more information.
If Oxygen seems a little overwhelming and you prefer a theme-driven start with a more traditional setup, check out our overview of ThemeTrust's Trade theme for WordPress and get a jump-start on your next project.
Native Gutenberg Blocks Integration for Seamless Workflow
With Oxygen's native Gutenberg blocks integration, harnessing the power of the native WordPress editor has never been simpler. Design your blocks in Oxygen, use them in Gutenberg, and watch your creativity come to life. Here's how it works:
Gutenberg Block Creation:
- Design custom blocks in Oxygen using its reflexive interface and seamlessly integrate them into the Gutenberg editor.
Centralized Block Management:
- Effortlessly edit your blocks in Oxygen and see those changes automatically reflected in all block instances, ensuring design consistency and time efficiency.
Global Color Styling for Unity Across Your Website
Uniformity is one of the keys to effective web design. Oxygen's global color styling feature ensures websites maintain a cohesive look and feel. Here's how it works:
Centralized Color Palette:
- Edit your project's color palette from one central location, ensuring consistency across your website.
Global Color Usage:
- Easily designate any color as global, allowing you to use it across your website with the click of a button.
The Oxygen Design Library: Your Gateway to Stunning Designs
With plenty of pre-made blocks and design sets, the Oxygen Design Library provides boundless possibilities for creating visually captivating websites. Here's what it offers:
Pre-Built Layouts:
- Choose from a slew of pre-made blocks and design sets, all meticulously crafted to look great on every screen size. These sets are essentially the blocks and patterns composed or deconstructed (depending on how you view them) of the starter design sets. Once you find a good fit, easily import and customize component templates to align with your brand identity, swapping in your text, images, and styles as needed.
Of the 15+ sets, some options include:
- Atomic: A classy, everyman design, this is the theme applied when selecting the default installation during setup.
- Freelance: Again, a clean, minimalist look and feel, perfect for independent developers.
- Hosting: A multipage offering, this more traditional site is an ideal launchpad for digital enterprises.
- One Page: Snappy and visually appealing, this single scroll is excellent for landing pages.
Composite Elements Library: Elevate Your Design Game
Oxygen's Composite Elements Library offers a trove of pre-built elements to enhance your website's functionality and aesthetics. While not an exhaustive list, here's an idea of what you can expect:
Oxygen's Composite Elements:
- Dynamic Slider: Present dynamic content like posts through the user of repeaters.
- Horizontal Divider: Simple but effective, these visual breakers help signal content segments.
- Back To Top: These buttons help visitors scroll back up after scrolling vertically.
- Icon List: Quickly create icons with formatted text to highlight points of interest.
- Accordion: Ever popular, these excellent space savers are a design must.
- Mega Menu: Present dynamic content like posts through the user of repeaters.
Composites are engineered with Oxygen's base elements and code blocks, allowing users seamless customization to suit their specific requirements.
Creating Wedding Memories and Growing Families: A Real-World Oxygen Builder Example
To illustrate the practical versatility of Classic Oxygen Builder, let's consider a real-world project: a wedding-themed micro-site for a client balancing major life milestones.
The project involved an old acquaintance working with a limited budget. The website was meant to be centered on their wedding but soon expanded to include a secondary purpose when the couple announced they were expecting another child. Oxygen's flexibility made these adjustments quick and seamless.
Custom Menu and Navigation Changes
The Wedding Oxygen design set was adapted to fit the couple's needs:
- 'Our Wedding' and Wishlist remained as original sections.
- 'Guest List' was changed to Our Family, focusing only on immediate family to simplify the project.
- 'Photos' became Media, allowing the image gallery and video playlists to coexist smoothly.
Page and Content Adjustments
- Our Wedding Page: Customized the event timeline and embedded a Google Maps element for the venue.
- Our Family Page: Introduced a small family tree featuring parents, siblings, and children.
- Media Page: Used the existing grid layout to showcase photos, then updated it post-wedding with ceremony images and videos.
- Wishlist Page: Displayed products with links to Amazon and Babies 'R' Us registries, grouping them under clear headings with linked images.
The project took about a week, with the most substantial delay waiting for extended family images and post-video edits. Thanks to the clients' preparedness, the text content and most images were ready quickly—the build moved along fluidly. Minor enhancements, like additional headers and subtle visual dividers on the Wishlist page, were handled efficiently using Oxygen's copy-and-paste features.
This use case highlights how Classic Oxygen Builder enables even modest projects to deliver a polished, personal user experience with minimal fuss.
The Oxygen Page Builder for WordPress empowers developers with its potent features and seamless integration with Gutenberg. Learning to use this tool can accelerate your website design and development.
Common Challenges to Keep in Mind
While Classic Oxygen Builder remains a reliable tool for many web professionals, a few known issues are worth noting. Awareness of these challenges early on can help streamline project timelines and avoid unnecessary troubleshooting.
Notable Issues Encountered
- Blank Template Display: Sometimes caused by cached CSS interfering with URL-based images.
- cURL Error on Site Load: Related to incorrectly defined WP_HOME or WP_SITEURL values during a manual configuration file upload.
- Google Maps Breakage: Triggered by missing or incorrect API credentials. Resolved by using an iframe embed rather than a dedicated plugin.
Compatibility Considerations
- Oxygen Builder sometimes conflicts with firewall-oriented plugins (e.g., Sucuri) around blocked API paths.
- Hosting conflicts can happen. Users on providers like Bluehost or Hostinger should be aware that IP or other 'whitelisting' procedures may be necessary.
While not a compatibility issue, I found it frustrating navigating back to the WordPress dashboard from the Oxygen editor. The editor redirects users to the Gutenberg editor view, requiring an extra click to access the main dashboard.
These challenges are manageable but require proactive attention to minimize disruption during a build. With that in mind, we recommend you visit the builder's site for a more comprehensive listing of known problems.
STAY IN TUNE WITH OUR LATEST POSTS
Enjoy The Read? Subscribe & Get Notified When Posts Come Out
Thanks for taking the extra time to read this far. If you've enjoyed our shenanigans thusly, why not subscribe to get notified when our next post is published?
Attention! By subscribing you agree to be notified via email when a new blog post is published. As a course of business, our mailers may include 3rd parties offers. For further details, please feel free to consult our Privacy Policy.
~ More On the blog ~
Schema markup helps search engines interpret your content, enhancing visibility with rich snippets and driving engagement for better user interaction.
Discover how MailPoet helps WordPress users manage email marketing with automation, drag-and-drop design, and subscriber management.
From eCommerce to portfolios, Trade delivers a modern WordPress theme packed with features—drag-and-drop editing, custom layouts, and more.
Schema markup helps search engines interpret your content, enhancing visibility with rich snippets and driving engagement for better user interaction.
Discover how MailPoet helps WordPress users manage email marketing with automation, drag-and-drop design, and subscriber management.
Disclaimer:
The content on this website is for informational purposes only and reflects personal opinions based on experience. It does not constitute professional advice, and we do not guarantee specific outcomes from using the tools or strategies discussed. While we strive for accuracy in our writings, readers should understand that these articles represent a snapshot in time—plugins update, tools evolve, and features may change. We encourage readers to independently verify information before implementation.
Please note:
Our policy is to avoid displaying affiliate advertisement creatives on the public-facing front end of this website. However, affiliate advertisement creatives and special offers from our partners may be available on dedicated pages within the customer portal. While some of the site links may generate commissions, this does not influence our content or recommendations. Ultimately, our goal is to share WordPress knowledge gained through years of experience without external affiliations dictating our guidance.
If you notice content that requires updating, please let us know, and we will address the issue promptly. For more details, please refer to our terms of service.
SOFTWORKS INTERACTIVE
ALL RIGHTS RESERVED