Introduction
Utilisation de Sitely
Éléments
Comment faire
Deux tutoriels vidéo sont disponibles pour ce sujet Cliquez ici pour les visionner
Le texte est l'un des principaux éléments de la mise en page d'une page Web. Non seulement le texte raconte votre histoire, mais il aide également à créer une hiérarchie visuelle et pour les moteurs de recherche sur vos pages. Dans Sitely, la création de texte est simple et directe. Vous ajoutez simplement un cadre de texte à votre page et commencez à taper comme vous le feriez dans une application de traitement de texte familière. Vous pouvez styliser votre texte de la manière que vous souhaitez, tout cela depuis le confort du panneau de style de Sitely. Lorsque vous ajoutez pour la première fois un cadre de texte (ou Boîte de texte comme on l'appelle dans Sitely), vous verrez un cadre par défaut sur la page qui ressemble à ceci ::
Le cadre lui-même est en fait placé à la taille optimale pour le contenu textuel sur une page. Sur une grille de page à 12 colonnes, le cadre de texte par défaut s'étendra sur 6 colonnes. Bien que vous puissiez ajuster la largeur et la hauteur du cadre de texte à la taille que vous souhaitez, le texte de corps ou de paragraphe est mieux présenté sur des étendues de 6 à 8 colonnes afin de faciliter la lecture.
Lorsque le cadre de texte est placé pour la première fois sur le canevas, il contient du texte simulé, ce qui est idéal lorsque vous commencez à concevoir votre page. Pour remplacer le texte, il suffit de cliquer à l'intérieur du cadre et de commencer à taper. Le texte simulé disparaîtra et sera remplacé par votre contenu. Si vous n'avez pas encore votre contenu textuel, vous pouvez choisir de remplir le cadre de texte avec du vrai texte de remplissage que vous pouvez styliser pour mieux représenter l'apparence que vous souhaitez pour votre texte sur la page. Pour ce faire, sélectionnez le cadre et cliquez sur le bouton 'Insérer Lorem Ipsum...' dans le panneau de style.
Dans l'édition et le design graphique, Lorem ipsum est un texte de remplissage couramment utilisé pour démontrer la forme visuelle d'un document ou d'une police de caractères sans s'appuyer sur un contenu significatif.
Tout le contenu textuel, lorsqu'il est ajouté pour la première fois à une page dans Sitely, sera stylisé comme du texte de 'Corps' par défaut. C'est le style de texte le plus courant utilisé dans les pages Web, il est donc tout à fait logique de l'utiliser par défaut. Sitely est livré avec une gamme de styles prédéfinis qui peuvent être vus dans la section des styles du panneau de style. Les styles de texte sont en fait une forme d'outil de 'productivité' qui aide à maintenir la cohérence, et c'est une caractéristique commune de la plupart des applications d'édition de texte, telles que les logiciels de traitement de texte. Sitely a adopté cette méthode familière pour le style du texte afin que vous puissiez vous concentrer sur la mise en page de votre contenu de manière visuelle, plutôt que de devoir vous fier au code CSS pour créer l'apparence souhaitée de votre texte. En fait, les styles sont si importants qu'il vaut la peine de passer un peu de temps à les explorer plus en détail.
Les styles sont un peu comme des post-it invisibles qui ne peuvent être lus que par les navigateurs Web. Lorsqu'un navigateur voit une de ces notes, il sait que le texte doit être affiché dans une police particulière, à une taille particulière et dans une couleur spécifique. Les notes contiennent également d'autres informations, telles que l'alignement du texte, la hauteur de ligne, les attributs d'espacement et, tout aussi important, la manière dont les moteurs de recherche doivent traiter ce contenu textuel. C'est beaucoup d'informations à appliquer à de nombreuses boîtes de texte différentes dans un site Web. Par conséquent, l'utilisation de 'styles' est un moyen très efficace de fournir ces détails de manière cohérente sur toutes vos pages Web. De plus, si vous décidez de changer un aspect d'un style particulier - peut-être sa couleur ou sa police - vous pouvez simplement changer le style et il sera appliqué sur tout votre site Web partout où ce style a été utilisé.
Modifier un style ne pourrait pas être plus simple. Il suffit de sélectionner un morceau de texte stylisé avec votre style existant, de changer la mise en forme de ce texte dans le panneau de style, puis de mettre à jour le style. Par exemple, pour changer le style de votre texte de corps, sélectionnez une boîte de texte stylisée comme texte de corps et effectuez vos modifications sur le canevas. Appliquez une police différente, changez la taille du texte, la couleur ou tout autre attribut. Lorsque vous effectuez ces modifications, vous verrez qu'un astérisque apparaît à côté du nom du style dans le panneau de style.
C'est la manière de Sitely de vous faire savoir que vous avez apporté des modifications au style, et vous donne la possibilité de mettre à jour votre style en cliquant sur le bouton 'Appliquer les modifications', ou de rejeter vos modifications et de revenir au style d'origine en cliquant sur le bouton 'Rétablir le style'. L'application des modifications changera instantanément tous les éléments de texte du corps dans vos pages pour refléter les modifications de votre nouveau style. Si vous ignorez cette option, vos modifications ne s'appliqueront qu'au texte sur lequel vous travailliez - tout le reste de votre site restera inchangé.
Parfois, vous voudrez peut-être créer un style entièrement nouveau, plutôt que de modifier un style existant. Vous pouvez ajouter un nouveau style en cliquant sur l'icône '+' en haut du menu déroulant des styles. Cela créera un nouveau style en bas de la liste que vous pourrez nommer comme vous le souhaitez. Par défaut, le nouveau style aura tous les attributs de votre style 'corps' standard. Pour définir les nouveaux attributs, créez simplement une boîte de texte et ajoutez du texte. Appliquez votre nouveau style à la boîte. Ensuite, à l'aide du panneau de style, effectuez toutes les modifications d'attributs nécessaires pour votre nouveau style. Lorsque vous voyez l'astérisque à côté du nom de votre nouveau style dans le panneau de style, appliquez les modifications. Votre nouveau style est maintenant prêt à l'emploi et peut être appliqué n'importe où dans votre site Web.
Il est important de noter que les styles sont appliqués à des cadres de texte entiers. Donc, si vous avez une situation où vous pourriez avoir un mélange d'attribu ts de texte dans un seul cadre de texte, par exemple, où vous avez une boîte de texte stylisée comme texte de corps et que vous créez ensuite sélectivement des sous-titres en gras dans une taille de police plus grande dans cette même boîte de texte, toute modification ultérieure que vous apportez au style de corps associé à ce cadre de texte changera vos titres au style de l'ensemble du cadre. Pour cette raison, il est souvent préférable de garder les titres et les sous-titres comme des cadres de texte séparés sur vos pages et de leur attribuer des styles différents.
Ayant maintenant acquis une meilleure compréhension des 'Styles', nous pouvons maintenant passer en revue tous les différents attributs qui peuvent être appliqués au contenu textuel. Beaucoup d'entre eux vous seront déjà familiers si vous avez déjà utilisé une application de traitement de texte, mais voici un petit rappel.
La première section du panneau de style est la section Police.
Ici, vous pouvez sélectionner une police dans la liste déroulante des polices disponibles sur votre système. Vous pouvez également choisir parmi une liste d'attributs de police, tels que normal, léger ou gras. La liste des attributs disponibles variera en fonction de la police que vous choisissez. Certains des attributs les plus courants sont également affichés sous forme d'icônes, comme Gras, Italique et Souligné. Certaines de ces options peuvent être grisées si la police que vous avez choisie ne prend pas en charge certains attributs. Ensuite, vous pouvez sélectionner une taille pour votre texte ainsi qu'introduire un certain espacement. C'est l'espace entre les lettres individuelles. Certaines polices ont un espacement très serré, ce qui les rend parfois difficiles à lire, en particulier à de petites tailles. L'option d'espacement vous permet d'ajouter un espace supplémentaire entre les lettres.
Vous avez peut-être aussi remarqué l'icône de la roue dentée à côté des icônes d'attributs. C'est ici que vous pouvez définir des options avancées telles que la capitalisation, l'indice et l'exposant, la couleur de fond du texte ou ajouter un effet d'ombre à votre texte. Enfin, vous avez un puits de couleur où vous pouvez sélectionner une couleur pour votre texte. Cliquer sur le puits de couleur ouvrira le panneau de couleurs de Sitely afin que vous puissiez sélectionner une couleur de la palette de votre site Web.
Vient ensuite la section Paragraphe.
C'est ici que vous pouvez choisir des attributs qui sont appliqués à des paragraphes entiers. Les premières options sont l'alignement du texte. Celles-ci vous permettent d'aligner le texte à gauche, au centre, à droite ou entièrement justifié. L'icône double flèche est principalement utilisée lors de la saisie de texte dans des langues qui se lisent de droite à gauche au lieu de gauche à droite. Elle peut également être utilisée comme un simple interrupteur pour passer du texte aligné à gauche au texte aligné à droite.
L'option suivante est la hauteur de ligne. Cela détermine l'espace entre les lignes de texte. En conception Web, il est préférable de la régler entre 1,2 et 1,4. Cependant, l'espacement final dépendra de la police et de la taille du texte que vous créez. Il est souvent préférable de régler la hauteur de ligne visuellement pour qu'elle soit facile à lire.
L'option 'première ligne' vous permet de définir un retrait de première ligne pour chaque paragraphe. Bien que ce soit une caractéristique commune dans l'édition de livres pour aider à séparer les paragraphes de texte, elle peut également être utilisée, moins fréquemment, dans les pages de sites Web. Cela peut être particulièrement utile si vous définissez une grande quantité de texte où une séparation supplémentaire des paragraphes peut être importante. Les options 'espace avant' et 'espace après' servent à définir l'espacement des lignes avant un paragraphe et après un paragraphe. C'est la manière la plus courante de séparer les paragraphes dans les pages Web, mais en fin de compte, c'est une question de choix personnel.
L'option finale est la balise HTML. C'est une sorte d'identifiant que les moteurs de recherche utilisent pour déterminer l'importance du contenu textuel sur votre page. Bien que cela corresponde souvent à la hiérarchie visuelle créée par les titres, les sous-titres et le corps du texte, ce n'est pas obligatoire. Dans le monde des sites Web, vous pouvez désigner le texte comme du texte de titre (indiqué par H1 à H6), ou il peut être indiqué par la lettre 'p', ce qui signifie texte de paragraphe. En termes généraux, H1 est l'élément le plus important sur la page pour que les moteurs de recherche établissent de quoi parle la page. Chaque niveau de titre suivant (H2 - H6) diminue en importance. Le texte de paragraphe est le contenu principal de la page en ce qui concerne les moteurs de recherche. C'est le texte qu'ils indexeront très probablement pour établir la pertinence de votre page Web par rapport aux requêtes de recherche. En règle générale, vous ne devriez avoir qu'une seule balise H1 sur une page, tandis que vous pouvez avoir autant d'autres que vous le souhaitez.
Suite aux réglages plus généraux du paragraphe, nous avons quelques options supplémentaires sous forme de cases à cocher. Celles-ci sont utilisées pour appliquer une mise en forme spéciale aux paragraphes.
Cette option met en retrait un paragraphe à gauche et à droite. Vous pouvez définir le retrait/la marge avec les options qui apparaissent lorsque la case à cocher des citations est sélectionnée.
Cette option crée des effets spéciaux sur le texte sélectionné, tels que le remplissage avec une image, un dégradé ou un motif. Voici un exemple de l'option Découper au texte dans laquelle le texte a été rempli avec une image.
EXEMPLE DE TEXTE
Dans l'exemple ci-dessous, l'effet de détourage a été appliqué. L'effet de détourage est essentiellement une option qui permet de mélanger une couleur d'arrière-plan avec une couleur de texte de premier plan pour créer différents effets. Cette option est vraiment destinée à ceux qui ont une formation en graphisme et qui comprennent mieux les 'modes de fusion'. Pour la plupart des utilisateurs, il serait tout aussi simple de placer du texte sur une boîte colorée et de styliser chaque élément individuellement.
EXEMPLE DE TEXTE
Cette option transforme votre cadre de texte en une boîte défilable afin qu'il puisse contenir plus de texte que ce qui peut être vu sur la page. Lorsqu'il est visualisé dans un navigateur, les utilisateurs pourront faire défiler vers le haut ou vers le bas pour révéler le texte. Ce cadre de texte est un exemple de cette fonctionnalité en action. Faites défiler cette boîte pour révéler le texte 'Lorem Ipsum' supplémentaire ci-dessous.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices dapibus. Phasellus eu ultrices turpis. Vivamus non mollis lacus, non ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet scelerisque ipsum. Morbi nulla dolor, adipiscing non convallis rhoncus, ornare sed risus.
Sed adipiscing eget nibh at convallis. Curabitur eu gravida mauris, sit amet dictum metus. Sed a elementum arcu. Proin consectetur eros vitae odio sagittis, vitae dignissim justo sollicitudin. Phasellus non varius lacus, aliquet feugiat mauris. Phasellus fringilla commodo sem vel pellentesque. Ut porttitor tincidunt risus a pharetra. Cras nec vestibulum massa. Mauris sagittis leo a libero convallis accumsan. Aenean ut mollis ipsum. Donec aliquam egestas convallis. Fusce dapibus, neque sed mattis consectetur, erat nibh vulputate sapien, ac accumsan arcu sem quis nibh. Etiam et mi sed mauris commodo tristique. Proin mollis elementum purus, a porta quam vehicula et.
Les options finales sont 'Insérer un champ intelligent...' et 'Insérer une icône...'. L'option de champ intelligent vous permettra d'ajouter un champ qui calcule à partir d'une formule, ou affiche des informations générées au sein du site Web. Les nombreuses options sont présentées ci-dessous, mais nous avons une section entière dans notre documentation qui explique ces options plus en détail.
L'option 'Insérer une icône...' vous permet d'insérer une icône dans votre texte. En cliquant sur cette option, un panneau contextuel s'affichera où vous pourrez sélectionner des icônes à inclure. Une fois placées dans votre boîte de texte, vous pouvez utiliser d'autres options de style pour leur donner de la couleur et les agrandir. Voici à quoi ressemble le panneau - il suffit de cliquer sur une icône pour l'ajouter dans votre boîte de texte.
Voici quelques exemples
Conseil pratique : Si vous souhaitez créer des icônes de type bouton, ajoutez simplement un bouton à votre canevas. Stylez-le et dimensionnez-le comme vous le souhaitez. Ensuite, sélectionnez l'étiquette du bouton et utilisez l'option Insérer une icône pour ajouter une icône au bouton. Vous pouvez redimensionner l'icône en ajustant la taille de la police du bouton dans l'inspecteur de style. Voici un exemple d'un bouton créé de cette manière, ainsi que les paramètres du bouton.
Lorsque vous vous lancez dans un nouveau projet de site Web, il est préférable de configurer vos styles de texte dès le départ. Cela peut vous faire gagner beaucoup de temps lorsque vous commencez à travailler sur votre projet. Pour vous aider à configurer vos styles, nous avons créé un modèle qui facilite la modification du style de texte par défaut pour ceux de votre préférence. En bonus, le même modèle peut être utilisé pour configurer une palette de couleurs personnalisée pour vos projets. Veuillez noter que l'utilisation du modèle ne modifie aucun des styles ou couleurs par défaut de Sitely - toute modification que vous effectuez à l'aide du modèle ne sera appliquée qu'au document sur lequel vous travaillez. Tout nouveau projet que vous commencerez aura tous les paramètres par défaut de Sitely. Cliquez sur le lien ci-dessous pour télécharger le modèle - les instructions complètes sont incluses dans le modèle.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
