Bien débuter avec le thème Smart

Le but de cet article n'est pas de vous décrire tous les paramètres de personnalisation qui accompagnent le thème Smart mais de vous expliquer plus en détails certains paramètres spécifiques afin de vous aider à les paramétrer de manière optimale.
 

Le thème Smart vous permet de définir jusqu'à trois polices différentes (pour le texte courant, les titres ainsi que le titre du site). Nous vous conseillons néanmoins de vous limiter à deux polices de caractères maximum, ceci afin de limiter le poids des Google Fonts chargées sur votre site. N'oubliez pas que plus vous définissez de polices différentes, plus vous augmentez le poids de votre page. Une seule police de caractère peut suffire, la distinction entre les titres et le texte courant pouvant s'effectuer par la couleur, la graisse et/ou l'ajout d'une ombre portée.

Après avoir défini vos polices de caractères ainsi que la couleur du texte et des liens,  assurez-vous de la lisibilité de votre texte par rapport au fond de page. Évitez les textes clairs sur fonds clairs (ex : texte gris clair sur fond blanc) ou peu contrastés (ex : texte orange sur fond rouge). Si vous définissez un motif de fond de page, assurez-vous qu'il ne nuise pas à la lisibilité du contenu du site.

La couleur principale sera celle utilisée pour la mise en avant d'éléments, tels que la date dans les listings des articles du module Blog. Accessoirement, ce jeu de couleurs sera repris pour l'état survolé et actif des boutons présents sur le site, ainsi que pour la mise en avant de lignes et de colonnes. Il est donc important que la couleur principale contraste avec la couleur de fond de page.

Cette partie concerne l'apparence de tous les éléments présentés sous forme de listes ou de vignettes, autrement dit la plupart des éléments affichés par les modules installés sur votre site. Définissez la couleur de fond ainsi que celle des bordures. cette dernière sera reprise pour la couleur des bordures des tableaux affichés sur le site.
Vous pouvez définir une couleur de fond semi-transparente afin de laisser apparaître par transparence la couleur ou le motif de fond que vous aurez préalablement défini en arrière-plan de page.

Tout d'abord, gardez en tête que plus vous affichez d'éléments dans votre menu (titre du site, logo, panier, espace membre, moteur de recherche et langues du site), moins vous disposez d'espace pour afficher l'intégralité des liens du menu. Si l'espace restant dans votre menu est insuffisant pour afficher tous les liens que vous avez défini, les derniers liens ne seront pas affichés. Testez votre site sur différentes résolutions pour vérifier que tous les liens de votre menu horizontal restent visibles sur toutes les résolutions.

Position du menu

Indiquez si le menu doit se superposer sur l'entête du site ou s'afficher au dessus.

Exemple de superposition du menu horizontal sur l'entête

Hauteur du menu

Définissez la hauteur du menu horizontal sur "normal" (50px), ou "étendue" (80px). Sur les résolutions inférieures à 992px, la hauteur du menu est automatiquement ramenée à 50px.

Aligner sur la zone de contenu

La zone de contenu est la partie où s'affiche le contenu de vos pages. Aligner le contenu du menu horizontal sur la zone de contenu du site permet d'éviter que le contenu du menu horizontal s'étale sur toute la largeur de la fenêtre, comme le montre l'illustration ci-dessous :

Alignement des liens du menu

Définissez la position horizontale des liens dans le menu. L'option "centré" permettra de centrer les liens par rapport à la fenêtre du navigateur.

Hauteur des liens du menu

Choisissez "automatique" pour que l'arrière-plan du lien s'étale pas sur toute la hauteur du menu. "Egale à la hauteur du menu" permet d'étendre la hauteur du lien à celle du menu. cette seconde option vous permet plus loin de définir un "séparateur vertical", autrement dit, une bordure entre chaque lien.

Exemple d'ajustement de la hauteur des liens du menu : hauteur des liens égale à celle du menu avec séparateur vertical, puis hauteur des liens automatique.

Animation du fond

Après avoir défini une couleur de fond des liens au survol, vous pouvez demander à animer le fond des liens. Ainsi, après activation de l'effet, l'arrière-plan se déplacera horizontalement d'un lien à l'autre.

Positionnement

Vous avez la possibilité de définir pour votre logo et le titre du site un emplacement différent sur écrans fixes et mobiles. Vous pouvez également définir une taille spécifique à un affichage sur mobile.

Taille du titre

La taille du titre peut être ajustée pour les apparails mobiles. L'unité choisie pour définir sa taille est le "rem", une unité de taille relative à la taille du texte de votre site. Un titre d'une taille de 2rem sera 2 fois plus gros que le texte courant, 4 fois plus gros s'il fait 4rem, etc. Pour résumer, 1rem = 100% de la taille du texte (14px par défaut pour le thème Smart).

