Les options d’Avada, guide technique complet du thème WordPress

Les options d’Avada, le fameux best seller des thèmes de CMS, sont ni nombreuses que le menu qui leur est dédié peut paraître déconcertant lorsqu’on découvre ce thème WordPress. Le fonctionnement d’Avada étant directement lié au paramétrage de ses options, je vous propose ici un article complet pour vous aider à vous faire un avis sur le réel potentiel de ce thème premium.

N.B. Je vous rappelle que Avada ne propose que très peu de réglages via le menu « Apparence -> Personnaliser », et, qu’à ce titre, il ne bénéficie pas d’une prévisualisation et temps réel des modifications réalisées par l’utilisateur (ce qui est aussi le cas pour nombre de thèmes concurrents comme Enfold).
Afin d’avoir une vision globale et de nous faire notre propre avis sur le réel potentiel de ce thème premium, nous allons donc devoir parcourir l’intégralité du menu « Avada -> Options du thème » (ou Theme Options pour ceux qui n’auraient pas encore téléchargé le fichier de traduction d’Avada) et comprendre les modifications engendrées par ses nombreuses options.

Les options globales du thème Avada

Étant essentiel de se familiariser avec les pages d’options pour utiliser Avada, je vous propose tout de suite de bloquer l’heure qui suit, DE PRENDRE UNE TRÈS GRANDE RESPIRATION et d’explorer tout de suite cet effrayant menu ! 😯

Les options de mise en page, le Layout

Le menu « Layout » (ou mise en page) du thème vous permet d’opter pour un design « encadré » (boxed), c’est à dire limité au conteneur central de la page ou pour un design « large » (wide) qui nous autorise à designer des sections horizontales sur toute la largeur de la fenêtre (le contenu étant, lui, toujours centré dans le conteneur).

Notez tout de même que certaines options ne sont pas traduites au sein du fichier de traduction proposé sur le site et d’autres peuvent prêter à confusion.
En effet, le « Page Content Padding » fait ici référence aux marges internes de la balise #main qui enveloppe le contenu de la page, mais pas à son conteneur central (oui en effet, on entre déjà un peu dans la technique ;-)) et l’option « Boxed Mode Offset Scroll Mode » vous permet de choisir de faire défiler ou de rendre « fixe » le fond de la page pour un design « encadré »…

Vous pourrez également définir ici la largeur de la page, ses marges horizontales et verticales, et définir la largeur relative des barres latérales.
Si ces réglages restent plutôt intuitifs, attention quand même à ne pas mettre à mal l’équilibre de la page avec de mauvais réglages.

Ça va vous suivez jusque là ? On continue ! 😎

Les Menus de navigation d’Avada, des menus, encore des menus

La section « Menu » vous permet de styliser les différents menus proposés par Avada.
La hauteur (Menu Height) définit en fait une hauteur globale ainsi qu’une hauteur de ligne pour tous les liens (balises d’ancres <a>) du menu ciblé, permettant, entre autres, d’espacer les éléments de menu et leur barre de stylisation.
L’effet attendu est au rendez-vous, mais on relève néanmoins une incohérence : une règle CSS est bien écrite pour le sélecteur, mais elle est aussi définie inline, c’est à dire directement dans chaque balise de lien, ce qui vient alourdir le code inutilement…
L’option« Hilight Style » ou mise en avant, permet de styliser les items au survol, notamment pour les sous-menus déroulants.

Avada vous propose une option « bar » pour afficher une barre horizontale supérieure pour chaque item survolé, une flèche (« Arrow »), ou une couleur d’arrière-plan (background) pour tout élément survolé ou recevant le focus.
Attention quand même à définir dans vos options Avada une couleur de police adéquate pour les éléments survolés sous peine de prendre en contraste et en lisibilité.

Le padding des éléments du menu (Main Menu Item Padding) contrôle la marge interne droite du texte du menu (l’ancre). Mais si vous optez pour un « stycky menu », littéralement un menu collant au moment du scroll de la page, ces valeurs seront définies à 0.

• « Menu Drop Shadow » est censé vous donner une légère ombre portée sous le menu ;
• « Menu Dropdown width » (ou « largeur du menu déroulant ») définit la largeur des sous-menus avant passage à la ligne ;
• « Menu Dropdown Item Padding » détermine les marges internes verticales des items de sous-menus déroulants
• « Menu Dropdown divider » crée une bordure supérieure aux éléments de sous-menu d’Avada ;
• « Menu Dropdown Indicator » crée un chevron bas indiquant la présence d’un sous-menu au niveau supérieur ;
• « Menu Search Icon » vous permet de bénéficier, ou pas d’un champ de recherche dans la barre de menu d’Avada ;
• Vous pourrez aussi définir la couleur de fond des sous-menus ainsi que la couleur de fond des éléments survolés avec « Menu Dropdown Background Color » et « Menu Dropdown Background Hover Color » ;

Vous définirez ensuite les éléments typographiques du menu principal d’Avada : une police et une police alternative, taille des caractères, alignement, couleur des ancres (les liens) et couleur au survol. Rien à dire, la gestion du texte sur Avada est très aboutie.

