Comment personnaliser votre site WordPress sans avoir à comprendre le CSS

Nous allons vous montrer comment vous pouvez apporter de sérieux changements visuels à vos sites Web WordPress sans aucune expérience préalable de CSS. Mais d'abord, prenons une minute pour une petite appréciation de WordPress.

Ancienne interface wordpress

Rappelez-vous ceci? Voici à quoi ressemblait WordPress lorsque nous en sommes tombés amoureux. Onze ans plus tard, nous en sommes toujours amoureux mais (heureusement), ça a tellement changé que c'est à peine reconnaissable.

De la simple plate-forme de blogging au système de gestion de contenu le plus populaire au monde, WordPress est désormais le fondement de centaines de milliers de sites Web populaires regroupant une armée de développeurs travaillant sur la plate-forme et toute une autre armée de développeurs créant autant de thèmes et de plugins pour. cela, leur vente est un travail à plein temps pour beaucoup de gens. Themeforest est probablement le magasin de thèmes en ligne le plus célèbre, avec près de 20 000 thèmes, dont une grande majorité pour WordPress. Pour mettre cela en perspective, vous pourriez avoir un site Web complètement différent chaque jour pendant 54 ans.!

Vous auriez du mal à trouver un produit comparable, payant ou gratuit, qui le rend si facile pournon-codeurs pour passer de zéro à un site Web pleinement fonctionnel aussi facilement.

Ces dernières années, nous avons constaté que la personnalisation de WordPress était encore plus facile, grâce à la liste croissante de constructeurs de pages aidant les utilisateurs à créer facilement leurs propres conceptions. Combinez ces puissants outils d'architecture avec la liste croissante de plug-ins de sécurité, de partage et de commentaire, c'est très simple de créer le site que vous avez toujours souhaité.

Tout ce qui est mentionné ci-dessus vous permettra d'obtenir 90% du chemin; tout le contenu dont vous avez besoin, sur une plateforme de confiance; presque parfait grâce au dur labeur des développeurs qui construisent de superbes thèmes et plugins.

Mais même avec les meilleurs thèmes, vous aurez toujours envie de faire de petits changements. Petites modifications visuelles pour créer un thème différent de tout autre. Qu'il s'agisse d'arrondir des coins, d'épaissir les bordures ou de changer l'ombre autour d'un objet, ce sont ces changements qui rendent un bon thème parfait.

Tous les changements mentionnés ci-dessus se résument àpersonnalisation de CSS. Assez facile si vous êtes concepteur ou développeur, mais aimez essayer de lire la matrice si vous n'êtes pas.

Faire des modifications CSS signifiait utiliser des outils conçus pour les développeurs, des outils tels que Inspecteurs de navigateur trouver le pertinent Sélecteurs CSS et les manipuler manuellement. Vous devez ensuite copier ce CSS en tant que texte et le coller dans un éditeur de texte pour vous assurer qu'il ne contient que les informations dont vous avez besoin et qu'il n'a pas choisi les options du navigateur, telles que les cases à cocher ou les noms des feuilles de style. Vous pouvez alors créer un thème enfant pour votre site WordPress et le copier dans celui-ci ou utiliser les zones CSS personnalisées qui contiennent désormais autant de thèmes. C'est un très long processus. Avec autant d'étapes, le nombre d'erreurs commises est considérablement accru et le dépannage peut s'avérer fastidieux..

Présentation de CSS Hero

Tout comme les créateurs de pages ont facilité la modification de la structure d’un site WordPress, CSS Hero permet l’édition visuelle. En tant que non-concepteur, vous pouvez regarder un coin et penser «faites-le en courbe, cela ne peut pas être si difficile», mais vous inspectez ensuite le code nécessaire pour effectuer ce changement et c'est décourageant;

L'interface CSS Hero

L'utilisation de CSS Hero ressemble davantage à l'utilisation de Photoshop ou d'un produit similaire. Les curseurs vous permettent d'ajuster des éléments tels que le rembourrage, les marges, la netteté des coins et la taille des polices, tandis que les palettes de couleurs vous permettent d'ajuster l'aspect par défaut pour mieux correspondre au thème et au style de votre marque..
Même les concepteurs chevronnés et les gourous des CSS apprécient l’interface en temps réel conviviale. Cela rend les choses plus fluides, rapides et faciles à ajuster.

Comme c'est facile? Aussi simple que d'installer un plugin.

CSS Hero n'est pas livré avec un long manuel d'instructions car vous n'en aurez pas besoin. Nous allons vous montrer comment personnaliser votre site en quelques minutes..

Commencer

Bouton de verrou CSS Hero

