Configurez une page d’attente personnalisée
Nous avons vu précédemment comment demander aux moteurs de recherche de ne pas indexer le site web, ce qui permet d’éviter que des visiteurs tombent dessus pendant les développements.
Cela ne s’avère parfois pas suffisant, et certains clients souhaitent que le site soit totalement inaccessible au public jusqu’au lancement.
Deux solutions s’offrent à vous pour faire cela :
utiliser une extension spécialisée comme “Maintenance”, mais les options sont assez limitées ;
utiliser Elementor qui permet de créer une page totalement personnalisée.
Pour cela, nous allons créer un modèle Elementor.
Rendez-vous dans le dashboard WordPress et cliquez sur Elementor >> Mes modèles.
Cliquez sur “Ajoutez un nouveau”, sélectionnez le type “Page” et appelez-le “Attente”.
Insérez un modèle de page et personnalisez-le, ou créez votre page de toutes pièces et publiez-la.
Retournez dans le dashboard WordPress et cliquez sur Elementor >> Outils.
Sélectionnez l’onglet “Maintenance”, sélectionnez “Arrive bientôt” et choisissez le modèle “Attente” que vous venez de créer.
Et voilà, seuls les utilisateurs connectés à WordPress seront capables d’accéder au site !
Créez un header ou un footer personnalisé avec Elementor et OceanWP
OceanWP dispose d’une fonctionnalité très intéressante permettant de créer son en-tête ou son pied de page avec Elementor. Cela permet de créer des designs complexes et originaux qui auraient été impossibles à créer avec les seules options du customizer.
Attention, cependant, ces options peuvent sembler limitées, mais permettent aussi de ne pas faire n’importe quoi et de rester dans les standards. Soyez donc vigilant si vous utilisez cette option !
Voici les étapes pour créer un header ou un footer personnalisé :
Depuis le dashboard WordPress, cliquez sur “Theme Panel >> Ma bibliothèque”.
Cliquez sur “Ajoutez un nouveau”.
Saisissez le titre “Header” et choisissez le layout “100 % pleine largeur” dans les options OceanWP.
Cliquez sur "Éditez avec Elementor” et créez votre header personnalisé. À noter que le menu doit être inséré à l’aide du widget “Menu personnalisé”.
Publiez le modèle et retournez dans le dashboard WordPress.
Cliquez sur Apparence >> Personnaliser pour ouvrir le customizer.
Dans “En-tête”, sélectionnez “En-tête personnalisé” et sélectionnez le modèle “Header” que nous venons de créer.
Et voilà, vous disposez d'un en-tête sur mesure pour votre site !
Le même processus est applicable pour le pied de page en créant un autre modèle et en l’appliquant dans la section “Widgets de pied de page” du customizer.
Ajoutez des CSS personnalisés
Elementor et OceanWP sont très flexibles, mais il peut arriver qu’ils n’offrent pas les options de personnalisation de design que l’on souhaiterait.
Il est possible de contourner le problème en ajoutant des règles CSS personnalisées dans la section “CSS et JS personnalisés” du customizer.
Identifiez proprement le composant que l’on souhaite personnaliser
S’il s’agit d’un composant Elementor, vous pouvez attribuer une classe CSS au composant souhaité dans l’onglet “Avancé” de la colonne de droite, ce qui va nous permettre de le cibler très facilement, par exemple “ma_classe_personnalisee”.
S’il ne s’agit pas d’un composant Elementor, il va falloir utiliser l’inspecteur de votre navigateur web pour cibler le composant souhaité.
Pour cela :
Ouvrez la page souhaitée dans votre navigateur, faites un clic droit sur le composant souhaité et cliquez sur “Inspecter”.
Sélectionnez le bon élément HTML dans la zone de gauche, puis copiez le code utilisé pour le cibler dans la colonne de droite.
Par exemple, pour un lien du menu OceanWP : #site-navigation-wrap.dropdown-menu >li >a.
Rendez-vous dans le customizer dans la section “CSS et JS personnalisés”.
Collez la classe que vous avez attribuée dans Elementor (“.ma_classe_personnalisee”) ou le code CSS copié depuis l’inspecteur précédemment, puis ajoutez la règle CSS souhaitée. Par exemple :
.ma_classe_personnalisee{
color:red;
}Créez des types de contenus personnalisés
Si vous souhaitez créer des sites un peu plus complexes, il vous faudra certainement créer des types de contenu personnalisés.
Par exemple, si vous souhaitez créer un site d’annonces de voitures d’occasion, il vous sera nécessaire de créer un type de contenu “voiture” disposant de champs personnalisés comme “Prix neuf”, “Prix de vente”, “Année d’acquisition”, etc.
Pour un site plus simple comme le nôtre, ces custom post types peuvent servir à créer des types de contenus comme des testimoniaux, ou encore des portfolios pour présenter nos réalisations.
Cette fonctionnalité était auparavant réservée à des personnes maîtrisant un minimum le code, mais elles sont maintenant beaucoup plus accessibles. Nous allons ainsi créer un type de contenu de type “Portfolio” pour présenter nos réalisations.
Il existe de nombreuses extensions permettant de créer des types de contenus personnalisés sans coder. Nous allons choisir “CPT UI” qui est gratuite et simple d’utilisation.
Installez-la depuis le dashboard WordPress.
Dans le dashboard, cliquez sur CPT UI >> Add / edit Post Types.
Saisissez :
“Portfolio” dans le champ Post Type Slug ;
“Portfolios” dans le champ “Plural label” ;
“Portfolio” dans le champ “Singular label”.
Cochez la case “Built-in Categories” en bas de page.
Cliquez sur “Add post type”.
Vous constaterez alors qu’une nouvelle rubrique “Portfolios” apparaît dans le menu du dashboard WordPress !
Créez maintenant quelques contenus de type portfolio depuis cette section. N’oubliez pas de mettre l’image de la réalisation souhaitée en “Image à la une” et de lui appliquer les catégories correspondant au type de réalisation (logo, site web, plaquette…).
J’ai maintenant des contenus de type “Portfolio”, mais comment les afficher ?
Le module “Posts” qui permet d’afficher une liste de posts n’est accessible qu’en version pro. :-/ Heureusement, des addons Elementor proposent cette fonctionnalité dans leur version gratuite.
C’est en particulier le cas de “Livemesh Addons for Elementor”. Rendez-vous dans “Extensions”, cliquez sur “Ajouter” et installez cet addon.
Une fois l’extension activée, retournez dans l’édition de la page avec Elementor et insérez le widget “Posts Grid” de la section “Livemesh Addons”.
Dans le champ “Post type”, supprimez “Articles” et ajoutez “Portfolios”.
Dans le champ “Taxonomies”, sélectionnez le type de réalisation souhaité (par exemple “Logos”).
Et voilà, les dernières réalisations de type logo s’affichent automatiquement ! N’hésitez pas à jouer avec les autres options pour en affiner la présentation.
En résumé
Il est recommandé de mettre en place une page d’attente vers laquelle seront redirigés les utilisateurs non connectés pendant la construction du site.
Il est possible de créer des headers et footers totalement personnalisables grâce à Elementor, soit en utilisant la version pro, soit via des intégrations dédiées offertes par certains thèmes.
Il est possible de facilement ajouter des règles CSS sans modifier les fichiers du thème dans Apparence >> Personnaliser >> CSS personnalisé.
Les CPT (custom post types) permettent de créer des types de contenus personnalisés qui sont très utiles pour des sites plus complexes.
Nous venons de découvrir quelques fonctionnalités avancées qui ouvrent la porte à la création de sites plus complexes. 💪 Mais il nous reste encore quelques étapes essentielles avant de pouvoir lancer officiellement notre site ! Nous allons les passer en revue dans la partie suivante.
