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
Déplacements verticaux et horizontaux dans une page unique avec Oxygen Builder pour WordPress

ajouter ce cours aux favoris retirer ce cours des favoris

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é 50 tutoriels et obtenu une note moyenne de 4,4/5 sur 3 941 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)
Parcours Développeur WordPress
accédez à plus de 1293 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données