Geben Sie Ihren HörerInnen einen Bonus und bieten Sie die Möglichkeit, Audios von Ihrer Website herunterzuladen. Mit dem Audio-Modul des Divi-Themes geht das ganz simpel: Sie fügen dem Modul einfach einen Download-Button hinzu.
Der erste Schritt besteht darin, eine benutzerdefinierte CSS-Klasse zu dem spezifischen Audio-Modul hinzuzufügen, in dem die Download-Schaltfläche erscheinen soll. Diese Klasse ist die Verbindung zwischen dem Modul, dem jQuery- und dem CSS-Code, der in den nächsten Schritten hinzugefügt wird. Öffnen Sie dazu die Einstellungen des Audio-Moduls und gehen Sie auf den Tab «Erweitert». Weiter auf «CSS-ID & Klassen». Geben Sie nun die Klasse «audio-download» in das Eingabefeld «CSS-Klasse» ein.
Weil es für den Download-Button im Divi-Theme keine eingebaute Funktion gibt, müssen Sie ein jQuery-Script einfügen, das dem Modul ein neues Element hinzufügt. Dies geschieht mit dem untenstehenden Snippet. Kopieren Sie es in den <head>-Bereich Ihrer Website – im Backend unter Divi/Theme-Optionen/Integration – oder in ein Code-Modul auf der Seite wo der Audio-Download dargeboten werden soll:
<script>
jQuery(document).ready(function(){
var x = setInterval(function(){
jQuery(".audio-download").each(function(){
var link = jQuery(this).find(".mejs-mediaelement audio").attr("src");
jQuery(this).find(".et_audio_container").append('<a href= "'+link+'" class= "audio-download-button"></a>');
jQuery(this).find(".audio-download-button").attr("download", "");
if(jQuery(this).find(".audio-download-button").attr("href") != "undefined"){
clearInterval(x);
}
})
},200)
})
</script>Als nächstes folgt das CSS-Snippet, mit welchem Sie das Download-Symbol auf der rechten Seite des Players platzieren. Fügen Sie es in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
/* Download-Button stylen */
.audio-download .et_audio_container {
position: relative;
}
.audio-download-button {
position: absolute;
right: 15px;
bottom: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.audio-download-button:before {
content: "\e092";
font-family: ETMODULES;
color: #293280;
font-size: 18px;
position: relative;
top: 18px;
left: -50px;
font-weight: bold;
}
/* Hintergrund des Download-Icons stylen */
.audio-download-button:before {
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #ffffff;
}Zweierlei dazu:
- Den Code können Sie einfach anpassen: Etwa die Farbe des Buttons oder jene des Hintergrunds (Zeilen 16 und 29). Häufig werden Sie auch an der Positionierung des Buttons drehen müssen. Dies können Sie in der Zeile 19 und 20 tun.
- Auch kann es nötig werden, den Innenabstand des Audioplayers im Modul zu korrigieren, damit der Download-Button die anderen Player-Elemente nicht überlagert. Hierfür bearbeiten Sie das Audio-Modul, gehen auf den Tab «Design» und öffnen «Zwischenraum». Dort geben Sie im Feld «Innenabstand (Padding)»/«Rechts» einen passenden Wert ein. In unserem Fall haben wir 130px verwendet, damit es mit den -50px im obigen Schnipsel auf Zeile 20 korrekt ausschaut.
So präsentiert sich nun das Audio-Modul nun wie folgt:
Seven Nights To Rock
Falls bei Ihnen (wie in unserem Fall), die Statusanzeige des Players und die Zeitangabe nun zu weit unten angezeigt und abgeschnitten wird, können Sie deren Positionierung mit einem kleinen CSS-Code korrigieren. Platzieren Sie das folgende Snippet in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS:
/* Patch für die Position der Audio-Zeit */
.et_audio_container .mejs-container .mejs-controls .mejs-time span {
line-height: 18px!important;
top: -4px;
position: relative;
}Nun sollte das Audiomodul wie gewünscht erscheinen:
Seven Nights To Rock
Werbung
Werbung
