À propos de l'élément de contenu
L'élément de contenu "Texte/Médias fancy" offre une présentation plus originale du texte combiné aux médias.
- Le premier média est représenté sur 100% de la largeur de l'élément de contenu et les éléments média 2-4 sont disposés sur trois colonnes en dessous.
- Le texte est affiché dans les options de mise en page "à côté du texte à droite/à gauche" et "dans le texte à droite/à gauche" vers le bas, au même niveau que l'image ou les images. S'il existe une légende d'image, l'alignement s'oriente sur celle-ci.
Utilisation :
- Présentation attractive de matériel pertinent pour le marketing
- L'aspect visuel est particulièrement agréable lorsque le texte n'est pas très grand.
- Les légendes peuvent alors facilement devenir gênantes. Dans ce cas, utilisez plutôt le champ du titre pour donner quelques informations sur ce que l'on voit sur l'image.
- Pour la représentation de personnes ou d'événements, le CE Gallerie est plus approprié.
- Meilleure présentation avec une mise en page "à côté du texte à droite/à gauche" et "dans le texte à droite/à gauche" sur une largeur de page de 100%.
- Dans les éléments de grille de 66% ou moins, aucun texte ne doit être placé à côté des images.
- Ne convient pas pour les colonnes dans les éléments de grille de 33% ou 25%.
Lorem ipsum dolor sit
consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac
Étape 1 : Créer un élément Text&Media Fancy
Pour créer l'élément, cliquez sur l'icône "+ contenu" dans la zone d'édition de la page de destination. Sélectionnez ensuite l'élément "Text&Media Fancy" sous l'onglet "Contenu typique de la page". Le menu d'édition de l'élément s'ouvre ensuite automatiquement.
Étape 2 : Créer le contenu
Attribuez d'abord un titre sous l'onglet "Général". Définissez ensuite le type/la mise en page de l'en-tête. Créez maintenant le contenu souhaité de l'élément Text&Media en bas dans l'éditeur de texte.
Remarques sur la mise en page des titres : la mise en page détermine la taille du titre, la mise en page 1 étant la plus grande et la mise en page 6 la plus petite. Dans Typo3, la mise en page "Standard" est prédéfinie par défaut, elle correspond à la mise en page 2. Si vous choisissez la mise en page "Caché", le titre n'est visible que dans le backend et reste donc caché aux visiteurs de la page. N'utilisez la mise en page 1 qu'une seule fois par page, cela améliore le classement de votre site dans les moteurs de recherche !
Étape 3 : Ajouter une image (facultatif)
Intégrer un fichier média
Pour intégrer un fichier média, allez d'abord dans l'onglet "Médias" et cliquez ensuite sur le bouton "Ajouter un fichier média". Vous serez ensuite redirigé vers la liste de fichiers et y sélectionnerez l'image souhaitée. Vous pouvez également intégrer directement un fichier local en cliquant sur "Sélectionner un fichier et le télécharger".
Lors de l'intégration de plusieurs images dans l'élément Text&Media Fancy, la première image est toujours affichée plus grande que les images suivantes.
Il est recommandé d'avoir une largeur de pixels de 1200px pour une largeur de page de 100 % dans la vue de bureau. Et au moins 750 px pour une largeur de page de 50 % dans l'affichage du bureau. Ainsi, les images sont suffisamment grandes pour toutes les vues possibles.
Veuillez noter que si vous choisissez l'option "Sélectionner et télécharger le fichier", le fichier multimédia sera enregistré dans le dossier "user_upload" de la liste des fichiers. Cela peut rendre difficile pour vous et pour les autres rédacteurs* de trouver ce fichier dans la liste des fichiers.
Déposer des métadonnées
Après l'intégration d'une image, veuillez insérer le "Texte alternatif" et la "Description de l'image" dans la zone "Métadonnées de l'image". Cela sert en premier lieu à l'accessibilité. Si vous les avez déjà déposées dans la liste de fichiers, elles seront automatiquement pré-remplies.
Traitement de l'image
Sous la rubrique Traitement d'image, vous pouvez définir le rapport hauteur/largeur de l'image en fonction de la taille d'écran disponible. Cela permet d'optimiser la représentation de l'image pour la sortie sur différents terminaux. Pour définir le rapport hauteur/largeur en fonction de la taille d'écran disponible, cliquez sur "Ouvrir éditeur" et définissez les rapports hauteur/largeur pour les tailles d'écran correspondantes. La taille "Extra Large" correspond à un grand écran d'ordinateur et "Très petit" à un écran de smartphone.
Conseil : pour vérifier le résultat, vous pouvez utiliser le "module d'affichage". Vous pouvez également afficher la page, réduire la fenêtre de votre navigateur et modifier sa taille en conséquence.
Remarque : L'éditeur sert uniquement à définir les proportions. Il n'offre pas d'autres options de traitement d'image.
Étape 4 : Sélectionner la couleur de fond (facultatif)
Pour définir une couleur d'arrière-plan pour l'élément Text&Media Fancy, allez d'abord dans l'onglet "Apparence". Là, dans la zone "Couleur d'arrière-plan", sélectionnez la couleur de cadre souhaitée.
Important : veuillez n'utiliser cette option que pour mettre en évidence des éléments particulièrement importants. Les couleurs vives attirent le regard des utilisateurs* de manière ciblée. Trop de mises en évidence peuvent avoir l'effet inverse.
Étape 5 : Sélectionner l'image d'arrière-plan (facultatif)
Pour définir une image d'arrière-plan pour l'élément Text&Media Fancy, allez d'abord dans l'onglet "Apparence". Cliquez ensuite sur "Ajouter une image" dans la section "Image d'arrière-plan". Vous serez ensuite redirigé vers la liste de fichiers où vous pourrez sélectionner l'image souhaitée. Vous pouvez également intégrer directement un fichier local en cliquant sur "Sélectionner un fichier et le télécharger".
Ensuite, vous pouvez encore régler différents effets et filtres pour l'image d'arrière-plan dans la zone "Options pour les images d'arrière-plan". Par exemple, vous pouvez vous assurer que le texte de l'élément reste bien lisible grâce à l'"effet de décoloration". En outre, l'effet de décoloration permet de combiner la couleur de fond et l'image de fond.
Il est recommandé d'utiliser une largeur de pixel de 1200px pour une largeur de page de 100 % en vue de bureau. Et au moins 750 px pour une largeur de page de 50 % dans l'affichage du bureau. Ainsi, les images sont suffisamment grandes pour toutes les vues possibles.
Veuillez noter que si vous choisissez l'option "Sélectionner et télécharger le fichier", le fichier multimédia sera enregistré dans le dossier "user_upload" de la liste des fichiers. Cela peut rendre plus difficile pour vous et pour les autres rédacteurs* de trouver ce fichier dans la liste des fichiers.
Important : veuillez n'utiliser cette option que pour mettre en évidence des éléments particulièrement importants. Les images d'arrière-plan attirent le regard des utilisateurs de manière ciblée. Un trop grand nombre de mises en évidence peut avoir l'effet inverse.
Auto-apprentissage TYPO3
Exercice
- Créez un CE "Texte/Médias fancy".
- Remplissez-le avec un texte d'environ 90 mots.
- Pour le premier élément média, prenez une vidéo de vcm.uni-kl.de et intégrez-la.
- Prenez une image pour chacun des deuxième à quatrième éléments médiatiques.
- Pensez à un texte alternatif.
- Essayez différents réglages pour le rapport hauteur/largeur des images. Cela vous permettra de contrôler quelque peu la hauteur du paquet média en cours de création. Les deuxième à quatrième éléments médias devraient avoir le même rapport hauteur/largeur.