Éléments

Les éléments aident à structurer et présenter le contenu efficacement. Ils vont des composants textuels comme les titres, les listes et les surlignages de texte aux éléments interactifs tels que les boutons et les liens. Des éléments visuels comme les images, les icônes, les vidéos et les animations peuvent également être ajoutés pour améliorer la présentation et l’organisation du contenu.

Pour ajouter ou modifier un élément de site web :

  1. Accéder à la page web concernée et cliquer sur Modifier.

  2. Cliquer sur la section de la page où ajouter ou modifier un élément.

  3. Effectuer les modifications nécessaires.

  4. Cliquer sur Enregistrer.

Note

Les styles par défaut pour les titres, boutons, liens et texte de paragraphe, par exemple, sont définis dans l”onglet Thème de l’éditeur de site web.

Tapez / pour ajouter des éléments au site web.

Titres

Les titres définissent des en-têtes et organisent le contenu du site web en différents niveaux pour plus de clarté et de structure. Pour insérer un titre, tapez /title, choisissez le style d’en-tête (Titre 1, Titre 2, ou Titre 3), et tapez le texte.

Astuce

Alternativement, tapez le texte, sélectionnez-le, et choisissez le style approprié dans la section Texte en ligne de l’onglet Personnaliser de l’éditeur du site web. Des options de formatage supplémentaires, telles que les polices et les couleurs, sont également disponibles dans cette section.

Boutons

Les boutons sont des éléments interactifs qui permettent de créer un lien vers une autre page ou vers une ancre de page. Pour insérer un bouton :

  1. Tapez /button.

  2. Saisissez le libellé du bouton dans le champ Libellé du lien.

  3. Ajoutez l”URL ou Email. Tapez / pour rechercher une page et # pour créer un lien vers une ancre.

  4. Définissez le Style, la Taille, et la Disposition pour définir l’apparence du bouton.

  5. Si nécessaire, activez le bouton pour ouvrir la page ou l’ancre liée dans un nouvel onglet.

  6. Cliquez sur Appliquer pour enregistrer les modifications.

Astuce

Pour modifier un bouton existant, cliquez sur le bouton et modifiez les options dans la section Texte en ligne de l’éditeur du site web.

Images

Pour insérer une image :

  1. Tapez /image.

  2. Recherchez dans la base de données Unsplash ou cliquez sur Télécharger une image pour choisir un fichier parmi vos images locales.

  3. Cliquez sur Ajouter.

  4. Pour personnaliser l’image, cliquez sur l’image et modifiez les options dans la section Image de l’éditeur du site web. Par exemple :

    • Remplacer l’image.

    • Définissez une balise alt dans le champ Description.

    • Saisissez une balise de titre dans le champ Info-bulle. Ce texte apparaîtra lorsque les visiteurs survoleront l’image avec leur souris.

    • Ajoutez une Forme ; certaines formes permettent également de personnaliser la couleur.

    • Ajuster la Largeur de l’image, par ex. pour améliorer les performances. Une taille plus petite peut être suggérée si elle est suffisante pour l’affichage.

    • Redimensionner l’image à l’aide de l’outil Transformer.

    • Ajuster le Remplissage pour ajouter de l’espace (en pixels) autour de l’image.

    • Etc.

Vidéos

Pour ajouter une vidéo, taper /video, insérer l’URL et activer les options souhaitées :

  • Lecture automatique : pour lire automatiquement la vidéo lors de l’accès à la page. La vidéo est automatiquement coupée par défaut.

  • Boucle : pour lire la vidéo en boucle.

  • Masquer les contrôles du lecteur

  • Masquer le bouton plein écran

  • Début à : pour définir l’horodatage où la vidéo doit commencer, au format MM:SS.

Icônes

Pour insérer une icône, taper /image, aller dans l’onglet Icônes, sélectionner une icône et cliquer sur Ajouter. Pour modifier une icône, cliquer dessus et utiliser la section Icône de l’éditeur de site web pour personnaliser les options, telles que Couleur, Taille, Animations, Forme, etc.

Listes

Les listes aident à organiser clairement le contenu, rendent l’information plus facile à lire et améliorent la structure des pages web. Taper /list et choisir parmi trois types de listes différents : Listes à puces, Listes numérotées ou Listes de contrôle.

Surlignages de texte

Des surlignages peuvent être ajoutés aux titres et au texte dans la section Texte en ligne de l’éditeur de site web. Pour ajouter un surlignage :

  1. Sélectionner le texte ou le titre à surligner.

  2. Dans l’éditeur de site web, cliquer sur Surligner.

  3. Sélectionner le style de surlignage.

  4. Modifier sa Couleur.

  5. Choisir son Épaisseur.

Mettre en évidence des textes et des titres

Animations

Les animations permettent d’ajouter du mouvement aux blocs de construction et aux éléments du site web tels que les images et le texte. Trois types d’animation sont disponibles : Au défilement, À l’apparition et Au survol (pour les images uniquement).

Ajouter une animation à un élément du site web :

  1. Cliquer sur l’élément.

  2. Dans l’éditeur de site web, accéder à la section correspondant à l’élément (par exemple, Bouton, Colonne, Texte en ligne, etc.).

  3. Dans le champ Animation, sélectionner le type d’animation souhaité.

  4. Personnaliser les paramètres d’animation selon les besoins. Les options disponibles varient en fonction du type d’animation sélectionné.

Animations au défilement

Pour les animations au défilement, il est possible de :

  • Choisir Entrée pour ajouter l’animation lorsque l’élément entre à l’écran et Sortie pour l’ajouter lorsqu’il quitte l’écran.

  • Sélectionner un Effet.

  • Choisir la Direction de l’effet.

  • Adapter l”Intensité de l’effet.

  • Définir la Zone de défilement, où la première valeur représente le pourcentage de l’écran affiché au démarrage de l’effet et la seconde valeur représente son pourcentage à la fin.

Animations à l’apparition

Pour les animations à l’apparition, il est possible de :

  • Choisir parmi différents effets.

  • Choisir la Direction de l’effet.

  • Sélectionner une option de Déclenchement pour définir quand l’animation se produit : soit La première fois uniquement, soit À chaque fois.

  • Adapter l”Intensité de l’effet.

  • Si l’animation doit être déclenchée après un certain nombre de secondes, définir ce nombre dans le champ Démarrer après.

  • Choisir une Durée pour l’animation.

Animations au survol (pour les images uniquement)

Des animations Au survol peuvent être ajoutées aux images. Vous pouvez choisir l”Effet de l’animation, ainsi que la Couleur et la Largeur du trait.

Voir également

Éditeur HTML Odoo