Elements de design, texte et animations
Les elements de design sont les composants individuels que vous utilisez pour construire le contenu de vos blocs de site web. Du texte et des images aux boutons et animations, maitriser ces elements vous donne un controle total sur l'apparence de votre site et l'experience utilisateur.
Acces rapide : Cliquez sur n'importe quel element en mode Edition pour voir ses options de personnalisation dans le panneau de droite.
Elements de texte
Le texte est la base du contenu web. Le constructeur de site web fournit des outils complets de mise en forme du texte :
Titres (H1-H6)
| Niveau | Utilisation | Bonne pratique |
|---|---|---|
| H1 | Titre principal de la page | Utilisez-le une seule fois par page pour le SEO |
| H2 | Titres de section | Divisions principales du contenu |
| H3 | Titres de sous-section | Sujets au sein des sections |
| H4-H6 | Titres mineurs | Hierarchies detaillees |
Options de mise en forme du texte
- Famille de polices : Choisissez parmi les polices du theme ou la bibliotheque Google Fonts
- Taille de police : Tailles predefinies (Petit, Normal, Grand, Tres grand) ou valeurs personnalisees en pixels
- Graisse de police : Leger, Normal, Moyen, Semi-gras, Gras
- Style de police : Normal, Italique, Souligne, Barre
- Couleur du texte : Couleurs du theme, couleurs personnalisees ou degrades
- Alignement du texte : Gauche, Centre, Droite, Justifie
- Hauteur de ligne : Controlez l'espacement entre les lignes
- Espacement des lettres : Ajustez l'espacement entre les caracteres
Surlignages et effets de texte
- Surlignage d'arriere-plan : Ajoutez un arriere-plan colore au texte
- Ombre du texte : Ajoutez de la profondeur avec des effets d'ombre
- Texte en degrade : Appliquez des degrades de couleur au texte
- Badges : Petites etiquettes pour mettre en valeur
Images
Les images rendent votre contenu visuellement attrayant. Voici tout ce que vous pouvez faire avec elles :
Ajouter des images
- Telecharger : Depuis votre appareil (JPG, PNG, GIF, WebP, SVG)
- Unsplash : Recherchez des millions de photos gratuites et de haute qualite
- URL : Liez vers des images externes
- Icones : Choisissez dans la bibliotheque d'icones
Personnalisation des images
| Option | Description |
|---|---|
| Taille | Controles de largeur et de hauteur, option de maintien du ratio |
| Forme | Carre, Arrondi, Cercle, Rayon de bordure personnalise |
| Bordure | Couleur, epaisseur, style (plein, tirets, pointilles) |
| Ombre | Ombre portee avec controles de flou, d'etendue et de decalage |
| Filtres | Luminosite, Contraste, Saturation, Niveaux de gris, Sepia, Flou |
| Superposition | Superposition de couleur avec opacite |
| Texte alternatif | Description pour l'accessibilite et le SEO |
| Lien | Rendez l'image cliquable vers une URL ou une page |
Optimisation des images
Les images sont automatiquement optimisees lors du telechargement :
- Redimensionnees en fonction de l'emplacement d'affichage
- Compressees pour un chargement plus rapide
- Converties en formats modernes (WebP) lorsque pris en charge
- Chargement differe pour les performances
Videos
Integrez des videos pour engager vos visiteurs avec du contenu dynamique :
Sources video
- YouTube : Collez l'URL de la video pour une integration automatique
- Vimeo : Hebergement video professionnel
- Telecharger : Hebergez des videos directement (MP4, WebM)
- Video d'arriere-plan : Videos en boucle comme arriere-plan de section
Options video
- Lecture automatique : Demarre la lecture automatiquement (muet pour les navigateurs)
- Boucle : Repete la video en continu
- Controles : Afficher/masquer les controles du lecteur
- Vignette : Image d'apercu personnalisee
- Responsive : S'adapte a la largeur du conteneur
Boutons
Les boutons d'appel a l'action guident les visiteurs pour agir :
Styles de boutons
| Style | Apparence | Ideal pour |
|---|---|---|
| Primaire | Arriere-plan plein, couleur principale du theme | Appels a l'action principaux |
| Secondaire | Couleur plus claire ou contour | Actions alternatives |
| Contour | Bordure uniquement, arriere-plan transparent | Actions subtiles |
| Lien | Texte uniquement, pas d'arriere-plan | Navigation, moins d'emphase |
Personnalisation des boutons
- Taille : Petit, Moyen, Grand, Bloc (pleine largeur)
- Forme : Carre, Arrondi, Pilule
- Icone : Ajoutez une icone avant ou apres le texte
- Lien : URL, page, ancre, e-mail, telephone
- Effets au survol : Changement de couleur, mise a l'echelle, ombre
Icones
Les icones communiquent rapidement du sens et ajoutent de l'interet visuel :
Bibliotheque d'icones
- Icones Font Awesome (des milliers disponibles)
- Icones SVG personnalisees
- Support des emojis
Options des icones
- Taille : De 12px a 120px et plus
- Couleur : Couleurs du theme ou personnalisees
- Arriere-plan : Plein, degrade ou transparent
- Forme : Aucune, Cercle, Carre, Arrondi
- Rotation : Retournez ou faites pivoter les icones
Liens
Connectez votre contenu avec des liens cliquables :
Types de liens
- Page interne : Lien vers d'autres pages de votre site
- URL externe : Lien vers d'autres sites web
- Ancre : Saut vers une section de la meme page
- E-mail : Ouvre le client de messagerie (mailto:)
- Telephone : Appel en un clic sur mobile (tel:)
- Fichier : Telechargement de documents
Options des liens
- Ouvrir dans un nouvel onglet : Gardez les visiteurs sur votre site
- No-follow : Pour les liens externes/sponsorises
- Style : Couleur, soulignement, effets au survol
Listes
Organisez l'information clairement avec des listes :
Types de listes
- Listes a puces : Elements non ordonnes avec differents styles de puces
- Listes numerotees : Sequences ordonnees
- Listes avec icones : Icones personnalisees a la place des puces
- Liste de controle : Taches avec cases a cocher
Animations
Ajoutez du mouvement pour rendre votre site dynamique et attrayant :
Categories d'animations
| Type | Declencheur | Exemples |
|---|---|---|
| Au defilement | Lorsque l'element entre dans la zone visible en defilant | Fondu, Glissement vers le haut, Zoom, Rebond |
| A l'apparition | Lorsque la page se charge ou que l'element apparait pour la premiere fois | Fondu, Glissement, Mise a l'echelle, Rotation |
| Au survol | Lorsque la souris survole l'element (images) | Zoom, Rotation, Luminosite, Superposition |
Options d'animation
- Effet : Choisissez parmi plus de 20 effets d'animation
- Duree : Combien de temps dure l'animation
- Delai : Attente avant le debut de l'animation
- Direction : De quelle direction l'element entre
- Repetition : Une seule fois ou a chaque fois qu'il est visible
Effets d'animation populaires
| Effet | Description |
|---|---|
| Fondu | Apparait progressivement depuis la transparence |
| Glissement vers le haut | Entre par le bas |
| Glissement gauche/droite | Entre par les cotes |
| Zoom avant | Grandit depuis une taille plus petite |
| Rebond | Rebondit en position |
| Retournement | Rotation 3D |
| Rotation | Tourne pour apparaitre |
Bonnes pratiques
Conseils de design
- Utilisez des polices coherentes partout - limitez-vous a 2-3 familles de polices
- Assurez un contraste de couleur suffisant pour la lisibilite (directives WCAG)
- Ajoutez du texte alternatif a toutes les images pour l'accessibilite
- Utilisez les animations avec parcimonie - trop nombreuses, elles peuvent distraire
- Rendez les boutons suffisamment grands pour etre touches sur mobile (minimum 44x44 pixels)
Considerations de performance
- Compressez les images avant de telecharger des fichiers volumineux
- Utilisez le format SVG pour les icones au lieu d'images lorsque possible
- Limitez le nombre de polices personnalisees chargees
- Evitez la lecture automatique des videos sur mobile
- Testez les performances des animations sur les appareils plus lents