Oxygen – Un plugin de conception complet pour les professionnels de la création

Avez-vous déjà eu du mal à modifier le design de votre site Web WordPress? J'ai.

Le sang, la sueur et les larmes qui accompagnent la modification d’un thème WordPress sont bien réels. Les thèmes préconçus, quelle que soit la manière dont vous les découpez, se limitent à ceux qui ne sont pas des gourous du code. C’est un défi de trouver un thème capable d’exécuter complètement ma vision.

Si j'en trouve un assez proche, y apporter des modifications me laisse toujours désirer. Certains thèmes regorgent de fonctionnalités dont je n’ai pas besoin alors que d’autres ont besoin de plugins supplémentaires uniquement pour ajouter des éléments de conception.

Au fil des ans, mes choix de plugins étaient adaptés à de tels besoins en matière de conception, comme un plugin de grille pour afficher mon portefeuille lorsque des thèmes et des thèmes constructeurs de page ne pouvait pas exécuter ma conception.

Bien que l'interface de personnalisation des thèmes se soit améliorée au fil des ans, il reste un manque de contrôle sur les nuances de conception. Les constructeurs de pages qui arrivent sur le marché ont profité aux non-développeurs, mais ils ont souvent besoin d’add-ons pour contrôler divers aspects de la conception d’un site créé sur WordPress, tels que les en-têtes, les pieds de page ou les animations géniales.

Entrer Oxygène. Ce n'est pas un constructeur de page. Oxygen est un constructeur de site complet qui vous donne un contrôle complet sur tous les aspects de la conception de votre site WordPress – dans un seul plugin. Avec Oxygen, vous n’avez pas besoin de thème. Au lieu de cela, vous concevez votre propre thème, sans codage manuel.

Étant donné qu'Oxygen répond à tous vos besoins en matière de conception dans une seule application, vous pouvez économiser de l'espace et du budget précieux pour vos plugins pour étendre les fonctions WordPress. Moins de plugins entraînent moins de maux de tête et plus d’argent sur votre compte bancaire.

En tant qu’écrivain et graphiste, voici cinq raisons pour lesquelles j’aime utiliser Oxygen pour gérer mes besoins en matière de conception WordPress. Oh, et c'était déjà examiné sur WP Mayor aussi.

Le moteur de mise en page

Si vous avez utilisé une application de conception moderne comme Adobe Dreamweaver ou Photoshop, vous vous sentirez comme à la maison avec l’interface utilisateur d’Oxygen. Comme de nombreuses applications de conception, l’interface d’Oxygen se compose d’un panneau de propriétés à gauche, d’un panneau de structure à droite (ou, comme j’aime bien l’appeler, d’un panneau DOM) et du canevas au milieu. Le panneau de structure vous donne à la fois une vue plongeante de tous vos éléments imbriqués sur la page et un contrôle granulaire de leur placement. Plus vos éléments sont imbriqués, plus le panneau de structure devient un élément crucial de votre flux de travail.

Le moteur de présentation d'Oxygen offre une véritable expérience WYSIWYG qui vous permet de voir exactement où se trouvent vos éléments sur la page, avec un espacement parfait des pixels. Les concepteurs apprécieront de ne pas avoir à basculer pour prévisualiser en direct leurs conceptions pendant leur travail.

Bien que les thèmes et les constructeurs de page offrent des options pour manipuler les propriétés de code non disponibles dans leurs interfaces utilisateur, il est difficile de surfer sur le W3C pour les non-codeurs. Avec Oxygen, les propriétés de mise en forme CSS les plus utiles sont à votre disposition dans le panneau des propriétés. Les repères visuels de l’oxygène facilitent et accélèrent votre flux de travail.

Le principal atout d’Oxygen est sa boîte flexible, qui offre des solutions plus simples aux tâches de mise en page courantes et élimine les éléments inutiles et l’imbrication. Besoin d'empiler verticalement deux titres au-dessus de deux boutons alignés horizontalement? Les créateurs de thèmes et de pages proposent des colonnes pour mener à bien cette tâche. Dans Oxygen, une simple division utilisant les propriétés de flexbox est une solution plus élégante que l’imbrication des éléments dans les colonnes et le réglage de leur espacement pour chaque fenêtre. Enregistrez vos éléments de colonne pour des tâches plus appropriées, telles que de longues zones de texte avec des images adjacentes.

Constructeur de site complet

Le système de modèles Oxygen permet à l'utilisateur de créer chaque élément d'un site, y compris le système de menus, l'en-tête, le pied de page, les barres latérales et le contenu de la page. Il n’est pas nécessaire d’ajouter des add-ons pour construire ces éléments. Avec Oxygen, vous ne concevez pas uniquement des pages, vous concevez un site complet et un système de gabarits unique selon vos besoins. Pour un contrôle encore plus poussé, vous pouvez définir des paramètres globaux pour les couleurs, les polices, les en-têtes, le corps du texte, les liens, la largeur de la page, etc., contribuant à accélérer votre flux de travail et à maintenir la cohérence de la conception à l’échelle du site.

