# Créer votre propre mise en page

> Utilisez le Designer de Launchfolio pour organiser votre page en rangées et sections, y glisser votre contenu, ajouter des animations et publier un design.

https://www.launchfolio.live/docs/fr/designer · 2026-10-29

La mise en page simple place vos sections dans un ordre fixe. Le Designer vous permet d’organiser la page vous-même, pièce par pièce.

## Vérifier les téléphones et l’en-tête du site

Sur téléphone, les sections s’empilent. **Hauteur minimale sur téléphone** règle leur hauteur indépendamment du réglage pour ordinateur ; 0 laisse le texte prendre la place dont il a besoin. Les fonds photo et vidéo gardent assez de place pour montrer l’image.

Quand rien n’est sélectionné, ouvrez les paramètres de page pour modifier **En-tête du site**. Activez **Afficher l’en-tête sur les designs personnalisés** pour ajouter un nom et des liens vers vos rangées. Renommez, masquez ou réordonnez ces liens.

Dans un aperçu, **Mise en page en ligne** montre votre contenu en brouillon dans la mise en page que les visiteurs voient actuellement. **Design en brouillon** montre votre design en brouillon. Appuyez sur **Publier ce design** dans le Designer pour mettre ce design en ligne.

## Mise en page simple ou votre propre design

|  | Mise en page simple | Votre propre design |
| --- | --- | --- |
| Où | L’éditeur | Le Designer, à `/your-name/design` |
| Ordre | Fixe : profil, expérience, formation, vos sections, vidéos | Celui que vous voulez, en rangées de 4 sections côte à côte au maximum |
| Enregistrement | Automatique | Appuyez sur **Enregistrer**. Votre site en ligne ne change que lorsque vous publiez |
| Contenu | Rédigé ici | Vient de l’éditeur, pour que textes et photos restent au même endroit |

