Ceci est un entete personnalisé réalisé avec le Divi builder

Landing Page a faire

Besoin d’aide ? Envoyez votre question à contact@agenceido.com

Mettre en place la structure de la page

D’après votre gabarit (wireframe) concevez votre page avec les blocs textes et images

Votre page devra intégrer :

  • le lien vers des réseaux sociaux
  • un ou des liens dans du texte
  • un élément « responsive » qui ne s’affiche que sur ordinateur et pas sur mobile et tablette
  • un slider d’images (shortcode)
  • un bloc avis clients (shortcode)
  • un formulaire (shortcode)
  • le bouton du formulaire de contact modifié avec du CSS (sera vu lors du prochain cours)

Vous pouvez mettre l’ensemble des éléments et mettre à jour les textes et images dans un second temps

 

Merci de nommer votre page « prénom exercice »

Pour modifier rapidement le nom de votre page :

dans l’admin du site, menu « page » > mettez la souris au dessus du nom de la page > « modification rapide » et éditez le nom

N’oubliez pas de sauvegarder de temps en temps pendant vos modifications !

> avec le bouton bleu si vous êtes dans l’éditeur « blocs »

> avec le bouton violet en bas si vous êtes dans l’éditeur « visuel » (et « quitter le visual builder » tout en haut pour sortir, quand vous avez terminé)

Besoin d’inspiration ?

Si malgré votre wireframe vous pensez devoir l’améliorer, vous avez quelques exemple de mises en page ici

Dans les modèles proposés, observez la « landing page » qui est la plus complète en matière de mise en page

Insérer un lien dans du texte

Pour insérer un lien dans du texte, ouvrez le bloc texte

sélectionnez le texte qui servira de lien

cliquez sur l’icone au dessus en forme de maillon de chaine

définissez l’URL du lien (par exemple l’adresse d’une page web)

définissez le titre (pas obligatoire et l’utilisateur ne le voit pas.Cependant, c’est un plus pour le référencement)

indiquez avec « target » si le lien doit s’ouvrir dans une nouvelle page ou non (pensez à l’ergonomie)

Afficher ou cacher un élément

Tous les blocs (bleus, verts et gris) peuvent être affichés ou caché suivant que l’utilisateur est sur mobile, tablette ou ordinateur

Pour cacher un bloc en fonction du type d’appareil, rdv dans les paramètres du bloc >onglet « avancé » > visibilité et cochez là où l’élément ne doit pas apparaitre

Enregistrez et testez en réduisant la largeur de la fenetre du navigateur pour voir si l’élément disparait / apparait bien

Utiliser les shortcode

Un shortcode est un élément écrit entre crochets [ ] et qui permet d’afficher une fonctionnalité.

WordPress va interpréter cet élément comme du code informatique.

Il permet par exemple d’insérer un formulaire ou un carousel d’images dans votre page, alors qu’ils sont créé à l’aide d’un module (ou plugin) du site

Comment faire :

  • rendez-vous dans le back office, dans un module du site, par exemple « smart slider » pour faire un carousel d’images ou « forminator » pour faire un formulaire
  • Editez votre carousel ou formulaire et récupérez le shortcode fourni par le module (un code que vous trouverez présenté entre crochets […] )
  • Dans votre page, collez ce code dans un bloc texte à l’endroit où vous voulez qu’il apparaisse

 

Pour créer :

  • un carousel d’images : rdv dans le module « smart slider » > le code se trouve directement dans le carousel que vous éditez 
  • un formulaire : rdv dans « forminator » > le shortcode se trouve dans la petite icone engrenage
  • un bloc d’avis clients : rdv dans « testimonials » > dans « view », utilisez le shortcode déjà présent pour « vue démo » 

> Pour écrire les crohets sur PC : cntrl alt + la touche 5 ou °

Intégration avancée : le menu

Logiquement, sur WordPress, le menu du site se gère à part des pages.

Si vous allez dans l’admin du site > « apparence » > « menu » vous allez trouver un éditeur permettant de créer le menu du site.

Le menu est déjà créé, vous n’avez pas besoin de le modifier.

Cependant, dans notre cas, nous voulons :

  • ok pour utiliser le même menu pour tout le monde (celui qui est déjà créé dans wordpress comme indiqué ci-dessus)
  • personnaliser les couleurs, les fonds ou typo pour que tout le monde n’ait pas la même apparence du menu

