- \n
- Modifier la famille de polices, la taille de police et la couleur de n’importe quel texte<\/li>\n
- Changer les couleurs et les images d’arri\u00e8re-plan<\/li>\n
- Ajuster l’espacement entre les \u00e9l\u00e9ments<\/li>\n<\/ul>\n
Et ce n’est qu’un \u00e9chantillon des incroyables personnalisations possibles.<\/p>\n
Qu’est-ce qui n’est pas CSS Hero ?<\/h2>\n
Vous ne pouvez pas cr\u00e9er de nouveaux mod\u00e8les ou des mises en page enti\u00e8rement nouvelles avec CSS Hero. C’est \u00e0 cela que servent les constructeurs de pages comme Elementor<\/a>.<\/p>\n
En g\u00e9n\u00e9ral, si vous souhaitez apporter une modification \u00e0 votre site qui n\u00e9cessite l’ajout de nouveau contenu, CSS Hero n’est pas le bon outil. Si vous souhaitez apporter une modification purement visuelle comme changer la couleur ou la taille d’un \u00e9l\u00e9ment, CSS Hero est parfait.<\/p>\n
Comment utiliser CSS Hero<\/h2>\n
Bien qu’il soit livr\u00e9 avec une tonne d’options, l’utilisation de CSS Hero<\/a> est en fait tr\u00e8s simple.<\/p>\n
Cliquez ici pour essayer CSS Hero par vous-m\u00eame<\/a><\/p>\n
Installation<\/h3>\n
CSS Hero est t\u00e9l\u00e9charg\u00e9 via le menu Plugins comme n’importe quel autre plugin. Une fois install\u00e9, un bouton appara\u00eetra vous demandant d’obtenir une cl\u00e9 de licence.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nEn cliquant sur ce bouton, vous acc\u00e9dez \u00e0 une page de leur site avec un autre bouton sur lequel cliquer, puis la licence est activ\u00e9e.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nCela ne pourrait pas \u00eatre plus simple.<\/p>\n
L’interface<\/h3>\n
Une fois CSS Hero activ\u00e9, votre site aura un nouvel \u00e9l\u00e9ment Modifier avec CSS Hero ajout\u00e9 \u00e0 la barre d’outils d’administration.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nEn cliquant dessus, vous acc\u00e9derez \u00e0 l’interface de conception CSS Hero.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nJe montre CSS Hero avec notre th\u00e8me Ignite<\/a> gratuit<\/p>\n
L’interface est similaire au Customizer (couvert dans notre guide de personnalisation de base<\/a> ). Il y a un panneau sur la gauche avec les outils de personnalisation et un aper\u00e7u sur la droite qui se met \u00e0 jour en direct lorsque vous apportez des modifications. Comme le personnalisateur, aucun de ces changements n’est visible pour vos visiteurs jusqu’\u00e0 ce que vous cliquiez sur le bouton Enregistrer et publier.<\/p>\n
S\u00e9lectionnez un \u00e9l\u00e9ment<\/h3>\n
Le processus de personnalisation avec CSS Hero commence par la s\u00e9lection d’un \u00e9l\u00e9ment.<\/p>\n
Lorsque vous d\u00e9placez votre souris dans l’aper\u00e7u du site, vous verrez un contour bleu d\u00e9finissant tous les \u00e9l\u00e9ments s\u00e9lectionnables. Cliquer sur n’importe quel \u00e9l\u00e9ment vous permettra de le modifier. Voici comment je s\u00e9lectionnerais l’en-t\u00eate du th\u00e8me Ignite\u00a0:<\/p>\n
Personnalisation des \u00e9l\u00e9ments du site<\/h3>\n
Une fois qu’un \u00e9l\u00e9ment est s\u00e9lectionn\u00e9, les propri\u00e9t\u00e9s personnalisables sont ajout\u00e9es au panneau de gauche.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nCes m\u00eames propri\u00e9t\u00e9s sont disponibles pour tous les \u00e9l\u00e9ments<\/p>\n
Ce sont toutes les diff\u00e9rentes personnalisations que vous pouvez apporter \u00e0 n’importe quel \u00e9l\u00e9ment \u00e0 l’aide de CSS Hero.<\/p>\n
Examinons de plus pr\u00e8s quelques-unes de ces propri\u00e9t\u00e9s afin que vous puissiez avoir une id\u00e9e de la fa\u00e7on dont elles peuvent \u00eatre utilis\u00e9es pour personnaliser votre site.<\/p>\n
Changer de police<\/h4>\n
Avec l’en-t\u00eate s\u00e9lectionn\u00e9, je peux choisir l’option Typographie, puis s\u00e9lectionner une nouvelle police. La police s\u00e9lectionn\u00e9e s’appliquera automatiquement \u00e0 tout le texte trouv\u00e9 dans l’en-t\u00eate. C’est beaucoup plus rapide que d’essayer d’attribuer une police au menu ou au titre du site individuellement.<\/p>\n
CSS Hero vous donne acc\u00e8s \u00e0 un ensemble de polices syst\u00e8me (polices install\u00e9es sur votre syst\u00e8me d’exploitation) et \u00e0 certaines des polices les plus populaires de Google Fonts<\/a>. Il existe \u00e9galement un "gestionnaire de polices" qui vous permet d’ajouter n’importe quelle police de Google Fonts \u00e0 votre site en un clic.<\/p>\n
Changer les couleurs du texte<\/h4>\n
Une autre personnalisation courante que CSS Hero peut g\u00e9rer est de changer la couleur du texte sur le site.<\/p>\n
Pour modifier la couleur du texte de n’importe quel \u00e9l\u00e9ment du site, s\u00e9lectionnez-le, choisissez l’option Typographie et cliquez sur le param\u00e8tre de couleur. CSS Hero vous offre un s\u00e9lecteur de couleurs simple que vous pouvez utiliser pour changer rapidement la couleur.<\/p>\n
Personnaliser les bordures<\/h4>\n
Le th\u00e8me Ignite a une bordure orange en haut du site. C’est aussi facile \u00e0 changer que n’importe quelle couleur de texte avec CSS Hero<\/a>.<\/p>\n
Je peux s\u00e9lectionner l’en-t\u00eate, choisir l’option Bordures, puis s\u00e9lectionner l’ic\u00f4ne de bordure sup\u00e9rieure pour modifier uniquement la bordure sup\u00e9rieure. La couleur peut \u00eatre modifi\u00e9e \u00e0 l’aide de la m\u00eame option de s\u00e9lecteur de couleurs disponible pour modifier les couleurs du texte.<\/p>\n
Ajouter une image de fond<\/h4>\n
Vous pouvez modifier la couleur d’arri\u00e8re-plan de n’importe quel \u00e9l\u00e9ment ou appliquer une image d’arri\u00e8re-plan.<\/p>\n
Si vous voulez un aspect textur\u00e9, vous pouvez ajouter une petite image d’arri\u00e8re-plan et la r\u00e9p\u00e9ter verticalement et horizontalement. Vous pouvez \u00e9galement cr\u00e9er une image d’arri\u00e8re-plan statique qui remplit tout l’arri\u00e8re-plan du site. CSS Hero vous donne tous les contr\u00f4les dont vous avez besoin pour ajouter une image d’arri\u00e8re-plan avec n’importe quel type de positionnement et de taille que vous souhaitez.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nAlors que vous pouvez t\u00e9l\u00e9charger n’importe quelle image que vous voulez, CSS Hero a \u00e9galement une int\u00e9gration avec Unsplash<\/a> qui vous donne acc\u00e8s \u00e0 des milliers de photos gratuites en haute r\u00e9solution, ce qui est extr\u00eamement pratique.<\/p>\n
Ajuster l’espacement<\/h4>\n
La derni\u00e8re fonctionnalit\u00e9 de personnalisation de CSS Hero que je couvrirai sont les propri\u00e9t\u00e9s d’espacement.<\/p>\n
La marge est utilis\u00e9e pour cr\u00e9er un espace entre les \u00e9l\u00e9ments. Par exemple, je peux r\u00e9duire l’espace au-dessus de ce bouton et augmenter l’espace en dessous en utilisant la propri\u00e9t\u00e9 CSS margin.<\/p>\n
D’autre part, le rembourrage est utilis\u00e9 pour cr\u00e9er de l’espace \u00e0 l’int\u00e9rieur des \u00e9l\u00e9ments. Je peux augmenter le rembourrage sur les quatre c\u00f4t\u00e9s du bouton pour le rendre plus grand et plus facile \u00e0 cliquer.<\/p>\n
Et vous savez ce qui est encore plus impressionnant ?<\/p>\n
Ces modifications sont automatiquement appliqu\u00e9es \u00e0 tous les boutons \u00ab\u00a0En savoir plus\u00a0\u00bb du site, je n’ai donc besoin de faire cet ajustement qu’une seule fois.<\/p>\n
Options additionelles<\/h2>\n
CSS Hero a \u00e9galement des sections pour modifier le rayon de bordure (coins arrondis) et les styles de liste, mais vous ne les utiliserez pas aussi souvent.<\/p>\n
Il existe \u00e9galement une section Extras qui comprend quelques propri\u00e9t\u00e9s al\u00e9atoires telles que l’opacit\u00e9, les ombres de la bo\u00eete et la visibilit\u00e9 (masquer n’importe quel \u00e9l\u00e9ment) pour n’en nommer que quelques-unes.<\/p>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nFaut-il utiliser CSS Hero ?<\/h2>\n
Si vous n’avez qu’une poign\u00e9e de r\u00e9glages \u00e0 faire, il peut \u00eatre difficile de justifier l’achat d’un nouveau plugin. Par exemple, si vous souhaitez simplement modifier la taille du titre de votre site, vous pouvez probablement envoyer un e-mail au d\u00e9veloppeur de votre th\u00e8me pour lui demander un extrait CSS.<\/p>\n
Cela dit, CSS Hero ne co\u00fbte que 29 $, ce qui le rend tr\u00e8s abordable. L’alternative est de comprendre les choses par vous-m\u00eame, ce qui peut prendre des heures. Vous ne pourrez pas embaucher un d\u00e9veloppeur pour travailler sur votre site pour 29\u00a0$.<\/p>\n
Cliquez ici pour d\u00e9couvrir CSS Hero maintenant<\/a><\/p>\n
Si vous souhaitez fr\u00e9quemment apporter des personnalisations \u00e0 votre site, je pense qu’une licence multi-sites est bien justifi\u00e9e pour vous permettre de toujours apporter les modifications souhait\u00e9es \u00e0 la conception de votre site.<\/p>\n
En conclusion, CSS Hero<\/a> est un excellent outil de personnalisation de site et remplit un cr\u00e9neau important. Pour des personnalisations drastiques du site, vous souhaiterez s\u00e9lectionner un nouveau th\u00e8me<\/a> ou apprendre \u00e0 utiliser un g\u00e9n\u00e9rateur de page<\/a>.<\/p>\n
Cliquez ici pour d\u00e9couvrir d’autres fa\u00e7ons de personnaliser votre site<\/a>.<\/p>\n