Chaque personnalisation commence par le clic d'un éclair bleu. Cela ouvre le menu de personnalisations CSS Hero directement sur le front-office de votre site Web, vous évitant de déconner dans le tableau de bord, d'effectuer des modifications puis de revenir à l'avant pour voir à quoi elles ressemblent. Observez les changements à mesure que vous les effectuez.

Ce que vous faites avec le CSS est à vous de le laisser, laissez-le dans CSS Hero et cela fonctionnera comme un charme sans action supplémentaire. Vous pouvez également le copier dans unthème enfant ou votre panneau CSS personnalisé. Votre CSS, vos règles. Passons directement aux modifications!

Survolez, ciblez, changez

Pour cette démonstration, nous utilisons le thème Divi par thèmes élégants. C’est l’un des dizaines de thèmes Hero-Ready (ce qui signifie que nous avons ajouté tous les sélecteurs dont vous avez besoin pour le faire fonctionner immédiatement). Si vous n'utilisez pas de thème Hero-Ready, vous pouvez toujours ajouter vos propres classes et identifiants directement dans CSS Hero, ou utiliser Mode fusée, mais nous y reviendrons plus tard.

À l'exception de l'ajout de quelques pages et d'un article de blog, nous avons commencé avec Divi à peu près «tel quel». Nous voulons vous montrer ce que CSS Hero apporte à un nouveau thème. Nous utilisons un article de blog à titre d'exemple, car il s'agit peut-être par défaut de la partie la plus simple de Divi. C’est la seule section où vous ne pouvez pas utiliser le générateur de page intégré, c’est donc ici que vous voudrez certainement ajouter votretouches personnelles.

Changer la conception de l'en-tête.

Tout d’abord, nous voulons changer cet en-tête - c’est très plat - sauf une mince ligne grise dessous, il se passe très peu de chose. Nous allons utiliser CSS Hero pour ajouter une ombre portée en dessous et la relever de la page. CSS Hero propose de nombreuses options pour ajouter différents types d'ombres portées, qui peuvent toutes être peaufinées pour vous aider à obtenir l'effet souhaité..

Boîte ombre

Ensuite, nous allons changer très légèrement la couleur en blanc cassé. Vous pouvez utiliser le sélecteur de couleur intégré pour effectuer ces modifications ou, si vous utilisez un jeu de couleurs, vous pouvez simplement saisir les valeurs RGBA ou HEX. Les deux sont pris en charge et sont simples à saisir.

Changer la couleur de fond de l'en-tête

Ensuite, nous allons cibler la section du corps du blog en cliquant dessus afin que CSS Hero puisse nous montrer les options disponibles. À partir de là, nous allons changer la couleur de fond en gris plus foncé. Maintenant, notre en-tête se démarque et, une fois les modifications supplémentaires apportées, notre contenu et notre barre latérale.

Si vous modifiez l'arrière-plan de la zone gauche en blanc, il reste vraiment en dehors de la page, mais la couleur se dilue légèrement sur le bord. Nous lui avons donc donné une bordure plus sombre d'un pixel seulement. Un petit ajustement du rayon de la bordure donne à la section une belle courbe et l'ajustement du rembourrage crée une belle bordure autour du contenu..

Nous avons changé les polices de titre en Helvetica. Une des 100 polices Google figurant dans le menu déroulant des polices de CSS Hero, mais si vous souhaitez ajouter l'une des 550 autres polices Google, rien de plus simple..

Changer la police: HelveticaChanger le fond en grisAjouter 1px de bordureAjout de 20px de rembourrageAjouter un rayon de bordure

Changer la taille de l'image sélectionnée

Par défaut, Divi ajoute l’image présentée à partir d’un article de blog sous le titre en pleine largeur. Cela prend beaucoup de place au-dessus du pli et éloigne le texte. Nous avons utilisé CSS Hero pour modifier la largeur à 50% et faire bien flotter l'image. En fixant le nouveau la taille de l'image à auto il a conservé son format d'image et l'image est parfaite sur tous les appareils. Nous avons également ajouté un peu de rembourrage à l'image pour que le texte ne soit pas assis juste à côté. L'ajout de coins légèrement incurvés à l'image à l'aide du curseur de rayon de bordure de CSS Hero suffisait à rendre cette image parfaite..

Modifier la taille de l'image sélectionnée et ajouter un rayon de bordure

Quelques autres petites modifications utilisant CSS Hero, notamment la mise en majuscule du méta-texte, la modification de la couleur et de la bordure du bouton «Soumettre un commentaire», et nous sommes plutôt satisfaits de l'aspect de la section de gauche. Si nous le comparons à ce à quoi il ressemblait, vous constaterez qu’une grande amélioration a été apportée en quelques minutes..

Les méta sont maintenant en majuscule

La barre latérale