La section « Menu » vous permettra enfin de définir, pour votre thème Avada, des réglages d’un menu « flyout » (appelé aussi offset menu), d’un menu secondaire au plus haut de la page (pour afficher des informations de contact ou icônes de réseaux sociaux), un menu spécifique pour les mobiles et un méga menu qui ne sert méga à rien si ce n’est à avoir un impact négatif sur votre optimisation SEO !

Cette page d’options est assez représentative du paramétrage du reste du thème Avada : un peu fastidieux… et les pages de réglages des 4 autres menus ne sont pas faites pour faire démentir cette impression (bien qu’il ne soit pas non plus vital de les utiliser tous sur son site internet). Il va donc nous falloir de la patience pour maîtriser cette petite usine à gaz !
On y va ! 😛

Le thème Avada vous donne le choix des options Responsives

Cela peut paraître curieux, mais Avada vous propose de désactiver totalement les fonctionnalités Responsives du thème. Quand on connaoit l’importance du design responsive pour Google, on se demande un peu à quoi sert cette option !

Les 4 options suivantes du menu « Responsive » concernent les breakpoints des grilles de blog et portfolio, de l’en-tête du site (le header), du contenu (comprenant le pied de page) et de la barre latérale (sidebar).

Les breakpoints représentent les largeurs d’écrans sous lesquelles le design passera en version mobile. Ici aussi, si vous n’êtes pas familiarisé avec la stylisation CSS, il vaudra peut être mieux demander de l’aide à de votre webmaster.

Vous pourrez aussi désactiver le zoom sur mobiles ou activer le dimensionnement automatique des polices de caractères dans cette section.

Cette section nous plonge donc en plein paradoxe puisque ce thème WordPress principalement fait pour l’utilisateur néophyte propose des réglages de breakpoints des feuilles de styles qui ne lui parleront que peu, voire pas du tout. Serions-nous en présence d’un thème WordPress un peu « technique » ? Sur certains points, oui, mais Avada nous propose aussi beaucoup d’autres options bien plus simples à gérer. Voyons cela ! 😉

Colors, gestion des couleurs sur Avada

Un « thème » colorimétrique prédéfini pour Avada ?

L’option Predefined Theme Skin permet de choisir un thème sombre ou clair. La version sombre définit des règles CSS pour les éléments :

div.fusion-header {
	background-color: rgba(41,41,42, 1);
}
#fusion-gmap-container, #main, #sliders-container, #wrapper, .fusion-separator .icon-wrapper, body, html {
    background-color: #29292a;
}
.fusion-footer-widget-area {
    background-color: #2d2d2d;
}

Tout cela conviendra peut-être à un site gothique… ou ultra design, à vous de voir ! 😉

Le schéma prédéfini de couleurs du thème

Avada vous propose 10 schémas de couleurs prédéfinis allant du rouge vif au gris. Ces schémas assignent des combinaisons de couleurs sur les différents éléments de designs du thème. Le premier élément impacté est la couleur de police et la barre signalant le menu courant.

Il vaut mieux être vigilant avec cette option, et éviter de modifier involontairement le panel global des couleurs sur tout le site. Le mieux est donc peut être de tester ces schémas de couleurs en détail avant de personnaliser les éléments du thème un à un.

Enfin, vous pourrez choisir isolément en bas de cette page la couleur primaire de votre thème Avada qui contrôle la couleur par défaut des éléments mis en avant sur le thème.

En-têtes du site, 7 headers prédéfinis

Contenu de l’en-tête

Le thème WordPress vous donne le choix de l’en-tête, mais si le choix est assez large, il vous faudra vous résoudre au compromis :

• Un header simple avec logo à gauche et menu à droite ;
• le même header avec un menu supérieur de réseaux sociaux juxtaposé à une phrase d’introduction ;
• une déclinaison de l’en-tête identique à la dernière avec un font coloré pour le menu secondaire ;
• Un header avec logo à gauche, et une tagline suivi d’un champ de recherche à droite, un menu secondaire supérieur et le menu principal sous l’en-tête ;
• Un logo centré avec menu secondaire supérieur et menu primaire inférieur ;
• Un en-tête minimaliste comprenant un logo à gauche et 2 icônes à droite pour le champ de recherche et un menu « mobile » ;
• Un header proposant un logo centré entouré du menu primaire.

Les visuels de choix d’en-têtes sont assez parlants pour vous permettre de vous y retrouver, mais vous devrez mettre un peu les mains dans le code si vous souhaitez « customiser » la structure des en-têtes proposées sur Avada.

Les dernières options de la page de réglages d’en-têtes vous permettront de choisir un contenu pour la barre supérieure du menu secondaire (située au plus haut de la page), ainsi que la position globale du slider (au cas où vous auriez envie d’en insérer un ailleurs que sur votre page d’accueil).

Une Image pour l’en-tête d’Avada ?

Sur Avada, l’en-tête est la partie supérieure incluant le logo et le menu. Vous pourrez y ajouter une image de fond et même la rendre « flexible », du moins demander à ce que l’image de fond remplisse 100% du fond de l’en-tête.

Mais gardez toujours à l’esprit que seul un décor discret vous permettra de conserver la lisibilité de votre menu.
De plus votre image étant chargée en CSS, vous ne pourrez ni l’optimiser pour différents supports ni proposer de texte alternatif à même de renforcer votre référencement… à méditer !

