Comment ajouter une couleur à un billet de blog par auteur Divi

L’un des principaux objectifs de Divi est de s’assurer que chaque élément du site semble bien, et les billets de blog ne font pas exception. Cependant, il y a toujours place à l’amélioration, le codage par couleur de vos billets de blog par auteur, permettant aux utilisateurs de naviguer plus efficacement sur votre contenu (et d’identifier leurs auteurs préférés!). Dans cet article, nous discuterons plus en détail des raisons pour lesquelles le codage par couleur des billets de blog Divi est nécessaire et de la façon de le faire en deux étapes simples. Il est temps de peindre une nouvelle couche de peinture! Pourquoi, avant d’aller plus loin, vous devriez envisager le codage par couleur pour les billets de blog Divi. Clarifions ce que signifie le codage par couleur pour les billets de blog Divi. Dans la section suivante, nous vous montrerons comment assigner à chaque auteur une couleur qui sera affichée comme arrière – plan de son billet. Dans cet exemple, j’ai assigné un bleu très attrayant à mon post (comme autore1): L’effet lui – même est relativement simple, mais il fournit un moyen efficace de distinguer les auteurs. Les utilisateurs peuvent facilement identifier les nouvelles œuvres de leurs auteurs préférés. Bien sûr, le fait de mettre en évidence le nom de l’auteur peut produire le même effet, mais cela n’est peut – être pas surprenant visuellement. La seule chose qui t’intéresse, c’est le choix des couleurs. Prenons par exemple la capture d’écran au début de cette section: notre index de blog Divi utilise un fond blanc, donc nous avons décidé d’utiliser le rose clair dans les messages de l’auteur. Voyons ce qui se passe si nous choisissons un schéma de couleurs différent: Bien sûr, c’est un exemple extrême, mais cela nous aide à clarifier notre point de vue. Si vous souhaitez colorier vos messages, vous devez examiner attentivement votre palette de couleurs et utiliser les outils appropriés pour vous aider si nécessaire. L’utilisation de couleurs contrastées pour mettre en évidence les différences entre chaque message peut aider l’utilisateur à identifier rapidement
Php after Line \/ \/ end endendendendendparameter action: function et _ set author Class ($classes) {$classes [] = ‘author -‘. Strpower (Str replace (‘,’ – ‘, get the author ();
Renvoie $class;}
Ajouter un filtre (‘post _ class’,’ et set author class’); Maintenant enregistrez vos modifications, fermez l’éditeur et c’est fait! N’oubliez pas que, peu importe l’auteur avec qui vous travaillez, votre classe a besoin de caractères minuscules pour fonctionner. C’est important pour la deuxième étape. Étape 2: utilisez l’option CSS personnalisée de Divi pour assigner des couleurs à chaque auteur maintenant que notre nouvelle fonctionnalité est prête, l’étape suivante est de définir des couleurs pour chaque auteur. Divi vous permet de le faire en utilisant ses fonctionnalités CSS personnalisées, car tout code ajouté affecte l’ensemble du sujet. Pour le trouver, allez sur le tableau de bord WordPress et allez sur l’onglet Divi > options de thème, puis faites défiler vers le bas vers la boîte CSS personnalisée à la fin de la page: Vous devez ajouter une nouvelle ligne CSS à ce champ pour chaque auteur. Par exemple, si vous avez un auteur nommé author1, voici comment définir une couleur spécifique pour lui:. Author1 {Background color: # c1f3fa! Important;} N’oubliez pas que vous devez ajouter un préfixe d’auteur à votre classe, quel que soit votre nom d’utilisateur. Après avoir indiqué la couleur de fond, assurez – vous également que le Code de déclaration est! Important En bref, cela donne plus de poids au Code et écrase tout conflit possible – sans cela, cette fonction ne fonctionnera pas.
Prenons un dernier exemple. Ici, nous allons assigner des couleurs différentes aux deux auteurs. Voici le Code que nous avons ajouté au champ personnalisé CSS Divi:. Author1 {Background color: # c1f3fa! Important;}
– Oui. Author – author2 {Background color: # f9fcb8! Important;} Maintenant, voici l’apparence de l’avant: Mettre en attente les options suivantes