Modifier un template Framer

Installer un template depuis la Marketplace Framer

Tout part de la Framer Marketplace. Tu filtres les templates gratuits ou payants, tu prévisualises celui qui te plaît, puis tu cliques sur Use for free. Framer te demande dans quel workspace et dans quel dossier le copier, tu confirmes, et le fichier est dans ton compte, modifiable sans limite. Le template servant d’exemple ici s’appelle Viper : un site d’agence ou de freelance, très animé, avec une partie projets et un blog.

Faire l’état des lieux avant de toucher au template

Mal modifier un template, c’est casser des liens internes, rendre le design incohérent et perdre du temps à chercher des éléments invisibles. Avant de changer la moindre couleur, tu lis le fichier. Le créateur laisse souvent une page d’instructions : tu la lis, puis tu la supprimes.

Les breakpoints

Viper en compte quatre, alors que le standard est de trois. Dans les layers, le XL porte la mention primary : c’est le point de référence, calé ici à 1440 pixels, et c’est lui qui répercute tes modifications sur les autres. Les breakpoints inférieurs, eux, restent indépendants. Tu commences donc toujours par le point de référence.

Les pages

Un template mélange deux familles de pages. Les statiques : accueil, à propos, contact, 404. Et les dynamiques, reliées à des collections CMS, reconnaissables à la petite flèche qui les précède. Ici, Work et Blog contiennent chacune une page de détail imbriquée : c’est dans Work Detail et Blog Detail que se modifie la mise en page de tes projets et de tes articles, item par item.

Les assets

Dans les layers, les couleurs ne sont pas décoratives : elles distinguent les frames et les textes que tu modifies directement des composants, qui s’ouvrent dans un espace isolé. Trois choses sont à repérer avant de commencer :

• Les composants : navigation bar, preloader, header, footer, cards, boutons, rangés par sous-dossiers et parfois imbriqués les uns dans les autres.
• Les styles de texte : H1, H2, H3 et suivants, réapplicables en un clic sur n’importe quel bloc et éditables breakpoint par breakpoint.
• Les styles de couleur et de lien : ce sont eux qui garantissent qu’un même orange se retrouve partout au lieu de trois oranges différents.

Changer toutes les couleurs du site en une manipulation

C’est là que l’état des lieux se rentabilise. Les couleurs sont enregistrées en styles : du blanc, du noir et un orange décliné en opacités (80, 60, 20 et 10 %), plus deux variantes plus claires.

1. Choisis ta teinte. Sur Coolors par exemple, et récupère son hexadécimal.
2. Colle l’hexadécimal dans le style orange. Tous les éléments qui y sont connectés basculent d’un coup : boutons, cartes, bandeau du haut, sur l’ensemble des pages.
3. Reprends chaque déclinaison avec la même couleur, en conservant les opacités.
4. Renomme les styles au passage. Un style appelé orange qui affiche du bleu, c’est le début du désordre.

Remplacer le logo, les images et les textes

Le logo ne se sélectionne pas depuis la page : il vit dans le composant de navigation. Double clic pour entrer dedans, puis choose image. Pour le redimensionner sans déformer la mise en page, déverrouille le ratio, réduis, reverrouille, puis pose des valeurs rondes, 150 par 39 par exemple.

Au-dessus, l’overlay noir se règle avec sa propriété de masque en dégradé, pour faire ressortir le texte sans assombrir toute la photo. Et si un titre paraît étrange, vérifie s’il ne porte pas un mode de fusion difference : en le retirant, tu récupères un texte plein, plus simple à recolorer.

Modifier la navigation

Les liens du menu résistent au double clic tant que tu restes au niveau de la navigation. Il faut descendre dans le composant imbriqué qui isole les liens, où chaque item possède ses variantes d’état actif et inactif selon la page en cours. C’est là, et seulement là, que Home devient Accueil et Work devient Projets.

Pense aussi à supprimer le bouton Use for free que les templates gratuits laissent traîner : il est présent sur toutes les pages, pas uniquement sur l’accueil.

Conclusion

Installer, analyser, puis modifier : l’ordre compte plus que la vitesse. Les dix minutes passées à repérer le breakpoint de référence, les composants et les styles enregistrés te rendent chaque modification prévisible, et te permettent de changer la couleur d’un site entier en une manipulation au lieu de trente.