Élément de design "Teaser

Instructions avec exercice, temps de lecture 7-10 minutes

À propos des teasers dans le cadre de la construction des sites web RPTU

Les teasers offrent un chemin de navigation vers les sous-pages d'un site web. Cette méthode est particulièrement appréciée des visiteurs utilisant des appareils mobiles. C'est pourquoi, en tant que rédacteur*, vous devez toujours veiller à ce que les sous-pages soient reliées de manière bien visible dans le contenu de la page.

  • Le plugin teaser de pw_teaser crée automatiquement un teaser à partir des propriétés de toutes les pages liées.
  • Il existe trois présentations (layouts) différentes pour les teasers
  • L'image est créée dans les propriétés de la page sous "Teaser".
  • Le texte du teaser est tiré de la description dans les propriétés de la page sous "SEO".
  • Les teasers des sous-pages apparaissent en général partout en bas d'une page automatiquement dans la mise en page "petit 25%".
  • Ceci est contrôlé par la propriété de page Backendlayout sous "Apparence".

Utilisation de la page :

  • Liens nécessaires entre les sous-pages du contenu de la page.
  • Le texte d'accroche prépare au contenu de la page liée.
  • ne pas utiliser dans les éléments de grille
  • ne pas utiliser avec des couleurs ou des images d'arrière-plan
En bref

Préparer les pages qui seront teasées :

  • Régler l'image teaser sous Propriétés de la page -> Teaser
  • Régler le texte du teaser sous Propriétés de la page -> SEO ->Description
    • Nombre de caractères : 50-160 caractères
    • Contenu : concis, pertinent et attrayant.
    • Unicité : description propre à chaque page

Réglage de la page sur laquelle les teasers sont affichés :

  • Propriétés de la page -> Apparence -> Mise en page du backend "Page par défaut avec teaser RPTU" affiche automatiquement les teasers.
  • Propriétés de la page -> Apparence -> Mise en page du backend "Page standard RPTU" sans teaser

Souhaits particuliers -> voir à partir de l 'étape 5


Conseils pour des textes d'accroche efficaces

  1. Attention à la longueur : Conservez la description de la page entre 50 et 160 caractères.
  2. Pertinence : assurez-vous que la description reflète exactement le contenu de la page.
  3. Unicité : chaque page de votre site doit avoir une description unique.
  4. Insérer des mots-clés : Utilisez des mots-clés pertinents qui décrivent le contenu de la page et répondent aux requêtes de recherche des utilisateurs.
  5. Invitation à l'action : ajoutez une invitation à l'action claire pour encourager les utilisateurs à cliquer.
  6. Facilité de lecture : écrivez dans un langage clair, concis et attrayant.

Info : dans notre modèle, nous utilisons la description d'une page comme texte d'accroche. La description est notamment affichée sous le résultat de recherche dans les moteurs de recherche.


Voici à quoi cela ressemble

Vue en direct de l'élément de contenu

Teaser grand 100

Copy, Print and Scan Services

Everywhere on campus and at the RHRZ in Kaiserslautern and Landau

Continuer la lecture

Teaser petit, horizontal 50%, 1 élément avec surbrillance noir

Campus WLAN

Connect your devices wirelessly to the RPTU network.

RPTU Account

Your access to numerous IT services on campus. Activation, commissioning, customization of RPTU accounts.

Teaser vertical, petit 25

Copy, Print and Scan Services

Everywhere on campus and at the RHRZ in Kaiserslautern and Landau

Network and Telephony

Wireless connection of your devices with the RPTU-network

Server Services
Software & Licenses

Pas à pas

Instructions illustrées : mise en place du texte et de l'image d'accroche

Étape 1 : Ouvrir les propriétés de la page

  • Cliquez sur la page concernée dans l'arborescence des pages
  • Cliquez sur l'icône de crayon en haut de la zone d'édition

Étape 2 : Définir le texte d'accroche

  • Cliquez sur l'onglet "SEO" dans les propriétés de la page.
  • Écrivez le texte de l'accroche dans le champ "Description".

Étape 3 : Image d'accroche et paramètres facultatifs

  • A Sélectionner une image
    • ouvrez l'onglet "Teaser".
    • cliquez sur "Ajouter une image".
    • sélectionnez l'image souhaitée
  • B Générer automatiquement des teasers à partir du contenu
    (Non recommandé : ne fonctionne malheureusement pas toujours de manière fiable)
  • C Teaser High-Light : mettez en évidence tous les teasers de cette page en activant le bouton. L'arrière-plan des teasers pour cette page devient noir au lieu de blanc.
  • D Top-Line : si cette page est affichée avec un teaser de la mise en page "Big 100%", le contenu de la top-line est affiché au-dessus du titre.

Info sur la mise en évidence : les visiteurs des pages RPTU s'habituent à ce type de mise en évidence. Utilisez effectivement cette option pour mettre en valeur vos pages web et non pour les colorer.

