15,00

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

15,00

  • Une formation vidéo de 1h18m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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



Formateur : Laurent Briere

Laurent Briere a publié 48 tutoriels et obtenu une note moyenne de 4,4/5 sur 3 701 tutoriels vendus. Voir les autres formations de Laurent Briere

  • 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)
accédez à plus de 1242 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données