Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer un site web pour les restaurateurs avec WordPress et Genesis

Mettre en forme les widgets

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous avez la possibilité de mettre en forme le contenu des widgets Texte. Suivez le guide pour en savoir plus.
05:55

Transcription

Dans cette séquence, comme promis précédemment, nous allons voir la mise en forme des widgets texte. Naturellement, cette mise en forme va se faire en mode HTML/CSS. Retournons dans la personnalisation, dans les widgets, et je vais prendre l'emplacement Front Page 1. Je descends un petit peu pour bien visualiser. Donc ici, nous avons notre contenu, et je voudrais mettre en évidence les deux mots « trois nouveaux ». Pour les mettre en gras, nous allons utiliser l'élément HTML strong. Donc, juste devant, j'ouvre ma balise strong, et derrière, je ferme la balise strong. Et voilà, nous visualisons tout de suite le résultat. Si vous souhaitez mettre, par exemple, végétariens en italique, c'est l'élément HTML em. Balise d'ouverture, balise de fermeture. Et un petit point d'exclamation pour la beauté du geste. J'enregistre les modifications. Et je prévisualise en rafraîchissant. Et donc voici notre affichage dans notre site publié. Je reviens dans l'interface d'administration. Nous allons maintenant pouvoir effectuer d'autres mises en forme. Je vais me mettre dans l'emplacement Front Page 2. Et pour ce premier Menu du marché. En fin de compte, ce que je voudrais faire ici, c'est tout simplement aller à la ligne, entre entrée 1, entrée 2, plat 1, plat 2, etc. Pour ce faire, nous allons pouvoir utiliser l'élément HTML br qui permet justement d'aller à la ligne. Même chose ici, br, notre break le br, et même chose avant le dessert. Et voilà, nous sommes bien allés systématiquement à la ligne. Donc, naturellement, ça va être exactement, strictement, rigoureusement la même chose pour les deux autres widgets. Alors, je vais le faire par exemple, avec une autre petite modification, pour le Menu nature, le troisième widget. Donc, à nouveau, je vais mettre les breaks br. Et pour aller plus vite, je vais pouvoir faire des copier-coller, sans souci. Pas de souci. Alors naturellement, vous pouvez mettre du gras, de l'italique ou tout autre élément, comme vous le souhaitez. Maintenant, qu'est-ce que je vais pouvoir faire, je vais vouloir mettre une ligne de séparation qui va me permettre de séparer les entrées... ... des plats... ... du fromage et du dessert. Pour ce faire, nous allons utiliser l'élément HTML hr qui permet d'insérer une ligne horizontale. Donc, pour ce faire, juste avant le plat, ici le plat numéro un, j'insère une ligne horizontale. Et vous la voyez tout de suite ici. Même chose juste avant le fromage, hr pour horizontal rule. Et même chose avant les desserts. Et voilà. Ainsi, on a une présentation qui est nettement plus sympathique. Je peux revenir à la liste de mes emplacements. J'enregistre et je publie. Je reviens sur le site publié. Je réactualise pour voir le résultat. Et voilà, nous sommes bien allés à la ligne, ici. Et aussi ici, et en plus on a mis des lignes horizontales. Maintenant, nous allons apporter d'autres modifications à ce niveau-là. Donc, l'emplacement 3. Je descends. Vous voyez que par défaut le texte est centré, que ce soit ici ou que ce soit là. Eh bien, nous allons pouvoir modifier ceci grâce là encore à du HTML et du CSS. Deuxième chose que je vais vouloir faire, c'est par exemple aller à la ligne entre cette première phrase et cette deuxième phrase. À partir du moment où vous allez appuyer sur la touche entrée dans le texte de votre widget, vous allez pouvoir demander à créer automatiquement des paragraphes en cochant cette option. Donc, juste ici, je vais à la ligne avec la touche entrée. Et voilà, vous voyez bien que nous sommes allés à la ligne. Maintenant, je vais vouloir modifier mon alignement de paragraphes. Je vais le faire pour le premier. J'utilise l'élément HTML p paragraphe. Je vais mettre du style CSS. Et ici c'est la propriété text-align... ... que je mets à left. Et à la fin de ce premier paragraphe, je peux fermer ma balise. Donc, seul ce premier paragraphe a été modifié, puisqu'il est bien en alignement gauche. Celui-ci n'a pas été modifié. Donc, il reste en alignement centré, comme c'était le cas précédemment. Et donc, si jamais vous voulez mettre un alignement droit, c'est tout simplement right. et si jamais vous voulez mettre de l'alignement justifié, c'est justify. Là encore, j'enregistre. Je peux fermer mon panneau de configuration. Je reviens dans mon site publié, et je rafraîchis. Et voilà, nous avons bien cette mise en forme pour ce paragraphe. Donc voilà, comment, avec un petit peu de code HTML et CSS vous allez pouvoir personnaliser l'affichage du texte dans les widgets texte.

Créer un site web pour les restaurateurs avec WordPress et Genesis

Créez et personnalisez votre site web avec WordPress et le framework Genesis. Profitez ainsi de fonctionnalités adaptées aux besoins spécifiques de votre métier.

1h30 (27 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
CMS
Spécial abonnés
Date de parution :3 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !