Ad

~ Sur le blogue ~

Améliorez votre site : découvrez le constructeur Oxygen pour WordPress

Dans l'article de blogue 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 pour WordPress

Table des matières

Clause de non-responsabilité: Cet article porte sur Oxygen Builder Classiqueet présente ses caractéristiques et ses points forts. Il ne traite pas de Oxygen 6, qui reste en version bêta, son framework étant en constante évolution. Un prochain article vous fournira des informations sur Oxygen 6 une fois finalisé ; dès sa publication, nous ajouterons un lien ici.


Bienvenue à nouveau, chers lecteurs, pour un nouvel épisode instructif de notre Créateurs de pages et thèmes série de blogs. Nous vous remercions sincèrement de votre fidélité alors que nous explorons les horizons fascinants de la conception et du développement web. Aujourd'hui, nous nous intéressons à Oxygen Page Builder (Classique), le constructeur de pages WordPress créatif. Cet outil puissant a été conçu pour les développeurs et les clients, avec la promesse de révolutionner la façon dont les utilisateurs créent et gèrent des sites web.


Conçu par l'équipe innovante de Soflyy, Oxygen Page Builder est sans aucun doute l'un des meilleurs outils de conception de sites Web WordPress destinés aux développeurs. Oxygen, un constructeur de pages WordPress basé sur les classes et axé sur les fondamentaux, est reconnu pour son interface intuitive et ses fonctionnalités robustes. Il permet à ses utilisateurs de libérer leur créativité et de concevoir des sites Web exceptionnels.


Dans cet article concis, nous examinerons les principales fonctionnalités du constructeur de pages Oxygen classique, en soulignant sa polyvalence et son efficacité. Des contrôles de données dynamiques d'Oxygen à l'intégration fluide avec les blocs Gutenberg, ce constructeur de pages offre de nombreux outils pour simplifier la création de votre site web.


Joignez-vous à nous pour explorer les subtilités du constructeur de pages Oxygen et découvrir son potentiel pour les concepteurs et les développeurs web.


Remarque: Bien qu'accessible aux utilisateurs moins expérimentés, Oxygen révèle tout son potentiel entre les mains de ceux qui maîtrisent HTML, CSS et JavaScript. Si ce niveau de technicité ne vous convient pas, vous préférerez peut-être découvrez le thème Trade pour WordPress, convivial conçu avec le constructeur de pages SiteOrigin, idéal pour les débutants.

Adjrien Goddard

Adjrien Goddard

Fondateur

Profil LinkedIn de Softworks Interactive

Image à la une du billet de blogue | Gros plan d'une bouteille de gaz industrielle avec un manomètre et une vanne, placée à l'extérieur sur un fond flou.
Blog Post Sidebar Nav

Une conception toujours moderne :

Conception modulaire pour un contrôle total

Au cœur d'Oxygen se trouve sa philosophie de conception modulaire, permettant aux utilisateurs de créer des mises en page personnalisées avec précision et facilité. Grâce à une vaste gamme de blocs de construction à votre disposition, concevoir le site web de vos rêves n'a jamais été aussi intuitif. Découvrons cette fonctionnalité en action :


Interface glisser-déposer :

  • Avec l'interface glisser-déposer intuitive d'Oxygen Builder, vous pouvez facilement agencer et personnaliser les éléments pour créer des mises en page visuellement époustouflantes, adaptées aux spécifications de votre projet.


Parmi les éléments inclus ::

  • Blocs de code: Les développeurs les utilisent pour insérer du code personnalisé comme JavaScript et PHP.
  • Témoignages: Ceci affiche une image horizontalement ou verticalement avec du texte adjacent.
  • Diaporamas: Présentez votre contenu dans une présentation de type carrousel.
  • Fil d'Ariane: L'ajout de cet élément simplifiera la navigation de vos visiteurs.
  • Boîtes de prix: Une boîte de prix simple, pré-stylisée et empilée verticalement.


Conception adaptative :

  • Grâce aux points de rupture personnalisables et aux nombreuses options de contrôle d'Oxygen, votre site Web s'affiche parfaitement sur tous les appareils. Empiler les lignes verticalement ou masquer des éléments sur certains appareils : obtenir une compatibilité optimale est un jeu d'enfant.


En-têtes fixes pour un engagement accru :

  • Améliorez l'engagement et les conversions grâce à la fonctionnalité d'en-tête fixe d'Oxygen. L'en-tête de votre site Web reste visible en permanence, même lorsque les visiteurs font défiler la page. Personnalisez son design pour encourager les interactions souhaitées, comme l'achat de produits ou l'inscription à des services.

Gestion dynamique des données pour des expériences personnalisées