Nous sommes ensuite passés à la barre latérale qui, par défaut, est plutôt simple. En utilisant les mêmes techniques que celles utilisées pour l'édition de notre section de gauche, nous avons pu appliquer rapidement un bord incurvé et un arrière-plan sombre qui permettent à cette section de sortir de la page. Nous avons modifié les polices de titre pour les faire correspondre à nos personnalisations actuelles et leur avons donné une couleur pâle pour aider à se distinguer sur le fond sombre..

Nous avons modifié les couleurs des liens pour les rendre plus légers et les avons spécifiquement ciblés lorsque l'utilisateur survole et définit une couleur différente. Nous nous sommes débarrassés du bleu électrique standard et avons opté pour quelque chose d'un peu plus en phase avec le thème. Si vous le souhaitez, vous pouvez également définir une couleur différente pour actif liens et liens qui avaient été a visité dans le passé avec CSS Hero.

La barre latérale

Qu'avons-nous fait??

Grâce à l’utilitaire d’exportation CSS Hero, nous pouvons voir ce que nous venons de créer sur notre site, côté code..

Cela peut être utile pour ceux qui veulent commencer à comprendre le CSS, ainsi que pour les développeurs qui veulent juste exporter le code généré et le copier-coller où ils veulent..

Fragment de l'intégralité du CSS, généré par CSS Hero

L'inspecteur des héros CSS

Vous pouvez même utiliser notre nouvel outil d'inspection pour examiner le CSS que vous avez créé et vous familiariser avec la façon dont ces modifications sont apportées. Vous pouvez également utiliser inspecteur pour apporter de petites modifications à votre code CSS, comme pour ajuster la taille de la police, la courbe ou l'épaisseur d'une bordure, ou autre. Plus vous êtes confortable avec CSS, plus l'outil d'inspecteur devient utile.

Au total, ces personnalisations ont pris un peu plus de cinq minutes. Cinq minutes pour changer complètement presque tous les éléments de l'article de blog. 

Prêt pour héros, configuration et mode fusée

Héros prêt les thèmes sont bons pour sortir de la boîte comme discuté plus tôt. La plupart des thèmes WordPress populaires sont prêts pour les héros, notamment Generatepress, Enfold, Genesis Framework, Pagelines DMS, le plugin WooCommerce et LayersWP..

Cela signifie qu'aucune configuration n'est nécessaire, mais si c'est le cas, c'est aussi facile. Il y a deux façons de s'y prendre.

Mode fusée

Une fonction relativement nouvelle et qui nous tient à cœur, le mode Rocket, recherchera automatiquement les sélecteurs valides dans la feuille de style de votre thème. Une fois trouvé, il les ajoutera à CSS Hero et permettra à votre thème prêt non-héros de fonctionner extrêmement bien sans configuration supplémentaire. Si, pour une raison quelconque, votre thème est incompatible avec le mode Fusée, vous pouvez ajouter vos sélecteurs à l'aide de l'outil de configuration intégré..

Ajout de classes et d'identifiants à CSS Hero

Le configurateur rapide

Si vous connaissez les classes et les identifiants utilisés par votre thème, vous pouvez les ajouter manuellement à CSS Hero et les cibler comme tout autre élément d'un thème prêt pour le héros. Besoin d'aide pour les trouver? Essayez l'outil d'inspection d'élément dans la plupart des navigateurs ou recherchez dans la feuille de style de votre thème la présence d'un point (.) Ou d'un hashtag (#). Alternativement, la plupart des thèmes haut de gamme comprendront de la documentation, soit dans le thème lui-même, soit sur leur site Web avec les sélecteurs appropriés dont vous avez besoin..

Constructeurs de page, plugins et CSS Hero

Nous avons mentionné précédemment les avantages structurels de l'utilisation d'un générateur de page pour accélérer / faciliter le processus de création de pages dans WordPress. Mais vous voudrez toujours contrôler leur apparence, non? La même chose peut être dite pour les plugins qui construisent des formulaires, ajoutent des tables, etc..
C'est l'une des raisons pour lesquelles nous avons dépassé le simple thème lors de la création de CSS Hero. Vous pourrez l'utiliser immédiatement, comme indiqué lors de l'édition de la page du blog, avec un tas de ressources WordPress intéressantes. Beaver Builder, un constructeur de pages très populaire, est totalement compatible avec CSS Hero, tout comme Visual Composer et Contact Form 7. Vérifiez si les plug-ins que vous utilisez sont compatibles ici..

Alors c'est tout! Sans jamais connaître le langage CSS (ni aucun autre langage de programmation), vous pouvez créer un site Web WordPress entièrement réactif et hautement personnalisé. Si vous faites ou avez construit quelque chose avec CSS Hero, assurez-vous de nous le faire savoir dans les commentaires. Nous aimerions le voir!