Heureusement Divi nous permet de faire autant de design de menus que l’on veut, que l’on peut appliquer à l’une ou l’autre des pages du site.

Voyons ci-contre comment faire >

Créer un menu personnalisé avec Divi

Rdv dans l’admin du site > Divi > Theme Builder

Cliquez sur une zone libre « Ajouter un nouveau modèle » et choisissez « spécifiques pages » puis votre page

Divi va automatiquement vous ajouter dans cette zone libre un bloc vert « En tete global »

> Supprimez le. Les éléments verts dans Divi sont des éléments qui se répercutent sur l’ensemble des pages où ils sons placés. Hors ici on veut des menus différents selon les pages.

Une fois supprimé, cliquez sur « ajouter un en-tete personnalisé » > « construire un en-tete personnalisé« 

Divi va vous amener dans le constructeur de page tel que vous le connaissez

Ajoutez y le bloc gris > menu

Divi va placer le menu du site ici. Faites ensuite vos modifications visuelles comme vous voulez

N’oubliez pas de sauvegarder en bas à droite

Vérifiez ensuite le résultat. Vous devriez voir votre menu sur votre page mais pas sur celle des autres

Intégration avancée : CSS

Modifiez un élément grâce au code CSS.

Pour concevoir des sites web, il existe plusieurs langages de programmation (HTML, CSS, Javascript, PHP principalement)

  • Le HTML va servir à coder la structure d’une page (un bloc de texte, insérer une image, créer une section…) c’est ce que Divi vous permet de faire, mais il se charge lui même du code !
  • Le code CSS, lui, permet de gérer l’aspect esthétique et le design ergonomique d’un site : couleurs, typos, élément caché ou affiché…
  • Le code CSS va indiquer par exemple que l’élément « button » (bouton) va avoir le fond bleu. Ainsi, dans le code HTML, tous les éléments « button » apparaitront bleu 

Là aussi Divi vous facilite la tache

Cependant, il est parfois nécessaire d’utiliser du code soi-même, surtout le CSS (ainsi que le PHP et le Javascript)

Pour cet exercice, vous allez devoir utiliser le CSS pour modifier le bouton du formulaire édité avec Forminator. Tout le détail est ci-contre >

Comment utiliser le CSS ?

1ere ETAPE

Tout d’abord il faut repérer l’élément HTML sur lequel appliquer la modification, ici on va modifier les champs du formulaire

Rappelez-vous, pour trouvez un élément HTML dans une page web, on fait clic droit > inspecter l’élément. Ensuite, à droite, apparait le nom de tous les éléments HTML en cascade

Pour vous faciliter la tache, voici le nom de l’élément à modifier sur notre formulaire :

 .forminator-input

 

> input = les éléments où l’on insère le texte dans le formulaire

> le point est important, ne l’oubliez pas

 


2eme ETAPE

Ecrire ce que l’on veut modifier avec le CSS

Ici, nous allons ajouter un ombrage sur tous les éléments « input »

Le CSS s’écrit entre accolades :

{…}

(faite cntrl alt 4 ou + pour écrire les accolades)

Et dans nos accolades, on va indiquer :

box-shadow: 10px 5px 5px red;

Il y a 3 infos dans cette instruction :

  1. « box-shadox » pour « boite d’ombre »
  2. le dépassement de l’ombre à gauche, en bas et à droite en pixels
  3. « red » pour la couleur de l’ombre (on pourrait mettre une couleur hexadécimale avec #xxxxxx

> n’oubliez pas le point virgule à la fin de la ligne, il indique la fin d’une instruction

Cela nous donne (étape 1 + 2) :

.forminator-input {box-shadow: 10px 5px 5px red;}

 


3eme ETAPE

Voilà, vous avez votre morceau de code, il suffit d’aller le coller dans l’endroit adéquat du module. Ici nous travaillons sur le module Forminator. Il y a un endroit où indiquer du code CSS :

dans l’admin > Forminator > Apparence > CSS personnalisé > activez le > collez le code CSS

enregistrez les modifications (tout en haut) > rechargez la page web sur laquelle il y a le formulaire pour vérifier le résultat

Le formulaire ci contre a un fond vert sur tous les champs de texte. Normalement le module forminator ne permet pas de le faire avec ses propres réglages, il faut utiliser le CSS