Les fonctionnalités de contrôle dynamique des données d'Oxygen propulsent la personnalisation de votre site Web vers de nouveaux sommets. Cette fonctionnalité vous permet de lier des éléments de design à votre base de données WordPress. Vous pouvez ainsi créer facilement des expériences dynamiques et interactives pour les visiteurs de votre site. Voici comment ça marche :


Intégration de la base de données :

  • Intégrez facilement les données de votre base de données WordPress à vos conceptions, notamment les données des articles, les données utilisateur, les champs personnalisés, etc.


Boucles et logique conditionnelle :

  • Utilisez les outils de développement visuel d'Oxygen pour parcourir les articles ou exécuter des requêtes personnalisées. Vous pouvez également implémenter une logique conditionnelle pour afficher ou masquer des éléments en fonction des valeurs des données dynamiques.


Soutien aux sites d'adhésion :

  • Tirez parti des contrôles de données dynamiques d'Oxygen pour personnaliser les sites d'adhésion, restreindre l'accès au contenu et personnaliser l'expérience utilisateur en fonction des niveaux d'adhésion ou des rôles individuels.
Une personne en tenue de plongée descend un escalier métallique rouillé pour se rendre à l'océan.

Copie d'éléments dans Oxygen Page Builder : Un flux de travail efficace

Saviez-vous? Oxygen Page Builder vous permet de copier facilement des éléments au sein d'un même site ou même entre différents sites. Vous pouvez dupliquer des éléments avec leurs styles et classes à l'aide des raccourcis clavier CMD/CTRL+C et CMD/CTRL+v. De plus, si vous devez transférer des éléments entre différents sites, Oxygen offre une fonction d'exportation et d'importation pratique. Il vous suffit d'exporter l'élément désiré à partir du site source et de l'importer sur le site de destination à l'aide des outils intégrés. Ainsi, les styles et les classes des éléments parents et enfants sont correctement copiés. Consultez la documentation d'Oxygen Builder pour plus d'informations.

Une parenthèse: Vous parlez de constructeurs de sites ? Vous vous demandez s'il existe un moyen simple d'intégrer des outils de commerce électronique essentiels à votre site WordPress ? Découvrez comment l'extension Studiocart offre aux entreprises de services une solution simplifiée pour la gestion de leurs ventes en ligne..

Intégration native des blocs Gutenberg pour un flux de travail fluide

Grâce à l'intégration native des blocs Gutenberg dans Oxygen, tirer parti de la puissance de l'éditeur WordPress natif n'a jamais été aussi simple. Créez vos blocs dans Oxygen, utilisez-les dans Gutenberg et laissez aller votre créativité. Voici comment ça marche :


Création de blocs Gutenberg :

  • Concevez des blocs personnalisés dans Oxygen grâce à son interface intuitive et intégrez-les facilement dans l’éditeur Gutenberg.


Gestion centralisée des blocs :

  • Modifiez facilement vos blocs dans Oxygen et visualisez automatiquement les modifications sur toutes les instances de blocs, pour une cohérence visuelle et un gain de temps assurés.

Style de couleurs global pour une harmonie visuelle sur votre site Web

L'harmonie visuelle est essentielle à une conception Web efficace. La fonctionnalité de style de couleurs globale d'Oxygen garantit une apparence cohérente sur votre site. Voici comment ça marche :


Palette de couleurs centralisée :

  • Modifiez la palette de couleurs de votre projet à partir d'un seul endroit, pour une cohérence visuelle optimale sur l'ensemble de votre site web.


Utilisation générale des couleurs :

  • Désignez facilement une couleur comme couleur globale et utilisez-la sur tout votre site Web en un clic.

La bibliothèque de design Oxygen : la clé de designs exceptionnels

Grâce à ses nombreux blocs et ensembles de design prédéfinis, la bibliothèque de design Oxygen offre des possibilités infinies pour créer des sites Web visuellement captivants. Voici ce qu'elle propose :


Mises en page prédéfinies :

  • Choisissez parmi une multitude de blocs et d'ensembles de design prédéfinis, tous conçus avec soin pour un rendu impeccable sur tous les écrans. Ces ensembles sont essentiellement les blocs et motifs composés ou déconstruits (selon le point de vue) des kits de conception de base. Une fois que vous avez trouvé la configuration idéale, importez et personnalisez facilement les modèles de composants pour qu'ils correspondent à votre identité de marque, en remplaçant le texte, les images et les styles selon vos besoins.

