~ Sur le blog ~
Améliorez votre site : découvrez le constructeur Oxygen classique pour WordPress
Dans l'article de blog d'aujourd'hui, nous examinons Oxygen WordPress Page Builder. Conçu par Soflyy, cet outil puissant vous aidera à amplifier la conception et le développement de votre site Web.
Titre: Améliorez votre site : découvrez le constructeur Oxygen classique pour WordPress
Clause de non-responsabilité: 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 Créateurs de pages et thèmes 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.
Remarque: 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 Trade Theme for WordPress, designed with the beginner-friendly SiteOrigin Page Builder.
Keeping it Fresh:
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
Saviez-vous? 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 et 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.
Une parenthèse: All this talk of builders, wondering if there's a straightforward way to integrate essential commerce tools into your WordPress site? Discover how the Studiocart plugin provides service-based businesses with a streamlined solution for managing online sales.
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.
- Méga 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' et Wishlist remained as original sections.
- 'Guest List' was changed to Our Family, focusing only on immediate family to simplify the project.
- 'Photos' became Médias, 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.
RESTEZ À L'ÉCOUTE DE NOS DERNIÈRES PUBLICATIONS
Vous avez aimé la lecture ? Abonnez-vous et recevez une notification dès la parution des articles
Merci d'avoir pris le temps de lire jusqu'ici. Si vous avez apprécié nos manigances jusqu'ici, pourquoi ne pas vous abonner pour être averti lorsque notre prochain article sera publié ?
Attention ! En vous abonnant, vous acceptez d'être averti par e-mail de la publication d'un nouvel article. Dans le cadre de nos activités, nos envois peuvent inclure des offres de tiers. Pour plus d'informations, n'hésitez pas à consulter notre Politique de confidentialité.
~ Plus d'articles de blogue ~
Découvrez comment les déclencheurs de vente, les configurations de paiement flexibles et les pages de marque de Studiocart vous aident à créer des processus de paiement WordPress transparents pour de meilleures conversions.
Découvrez certaines des meilleures plateformes d'images gratuites et apprenez à ajouter des visuels directement sur WordPress avec le plugin Instant Images.
Le balisage schema aide les moteurs de recherche à interpréter votre contenu, améliorant ainsi la visibilité grâce aux extraits enrichis et favorisant l'engagement pour une meilleure interaction utilisateur.
Découvrez comment les déclencheurs de vente, les configurations de paiement flexibles et les pages de marque de Studiocart vous aident à créer des processus de paiement WordPress transparents pour de meilleures conversions.
Découvrez certaines des meilleures plateformes d'images gratuites et apprenez à ajouter des visuels directement sur WordPress avec le plugin Instant Images.
Clause de non-responsabilité:
Le contenu de ce site Web est fourni à titre informatif uniquement et reflète des opinions personnelles basées sur l'expérience. Il ne constitue pas un conseil professionnel et nous ne garantissons pas les résultats spécifiques de l'utilisation des outils ou des stratégies présentés. Bien que nous nous efforcions d'être précis dans nos écrits, les lecteurs doivent comprendre que ces articles représentent un instantané dans le temps : les extensions sont mis à jour, les outils évoluent et les fonctionnalités peuvent changer. Nous encourageons les lecteurs à vérifier les informations de manière indépendante avant leur mise en œuvre.
Veuillez noter:
Notre politique est d'assurer la transparence concernant la présence de publicités, notamment d'affiliation, sur ce site web. Vous pourrez trouver des publicités ou des hyperliens sur la partie publique du site, ainsi que sur des pages dédiées de l'espace client présentant des offres spéciales de nos partenaires. Bien que certains liens présents sur le site puissent générer des commissions, cela n'influence en rien notre contenu ni nos recommandations. Notre objectif est de partager notre expertise WordPress, fruit de nombreuses années d'expérience, sans que des affiliations externes n'influencent nos conseils.
Si vous remarquez un contenu qui nécessite une mise à jour, veuillez nous en informer et nous réglerons le problème rapidement. Pour plus de détails, veuillez consulter notre conditions d'utilisation.