Au passage, je vous conseil vivement de visiter ces deux sites si vous souhaitez en savoir plus sur CSS et son historique ou vous familiariser avec le langage CSS pour écrire vos propres feuilles de styles.

Stylisation de l’en-tête et couleur de fond

Depuis le sous-menu « header styling », vous pourrez aussi déterminer une couleur de fond pour la « bannière » principale, définir des marges internes (padding), décaler l’ensemble de l’en-tête (on regrettera pour l’accessibilité du thème que l‘unité autorisée ne soit que le pixel), et assigner une ombre portée non modifiable.

Enfin vous pourrez, via le menu « Sticky Header » (En-tête collant) décider de rendre votre header « sticky », au scroll de la page, sur les trois principaux supports (bureau, tablettes et mobiles) c’est à dire de le coller au sommet de la page web.

Les réglages principaux du logo

Vous pourrez aussi centrer le logo avec les templates d’en-tête 5 ou en choisissant l’emplacement de l’en-tête à gauche (ou à droite). Sur tous les autres templates d’en-tête, vous pourrez inverser le menu et le logo en alignant celui-ci à droite de la bannière.

Vous aurez aussi la possibilité de télécharger votre logo (ce qui est la moindre des choses), et de choisir des versions optimisées pour les écrans Retina et/ou mobiles.
Le thème Avada vous autorise quelques définitions de marges supplémentaires pour positionner plus finement votre logo dans la bannière supérieure.

Un favicon pour les écrans Retina.

Avada vous permet de choisir des images pour 5 supports (écrans types). Pour rappel, les favicons sont généralement des fichiers de 16px de large. Ici 4 autres formats sont proposés : 57×57, 72×72, 114×114 et 144×144.
Les écrans de référence sont les produits Apple, mais rassurez-vous, c’est bien la taille des appareils qui est ici ciblée.

Réglez la barre de titre de vos pages

Vous l’aurez peut-être remarqué, Avada affiche par défaut dans la barre de titre une image d’arrière-plan… du meilleur goût ! 😉

Mais pour vous débarrasser de ce fond indésirable il vous suffira de supprimer le fichier image en bas de page, option « Page Title Bar Background Image ».
Vous pourrez alors délimiter cette barre de titre en jouant sur les couleurs du fond et des bordures de cette zone.

Bon, ici encore pas le choix, si vous ne souhaitez que la bordure basse, il faudra passer par un peu de CSS personnalisé.
Ceci étant dit, vous pourrez quand même vous amuser avec la barre de titre d’Avada et choisir d’afficher :

• son contenu et ses bordures ;
• son contenu uniquement ;
• ne rien afficher du tout.

Vous pouvez aussi définir la hauteur par défaut de la barre de titre ou sa hauteur sur mobile, sa couleur de fond, l’alignement, la couleur, taille de police et espace interligne, et même un effet Parallax sur l’image de fond (si vous êtes vraiment décidé à opter pour cette solution).

Breadcrumbs, un menu important pour le SEO

Depuis le menu « Aide la navigation », vous accédez aux réglages du menu breadcrumbs (ou fil d’Ariane). Le breadcrumbs proposé par Avada est bien balisé et utilise notamment la convention schema.org, je vous déconseille donc de lui préférer le champ de recherche, à moins que vous ne souhaitiez utiliser une solution tierce partie comme celle de YOAST et ajouter vous-même une ligne de code contenant une barre inférieure dédiée sous la barre de titre.

Sur cette même page, vous pourrez choisir d’afficher les catégories ou les types de posts dans ce menu et bien entendu, définir les réglages de base (couleur, taille de police, etc.).

N’hésitez pas à consulter la page du thème Avada chez Themeforest. Vous y trouverez l’ensemble des fonctionnalités proposées par le Fusion Builder ainsi qu’une démo en ligne vous permettant de vérifier si ce thème répond à l’ensemble de vos besoins 😉

Sliding bar, une barre défilante offset

Avada vous offre la possibilité de créer une zone de widgets comportant 1 ou plusieurs colonnes, s’affichant au click sur un bouton « toggle » et positionnée en haut de la page. C’est cette slidingbar qui est utilisée pour proposer des paramètres de customisation sur le thème de démonstration d’Avada.
Les zones « widgetisées » seront créées en fonction du nombre de colonnes choisi et il vous suffira alors de vous rendre sur la page des widgets pour éditer ceux de cette zone.

Les réglages du pied de page du site, le menu Footer d’Avada

Ces options sont à peu près les mêmes que pour la slidingbar. Vous définissez le nombre de colonnes correspondant à vos zones widgetisées de pied de page et vous vous rendrez ensuite sur la page d’administration des widgets pour y placer votre contenu.
Vous activerez (ou pas) la zone du copyright (que vous pouvez alors remplir), et vous définissez un comportement global pour votre pied de page :

• « Sticky », collant au bas de la page ;
• « Parallax Effect » pour lui fournir un fond animé au scroll ;
• « Stycky and Parallax background image » pour les deux en même temps.