Parmi les plus de 15 thèmes disponibles, voici quelques options:

  • Atomic: Un design élégant et accessible à tous. Ce thème est appliqué par défaut lors de l'installation.
  • Freelance: Un style épuré et minimaliste, idéal pour les développeurs indépendants.
  • Hosting: Un site Web multipages, plus traditionnel, parfait pour lancer une entreprise numérique.
  • One Page: Dynamique et esthétique, ce site à défilement unique est idéal pour les pages d'atterrissage.

Bibliothèque d'éléments composites : Rehaussez votre design

La bibliothèque d'éléments composites d'Oxygen propose une multitude d'éléments préconçus pour optimiser les fonctionnalités et l'esthétique de votre site web. Voici un aperçu des éléments disponibles (liste non exhaustive) :


Éléments composites d'Oxygen :

  • Slider dynamique: Présentez du contenu dynamique, comme des articles, à l'aide de répéteurs.
  • Séparateur horizontal: Simples mais efficaces, ces séparateurs visuels permettent de segmenter le contenu.
  • Retour en haut: Ces boutons permettent aux visiteurs de remonter la page après un défilement vertical.
  • Liste d'icônes: Créez rapidement des icônes avec du texte formaté pour mettre en valeur les points importants.
  • Accordéon: Toujours aussi populaires, ces accordéons sont un atout majeur pour optimiser l'espace.
  • Méga menu: Présentez du contenu dynamique, comme des articles, à l'aide de répéteurs.


Les composites sont conçus à partir des éléments de base et des blocs de code d'Oxygen, offrant ainsi aux utilisateurs une personnalisation facile pour répondre à leurs besoins spécifiques.

Créer des souvenirs de mariage et agrandir la famille :

Un exemple concret avec Oxygen Builder

Pour illustrer la polyvalence d'Oxygen Builder classique, prenons l'exemple d'un projet réel : un microsite sur le thème du mariage pour un client qui célèbre plusieurs grandes étapes de sa vie.


Ce projet concernait une vieille connaissance avec un budget limité. Le site Web, initialement axé sur leur mariage, a rapidement intégré un deuxième objectif lorsque le couple a annoncé qu'il attendait un autre enfant. La flexibilité d'Oxygen a permis d'effectuer ces modifications rapidement et facilement.


Personnalisation du menu et de la navigation

Le modèle Oxygen pour mariage a été adapté aux besoins du couple :

  • « Notre mariage » et « Liste de souhaits » est resté inchangé.
  • « Liste d'invités » est devenu « Notre famille »., en se concentrant uniquement sur la famille proche afin de simplifier le projet.
  • « Photos » est devenu Médias, permettant ainsi une coexistence harmonieuse de la galerie d'images et des listes de lecture vidéo.


Ajustements de la page et du contenu

  • Notre page Mariage : Nous avons personnalisé le déroulement de l'événement et intégré un élément Google Maps pour localiser le lieu.
  • Notre page Famille : Nous avons ajouté un petit arbre généalogique présentant les parents, les frères et sœurs et les enfants.
  • Page Médias : Nous avons utilisé la mise en page en grille existante pour présenter les photos, puis l'avons mise à jour après le mariage avec les photos et vidéos de la cérémonie.
  • Page Liste de souhaits : Nous avons affiché des produits avec des liens vers les listes de naissance Amazon et Babies 'R' Us, regroupés sous des titres clairs avec des images cliquables.


Le projet a duré environ une semaine, le retard principal étant dû à l'attente des photos de famille et au montage vidéo. Grâce à la préparation des clients, le contenu textuel et la plupart des images étaient prêts rapidement, ce qui a permis un développement fluide. Des améliorations mineures, comme l'ajout d'en-têtes et de séparateurs visuels discrets sur la page « Liste de souhaits », ont été réalisées efficacement grâce aux fonctions copier-coller d'Oxygen.


Ce cas d'utilisation illustre comment la version classique d'Oxygen Builder permet même aux projets les plus modestes d'offrir une expérience utilisateur soignée et personnalisée en toute simplicité.


Gros plan d'un champ avec quelques branches courtes et dénudées, de l'herbe verte et un ciel nuageux en arrière-plan.

L'Oxygen Page Builder pour WordPress offre aux développeurs des fonctionnalités puissantes et une intégration parfaite avec Gutenberg. Apprendre à utiliser cet outil peut accélérer la conception et le développement de votre site web.

Points clés à considérer

Bien que la version classique d'Oxygen Builder demeure un outil fiable pour de nombreux professionnels du Web, il est important de noter quelques problèmes connus. Être conscient dès le début permet d'optimiser les délais du projet et d'éviter des dépannages inutiles.


