Pages Canvas — Liberté créative totale
Les pages Canvas t'offrent un design libre et précis au pixel près, sans contraintes de grille ou de mise en page. Place les éléments n'importe où sur la page et crée des mises en page uniques et immersives. Elles remplacent les anciennes "Pages Freestyle" qui étaient limitées à un design en grille basé sur une technique vieille de 20 ans appelée WYSIWYG (What you see is what you get). Il était tout simplement impossible de modifier ces pages librement - maintenant, tu as toute la liberté !
Ajouter des éléments
Les pages Canvas supportent quatre types d'éléments :
Texte — choisis les niveaux de titre (H1–H6) ou le corps de texte, sélectionne n'importe quelle police, définit la taille et la couleur
Image — télécharge ou colle une URL ; ajoute un texte alternatif pour le SEO ; double-clique pour repositionner l'image dans son cadre
Vidéo — intègre un lien YouTube ou Vimeo, ou télécharge la tienne ; choisis entre la lecture automatique ou au clic
Bouton — définit le texte du label, l'URL du lien, les couleurs de fond et de texte, ainsi que l'arrondi des angles
Paramètres des éléments
Chaque élément peut être peaufiné :
Position & taille — définit X (%), Y (px), largeur (%) et hauteur (px) pour un placement précis
Rotation — fais pivoter n'importe quel élément de 0° à 360°
Ordre des couches — fais un clic droit sur un élément pour l'envoyer au premier plan ou à l'arrière-plan (gestion du z-index)
Actions au clic — lien vers une page interne ou une URL externe ; les images peuvent s'ouvrir dans une fenêtre modale de détail avec navigation de galerie
Action au clic - Modale
L'action au clic sur une image peut être un lien ou une Modale. Tu peux choisir d'ouvrir l'image dans une fenêtre ou d'activer l'option galerie : la fenêtre deviendra alors une galerie défilante que tu peux remplir d'images ou de vidéos, tout en sélectionnant la couleur de superposition.
Arrière-plan de la page
Définit l'arrière-plan pour toute la page Canvas :
Arrière-plan du site — transparent / couleur par défaut de ton site web
Couleur — choisis n'importe quelle couleur unie
Image — télécharge ou colle une URL, puis utilise le sélecteur de point focal pour contrôler quelle partie reste visible sur les différentes tailles d'écran
Vidéo — intègre ou télécharge un arrière-plan vidéo avec un point focal ; ajoute une superposition de couleur optionnelle avec opacité réglable pour une meilleure lisibilité
Fenêtres d'affichage (Viewports) réactives
Les pages Canvas supportent trois fenêtres d'affichage indépendantes :
Desktop (1440 px)
iPad Air (820 px)
iPhone 16 Pro (430 px)
Chaque vue a sa propre disposition d'éléments. Fais un clic droit sur les éléments de la vue ordinateur pour les copier sur iPad, iPhone, ou les deux à la fois. Ajuste ensuite les positions et les tailles indépendamment par vue pour t'assurer que ton design est superbe sur chaque appareil.
En-tête & Pied de page
Lors de la création d'une page Canvas, tu peux choisir d'afficher ou de masquer l'en-tête et le pied de page du site. C'est idéal pour des pages de destination (landing pages) autonomes ou des expériences plein écran immersives.
Page de démarrage
N'importe quelle page Canvas peut être définie comme la page de démarrage (accueil) de ton site web, en faisant la première chose que les visiteurs voient.
Exemple : Page de destination avec arrière-plan vidéo
1. Crée une nouvelle page Canvas et masque l'en-tête et le pied de page
2. Règle l'arrière-plan sur Vidéo et colle un lien YouTube ou Vimeo
3. Ajuste le point focal pour que la scène clé reste centrée sur tous les appareils
4. Ajoute une superposition de couleur (ex: noir à 40 % d'opacité) pour le contraste
5. Place un élément texte H1 avec ton titre
6. Ajoute un élément Bouton, nomme-le "Voir le Portfolio", et lie-le à ta page de galerie
7. Passe aux vues iPad et iPhone, copie les éléments depuis l'ordinateur et peaufine les positions
8. Définis cette page Canvas comme ta page de démarrage
Le résultat est une page de destination plein écran cinématique qui fonctionne parfaitement sur tous les appareils.