> **Bon à savoir:** Le Designer fonctionne aussi sur téléphone et tablette. Voir [Sur téléphone ou tablette](https://www.launchfolio.live/docs/fr/designer#phone-or-tablet).

## Créer votre premier design

1. **Ouvrez le Designer** — Dans l’éditeur, trouvez **Concevez votre page** et appuyez sur **Ouvrir le Designer**. Ou appuyez sur **Designer pro** dans la barre latérale de votre tableau de bord.
2. **Commencez par une rangée** — Choisissez une forme de rangée, par exemple une section ou deux moitiés, ou une mise en page de départ toute prête.
3. **Glissez votre contenu** — Depuis la liste **Contenu**, faites glisser votre nom, votre photo ou une section sur une section de la page.
4. **Changez son apparence** — Cliquez sur une rangée, une section ou un bloc et modifiez-le dans **Propriétés**, de l’autre côté. Une rangée définit **Espace entre les sections**, **Espace au-dessus et en dessous** et **Espace sur les côtés**.
5. **Appuyez sur **Enregistrer**** — Ou ⌘/Ctrl + S. Votre site en ligne ne change pas quand vous enregistrez.

> **Les changements de design ne s’enregistrent pas tout seuls:** Appuyez sur **Enregistrer** avant de partir. Si vous essayez de partir avec des changements non enregistrés, nous vous demandons d’abord confirmation.

> **Envie de prendre de l’avance ?:** Appuyez sur **Modèles** dans la barre du haut pour utiliser la mise en page d’un modèle avec votre propre contenu, puis modifiez-la ici. Voir [Utiliser un modèle pour votre site](https://www.launchfolio.live/docs/fr/use-a-template).

Le bouton de menu (trois traits) en haut à gauche ouvre la barre latérale de votre tableau de bord par-dessus la page, pour aller n’importe où. Sur les grands écrans, vous voyez à côté **Tableau de bord** › le nom de votre site › **Designer pro**. Appuyez sur **Tableau de bord** ou sur le nom de votre site pour aller à votre tableau de bord, ou sur **Éditeur simple** dans la barre latérale pour aller à l’éditeur. Sur les petits écrans, **Retour au contenu** vous ramène à l’éditeur. Voir [Votre tableau de bord](https://www.launchfolio.live/docs/fr/your-sites#getting-around).

## Sur téléphone ou tablette

Sur un écran de moins de 1024 pixels de large, le Designer s’adapte à l’écran. Votre page le remplit et s’affiche à la taille de votre appareil.

1. **Ouvrez la liste du contenu** — Touchez la flèche sur le bord de l’écran. **Contenu** et **Calques** glissent par-dessus la page.
2. **Touchez un élément** — La liste se ferme et les sections de votre page se mettent à bouger. Touchez **Annuler** en haut si vous changez d’avis.
3. **Touchez une section** — L’élément apparaît dans cette section.
4. **Touchez n’importe quoi pour le modifier** — **Propriétés** s’ouvre tout seul. Ou touchez la flèche sur l’autre bord de l’écran.

- Il n’y a pas de glisser-déposer sur les petits écrans. Pour déplacer une section ou un bloc, sélectionnez-le et utilisez les flèches de sa petite barre d’outils.
- Quand la barre du haut manque de place, les boutons passent dans **Plus** (⋯) : d’abord la langue, puis **Modèles**, **Historique des versions**, **Aperçu** et **Enregistrer**, puis **Annuler** et **Rétablir**.
- Le bouton de publication indique simplement **Publier**. Sur les plus petits téléphones, ce bouton et **Retour au contenu** passent aussi dans **Plus**.
- Un point sur **Plus** signifie que vous avez des changements à enregistrer.

## Ce que vous pouvez placer

| Groupe | Blocs |
| --- | --- |
| À propos de vous | Nom, Accroche, Photo, À propos de vous, Lieu, E-mail et téléphone, Réseaux sociaux, Bouton CV |
| Sections | Expérience, Formation, Vidéos et médias, et chaque section que vous avez ajoutée |
| Extras | Formulaire de contact, Boutons du pied de page, Ligne de copyright, Espace vide, Ligne de séparation |

Chaque contenu ne peut être placé qu’une fois. Les espaces vides et les lignes de séparation peuvent être utilisés autant de fois que vous voulez.

Un bloc a trois onglets (Espace vide, Ligne de séparation et Ligne de copyright n’ont pas d’onglet **Contenu**). **Contenu** change ce qu’il dit, partout. **Style** et **Animation** changent seulement son apparence et ses mouvements dans ce design.

## Votre pied de page

Chaque design se termine par une rangée **Pied de page**. Elle reste toujours sous vos autres rangées, et vous la mettez en forme comme n’importe quelle rangée. Sélectionnez-la et appuyez sur **Retirer le pied de page** pour l’enlever de votre site, ou sur **Ajouter un pied de page** sous votre page pour en remettre un nouveau. La mention Launchfolio en dessous est verrouillée. Voir [Votre pied de page et la mention Launchfolio](https://www.launchfolio.live/docs/fr/footer-and-credits#designer-footer).

## Sens du texte et polices

Cliquez sur le bloc **Nom**, **Accroche** ou **À propos de vous** et ouvrez **Style**. Dans **Texte**, vous réglez **Taille**, **Graisse**, **Alignement** et **Couleur du texte**. Dans **Langues**, vous réglez le sens de lecture du texte et sa police pour chaque alphabet. Seul ce design change — les textes restent les mêmes dans **Contenu**.

| Dans Langues | Ce qu’il fait |
| --- | --- |
| **Sens** | **Auto** le déduit de la première lettre du texte : l’arabe et l’hébreu vont de droite à gauche, le reste de gauche à droite. Choisissez **Gauche à droite** ou **Droite à gauche** pour l’imposer. |
| **Police pour l’anglais, l’espagnol et le français** | La police des lettres latines : **Police du site (…)** (la police habituelle de votre site, avec son nom entre parenthèses), Geist, Inter, Poppins, Montserrat, Fraunces, Playfair Display, Lora ou Caveat. |
| **Police pour l’arabe** | La police des lettres arabes : **Police du site (…)**, IBM Plex Sans Arabic, Markazi Text, Readex Pro, Cairo, Tajawal, Noto Kufi Arabic, El Messiri, Amiri ou Noto Naskh Arabic. |

> **Astuce:** Chaque alphabet a sa propre police : un nom qui mêle lettres arabes et anglaises utilise donc les deux. Le texte d’un Bloc libre a les mêmes réglages dans ses propriétés.

## Animer votre page

Les rangées, sections et blocs peuvent apparaître quand les visiteurs les atteignent en faisant défiler, bouger en continu, réagir quand un visiteur les survole et bouger pendant le défilement de la page. Chacun a sa propre animation, enregistrée avec votre design.

> **Les visiteurs les voient avec l’option Animations:** Essayez toutes les animations dans le Designer et dans **Aperçu**. Les visiteurs les voient sur votre site en ligne une fois que votre site a l’option **Animations**, $10 par an, depuis la page **Options**. D’ici là, votre site en ligne affiche la même page sans mouvement, l’onglet **Animation** porte une couronne et **Enregistrer** vous le rappelle. Voir [Facturation et renouvellements](https://www.launchfolio.live/docs/fr/billing-and-renewals#what-you-pay).

1. **Sélectionnez une rangée, une section ou un bloc** — Ouvrez son onglet **Animation**.
2. **Choisissez ce qu’il fait** — Chaque vignette joue son effet en boucle, pour que vous voyiez la différence. Votre page le joue aussi.
3. **Ajustez-la** — Chaque changement la rejoue sur votre page. Appuyez sur **Jouer** pour voir tout ce qu’elle fait : l’entrée, le mouvement continu, l’effet au survol, puis le mouvement comme si la page défilait.
4. **Appuyez sur **Enregistrer**** — Puis appuyez sur **Aperçu** (l’œil) pour l’essayer sur toute la page. Les visiteurs la voient une fois que vous publiez.

| Groupe | Ce qu’il fait |
| --- | --- |
| **Apparition** | Comment il apparaît quand les visiteurs l’atteignent. Ses réglages sont dans le tableau suivant. |
| **Mouvement continu** | Une boucle douce une fois sur la page : **Flotter**, **Pulsation**, **Balancement**, **Rotation**, **Respiration** ou **Rebond**, avec une **Vitesse** et une **Amplitude** |
| **Au survol** | Quand un visiteur le survole avec une souris : **Soulever**, **Agrandir**, **Incliner**, **Lueur** ou **Éclaircir** |
| **Pendant le défilement** | Il bouge avec la page pendant que les visiteurs la font défiler : **Glissement**, **Disparition**, **Agrandir**, **Tourner** ou **Coulisser**, avec une **Amplitude**. Une section avec un fond photo ou vidéo peut utiliser **Photo en parallaxe** : seul son fond bouge, plus lentement que la page. |

| Dans Apparition | Ce qu’il fait |
| --- | --- |
| **Effet** | **Aucun**, **Fondu**, **Montée**, **Descente**, **Depuis la gauche**, **Depuis la droite**, **Zoom avant**, **Zoom arrière**, **Flou**, **Retournement**, **Dévoilement** ou **Inclinaison** |
| **Intensité** | De combien il bouge, grandit ou tourne : **Douce**, **Moyenne** ou **Forte** |
| **Commencer flou** | Il commence flou et devient net pendant l’animation. Très joli sur du texte. |
| **Durée** | Combien de temps il dure, jusqu’à 3 secondes |
| **Attente avant le début** | Une pause une fois à l’écran, jusqu’à 3 secondes |
| **Sections** | Rangées : **Tous ensemble**, ou **Un par un** : les sections de la rangée apparaissent l’une après l’autre, avec **Temps entre les sections** |
| **Éléments** | Sections et listes : **Tous ensemble**, ou **Un par un** : les éléments d’une section, ou les postes, photos, cartes ou liens d’une liste, apparaissent l’un après l’autre, avec **Temps entre les éléments** |
| **Texte** | Nom, accroche et à propos de vous : **Tous ensemble**, **Mot par mot** ou **Lettre par lettre**, avec le temps entre chacun |
| **Rendu** | **Fluide**, **Doux**, **Rebondissant** ou **Régulier** |
| **Rejouer à chaque fois** | Se rejoue chaque fois qu’il revient à l’écran. Désactivé, il ne se joue qu’une fois. |

Quand rien n’est sélectionné, **Animations** dans les paramètres de page agit sur toute la page :

| Réglage | Ce qu’il fait |
| --- | --- |
| **Animer toute la page** | **Douce**, **Élégante**, **Ludique**, **Audacieuse** ou **Cinéma** donne à chaque rangée, section et bloc une animation assortie, à la place de celles que vous aviez. Modifiez ensuite n’importe quelle pièce. |
| **Retirer toutes les animations** | Désactive toutes les animations de la page. |
| **Jouer sur téléphone** | Désactivé, les téléphones affichent votre page sans mouvement. |
| **Jouer la page** | Joue ici toutes les animations de la page en même temps. |

- **Annuler** rétablit ce que vous aviez après **Animer toute la page** ou **Retirer toutes les animations**.
- Les rangées ont seulement une entrée. Une rangée réglée sur **Un par un** fait apparaître ses sections l’une après l’autre ; une section qui a sa propre animation la garde.
- Une section réglée sur **Un par un** fait apparaître ses éléments l’un après l’autre, et son fond reste en place. Un élément qui a sa propre animation la garde.
- **Lettre par lettre** est fait pour les textes courts. À propos de vous, les textes longs et les textes avec des liens apparaissent mot par mot, tout comme l’arabe, dont les lettres sont liées.
- **Au survol** ne s’affiche que pour les visiteurs qui ont une souris ou un pavé tactile. Les écrans tactiles l’ignorent.
- Un élément déjà à l’écran à l’ouverture de la page commence là où vous l’avez placé, puis bouge pendant le défilement.
- Dans **Calques**, une étincelle signale tout ce qui a une animation.

> **Bon à savoir:** Les visiteurs qui ont activé la réduction des animations sur leur téléphone ou leur ordinateur voient tout directement, sans animation. Si votre propre appareil est réglé ainsi, les animations ne se jouent pas non plus dans le Designer.

**Pourquoi mes animations ne bougent-elles pas sur mon site en ligne ?**
Votre site a besoin de l’option **Animations**, $10 par an. Les options sont réservées aux sites payés. Tant qu’elle n’est pas active, les animations ne se jouent que dans le Designer et dans **Aperçu**. Si vous avez payé par virement bancaire, les visiteurs les voient dès réception du virement.

**Mes autres sites ont-ils aussi les animations ?**
Non. Une option vaut pour un seul site : celui choisi en haut de votre tableau de bord au moment de l’ajout. Chaque site à animer a besoin de la sienne.

## Mettre en forme le formulaire de contact

Cliquez sur le bloc **Formulaire de contact**. Dans **Contenu**, modifiez son **Titre**, sa **Phrase d’introduction** et son **Texte du bouton**. Laissez une case vide pour garder le texte par défaut dans la langue de votre site.

| Dans Style | Ce que vous pouvez changer |
| --- | --- |
| **Mise en page** | **Alignement** (Section, Gauche, Centre ou Droite), **Largeur** (Étroite, Moyenne ou Pleine) et **Arrondi des coins** |
| **Titre** | **Afficher le titre** et **Taille du titre** (Petite, Normale, Grande ou Énorme) |
| **Phrase d’introduction** | **Afficher la phrase d’introduction** et **Taille de l’introduction** |
| **Champs** | **Nom et e-mail** côte à côte ou l’un sous l’autre, et **Hauteur de la zone de message** (3 à 10 lignes) |
| **Bouton** | **Style** (Plein ou Contour) et **Largeur** (Ajustée au texte ou Pleine largeur) |

> **Astuce:** Les textes sont partagés par tous les designs et la mise en page simple. Le style n’appartient qu’à ce design.

## Historique des versions

À chaque publication, tout votre site est conservé comme une version : votre contenu, votre design et la mise en page affichée. Appuyez sur le bouton horloge (**Historique des versions**) en haut pour les voir. La même liste se trouve dans **Historique des versions**, dans la barre latérale de votre tableau de bord. Les 10 plus récentes sont conservées, plus votre première version et celle qui est en ligne.

| Action | Ce qu’elle fait |
| --- | --- |
| Aperçu | Voir cette version exactement telle qu’elle a été mise en ligne. |
| Mettre cette version en ligne | Votre site revient à cette version : son contenu, son design et sa mise en page. |
| Modifier à partir d’ici | En faire votre brouillon, contenu et design, et la charger dans le Designer. Votre site en ligne ne change pas. |
| Renommer | Lui donner un nom dont vous vous souviendrez. |
| Supprimer | La supprimer définitivement. La version en ligne ne peut pas être supprimée. |

## Publier un design

1. **Appuyez sur **Publier ce design**** — Cela publie tout votre site avec ce design et le conserve dans votre historique des versions.
2. **Confirmez** — Vous voyez **Votre design est en ligne !**

Pour revenir à la mise en page simple, ouvrez **Historique des versions** et appuyez sur **Utiliser la mise en page simple**.

> **Bon à savoir:** Tant que votre site n’est pas payé et approuvé, vous pouvez enregistrer votre design mais pas le publier. **Publier** affiche une couronne (pas encore payé : il ouvre la page de paiement) ou un cadenas (en cours de validation). Voir [Payer pour publier](https://www.launchfolio.live/docs/fr/pay-and-review).

## Bloc libre : une section en forme libre

Un Bloc libre est une section que vous ajoutez dans l’éditeur. À l’intérieur, vous placez du texte, des images, des boutons et des lignes n’importe où sur une grille.

- Utilisez **Ajouter :** pour ajouter un Texte, une Image, un Bouton ou une Ligne.
- Faites glisser pour déplacer et tirez les poignées pour redimensionner. Maintenez Maj pendant le redimensionnement pour garder les proportions.
- Double-cliquez sur un texte pour écrire directement sur la page. Les flèches du clavier déplacent un peu l’élément sélectionné. La touche Suppr le supprime.
- Utilisez **Calques** pour choisir ce qui passe devant.

## Les notes dorées

La première fois que vous utilisez le Designer, des notes dorées manuscrites vous montrent à quoi servent les choses. Fermez-en une et elle ne reviendra plus sur cet appareil.