Éléments de contenu

La grande diversité d’éléments de contenu disponibles dans SMARTGEAR ouvre de nombreuses possibilités en termes de mise en page.

Chaque élément est plus ou moins versatile, grâce à sa configuration. Voici la liste des éléments disponibles, ainsi que leur objectif.

Objectif : Introduire une section de site et indiquer la structure SEO d’une page.

Recommandations :

• N’utilisez qu’un h1 par page. Il peut être ajouté automatiquement par le système dans le cas d’un blog par exemple.
• Ne faites pas des titres trop longs. Comptez 100 caractères au maximum.

Objectif : Introduire un texte libre, composé de paragraphes et de textes stylisés.

Recommandations :

• Même recommandations pour les titres
• Même recommandations pour les images
• Ne rédigez pas des pavés de textes trop longs. Il n’y a pas de limites d’éléments donc n’hésitez pas à couper les longs textes en plusieurs éléments
• Ne copiez-collez pas les textes directement depuis Word. Le formatage de Word peut altérer le rendu sur un site web. Préférez l’option “Copier sans formatage” (Ctrl + Maj + V sur Windows) et de reproduire le formatage souhaité via l’éditeur.

Objectif : Introduire une image et la configurer pour qu’elle soit optimisée pour le web.

Recommandations :

• Recommandations des titres
• Il faut toujours redimensionner une image au maximum de son affichage :
  • Une image en plein écran devrait être recadrée en proportionnel, largeur 1920
  • Une image dans le contenu devrait être recadrée en proportionnel, largeur 1200
  • Une image en habillage de texte peut être recadrée aux dimensions exactes (privilégier un ratio 4:3 ou 2:1 !)
• Une image doit toujours être allégée avant d’être mise sur le site. Le système se chargera de retravailler vos images, mais le faire en amont garantira des performances optimales !
  • Plus d’informations : https://www.webexmachina.fr/article/2018/07/comment-illustrer-un-site-web.html
• Tâchez de prendre des images dont le sujet est centré. Il est très difficile de garantir le cadre d’une image sur tous les supports existants lorsque le sujet est désaxé.
• Pour les images d’ambiance (fonds de page ou de composants), privilégiez au maximum des images sans personnel ou équipe. Les redimensionnements liés au responsive tronqueront toujours un visage ou un cou, sans que ceci soit réglable à tous les coups.

Objectif : Ajouter un lien hypertexte vers une page de votre site ou un autre site.

Recommandations

• Recommandations des titres
• Un lien vers un fichier ou vers un site externe devrait toujours s’ouvrir dans une nouvelle fenêtre.
• Tous les liens devraient avoir un texte et un titre renseigné, afin d’aider le SEO à comprendre son intérêt.

Objectif : Encapsuler un extrait d’un autre site sur votre site (Vidéo Youtube, Vimeo, etc…)

Recommandations :

• N’importez jamais de code dont vous ne connaissez pas l’origine.
• En cas de doute sur la procédure : contactez-nous !

Les usages courants :

• Récupérer le code d’une vidéo Youtube
• Récupérer le code d’une vidéo Viméo
• Récupérer le code d’un tweet
• Récupérer le code d’un post Facebook
• Récupérer le code d’un post Instagram

Objectif : Disposer une liste d’éléments spécifiques (caractéristiques produit…)

Recommandations :

• Gardez en tête qu’un tableau ne se lit pas très bien sur mobile. Évitez donc les gros tableaux avec de la donnée importante. Elle pourrait ne pas être vue correctement sur mobile !

Objectif : Ajouter des contenus qui se déploient/rétractent.

Recommandations :

• Gardez en tête qu’un tableau ne se lit pas très bien sur mobile. Évitez donc les gros tableaux avec de la donnée importante. Elle pourrait ne pas être vue correctement sur mobile !

Objectif : Faire défiler des éléments sur la même hauteur (carousel, slider…)

