Sélectionner une page


L’ajout d’une barre de contenu audio collante est un excellent moyen de fournir un clip audio pour un accès facile lorsqu’un utilisateur fait défiler le contenu de votre page. Par exemple, les podcasteurs peuvent « coller » leur contenu audio en haut d’une page d’épisode afin que l’utilisateur ait toujours accès à ces commandes audio tout en écoutant et en interagissant avec le reste du contenu de la page.

Dans ce didacticiel, nous allons faire preuve d’un peu de créativité avec les options intégrées de position collante de Divy pour créer une barre de contenu audio collante dans Divi. Nous allons vous montrer comment convertir le contenu audio existant sur une page (comme une ligne avec un module audio) en une barre de contenu audio collante qui apparaît en haut de la fenêtre une fois que l’utilisateur passe l’audio pendant qu’il défile. Nous vous montrerons également comment modifier le contenu, le style et la mise en page de la barre une fois que le statut permanent est activé (ou bloqué en haut de la fenêtre). La transition en douceur et la fonctionnalité de cette conception fournissent une solution unique pour présenter du contenu audio sur n’importe quel site Web Divi.

Commençons!

Avant goût

Voici un aperçu de la conception que nous allons créer dans ce didacticiel.

Voici un aperçu du contenu audio qui se transforme en une barre de contenu audio collante.

Et voici comment vous occuper de la barre audio lorsque vous faites défiler la page.

Téléchargez la mise en page GRATUITEMENT

Barre de contenu audio Divi Sticky

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle Portabilité, sélectionnez l’onglet Importer et téléchargez le fichier depuis votre ordinateur.

Cliquez ensuite sur le bouton Importer.

Panneau de notification Divi

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Extension des onglets d'angle

Pour commencer, vous devez effectuer les opérations suivantes:

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1: Téléchargez le pack de mise en page Premade Podcast depuis Divi Builder

Pour accélérer la conception de notre barre audio collante dans Divi, nous utilisons la mise en page de page de destination de podcast prédéfinie. Dans le menu des paramètres, sélectionnez le symbole plus « Charger depuis la bibliothèque ». Recherchez ensuite la mise en page de la page de destination du podcast et téléchargez-la sur la page.

Barre de contenu audio Divi Sticky

Partie 2: création de la ligne collante pour le contenu audio

Tout en haut de la mise en page prédéfinie, trouvez la ligne dans cette zone supérieure. Ajoutez ensuite une nouvelle ligne de colonne unique sous la ligne existante.

Barre de contenu audio Divi Sticky

Barre de contenu audio Divi Sticky

Paramètres de ligne

Avant d’ajouter des modules, ouvrez les paramètres de la nouvelle ligne et mettez à jour les éléments suivants:

  • Largeur de gouttière: 1
  • Largeur: 100%
  • Largeur maximale: 100%
  • Rembourrage (bureau): 10 pixels au-dessus, 10 pixels en dessous, 10% à gauche, 10% à droite
  • Rembourrage (tablette et téléphone): 10 pixels au-dessus, 10 pixels en dessous, 10 pixels à gauche, 10 pixels à droite

Barre de contenu audio Divi Sticky

Pour rendre la ligne collante, accédez à l’onglet Avancé et mettez à jour les éléments suivants:

  • Position collante: restez debout

Cela fait que la ligne (qui sera bientôt notre barre de contenu audio) reste sur la page en haut de la fenêtre du navigateur lorsque vous faites défiler.

Barre de contenu audio Divi Sticky

Partie 3: ajout du contenu audio

Ajouter le module audio à la ligne

Ensuite, déplacez / faites glisser le module audio existant (pré-construit) de la première ligne en haut à la nouvelle ligne que vous venez de créer. Cela servira d’audio en vedette que nous enregistrerons dans le lecteur audio Sticky

Barre de contenu audio Divi Sticky

Ajouter un CTA à l’aide d’un module de présentation

Ensuite, nous allons créer un CTA qui apparaîtra sur le côté droit de notre barre de contenu audio collante.

Pour créer le CTA, copiez le texte de présentation avec l’icône de lecture en haut de la mise en page.

Barre de contenu audio Divi Sticky

Collez ensuite le module de présentation double sous le module audio sur la deuxième ligne de la section supérieure.

Barre de contenu audio Divi Sticky

Partie 4: Conception du contenu audio

Style du module audio

Une fois que la ligne hérite de la position collante, nous aimerions avoir un design différent pour notre module audio. Pour ce faire, ouvrez les paramètres du module audio et mettez à jour les options d’état permanent suivantes:

  • Taille du texte du titre (collant): 14px
  • Hauteur de la ligne de titre (collante): 1,3em
  • Hauteur de la ligne d’étiquette (collante): 1,3em

Tout ce que vous avez à faire est de réduire un peu le texte et l’espacement pour que le contenu audio ne prenne pas beaucoup d’espace vertical dans notre barre collante.

Barre de contenu audio Divi Sticky