Bon, tout cela est très amusant, mais cela n’est pas facilement intégrable à un site pro et vous ne vous en servirez qu’assez raremen…

Les 2 sous-menus de « Footer » restants permettent de définir l’image de fond (si vraiment vous envie de vous bruler les yeux ;-)), mais surtout les styles du pied de page comme les marges internes, la couleur de fond, la taille des bordures et leur couleur, les séparateurs et sa typographie (police de caractères, taille, graisse, couleur, etc.).
Cette dernière page d’option du Footer est donc la plus importante de la section et a un réel intérêt.

Barres latérales, des sidebars pour chaque type de contenu

Avada vous propose ici de créer une « sticky sidebar », à savoir, une barre latérale restant fixe au scroll de la page.
Cette option peut être intéressante au cas où vous proposez systématiquement une inscription à une newsletter ou que vous avez mis en place des liens affiliés sur vos pages.

Il est aussi possible de définir une marge interne à la barre latérale utile si vous définissez une couleur de fond avec l’option suivante, une couleur de fond spécifique pour les titres de widgets (encore du bon goût ;-), ainsi que la taille et la couleur des titres des widgets affichés.

Avada vous propose ensuite une page de réglages de barre latérale pour chaque type de contenu du site :

• Les pages ;
• Les items de portfolios ;
• Les archives (listings) de portfolios ;
• Les articles de blog ;
• Les archives (listings) d’articles de blog ;
• La page de résultats de recherches ;
• La page du calendrier Event Calendar.

Les réglages proposés sont, à peu de chose près, présents pour chacun de ces éléments.

« Activate global sidebar » vous permet d’activer la même barre latérale pour tous les éléments d’un certain type (page, article, portfolio, etc.).

« Global Sidebar 1 » et « Global Sidebar 2 » permet de définir systématiquement les mêmes barres gauche et droite pour tous les éléments de ce même type.

« Global Page Sidebar Position » permet de choisir quelle barre latérale (droite ou gauche) affichera la sidebar 1 sur les pages de ce type.

Background, réglage du fond des pages de votre site internet

Si vous avez envie de définir une image d’arrière-plan ultra HD pour l’ensemble de votre site internet ou une couleur de fond kaki ! Et bien vous avez trouvé page d’options qu’il vous faut (il vous est possible d’y choisir une couleur ou une image de fond pour tout le site), mais cette option, surtout utilisable pour les layouts encadrés, ne sera peut-être là encore pas du meilleur effet…

Typographie

Ce menu d’options est consacré aux choix typographiques sur vote thème Avada. Les éditeurs du thème premium se targuent d’embarquer plus de 500 polices de caractères différentes et il faut avouer que le compte y est.

Le sous-menu « Body Typography » va vous permettre de choisir la police du corps de vos pages et la couleur des liens.
Le sous-menu « Headers Typography », lui, vous permettra de régler finement les 6 niveaux de titres définis en HTML et d’attribuer une taille et une hauteur de ligne au titre des articles, ainsi qu’une taille aux titres des zones de commentaires, articles en relation, auteur, etc.

Enfin, le sous-menu « Custom fonts » vous permet d’importer un fichier de police et de vous référer via l’interface d’Avada pour assigner vous familles polices de caractères.

Le blog d’Avada !

Le blog est devenu un point central de tout site internet se destinant à prendre un peu d’ampleur et mettre en place une stratégie de référencement. Vous allez pouvoir choisir ce que votre thème Avada va afficher (ou pas) sur vos pages d’archives (votre fil d’actualité) et d’articles de blog.

Réglage de la page d’archives

Un clic sur le menu « Blog » vous amène directement sur l’onglet consacré à la présentation de votre page d’archives :

• « Blog Page Title Bar » vous permet d’afficher le contenu et une bordure, le contenu uniquement, ou de cacher totalement la barre de titre ;
• « Blog Assigned Page Title Bar » permet de définir la même chose pour la page spécifiquement choisie dans le menu de réglage de lecture de WordPress ;
• « Blog Page Title » (ou Titre de la page du blog) vous permet de redéfinir le titre de la page si vous avez choisi la page d’accueil pour afficher vous derniers articles alors que « Blog Page Subtitle » (ou Sous-titre de la page de blog) vous permet d’afficher un sous-titre dans ces mêmes conditions ;
• « Blog Layout » (Mise en page du blog) permet de choisir le type d’affichage du blog et des pages d’archives :
  1. « Grid » pour une grille en colonnes ;
  2. « Large », « Medium », « Large alternate », « Medium Alternate » pour un affichage sous forme de fil linéaire en jouant sur la taille des vignettes et le style des dates ;
  3. « Timeline » pour un affichage présentant un repère temporel (jalonné par les mois) ;
  4. « Masonry » pour une grille auto recomposée lors du redimensionnement de la fenêtre (très joli, mais ne sert à rien).

Vous déciderez ensuite d’afficher ou pas votre navigation de pagination, le nombre de colonnes de votre grille, une largeur fixe pour vos blocs d’extraits, les espacements pour la grille Masonry, les marges internes, le type de contenu affiché, les vignettes et les formats des dates.

Blog Single Post et Blog Meta, réglages des articles individuels et des métadonnées