Cet élément est découpé en deux étapes. D’une part, vous avez la liste de toutes les slides à renseigner, puis vous avez la configuration.

Dans la section “Slides”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

De manière globale, vous pouvez configurer le comportement du slider avec les champs suivants :

Recommandations :

• Un slider cache une partie du contenu à vos usagers, qui doivent patienter avant de les voir. Ne mettez pas d’informations capitales dans le slider.
• Plus d’informations sur https://www.webexmachina.fr/article/2018/07/comment-illustrer-un-site-web.html

Objectif : Intégrer une vidéo sur votre site

Recommandations :

• Ne lancez pas une vidéo au chargement de la page. L’usager n’a pas forcément le temps de naviguer jusqu’à elle et la présence non souhaitée de son peut le faire fuir.
• Si vous hébergez une vidéo sur votre site, gardez en tête qu’elle doit respecter le poids maximum de 20 Mo autorisé par défaut. Pour en savoir plus, voir notre article → https://www.webexmachina.fr/article/optimiser-une-video-pour-le-web.html

Objectif : Afficher une liste de fichiers à télécharger

Recommandations :

• Même recommandations que titre
• Veillez à alléger vos fichiers, des outils existent sur Internet pour cela, peu importe le type de fichiers

Objectif : Avoir un bloc flexible mettant en avant une section ou servant de bloc de navigation

Recommandations :

• Utilisez des images de la même taille avec le même ratio pour avoir des blocs de même taille
• Placez les éléments block-card dans une grille pour faire une navigation

Objectif : Lire un fichier PDF directement dans une page web

Recommandations :

• Un fichier PDF doit faire moins de 20 Mo pour être uploadé. Comme il est chargé automatiquement, nous vous recommandons d’utiliser un outil de compression avant de l’afficher sur votre site.

Objectif : Afficher des contenus dans une fenêtre dédiée

Recommandations :

• Utilisez l’ouverture automatique avec parcimonie. Les usagers n’apprécient pas d’avoir des fenêtres qui s’ouvrent à leur insu.
• Cet élément peut être utilisé à des fins plus complexes, n’utilisez pas les champs avancés sans une bonne raison.

Objectif : Afficher un chiffre-clé animés

Objectif : Disposer des contenus au sein d’une grille responsive

Cette section est plus complexe à expliquer et a sa propre section. Cliquez sur le bouton ci-dessous pour y accéder.

Objectif : Mettre en page une liste d’icônes ou d’images

Dans la section “Vignettes”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Recommandations :

• Recommandations des images

Objectif : Afficher une liste de notes sous formes d’icônes et d’avis clients

Dans la section “Notes”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Objectif : Afficher un slider de témoignages optimisé pour tous les supports

Dans la section “Témoignages/citations”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Recommandations :

• Recommandations des images
• Recommandations des sliders

Objectif : Mettre en avant les paroles d’une personne

Recommandations :

• Recommandations des images

Objectif : Afficher des blocs de tarifications avec les prestations associées

En premier lieu, remplissez les champs de configuration suivants :

Dans la section “Blocs de prix”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Objectif : Afficher des contenus dans une navigation par onglets

Dans la section “Tabs”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Objectif : Afficher une chronologie ou un historique en mettant en évidence des moments-clefs

En premier lieu, remplissez les champs de configuration suivants :

Dans la section “Éléments”, s’il n’y a pas d’élément, créez le premier avec l’icône suivante :

Pour chaque élément, vous pouvez, dans le coin en haut à droite :

• le supprimer via
• le dupliquer via
• créer un nouvel élément après le bloc via

Et configurer les champs suivants :

Objectif : Mettre en avant une page ou une section d’une page web

Recommandations :

• Recommandations des images
• La bannière étant amenée à être redimensionnée sans conservation du ratio, choisissez des images d’ambiance où l’éventuel sujet est bien centré, car il est difficile de prévoir le repositionnement des images sur toutes les résolutions.