La commande typographique Oxygen est une autre caractéristique qui offre aux utilisateurs beaucoup de flexibilité et d’extensibilité. Par défaut, Oxygen s'accroche aux polices de Google, mais l'utilisateur peut utiliser Adobe Typekit ou même télécharger ses propres polices Woff. En outre, Oxygen vous permet de définir le poids des polices à charger sur votre site, contribuant ainsi à la vitesse globale de votre site.

Conception sensible

En tant que développeur visuellement attentif, l'optimisation de mes sites WordPress pour un design réactif me faisait souvent tourner les yeux. Basculer entre l'éditeur et un aperçu prenait du temps et était frustrant lorsque je me suis trompé de code. La fonction de conception souple et rapide d’Oxygen facilite la mise en page de différentes largeurs d’écrans.

Avec quatre points d'arrêt, vous pouvez voir rapidement les modifications de votre disposition directement dans le générateur. Pas besoin de prévisualiser sur un navigateur. L'alignement des éléments, les modifications de typographie et les tailles d'image peuvent tous être modifiés rapidement à l'aide du panneau de propriétés de chaque vue de point d'arrêt. Vous pouvez même choisir d'afficher ou de masquer des éléments en fonction de la taille de la fenêtre. Voulez-vous supprimer les modifications pour un point d'arrêt spécifique? Facile! Cliquez simplement sur le X rouge juste à côté du point d'arrêt pour indiquer que les styles ont été définis.

Sélecteur Détecteur

Chaque fois que j'utilise un plugin, que ce soit pour un formulaire ou un post-type personnalisé, l'affichage est toujours un pari. Si les plugins sont livrés avec des options de style, celles-ci se limitent généralement à la couleur et à la typographie. La plupart ne viennent même pas avec des options de rembourrage ou de marge. Les plugins offrant de nombreuses options CSS entraînent des coûts élevés, car ils chargent du code inutile, ce qui ralentit la vitesse du site. Le détecteur de sélecteur Oxygen facilite le style des plugins.

Voulez-vous changer l'espacement entre deux éléments? Facile, il vous suffit de pointer sur l'élément, de cliquer sur les options de style du détecteur de sélecteur et d'apporter vos modifications dans le panneau des propriétés. Si vous voulez encore plus de contrôle, vous pouvez utiliser les options PHP ou CSS disponibles avec chaque élément, mais vous n’aurez probablement pas besoin de toucher au code. Avec le détecteur de sélecteur, vous pouvez styliser vos formulaires et autres plug-ins en un rien de temps, ce qui vous permet de choisir des plug-ins plus légers pour leur fonction globale, et non pour leurs caractéristiques de conception.

Aides

Parfois, vous avez besoin de quelque chose nécessitant un codage un peu plus complexe. Les concepteurs visuels apprécieront les aides proposées par Oxygen, telles qu'un curseur, une bascule, des galeries, des zones d'icônes et des super-zones qui donnent à un site des fonctionnalités dynamiques et animées.

Je compte toujours sur l’assistant Easy Posts d’Oxygen pour afficher davantage que mes publications, mais aussi mes types de publications personnalisées pour mes projets, clients et portefeuille. La plupart des assistants proposent différentes options d'affichage de style pour un affichage rapide, mais si vous souhaitez un contrôle encore plus poussé, vous pouvez utiliser le détecteur de sélecteur pour attribuer un style à n'importe quel assistant, comme vous le souhaitez. L’assistant Easy Posts propose plusieurs options de conception magnifiques, mais comme tous les artistes, je le modifie jusqu’à ce que je sois heureux.

Mon assistant préféré est le générateur d'en-tête. L'oxygène facilite la création d'en-têtes collants multi-rangs réactifs. Chaque ligne peut être contrôlée indépendamment pour un design réactif. Aligner verticalement une ligne sur une fenêtre, la masquer sur une autre. Les options sont illimitées.

Aperçu de la vidéo

Voici un aperçu de la vidéo au cas où vous souhaiteriez y jeter un coup d’œil:

Conclusion

En tant que professionnel créatif ayant utilisé divers programmes de design, je suis tout à fait chez moi avec Oxygen. L’interface est intuitive pour tout graphiste ou professionnel de la création qui manipule du code. Cela ressemble à tous les outils de conception auxquels vous êtes habitués et vous en donne le contrôle total sur le code de votre site.

J’ai toujours apprécié WordPress pour ses puissantes fonctionnalités de système de gestion de contenu (CMS), mais comme de nombreux artistes visuels, la modification de ma conception de WordPress était devenue un frein. Avec Oxygène, la conception n'est plus une corvée. C’est encore amusant.

A propos de Julie Starling

Julie Starling est une écrivaine et graphiste qui s’intéresse au développement de WordPress depuis 2007. Lorsqu'elle n’écrit pas d’histoires pour des clients du secteur de la santé ou de la technologie, elle écrit sur son blog des histoires humoristiques et anthropomorphes sur la nature et les animaux. Dingo sauvage.