Ces deux pages d’options permettent principalement de choisir quels éléments seront affichés sur la page d’un article, dans quelle zone, et quel type de métadonnées vous souhaitez utiliser.
Choisir d’afficher ou pas certaines métadonnées peut avoir un impact sur l’optimisation de vos contenus et de votre maillage interne. Prenez donc bien le temps de réfléchir à vos besoins avant d’afficher tout et n’importe quoi ! 😉

Le portfolio d’Avada

Sur WordPress un portfolio est généralement un type de contenu customisé (Custom Post Type) comme un autre qui, bien sûr, sert à présenter vos projets ou vos réalisations. Celui d’Avada ne déroge pas à la règle.

Vous allez donc pouvoir assigner un layout à la page d’archives de vos réalisations (un type de présentation) et y définir à peu près les mêmes réglages que pour la page d’archives de blog :

• Nombre de colonnes ;
• Espacements entre les items du portfolio ;
• Dimensionnement des images ;
• Nombre d’items par pages ;
• Longueur de l’extrait ;
• Affichage de la barre de titre ;
• Marges internes ;
• Pagination ;
• Slug des pages de portfilio ;
• Talle du texte des métadonnées.

La page de réglage des items individuels reprend quant à elle des réglages semblables à ceux des articles, à ceci près qu’un item de portfolio sert généralement à présenter un travail créatif, les réglages sont donc un peu plus spécifiques à ce type de contenus :

• Affichage de la navigation « Suivant » – « Précédent » ;
• Affichage de l’image d’illustration ;
• Taille de la colonne d’illustration ;
• Dimension de la page (pleine page ou page avec barre latérale) ;
• Titre pour la description ;
• Détails du projet ;
• Présentation des commentaires ;
• Affichage de l’auteur.

On regrettera ici que les pages d’éléments de portfolio ne soient pas plus personnalisables : Vous pourrez y personnaliser la taille de l’illustration du projet et choisir d’afficher ou pas le titre et les détails du projet.

On touche peut-être ici aux limites du thème Avada, puisque les modifications structurelles de ce type de pages nécessitent de retoucher le code du template, mais il est vrai que c’est le lot de beaucoup de thèmes WordPress premiums, et que les webmasters sont là pour réaliser ce genre de modifications ! 😉

Le paramétrage global des réseaux sociaux sur Avada

Une fois les boutons paramétrés, Avada propose sur le site 3 zones de partages sociaux :

• L’en-tête du site ;
• Le pied de page ;
• Le bas des articles et projets.

À Chacune de ces zones correspond donc un sous-menu d’options, lLe premier sous-menu de la section « Social Media » est, quant à lui, consacré au paramétrage de chaque lien de réseau social.

N.B. Notons que le système permet de paramétrer aussi bien les réseaux tels que Facebook ou LinkedIn que de configurer le lien RSS pour le site.

Les pages de réglages des réseaux sociaux de l’en-tête et du pied de page sont identiques. Notez tout de même que pour voir l’effet de vos réglages pour l’en-tête du site, vous devrez préalablement, depuis la page d’options « Headers », assigner « Social links » à l’option « Header Content 1 » ou « Header Content 2 ».
Vous pourrez donc régler la taille des polices de caractères, la position de l’étiquette de titre de l’icône sociale, la couleur des icônes ou encore un fond colorés.

Le sous-menu «Encadré partage social » (Social Sharing Box) vous permet de paramétrer le bandeau de partage proposé par Avada en dessous de vos articles ou de vos items de portfolio.
Vous y définirez une phrase incitative ainsi que les boutons de réseaux sociaux que vous souhaitez afficher sur ces pages.

Les slideshows d’Avada, des diaporamas en veux tu en voilà !

Le thème Avada vous permet de créer automatiquement un slider d’images pour introduire vos articles ou vous éléments de portfolio (en lieu et place de l’image à la une).
Le menu d’option « Slideshow » vous permet de définir les réglages de ce slider.

L’option « Post Slideshow Image » définit le nombre maximal d’images du slider et le nombre correspondant de boites de dialogue (metaboxes) à créer, dans la colonne de gauche de la page d’édition, permettant de les choisir.
Le reste des options permet de régler la vitesse et la navigation du slider.

Elastic Slider, un slider intégré pour Avada

Avada vous propose un slider fait maison. Elastic Slider vous permettra de créer des animations de page d’accueil rivalisant avec ses concurrents comme Revolution Slider ou Layer Slider.
Utilisez ce menu d’options pour définir les réglages globaux du slider.

Lightbox, pour afficher vos image dans des popups

La fonctionnalité Lightbox d’Avada vous permet d’afficher vos images à la une, vos images de sliders ou vos images de galeries dans un popup de grande dimension.
Les éditeurs d’Avada proposent donc ici une interface pour paramétrer des éléments tels que l’enveloppe, la vitesse d’animation, le fond, ou la description du plugin.

Search Page, gérer l’affichage des résultats de recherches sur Avada

Les résultats de recherches effectuées sur votre site peuvent correspondre à peu près à n’importe quoi. Avada vous autorise à définir le rendu d’affichage de ces résultats ainsi que le type de contenus pris en charge, à proposer un extrait ou la totalité du contenu trouvé, le nombre d’éléments affichés par page de résultats, ou encore d’afficher ou pas l’image à la une du contenu proposé.