Étape 4 : Vérification du résultat

Pour une fois, vous ne voyez pas les modifications apportées aux paramètres de la page lorsque vous consultez la page elle-même.

  • cliquez dans l'arborescence des pages sur la page parente
  • affichez la page
  • contrôlez vos teasers

Si vous ne voyez aucune modification, veuillez vider le cache de cette page en cliquant sur le symbole de l'éclair.

Si vous ne voyez aucun teaser, il se peut que cette page n'ait pas la bonne mise en page backend. Voir A propos des teasers comme partie intégrante de la structure des pages web RPTU.


Etape suivante

Instructions illustrées : configurer soi-même des teasers par plugin

Étape 5 : Créer le plugin d'élément de contenu pw_teaser

  • Créez un nouvel élément de contenu
  • Cliquez sur l'onglet "Plug-ins".
  • Cliquez sur l'icône "Teaser de page".

Étape 6 : Sélectionner la source de l'aguiche

dans l'onglet "Paramètres généraux", sélectionnez la source de vos teasers

  • toutes les sous-pages de la page actuelle
  • toutes les sous-pages de la page actuelle (récursif)
  • les pages sélectionnées individuellement
  • toutes les sous-pages des pages sélectionnées
  • toutes les sous-pages des pages sélectionnées (récursif)

Info : Récursif est rarement utile. Cela signifie une sortie de sous-pages et de sous-pages de sous-pages. Le teaser ne montre pas de quelle profondeur d'arborescence il provient. Vous pouvez indiquer la profondeur de récursivité. Veuillez vous limiter à 2 niveaux maximum.

Étape 7 : Sélectionner la mise en page du teaser

Choisissez la mise en page de l'aguiche en fonction de votre utilisation :

Teaser small (25%) : 4 teasers sont affichés les uns à côté des autres. Chaque teaser a une largeur de 25% de la page en vue de bureau.

Teaser small (50%) : Deux teasers sont affichés l'un à côté de l'autre. L'orientation est horizontale. Chaque teaser fait 50% de la largeur de la page en affichage desktop.

Teaser big (100%) : Un seul teaser est affiché par "ligne" et occupe 100% de la page. Si plusieurs teasers sont placés l'un sous l'autre, les images des teasers sont affichées alternativement à droite/à gauche. Si vous utilisez de grands teasers, vous pouvez également utiliser une top line, une ligne au-dessus du titre. Il s'agit de la seule mise en page dans laquelle la topline est éditée.

Facultatif Étape 8 : Personnalisation

  • A Adapter le tri par
    • Titre
    • Tri dans l'arborescence des pages
    • Date de création, de modification, de publication, d'expiration ou de nouveauté
    • aléatoire

Info : il n'est pas possible de trier individuellement les teasers. En cas d'urgence, veuillez recourir à un moyen détourné : créer un plugin pour chaque teaser individuel et les trier à votre guise en les disposant dans des grilles/conteneurs.

  • B Affichage de pages qui ne sont normalement pas affichées dans les menus (oui/non)
  • C Cacher la page actuelle de l'affichage
  • D Afficher des pages d'un certain type - saisie séparée par des virgules :
    • 1 - page standard
    • 3 - page de type lien vers URL externe
    • 4 - Page de renvoi

Info : les pages de type lien externe ne doivent être créées que dans des cas exceptionnels. Une description SEO n'est pas disponible pour ces pages et n'est donc pas affichée dans le teaser. Veuillez ne pas "cacher" les liens vers des pages externes dans le menu ou le contenu de la page. Les visiteurs de la page doivent toujours pouvoir décider en toute connaissance de cause de passer à un tout autre site.


Auto-apprentissage TYPO3

Exercice

  1. Créez une page avec la mise en page du backend "Standard avec teaser RPTU".
  2. Créez la première sous-page avec :
    • Titre : Publications
    • Image teaser : à votre choix, mais avec texte alternatif
    • Texte du teaser : "Toutes les publications du groupe de travail Muster sous la direction du professeur A. Muster".
  3. Créez une deuxième sous-page avec :
    • Titre : Membres
    • Image teaser : à votre choix, mais avec texte alternatif
    • Texte du teaser : "Faites connaissance avec les membres du groupe de travail AG Muster".
  4. Effacez le cache de la page de la première page en cliquant sur le bouton avec le symbole de l'éclair.
  5. Visualisez la page dans le frontend
  6. Quel est l'effet des titres de page particulièrement longs ? Faites des essais.
  7. Quel est l'effet d'un texte d'accroche très court ou très long ? Faites un essai pour voir.
  8. Créez maintenant un élément de contenu de type "Plugin pw_teaser" sur la première page.
  9. Paramétrez le plug-in de manière à ce que les sous-pages de la page actuelle soient teasées.
  10. Choisissez comme mise en page de grands teasers.
  11. Visualisez la page dans le frontend