Newleaf est un trousse IU Medium Rare, découvrez plus de 30 modèles Webflow ici.

Commencer

Un guide pour se familiariser avec Newleaf.

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 vierge

Remarque : Assurez-vous de remplacer le dossier parent par l'emplacement souhaité.

2. Copiez et collez les 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 Newleaf et est un bon endroit pour commencer à vous familiariser avec le modèle.

Vous trouverez également une section 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 » (en Anglaise: All H1 Headings), 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" (en Anglaise: All H5 Headings), puis toutes les modifications que vous y apporterez seront reflétées sur l'ensemble du site.

Réglage corps du texte et les styles de paragraphes

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)" (en Angliase: Body All 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

Newleaf 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 à 469 pixels
  2. Container Large: Un conteneur de tailles augmentées qui limite le contenu à 792px
  3. Container Small: Un conteneur de taille réduite qui limite le contenu à 364px

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

La désactivation de l'animation de chargement

Si vous préférez ne pas utiliser l'animation de chargement :

  1. Supprimez le symbole "Loader" des éléments de la page.
  2. Supprimez l'interaction "Aniimation on Page Load" du panneau Interactions dans la barre latérale de droite.

Barre de navigation Listes déroulantes

Pour les éléments déroulants contenus dans la barre de navigation, assurez-vous que l'élément d'écran déroulant est inclus en tant qu'enfant de l'élément "Nav Dropdown". Ceci est nécessaire pour afficher correctement l'arrière-plan sombre lorsque la liste déroulante s'ouvre.

La structure correcte pour une liste déroulante de navigation

Fenêtre de recherche

Si vous utilisez l'une des barres de navigation dotées d'une fonction de recherche, vous devez vous assurer que le symbole Search Modal est placé comme dernier élément dans le corps de la page.

Le symbole modal de recherche.

Bouton Retour en haut

Assurez-vous que le symbole du bouton Retour en haut est le premier élément à l'intérieur du corps.

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 avec le défilement de la page

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 pour 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 le lissage des 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'informations

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