L’éditeur de texte et d’images vous permet d’illustrer vos textes avec des images et de créer des articles et des pages de présentation attrayants.
Vous pouvez ajouter une image à votre site Web de plusieurs façons :
- En tant qu’élément intégré en utilisant l’élément « Texte » de la catégorie Texte et images
- En utilisant l’élément « Image et texte » avec lequel des images supplémentaires peuvent être ajoutées en tant qu’éléments intégrés
- En tant qu’élément d’image unique à partir de la catégorie Texte et images
Veuillez noter que si vous ajoutez une image via l’élément « Image », comme dans l'exemple ci-dessus, vous ne pourrez pas ajouter d’autres éléments de contenu, tels que du texte ou des vidéos, à côté de l’image. En revanche, vous pouvez le faire avec les deux autres alternatives.
Il existe plusieurs moyens d’importer les images désirées :
- Glisser-déposer les images provenant de votre ordinateur ou d’autres pages Web dans le panneau Propriétés.
- Parcourir les images sur votre ordinateur en cliquant à l’intérieur de la zone d'ajout d'images.
- Ajouter l’URL d’une image publiée sur un autre site. Il vous suffit de copier l’adresse de l’image, de la coller dans le champ URL et de cliquer sur « Ajouter une image ». (Les images comportant un signe dièse « # » ou un point d’interrogation « ? » dans leur nom peuvent uniquement être importées par glisser-déposer ou avec une URL)
Une autre solution consiste à utiliser notre onglet « Bibliothèque d’images » et à choisir parmi un éventail d’images libres de droits.
Une fois votre image importée, elle sera automatiquement réglée à la taille par défaut du système. Choisissez parmi 3 tailles d’images prédéfinies : petite, moyenne et taille réelle, ou définissez la vôtre (taille personnalisée). Même si une image est redimensionnée, le système conserve l’image originale afin de pouvoir l’ajuster ultérieurement. Toutes les images redimensionnées seront plus détaillées sur un écran rétina haute résolution.
En cliquant sur une image, un panneau de modification s’ouvre sur la droite, avec plusieurs options de personnalisation : taille, bordure, styles d’habillage et effets.
Vous pouvez modifier l’image sélectionnée à tout moment en cliquant sur le bouton « Modifier ». Sélectionner « Modifier » et l’image s’ouvrira dans un éditeur externe où vous pourrez appliquer des modifications de base telles que le recadrage, le retournement, la rotation, le redimensionnement et des effets spéciaux.
Les options par défaut vous permettent de définir des dimensions d’image personnalisées en spécifiant la largeur et la hauteur souhaitées. Lorsque vous modifiez la taille d’une image, il est recommandé de cliquer sur l’icône en forme de cadenas pour verrouiller les proportions de l’image et éviter toute distorsion. Par exemple, lorsque vous modifiez la largeur, la hauteur sera ajustée proportionnellement pour garantir que le rapport et la perspective restent semblables à ceux de l’image d’origine. Pour rétablir la taille d’origine d’une image, cliquez sur « Réinitialiser ».
La modification de la largeur et de la taille d’une image dans l’éditeur n’entraînera qu’une mise à l’échelle visuelle de l’image aux nouvelles dimensions lorsque le navigateur chargera la page, mais le fichier de l’image conservera sa taille d’origine. Afin d’optimiser les images plus grandes pour qu’elles se chargent rapidement, nous vous recommandons de redimensionner les images dans un programme externe avant de les importer dans l’éditeur de texte et d’images.
Le champ « Légende » s’affichant au passage de la souris vous permet de définir le texte qui apparaît lorsqu’un utilisateur place son curseur sur une image. Les légendes de survol ont également un rôle pour l’optimisation de votre site Web dans les moteurs de recherche. Il est donc recommandé de les ajouter pour les images clés sur vos pages.
Pour modifier davantage votre image, vous pouvez appliquer un effet d’image, qui sera visible une fois que la modification aura été enregistrée, en cliquant à l’extérieur de l’élément modifié.
L’alignement de l’image et l’ajout d’un lien au-dessus de l’image sont quelques-unes des autres options possibles. En sélectionnant l’icône pour ajouter un lien, le sous-menu suivant apparaîtra au bas du menu de droite.
Ajustez l’espacement autour de l’image par rapport au contenu supplémentaire de l’élément en spécifiant un espacement en pixels en haut, en bas, à gauche et à droite de l’image.
Vous pouvez ajouter une bordure à vos images en spécifiant la largeur de la bordure de l’image en pixels et en sélectionnant la couleur de la bordure souhaitée. En cliquant sur l’icône de couleur de bordure, une boîte à outils de couleurs s’ouvrira, vous permettant d’ajouter une couleur à la bordure ou de la retirer.
Les options de survol des images ajoutent de l’interactivité à votre site et peuvent également indiquer à l’internaute que quelque chose se produira s’il clique sur l’image. Cela peut s’avérer pratique quand un lien a été ajouté à une image.
Vous pouvez ajouter une image de survol avec des effets de transition en important une deuxième image sous l’option « Image de survol ». Une fois l’image de survol importée, vous pouvez choisir la transition à appliquer entre les deux images.
Les effets « Estomper » et « Dissoudre » semblent à première vue très similaires, mais ils sont très différents lorsqu’ils sont appliqués à des images comportant des parties transparentes. Avec l’effet Estomper, l’image normale est conservée tandis que l’image de survol apparaît en fondu et les deux sont combinées. Avec l’effet Dissoudre, l’image normale disparaît tandis que l’image de survol apparaît en fondu.
En fonction de la taille de l’image que vous avez sélectionnée, des contrôles vous permettent d’ajuster les images directement dans l’éditeur de texte et d’images. Vous pouvez facilement recadrer une image et zoomer sur une zone spécifique de l’image sans utiliser d’autres outils. Le résultat sera instantanément disponible dans le contexte de la page. Cette fonctionnalité concerne également les images de survol. La fonction de recadrage et de zoom est disponible lorsque les options avancées sont activées et l’image source doit être plus grande que l’image visualisée.
Les images plus grandes que leur taille affichée font apparaître une barre de zoom lorsqu’on clique dessus, ce qui permet d’effectuer un zoom avant et arrière, et de faire glisser et de positionner l’image dans les dimensions spécifiées. Il est ainsi facile de se concentrer sur une zone spécifique, comme le montre l’exemple ci-dessous. Les images avec une variation au passage de la souris afficheront une icône de commutation dans le coin supérieur droit lorsqu’elles seront sélectionnées. En cliquant sur l’icône, vous accédez à toutes les options d’édition de l’image de survol.