Voyons dans ce tuto sur Oxygen Builder pour WordPress comment dans une page unique, créer des déplacements verticaux et horizontaux doux et progressifs à l'aide de 3 exercices pratiques.
Concevons une structure de page WordPress de manière à insérer des blocs HTML pleine largeur et pleine hauteur basés sur les même largeurs et hauteur du Viewport (100%).
- Utilisons dans un premier exemple l'extension "Page Scroll to ID" et des ancres HTML pour créer cet effet. La structure sera composée de deux colonnes: celle de gauche reste fixe et contient les éléments de navigation. La deuxième à droite permettra de se déplacer verticalement.
- Dans un deuxième exemple le script Jquery Mousewheel.js, intégré facilement avec l'extension Wordpress "My Custom Functionnality". Finalisons la mise en forme en insérant en arrière-plan de chaque bloc une image fixe et texte animé en CSS.
- Le troisième cas pratique intègre le même système de navigation mais en y faisant apparaître dynamiquement des articles Wordpress à l'aide d'un bloc "Repeater" d'Oxygen
Bon tuto !
Table des matières de cette formation WordPress (durée : 1h18m)
-
- Présentation de la formation gratuit 00:02:28
- Installation des extensions nécessaires dans Wordpress 00:06:24
- Exercice 1: création de la structure de page Wordpress 00:04:52
- Exercice 1: insérer les éléments dans la colonne de gauche 00:07:41
- Exercice 1: insérer les éléments dans la colonne de droite 00:06:42
- Exercice 1: finalisation de la mise en forme et animation des éléments 00:08:09
- Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation 00:10:09
- Exercice 2: intégration de la bibliothèque JQuery mousewheel.js, et insertion des codes Javascript et PHP d'appel 00:08:02
- Exercice 2: création de la navigation verticale dans la page Wordpress et ajout des effets d'animations 00:05:14
- Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 1) 00:08:54
- Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 2) 00:10:13
- Fichiers sourcestélécharger
- Certificat
Formateur : Laurent Briere
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?WordPress
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Bonjour, que deviennent ces déplacements en version responsive?A votre guise... Il suffit de faire votre choix et quel layout adopté. (Le mouvement horizontal est associé à une class ou un ID css)
