Modèle

Commencer

Merci d'avoir acheté Beacon ! Ce guide couvre l'utilisation de base du modèle ainsi qu'un aperçu de la structure du modèle. Si vous avez besoin d'aide, n'hésitez pas à nous contacter via La Page de Support des Modèles.

Modèle De Page Vierge

Dans le répertoire "Template", vous trouverez une page intitulée "Blank Starter Template". Ce modèle comprend une barre de navigation et un pied de page - le point de départ idéal pour vos pages.

1. Dupliquez le modèle de page de démarrage vierge

Remarque : assurez-vous de changer le dossier parent à l'emplacement souhaité.

2. Copiez et collez des blocs sur la page nouvellement créée :

Copiez les sections de n'importe quelle page, puis collez-les dans le corps de votre page nouvellement créée. Vous pouvez également copier des sections de n'importe quelle page répertoriée sur la page de destination principale.

Guide de style

La page Guide de Style montre l'affichage de tous les éléments de base trouvés dans Spark et est un bon endroit pour commencer à vous familiariser avec le modèle.

Vous trouverez également une section démontrant comment utiliser correctement les classes utilitaires associées.

Modification Des Styles de Typographie

Définition des styles de titre

Au lieu d'utiliser des classes, vous devez cliquer sur l'en-tête puis dans la liste déroulante Sélecteur où vous saisiriez le nom de la classe, sélectionnez « Tous les en-têtes H1 », puis effectuez votre modification. Il en va de même pour tous les éléments de titre de base. Cliquez sur l'élément, choisissez "Toutes les rubriques 5", puis toutes les modifications que vous y apporterez seront reflétées sur l'ensemble du site.

Définition des styles de corps de texte et de paragraphe

Suivez la même procédure pour le corps du texte et les paragraphes - qui sont spécifiés sur l'élément Body. Sélectionnez l'élément de corps, et dans la liste déroulante du sélecteur, choisissez "Corps (toutes les pages)" et modifiez les paramètres de typographie pour cet élément. Ces styles se retrouvent ensuite dans les paragraphes et autres éléments de texte génériques du site.

Conteneurs

Beacon utilise 3 tailles de conteneurs pour loger le contenu dans la plupart des sections. Pour votre commodité, vous pouvez utiliser ces classes pour contenir facilement du contenu dans vos sections :

  1. Container : la classe de conteneur de taille standard qui limite le contenu à 512 pixels
  2. Container Small: Un conteneur de taille réduite qui limite le contenu à 400px
  3. Container Large: Un conteneur de tailles augmentées qui limite le contenu à 624px

De plus, utilisez la classe Align Center pour aligner le conteneur au centre de son élément parent.

Fenêtre de Recherche

Si vous utilisez l'une des Barres de Navigation dotées d'une fonction de recherche, vous devrez vous assurer que le symbole de recherche modale est placé comme dernier élément à l'intérieur du corps de la page.

Le symbole de la fenêtre de recherche.

Bouton Retour en haut

Ensure that the Back To Top Button symbol is the first element inside the body.

Le symbole du bouton Retour en haut.

Ensuite, assurez-vous que la page a une interaction Page défilée avec l'interaction Masquer le bouton Retour en haut s'active lorsque la page défile vers le haut, et l'interaction Afficher le bouton Retour en haut s'active lorsque la page défile vers le bas.

L'interaction "Page défilée"

Couleurs des icônes

Malheureusement, Webflow n'autorise pas la coloration dynamique des icônes SVG. Pour changer la couleur de l'icône par défaut :

  1. Téléchargez le fichier SVG de l'icône
  2. Ouvrez le fichier SVG dans un éditeur de texte
  3. Changez la valeur hexadécimale à la couleur souhaitée
  4. Enregistrez et téléchargez à nouveau l'icône.

Code personnalisé

Dans les paramètres du projet, dans l'onglet Code personnalisé, vous remarquerez qu'un code de style a été ajouté à l'en-tête de chaque page :

Code personnalisé pour lisser les polices

Ce code vise à garantir que le rendu du texte est fluide et cohérent sur tous les navigateurs. Il ne nécessite aucune action de votre part.

Plus d'information

Pour plus d'informations, veuillez consulter la documentation Webflow ou contactez-nous via la page de support des modèles.