Affichage du titre dans l'entête du site à une taille de 8rem et réduction de sa taille à 4rem sur mobile.

Taille du logo

Vous pouvez redimensionner votre logo en fonction de la position choisie. Lorsqu'il est affiché dans le menu horizontal, sa hauteur maximale sera de 70px ou 40px en fonction de la hauteur choisie pour le menu. S'il est affiché dans l'entête ou dans le menu vertical, vous pouvez choisir de le réduire à 50% de sa taille initiale sur les appareils mobiles.

L'entête du site constitue un élément essentiel du design de votre site, de part sa taille et son positionnement. Il convient donc d'ajuster correctement les divers paramètres concernant cette zone.

L'entête étant de format horizontal, il convient donc d'utiliser une image plus large que haute. Idéalement, l'image aura une largeur égale à 1,5 fois sa hauteur, exemple : 1920px de largeur sur 1280px de hauteur. Choisissez une image de grande taille, capable de s'afficher correctement sur grands écrans.

Après avoir défini une image en tant qu'arrière-plan, vous pouvez ajuster sa position verticale (haut, milieu, bas) en fonction du cadrage souhaité.

Si vous avez demandé à afficher le logo ou le titre du site dans l'entête, ajustez la position horizontale et verticale du contenu de l'entête. Tout comme pour le contenu du menu horizontal, vous pouvez demander à aligner le contenu de l'entête sur la zone de contenu du site si vous avez opté pour un alignement horizontal à gauche ou à droite.

Vous pouvez appliquer un effet "parallax" sur l'image de fond afin d'obtenir un effet de profondeur lors du défilement de la page. Pour plus d'informations sur l'effet parallax et un exemple d'utilisation, référez-vous à la documentation en ligne sur le plugin Parallax du Framework EMS, à partir duquel le thème Smart a été conçu.
Si l'effet parallax n'est pas activé, vous pouvez demander à ajuster la hauteur de l'entête automatiquement. Dans ce cas, l'entête s'ajustera à la hauteur de l'image de fond, indépendamment de la hauteur de l'écran.

Affichage de l'entête

Pour désactiver l'affichage de l'entête, rendez vous dans Configuration > Menus, puis désactiver l'affichage de la zone "Entête du site" dans la structure par défaut.

Si vous ne souhaitez afficher l'entête que sur la page d'accueil du site :

1. Désactivez l'affichage de l'entête dans la structure "Structure par défaut".
2. Créez une nouvelle structure, nommez-la par exemple "Accueil", activez la zone "Entête du site" dans cette structure puis enregistrez-la.
3. Éditez la page d'accueil
4. En bas de page, dans la partie "Plugins", définissez la structure "Accueil" comme structure par défaut puis sauvegardez.

Pour plus d'informations concernant le fonctionnement et l'utilisation des structures sur e-monsite, nous vous invitons à consulter ce tutoriel consacré aux structures de menus.

Définissez simplement les couleurs de fond et les bordures sur ces deux zones. Vous avez la possibilité de supprimer l'espace vertical séparant le menu vertical et la zone de contenu en cochant la case "Coller à la zone de contenu". Vous pourrez alors insérer une bordure de séparation entre le menu vertical et la zone de contenu.

Pour égaliser la hauteur du menu vertical et celle de la zone de contenu, cochez la case "Ajuster la hauteur du menu".

Enfin, vous pouvez fixer le menu vertical de sorte qu'il reste fixe lors du défilement de la page. Cet effet suppose que votre menu vertical soit moins haut que la zone de contenu du site. Dans ce cas, le menu vertical ne sera pas fixé.

La principale nouveauté concernant cette zone est le fait de pouvoir définir une frise décorative qui s'appliquera sur le bord supérieur du pied de page. Définissez le type de frise souhaité en fonction de votre design puis personnalisez la couleur de fond du pied de page.

Quatre frises décoratives sont disponibles pour le bord supérieur du pied de page

La plupart des réglages seront à ajuster en fonction de votre propre contenu. Afin d'éviter quelques soucis d'affichages sur certains appareils, notamment mobiles, nous vous conseillons de respecter les règles suivantes :

• Logo de 100px de large environ si vous choisissez de l'insérer dans le menu horizontal.
• Logo de format carré ou horizontal si vous choisissez de l'insérer dans le menu horizontal.
• Pas plus de 7 liens dans le menu horizontal, courts et concis (ex : préférez "Contact" à "Nous contacter", "Partenaires" plutôt que "Nos partenaires", etc.), afin d'optimiser la place disponible dans le menu horizontal
• Pas plus de 5 widgets dans les menus verticaux afin de limiter la hauteur du menu vertical
• Tester régulièrement son site sur diverses résolutions
• Optimiser systématiquement vos images via des services en lignes tels que Tinypng afin de réduire leur temps de chargement et réduire ainsi le poids de votre page.