La page de résultat de recherche ne devrait pas être proposée pour indexation aux moteurs de recherches, vous pourrez donc lui attribuer les options que vous souhaitez sans vous poser de questions. 😉

Extra, les petits plus d’Avada

Le menu Extra d’Avada est un peu la zone « fourre-tout » des options du thème :

• « Side Navigation Behavior » vous permet de choisir d’afficher les sous-menus au clic ou au survol pour le menu Offset ;
• « Image placeholder » définie à « On » affichera une image de remplacement pour vos contenus sur les pages d’archives, les articles en relation et les carrousels d’articles, lorsque vous n’en aurez pas fourni ;
• « Basis for Excerpt length » (Base pour la longueur de l’extrait) autorise à choisir un nombre basé sur les mots ou les caractères pour calculer la longueur des extraits ;
• « Excerpt […] display » sert à afficher ce symbole pour les liens « Lire la suite » ;
• « Comments on pages » autorise l’affichage d’un formulaire et des discussions de commentaires sur les pages (et pas seulement sur les articles) ;
• « Add nofollow to social link » est à définir sur « On » ;
• « Open Social icons in a new Window » sur « On » vous évitera de perdre vos visiteurs s’ils décident de regarder votre page Facebook.

Avada prend en charge vos articles en relation

Avada vous permet de conserver l’attention de vos lecteurs après la lecture ou le parcours de vos projets de portfolio en proposant, au bas de ceux-ci, une liste d’articles en relation.

Le sous-menu « Related Posts/Projects Layout » vous donne la possibilité d’afficher les titres et métadonnées des articles en relation en bas de leur vignette ou par dessus (au survol de la souris).

Notez que vous pouvez aussi activer et paramétrer un carrousel d’articles en relation sur cette page.

Les options « Project Maximum Columns », « Project Columns spacings » et « Project Image Size » vous permettent respectivement de :

• Définir le nombre de colonnes par ligne d’articles en relation ;
• Définir la marge gauche de chaque article de cette liste ;
• Décider d’harmoniser la taille des vignettes ou les laisser en l’état (vous voudrez les harmoniser ;-).

Featured Image Rollover, comportement de survol des images à la une

Au survol des d’archives, des éléments de galeries ou des portfolios d’Avada, le thème affiche un fond coloré ainsi que deux boutons (un lien vers l’image et un lien vers l’article).
Pour rappel, un overlay est une couche plus ou moins opaque permettant d’augmenter la lisibilité d’un texte affiché au-dessus d’une image.
Vous pouvez activer et régler les détails de ce comportement dans cette page d’options, et définir notamment :

• le type d’animation du fond ;
• la taille des icônes ;
• la présence de l’icône de zoom sur image et de lien vers l’article ;
• celle du titre de l’article lié ;
• les 2 couleurs de dégradé pour l’overlay (créant un fondu partant du haut vers le bas) ;
• la couleur des éléments au survol de la souris.

Les réglages rudimentaires de la pagination d’Avada

Pas grand-chose à voir ici. Avada utilise les réglages de pagination de WordPress (menu « Réglages » -> « Lecture »), vous pourrez donc tout au plus personnaliser sur cette page les marges internes, l’affichage des textes « suivant » et « précédent » et la taille de celui-ci.

Forms Styling, les maigres réglages de style pour les formulaires

Les réglages des formulaires du site sont aussi succincts que ceux de la pagination. Les éditeurs d’Avada vous permettent d’assigner une taille aux champs de texte, de recherche et autres listes déroulantes, et de définir une couleur de fond, de texte et de bordures pour les formulaires. On vous rappelle ici que ces options impactent uniformément l’ensemble des formulaires du site, y compris les formulaires tierce partie (fournis par les plugins tels que Contact Form 7).
Préparez-vous donc à travailler sur du CSS si vous désirez modifier davantage de choses sur les formulaires de votre site WordPress.

L’affichage des grilles d’archives

C’est strictement la même chose que pour les formulaires. Vous ne pourrez paramétrer que quelques couleurs et bordures pour ces éléments et vous résoudre à utiliser le style de grilles proposé par Avada, ou à le surcharger par de nouvelles règles de styles sur votre thème enfant.

Les options avancées d’Avada, pas faites pour tout le monde

Le menu « Code Fields », vous donne la possibilité d’insérer les codes de tracking des différents moteurs de recherche ainsi que tout autre code JavaScript que vous souhaitez écrire dans l’en-tête HTML de vos pages ou avant l’ouverture de sa balise <body>.

Ces champs ne vous seront pas très utiles si vous ne savez pas à quoi cela correspond. Faîtes d’ailleurs attention puisque des scripts mal codés pourraient mettre à mal votre site internet… demandez donc l’avis de votre webmaster si vous avez le moindre doute à ce niveau.

Un menu « Theme Features » pour une série de comportements globaux

