• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 31/07/2019

Intégrez des fonctionnalités avancées

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 “Ajoutez un nouveau” et 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 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 entê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és :

  • Depuis le dashboard WordPress, cliquez “Theme Panel >> Ma Bibliothèque”.

  • Cliquez “Ajoutez un nouveau”.

  • Saisissez le titre “Header” et choisissez le layout “100 % pleine largeur” dans les options OceanWP.

  • Cliquez “É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 Apparence >> Personnaliser pour ouvrir le customizer.

  • Dans “Entête” sélectionnez “Entête personnalisé” et sélectionnez le modèle “Header” que nous venons de créer.

Et voilà, vous disposez d’un entê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.

Attention, cette section n’est pas obligatoire et nécessite d’avoir des bases en CSS !

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é.

Ajouter des CSS personnalisés
Ajouter des CSS personnalisés

Pour cela :

  • Ouvrez la page souhaitée dans votre navigateur, faites “clic droit” sur le composant souhaité et cliquez “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 OcenaWP : #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’annonce 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 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 “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…).

Vous avez maintenant des contenus de type “Portfolio”, mais comment les afficher ?

Depuis Elementor, 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.

Exemple de certificat de réussite
Exemple de certificat de réussite