Problèmes rencontrés :

  • Affichage d'un modèle vide : Parfois dû à une interférence entre le CSS mis en cache et les images accessibles via une URL.
  • Erreur cURL lors du chargement du site : Liée à des valeurs incorrectes WP_HOME ou WP_SITEURL lors du chargement manuel d'un fichier de configuration.
  • Dysfonctionnement de Google Maps : Provoqué par des identifiants API manquants ou incorrects. Résolu en utilisant une iframe plutôt qu'un plugiciel dédié.


Considérations de compatibilité

  • Oxygen Builder peut parfois entrer en conflit avec les plugiciels de pare-feu (par exemple, Sucuri) en raison du blocage de certains chemins d'API.
  • Des conflits d'hébergement peuvent survenir. Les utilisateurs hébergés chez des fournisseurs comme Bluehost ou Hostinger doivent savoir qu'il peut être nécessaire d'ajouter des adresses IP ou d'effectuer d'autres procédures de « liste blanche ».


Bien que ce ne soit pas un problème de compatibilité, j'ai trouvé frustrant de devoir naviguer de l'éditeur Oxygen vers le tableau de bord WordPress. L'éditeur redirige les utilisateurs vers l'interface Gutenberg, ce qui oblige à cliquer encore une fois pour accéder au tableau de bord principal.


Ces difficultés sont gérables, mais nécessitent une attention particulière afin de minimiser les perturbations lors de la création d'un site. C'est pourquoi nous vous recommandons de consulter le site du constructeur pour obtenir une liste plus complète des problèmes connus.

Conclusion

Réflexions finales

Pour conclure cette présentation d'Oxygen Builder classique, il est clair que cet outil offre une approche structurée et basée sur des composants, parfaitement adaptée aux flux de travail des développeurs et aux exigences des clients.


En combinant des commandes visuelles et un accès au code source, Oxygen offre la flexibilité nécessaire pour gérer aussi bien des microsites simples que des projets plus complexes, axés sur les données.


Avant de décider si Oxygen convient à votre prochain défi, évaluez comment ses fonctionnalités correspondent aux compétences techniques de votre équipe et aux besoins de vos clients.


Points clés à retenir

  • Conception modulaire et glisser-déposer: Créez des mises en page personnalisées sans partir de zéro.
  • En-têtes adaptatifs et fixes: Assurez la cohérence visuelle et la visibilité des appels à l'action.
  • Données dynamiques et logique conditionnelle: Affichez du contenu provenant de bases de données et personnalisez l'affichage selon le rôle de l'utilisateur ou le contexte.
  • Intégration des blocs Gutenberg: Créez des blocs réutilisables dans Oxygen, puis gérez-les à l'échelle de votre site WordPress.
  • Style de couleurs global: Contrôlez votre palette de couleurs à partir d'un endroit unique pour assurer l'uniformité de votre marque.
  • Bibliothèque de design et éléments composites: Accélérez le développement grâce à des sections prédéfinies et des composants d'interface utilisateur avancés.
  • Copiation efficace d'éléments: Dupliquez des composants en conservant leurs styles d'origine sur plusieurs pages ou sites.


Bien qu'Oxygen suppose une connaissance pratique de HTML, CSS et JavaScript, son interface visuelle peut servir de tremplin aux équipes désireuses d'apprendre. Les problèmes connus, tels que les conflits de cache occasionnels ou les solutions de contournement pour les pare-feu d'API, sont documentés et gérables avec un minimum de ressources.


En fin de compte, la combinaison de contrôles précis et d'outils de conception de haut niveau d'Oxygen en fait une option intéressante pour les développeurs à la recherche d'un compromis entre la création de pages axée sur le code et la création de pages axée sur le visuel.

Si vos projets nécessitent un contrôle précis du code et une conception visuelle rapide, envisagez le constructeur de pages Oxygen classique pour votre prochain déploiement WordPress— il pourrait offrir le juste équilibre pour votre flux de travail.

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 ~


Image vedette de l'article de blogue


Découvrez comment les configurations et les pages de marque de Studiocart vous aident à créer des processus de paiement WordPress pour de meilleures conversions.

Image vedette de l'article de blogue


Découvrez certaines des meilleures plateformes d'images gratuites et apprenez à ajouter des visuels directement sur WordPress avec l'extension Instant Images.

Image vedette de l'article de blogue


Le balisage Schema aide les moteurs à interpréter votre contenu, renforce la visibilité via les extraits enrichis et favorise l’engagement de l’utilisateur.

Image vedette de l'article de blogue


Découvrez comment les configurations et les pages de marque de Studiocart vous aident à créer des processus de paiement WordPress pour de meilleures conversions.

Image vedette de l'article de blogue


Découvrez certaines des meilleures plateformes d'images gratuites et apprenez à ajouter des visuels directement sur WordPress avec l'extension 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.