Ensuite, nous voulons changer la largeur du module audio à l’état collant comme suit:

  • Largeur (bureau): 80%
  • Largeur (collant): 100%
  • Largeur maximale (collante): 100%

Barre de contenu audio Divi Sticky

Ensuite, nous devons ajuster l’espacement du module audio comme suit:

  • Marge: 0px au-dessus, 0px en dessous
  • Rembourrage: 0px au-dessus, 0px en dessous, 0px à gauche, 20px à droite

Barre de contenu audio Divi Sticky

Enfin, dans les paramètres avancés, nous devons ajouter des extraits de code CSS personnalisés pour aligner notre texte sur la gauche et ajouter des couleurs uniques au bouton et au curseur du lecteur audio.

Ajoutez le CSS suivant Piste audio seulement sous le collant Languette:

text-align:left;

Ajoutez le CSS suivant Méta audio seulement sous le collant Languette:

text-align:left !important;

Ajoutez le CSS suivant Boutons du joueur seulement sous le collant Languette:

color: #fe4943;

Ajoutez le CSS suivant Curseurs du joueur actuels seulement sous le collant Languette:

background: #2c4ca3;

Barre de contenu audio Divi Sticky

Stylisme du CTA de présentation

Ensuite, nous allons concevoir notre module de présentation qui agira comme un faux CTA pour afficher tous les épisodes.

Tout d’abord, ajoutez le texte « Tous les épisodes » au corps du texte de présentation.

Barre de contenu audio Divi Sticky

Sous l’onglet Conception, mettez à jour les éléments suivants:

  • Police du corps: Lato
  • Poids de la police du corps: gras
  • Style de police du corps: TT
  • Taille du corps du texte: 10px
  • Espacement des lettres du corps: 2px
  • Hauteur de la ligne du corps: 1,3em

Barre de contenu audio Divi Sticky

Puis ajustez la taille de l’icône de présentation:

Barre de contenu audio Divi Sticky

Ajustez ensuite la taille du module comme suit:

  • Largeur du contenu: 100%
  • Largeur: 20%

Barre de contenu audio Divi Sticky

Revenez maintenant à l’onglet Contenu et ajoutez un arrière-plan de présentation comme celui-ci:

  • Couleur de fond: # 1a1844
  • Image de fond: [add image]
  • Mélange d’image d’arrière-plan: luminosité

Barre de contenu audio Divi Sticky

Nous voulons que ce module soit invisible au début jusqu’à ce que la ligne devienne collante et que la barre de contrôle audio soit bloquée en haut de la fenêtre. Pour cela, nous pouvons ajouter des extraits de code CSS qui masquent le module sur le bureau et affichent le module dans l’état « sticky ».

Dans l’onglet Avancé, mettez à jour le CSS personnalisé suivant:

Élément principal CSS (bureau):

display:none;

Élément principal CSS (collant):

display:block;

Image de présentation CSS:

margin-bottom: 10px

Barre de contenu audio Divi Sticky

Partie 5: Modification de l’orientation du contenu de la barre audio lorsqu’elle est collante

Pour le moment, la ligne collante n’a qu’une seule colonne avec deux modules empilés les uns sur les autres. Ainsi, la barre collante montre le texte de présentation du CTA sous le module audio. Cela prendrait trop d’espace vertical pour une tige collante et cela n’aurait pas l’air très beau.

Pour nous assurer que tout est aligné horizontalement et verticalement dans la colonne, nous avons. La propriété CSS-Flex vous permet de personnaliser la mise en page de nos modules en état permanent.

Pour ce faire, ouvrez les paramètres de la colonne contient les deux modules.

Sous l’onglet Avancé, ajoutez le CSS personnalisé suivant à l’élément principal

Élément principal (bureau):

display:flex;
flex-direction:column;

Élément principal (collant):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

Barre de contenu audio Divi Sticky

C’est ça! Passons en revue les résultats.

En bout de ligne

Voici la conception sur le bureau une fois que la ligne est dans l’état collant.

Barre de contenu audio Divi Sticky

Et voici le design des téléphones portables.

Barre de contenu audio Divi Sticky

Et voici quelques extraits vidéo de la façon dont la magie de la barre collante fonctionne pour l’audio sur un site en direct.

Dernières pensées

Les options de position collante de Divi peuvent être un outil puissant pour les concepteurs Web. Dans ce didacticiel, nous vous avons montré comment utiliser les options de style collantes de Divi pour créer une barre de contenu audio collante de manière avancée et créative. L’une des techniques uniques de ce didacticiel consistait à aligner le contenu d’une ligne persistante à l’aide de la propriété Flex. Heureusement, Divi’s dispose d’un moyen pratique d’ajouter des extraits de code personnalisés à Sticky Status en utilisant les blocs CSS personnalisés avancés pour nous donner la flexibilité de conception dont nous avons besoin. J’espère que cela vous donnera quelques idées sur la façon d’en créer un sur votre prochain projet.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts