4.7/5 Trustpilot (1394 avis)
Concevoir un site Web avec Wordpress et Oxygen Builder sans saisir de code
Concevoir un site Web avec Wordpress et Oxygen Builder sans saisir de code
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 !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Présentation de la formation
Présentation de la formation
Leçon 2
Installation des extensions nécessaires dans Wordpress
Installation des extensions nécessaires dans Wordpress
Leçon 3
Exercice 1: création de la structure de page Wordpress
Exercice 1: création de la structure de page Wordpress
Leçon 4
Exercice 1: insérer les éléments dans la colonne de gauche
Exercice 1: insérer les éléments dans la colonne de gauche
Leçon 5
Exercice 1: insérer les éléments dans la colonne de droite
Exercice 1: insérer les éléments dans la colonne de droite
Leçon 6
Exercice 1: finalisation de la mise en forme et animation des éléments
Exercice 1: finalisation de la mise en forme et animation des éléments
Leçon 7
Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation
Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation
Table des matières
Leçon 1
Présentation de la formation
02m28
Leçon 2
Installation des extensions nécessaires dans Wordpress
06m24
Leçon 3
Exercice 1: création de la structure de page Wordpress
04m52
Leçon 4
Exercice 1: insérer les éléments dans la colonne de gauche
07m41
Leçon 5
Exercice 1: insérer les éléments dans la colonne de droite
06m42
Leçon 6
Exercice 1: finalisation de la mise en forme et animation des éléments
08m09
Leçon 7
Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation
10m09
Leçon 8
Exercice 2: intégration de la bibliothèque JQuery mousewheel.js, et insertion des codes Javascript et PHP d'appel
08m02
Leçon 9
Exercice 2: création de la navigation verticale dans la page Wordpress et ajout des effets d'animations
05m14
Leçon 10
Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 1)
08m54
Leçon 11
Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 2)
10m13
Aperçus