• « Avada Option Network Dependencies » : n’y touchez pas, Cette option vous permet de ne voir les options que pour les éléments activés ;
• « WordPress jpeg Quality » : Vous pouvez optimiser la qualité de vos images avec cette option, et régénérer par la suite les différentes vignettes produites par WordPress à l’aide du plugin Regenerate Thumbnail. Bon, demandez à votre webmaster d’optimiser vos images, le résultat sera quand même plus garanti ;
• « Smoooth Scrolling » est un script JavaScript qui va « adoucir » le scroll de la page et remplacer la barre de scroll (pas hyper inutile) ;
• « Code block Encoding » vous permettra d’écrire des scripts directement depuis l’éditeur, si vous n’êtes pas développeur, cela ne vous sert à rien, et si vous êtres développeur, vous voudrez insérer votre code autrement.. Laissez l’option à « Off » ;
• « Mega Menu »… une des pires inventions du web ayant un impacte négatif certain sur la répartition du « jus » de votre « Page Rank », donc sur le référencement de vos pages internes ;
• « Avada Dropdown Styles » est fait pour palier à de potentiels problèmes d’affichage des champs <select> et listes déroulantes, notamment en cas d’utilisation de plugin tierce partie. Tant que tout va bien, n’activez pas cette option ;
• « CSS Animations » : désactivez cette option si votre site est trop lent ;
• « CSS Animations on Moibiles » et « CSS Image Hover Animations on Mobiles » devraient, à mon avis, être laissées sur « Off » pour des raisons similaires ;
• « YouTube API Script », « Vimeo API Script », « Google map Script » et « ToTop Script » peuvent être activé, mais désactiver « ToTop Script » sur les mobiles ;
• Vous pouvez désactiver « Fusion Slider » et « Elastic Slider » si vous ne les utilisez pas ;
• Font Awesome est la librairie utilisée pour les widgets d’icônes du site, activez l’option si vous souhaitez vous en servir ;
• Open graph Meta Tag permet de formater correctement vos contenus pour Facebook.
• Enfin les rich Snippets sont utilisés par Google pour baliser de façon sémantique votre site, garder donc cette option active.

« Dynamic CSS & JS »

Cette page d’options d’Avada permet de proposer des fichiers de scripts décompilés (donc plus lourds), et de réinitialiser le cache des fichiers CSS et JavaScript.
À moins que vous n’ayez besoin de visualiser le résultat de modifications importantes réalisées sur votre site, ne touchez pas à cette zone.

Custom CSS, des CSS personnalisées à utiliser avec précaution

Les éditeurs d’Avada laissent à portée de clic une page d’option permettant la l’ajout de règles CSS pouvant surcharger le thème.
Si vous n’êtes pas webmaster ou que vous ne savez pas bien utiliser CSS, je vous déconseille de vous servir de la page Custom CSS.

Import/Export, attention à vos réglages

Les éditeurs d’Avada ont décidé de vous prévenir : l’importation des réglages du thème « surchargera les valeurs de toutes les options du thème, utiliser cette fonctionnalité avec précaution ».

La section d’export vous permet de stocker vos paramètres sur votre ordinateur afin de les redéfinir plus rapidement en cas de problème.

N’hésitez pas à consulter la page du thème Avada chez Themeforest. Vous y trouverez l’ensemble des fonctionnalités proposées par le Fusion Builder ainsi qu’une démo en ligne vous permettant de vérifier si ce thème répond à l’ensemble de vos besoins 😉

Fusion Builder Elements, des réglages génériques pour le constructeur de page d’Avada

Le Fusion Builder est le constructeur de pages « fait maison » du thème Avada. Comme tout builder, il possède 2 fonctionnalités principales : Structurer la page en blocs organisés et insérer des contenus formatés via l’utilisation d’éléments pouvant s’apparenter à des widgets (zones de texte, listes, galeries, articles réceNts, etc.).

Nous voilà ici, en fait, face au deuxième niveau de paramétrage d’Avada, nous permettant de définir des réglages par défaut pour chaque élément du builder. Toutes ces options définiront ici une valeur de base pour les tailles, les couleurs, les nombres de colonnes ou les icônes des widgets que vous allez utiliser pour créer vos pages web.

35 modules sont ainsi paramétrables et chacun de ces paramètres pourra être « surchargé » depuis la page d’édition du widget en question, au moment où vous l’activerez sur la page.

Nous n’allons pas les voir tous les éléments du Fusion Builder, mais à titre d’exemple, les options du widget « Blog Element » permettent de définir :

• la couleur pour la date box ;
• les marges internes pour les layouts de type timeline ou Masonry ;
• les types de contenu affiché (extrait ou entier) ;
• la longueur de l’extrait.

Les options de l’élément « Bouton », quant à elles, vous permettent de définir un modèle générique de bouton que vous pourrez modifier au cas par cas. Vous paramétrerez ainsi :

• La dimension du bouton ;
• L’occupation de l’espace par le texte ;
• La forme et le type du bouton ;
• Sa typographie ;
• Les couleurs définissant sont fond initial et au survol de la souris ;
• Ses couleurs de texte ;
• La couleur et la taille de ses bordures.

La profusion des éléments proposés avec le builder d’Avada peut être déconcertante, je vous conseille donc dans un premier temps de n’ouvrir que les boites de dialogues des éléments qui vous paraissent évidents (par exemple, l’élément « Blog Element » affichera certainement des articles de votre blog) pour commencer à vous familiariser avec leurs options et de passer à l’apprentissage du constructeur Fusion Builder d’Avada.

