Déplacements verticaux et horizontaux dans une page unique avec Oxygen Builder pour WordPress
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Déplacements verticaux et horizontaux dans une page unique avec Oxygen Builder pour WordPress

Laurent Briere
14,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Leçon 2
Installation des extensions nécessaires dans Wordpress
Leçon 3
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
Leçon 5
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
Leçon 7
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
02m28
Leçon 2Installation des extensions nécessaires dans Wordpress
06m24
Leçon 3Exercice 1: création de la structure de page Wordpress
04m52
Leçon 4Exercice 1: insérer les éléments dans la colonne de gauche
07m41
Leçon 5Exercice 1: insérer les éléments dans la colonne de droite
06m42
Leçon 6Exercice 1: finalisation de la mise en forme et animation des éléments
08m09
Leçon 7Exercice 2 : conception de la structure de la page Wordpress à double sens de navigation
10m09
Leçon 8Exercice 2: intégration de la bibliothèque JQuery mousewheel.js, et insertion des codes Javascript et PHP d'appel
08m02
Leçon 9Exercice 2: création de la navigation verticale dans la page Wordpress et ajout des effets d'animations
05m14
Leçon 10Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 1)
08m54
Leçon 11Exercice 3: Concevoir une navigation horizontale et verticale dynamiquement avec des Articles Wordpress (Partie 2)
10m13

Aperçus

Vos questions sur le cours

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)

Payer plus tard

Prix d'achat : 14,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données