How to Add a Fixed “Latest Episode” Audio Bar to Your Divi Header - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elegant Themes Video: How to Add a Fixed “Latest Episode” Audio Bar to Your Divi Header.
If you’re hosting a podcast website with Divi, chances are high you’re using the built-in Audio Module already. Now, if you’re looking for a special way to put your latest episode in the spotlight, you’re going to love this tutorial. Today, we’ll show you how to include a fixed latest episode audio bar in your Divi header. We’ll include a Text Module loop animation to draw attention to the audio bar and you’ll be able to download the global header template, including the audio bar, as well!

Go to the blog post:
https://www.elegantthemes.com/blog/divi-resources/how-to-add-a-fixed-latest-episode-audio-bar-to-your-divi-header

Get the Podcast Layout Pack
https://www.elegantthemes.com/blog/divi-resources/get-a-free-podcast-layout-pack-for-divi

If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below:
https://www.elegantthemes.com/gallery/divi/

Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:
https://www.elegantthemes.com/blog/community/elegant-themes-blog-submissions

Published: Monday, June 1, 2020 7:46 PM
Category: Wordpress Elegant Themes

47 Views

Related Videos

Switching Your Logo on a Fixed Header in Divi

by Best Webhosting Added 4 years ago 83 Views / 0 Likes

It is always a great idea to create different versions of your logo with different colors and sizes. For example, you should probably have a dark and light version of your logo so that it will look great on different background colors. And having a smaller (less vertical and more horizontal) version of the logo for those cramped areas of your website. One of the best places to use a different version of your logo is on your fixed (or sticky) header. R
How to Add a Custom Fixed Header for Mobile Using Divi

by Best Webhosting Added 4 years ago 76 Views / 0 Likes

In this tutorial, I’m going to show you how to add a custom fixed header on mobile that includes the following: - A different (more mobile friendly) logo than your desktop version. - A shorter header to allow more available viewing space. - A larger clickable hamburger navigation icon to make it easier to deploy the mobile nav. - A semi-transparent background that makes the header even more intrusive when viewing the site. Read more: https://www.elega
How to Create a Fixed Header with Divi’s Position Options

by Best Webhosting Added 3 years ago 56 Views / 0 Likes

With Divi’s new position options, turning your header into a fixed one is easier than ever. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. In this tutorial, we’ll show you the general steps you need to follow to create your fixed Divi header. Read more: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-positi
How to Automatically Generate Container Space for Your Fixed Divi Header (Using JQuery)

by Best Webhosting Added 4 years ago 64 Views / 0 Likes

When opting for a fixed header on your website, you’ll automatically find yourself using Divi’s built-in position options. The fixed position option inside Divi allows you to stick any element to a specific location on your page. When using a fixed position, however, the container space of your element is removed. The fixed header floats on top of your page content creating an overlap that you don’t necessarily want. To avoid this, you can generate co
How to Create a Themed Three Column “Heavy Metal” Audio Section with Divi’s Audio Module

by Best Webhosting Added 4 years ago 98 Views / 0 Likes

Today, we are going to be designing a tri-part audio module that includes space for an audio player, a short bio, and a call-to-action button--in case you want to direct visitors to i-Tunes or Google Play to download your latest hits. Read the blog post and get the code here: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-themed-three-column-audio-section-with-divis-audio-module
Pure CSS Sticky Header - Navbar Fixed Top After Scrolling - No Javascript

by Best Webhosting Added 4 years ago 75 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Music Name : Spring In My Step by Silent Partner from YouTube Audio Library Music URL : https://www.youtube.com/watch?v=siCmqvfw_1g
Divi 3.0 Developer Fikri Rasyid Shares His Enthusiasm for Divi -- Divi Nation Podcast, Episode 28

by Best Webhosting Added 4 years ago 95 Views / 0 Likes

In this episode of Divi Nation Fikri Rasyid shares his WordPress story, including how he came to work for Elegant Themes, and most of all his excitement for what the team is doing on the soon to be released Divi 3.0. View On Our Blog: http://www.elegantthemes.com/blog/divi-resources/divi-3-0-developer-fikri-rasyid-shares-his-story-and-enthusiasm-for-divi-the-divi-nation-podcast-episode-28 Subscribe to our YouTube Channel: https://goo.gl/oxCa4h Subscri
Divi Theme Header Design Tutorial | Create A Custom Header

by Best Webhosting Added 1 year ago 21 Views / 0 Likes

earn how to create a custom header in the Divi theme. With a different logo on scroll, different sizing on scroll, and different colors on scroll. Get The Divi Theme: https://ferdykorp.com/divi Download the header: https://divi.ferdykorp.com thanks to the Theme builder within the Divi theme we can create custom headers using the Divi layout editor and place those headers anywhere on the website. I will show you how to make use of the image module, men
Popular
Create Playable WordPress Sidebar Audio Using The Audio Widget

by Best Webhosting Added 4 years ago 104 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Create Playable WordPress Sidebar Audio Using The Audio Widget https://youtu.be/kBPNJNoU6os Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist WordPress is making terrific updates for the core and version 4.8 brought the great addition of creating a playable sidebar using the new WordPress sidebar audio widget. In thi
How to Make Your Divi Footer Fixed

by Best Webhosting Added 4 years ago 92 Views / 0 Likes

In today’s Divi tutorial, we’re going to show you how to create a fixed footer for your website instead of a normal one. Read article: https://goo.gl/crSCuW
Popular
The Divi Audio Module

by Best Webhosting Added 4 years ago 109 Views / 0 Likes

The audio module allows you to embed an audio file + a custom audio player anywhere on your page. The audio player assumes the clean/modern style of the Divi theme. This is a great feature for musicians who want to show off their latest creations, or podcasters who want to post their latest shows. View full documentation: https://www.elegantthemes.com/documentation/divi/audio/
Html & CSS Only Audio Player | HTML5 Audio

by Best Webhosting Added 3 years ago 43 Views / 0 Likes

Enroll My Course : Next Level CSS Animation and Hover Effects https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-expert/?referralCode=90A9FFA7990A4491CF8D Another Course : Build Complete Real World Responsive Websites from Scratch https://www.udemy.com/course/complete-responsive-website-design-from-scratch/?referralCode=F1DFAF1715AF6CE5780E ------------------ Join Our Channel Membership And Get Source Code of My New Video's Eve