Yoast SEO : maîtrisez le référencement de votre site WordPress
Yoast SEO : maîtrisez le référencement de votre site WordPress
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
Plan détaillé du cours
Leçon 1Présentation de la formation
02m28s
Leçon 2Installation des extensions nécessaires dans Wordpress
06m24s
Leçon 3Exercice 1: création de la structure de page Wordpress
04m52s
Leçon 4Exercice 1: insérer les éléments dans la colonne de gauche
07m41s
Leçon 5Exercice 1: insérer les éléments dans la colonne de droite
06m42s
Leçon 6Exercice 1: finalisation de la mise en forme et animation des éléments
08m09s
Leçon 7Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation
10m09s
Leçon 8Exercice 2: intégration de la bibliothèque JQuery mousewheel.js, et insertion des codes Javascript et PHP d'appel
08m02s
Leçon 9Exercice 2: création de la navigation verticale dans la page Wordpress et ajout des effets d'animations
05m14s
Leçon 10Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 1)
08m54s
Leçon 11Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 2)
10m13s
Aperçus
