Le challenge du moment : intégrer un PSD complet (disponible ici merci aux auteurs) avec une maquette HTML vers Elementor !
Le thème que j’ai choisi (une page d’application mobile) comporte quelques petits moments de bravoure ! Notamment toute la partie du header. La première vidéo d’une série de 3 est donc intégralement (ou presque consacrée) à l’intégration du menu ou plutôt des menus de cet entête.
Pas sûr que le résultat soit optimum, mais il est le plus approchant possible de la maquette.
Pour regarder un exemple plus simple à exécuter (et surtout un peu plus propre) je vous recommande de regarder mon article sur le responsive avec Elementor qui s’attarde sur la partie de l’entête justement.
Cette vidéo (et toute cette série en fait) sont légèrement moins accessibles aux débutants pour deux raisons :
- J’ai dû aller un peu vite pour pas que cette vidéo dure 2 heures (déjà qu’elle dure 1 heure lol).
- Il y a pas mal de « bidouilles » pour parvenir aux résultats voulus.
L’art de la bidouille sur Elementor
C’est donc le plus de cette série de vidéo. Des astuces qui combiner vous offriront (je l’espère de nouvelle possibilité de création). Vous verrez ses techniques imposent de beaucoup utiliser le module prévisualisation d’Elementor et parfois même le navigateur Google chrome avec l’extension développeur Tools.
Une seule fois dans toute cette série nous aurons recourt
également au CSS personnalisé.
J’ai essayé d’utiliser cette technique en dernier recours, mais il me paraissait
important d’y faire mention, car dès que l’on veut faire de l’intégration un
peu poussée avec Elementor cela devient indispensable.
Enfin point importantes, toutes ses bidouilles sont rendues possibles avec le module Elementor PRO. Je n’utilise rien d’autre, mais cependant c’est tout de même indispensable de l’avoir ne serait-ce que pour avoir le module menu le module formulaire ou bien encore la possibilité justement d’ajouter du CSS.
Que dit bidouille dit code non optimisé attention il est clair que nous n’avons pas la prétention avec Elementor de voler le travail des front end développeur (je l’étais moi-même jadis je connais un peu ce métier ^^). En effet, le code restitué ici avec toutes ses bidouilles n’est absolument pas optimisé peut-être même qu’il bug sur certains navigateurs un peu obsolètes en tout cas il n’a pas été testé coté compatibilité et rapidité d’exécution, mais une chose est plutôt surprenante : IL FONCTIONE sur Google chrome ! j’avoue ne pas trop y croire à en juger par le nombre de bidouilles faites sur la partie de l’entête justement ^^comme quoi Elementor en a dans le ventre quand même !
Et si l’intégration devenait interactive ?
J’ai beaucoup apprécié faire ses vidéos et j’espère en faire d’autres !
J’aimerais rendre cela plus interactif voici quelques pistes :
Une idée de page ou de PSD a intégré ?
SI vous avez des exemples de page à refaire sur Elementor ou si vous avez par exemple créé un PSD que vous aimeriez, que j’intègre cela serait super !
Les seules conditions sont que cet exercice puisse apporter quelque chose d’instructif en matière d’intégration bien sûr et qu’il soit réalisable.
Vous auriez intégré une partie différemment ?
N’hésitez pas à partager vos astuces la communauté du web est géniale pour cela on peut s’entraider et partager ses techniques. Surtout lorsqu’il s’agit de bidouilles il y a souvent plusieurs moyens de parvenir à ses fins. Je ne détiens pas avoir la science infuse bien au contraire alors n’hésitez pas J La preuve : je n’ai pas réussi à tout intégré dans cette maquette donc si vous avez une idée de comment terminer les parties manquantes essayons !
L’art du direct
Dernier point. J’ai volontairement enregistré cette vidéo dans les conditions du direct et sans montage pour 1 le côté challenge bien sûr et 2 permettre de m’entraîner un jour au live et je pense que ce format de reproduction en live serait un bon point de départ s’il y a des choses que vous aimeriez me voir faire en direct sur Elementor ou WordPress faites-moi signe cette série est un premier essai !