Vous reviendrez plus tard sur cette page d’option lorsque vous souhaiterez uniformiser vos réglages.

Notez tout de même que les auteurs du thème ont malgré tout, tenté de palier ce désagrément en proposant une page récapitulative sur le site d’Avada présentant tous les réglages pour l’ensemble des éléments du Fusioon Builder, mais il faut bien reconnaître qu’elle reste assez indigeste pour le non-initié… Encore une fois, n’hésitez pas à faire appel à votre webmaster si vous vous sentez perdu ! 😉

Les options individuelles des pages d’Avada

Avada vous propose un ensemble d’options permettant de paramétrer individuellement chaque page du site depuis le bas de l’écran d’édition. Vous pourrez donc sur chaque page, « surcharger » les réglages par défaut que vous avez défini précédemment.

Sliders

Vous pouvez choisir un slider parmi les 4 sliders embarqués en extensions du thème Avada, choisir un slider précédemment créé, le positionner en dessous ou au-dessus de l’en-tête (vous surchargez ici l’option définie plus tôt dans Avada -> Theme Options -> En-tête -> Header-Content), etc.

Attention, « en dessous de l’en-tête » signifie « entre le menu et la barre de titre ». 😉

Vous pouvez même définir une image de « remplacement » qui s’affichera si votre slider est indisponible.

Page

L’onglet « Page » vous permettra surtout d’ajuster des marges internes. Vous pourrez aussi choisir de ne pas afficher d’image à la une… ce qui n’est quand même pas très commun…

En-tête

Vous décidez ici d’afficher ou pas l’en-tête du site, attention, cela désactive aussi le menu ! Vous pourrez par exemple utiliser cela pour des landing-pages.

Footer

Dans l’onglet « Footer », vous surchargerez les réglages définis dans les options d’Avada, affichant ou pas les zones widgetisées et la zone de copyright. Vous pourrez aussi étendre le pied de votre page web à la totalité de la largeur de la fenêtre.

Barre latérale

Cet onglet-ci est intéressant puisqu’il vous permettra de définir quelles barres latérales vous afficherez sur la page (gauche, droite, les deux ou aucune) et quelle zone de widgets vous voulez lui attribuer. Voilà de quoi contextualiser l’affichage de vos contenus périphériques !

Arrière-plan

Ici vous ne vous contentez pas de redéfinir une couleur de fond ou une image de fond pour votre page, mais vous pouvez aussi surcharger la mise en page de la page (définie dans le menu layout des options du thème (large ou encadré).

Barre de titre

Il vous est donné ici la possibilité de redéfinir le titre principal de la page, les éléments affichés dans la barre de titre, leur taille, etc.
Vous pouvez même assigner une image de fond à votre barre de titre… Hummm… vous savez maintenant ce que je pense de ces images de fond. 😉

Import/Export

Ce dernier onglet vous permettra de récupérer ou de sauvegarder des sets d’options sur lesquels vous travaillez au long cours. Si vous êtes fan d’Avada et vous travaillez régulièrement avec ce thème, cette fonctionnalité peut vous faire gagner du temps.

Avada, un thème complet mais qui prend du temps à maîtriser

Certaines des options d’Avada ne vous serviront quasiment jamais, alors que d’autres vous seront utiles à chaque fois que vous voudrez créer une page web avec ce thème WordPress.
Alors, après avoir parcouru la totalité du menu d’options, on peut légitimement penser que le mieux est l’ennemi du bien et que ce thème premium est un peu trop compliqué à paramétrer.

Je dois bien avouer que cela n’est pas tout à fait vrai et il serait sans doute plus juste de dire que l’apprentissage de ce thème WordPress est peut-être plus long que pour ses concurrents directs tels qu’Enfold ou Divi.

Ce thème conviendra donc davantage aux utilisateurs ayant envie de prendre le temps de se créer un site paramétré jusque dans les détails, ou aux webmasters souhaitant ajouter un thème polyvalent à leur boite à outils.
À l’inverse je le déconseillerais aux utilisateurs pressés ne désirant pas passer trop de temps sur l’apprentissage d’une telle plateforme. À moins, bien sûr, qu’ils ne souhaitent faire appel à leur webmaster favori pour le paramétrage et l’optimisation de leur site WordPress.

N.B. Ceux qui souhaiteraient faire directement l’acquisition du thème premium pourront acheter Avada pour 60$ hors taxes (ce lien est affilié, ni plus plus ni moins cher qu’en passant directement pas le site, il me permet de vous offrir cet article complet). 😉

Voilà, nous avons fait le tour des options globales du Thème Avada et il va maintenant falloir l’utiliser. Je vous propose de lire très prochainement un second article consacré à l’utilisation du Fusion Builder d’Avada qui vous permettra de comprendre comment ces réglages interagissent avec le constructeur fait maison du célèbre thème WordPress.

Voilà, nous avons globalement fait le tour des possibilités offertes par ce thème premium WordPress, et si vous décidez d’acheter Avada, ce sera, je l’espère, en connaissance de cause.

À bientôt ! 😎