Divi – Button für direkte Downloads
In diesem Beitrag geht es um etwas, das wirklich jeder kennt, der eine Website betreibt oder mal eine erstellt hat. Man hat ein Foto, ein PDF-Dokument, ein Video, das man zum Download anbieten möchte. Man verlinkt das Dokument entsprechend und es wird im aktuellen, oder idealerweise in einem neuen Fenster oder Tab geöffnet. An dieser Stelle kann es der Besucher der Website dann speichern, respektive Downloaden. Wie wäre es denn, wenn der Benutzer bereits beim Klick auf einen Button oder Link, die Datei direkt downloaden könnte. In meinem heutigen Divi/WordPress-Tipp „Divi – Button für direkte Downloads“, zeige ich dir wie es geht.
Das Dokument in die Mediathek hochladen
Als erstes laden wir einmal ein Dokument – in diesem Fall eine PDF-Datei – in die Mediathek hoch. .Das geht wie bei Bildern auch und benötigt keiner weiteren Erklärung, denke ich. Sollte dies doch so sein, stellt mir eure Fragen in den Kommentaren.
Anschließend kopiert ihr den Link zur Datei in die Zwischenablage.
Einen Button für direkte Downloads erstellen
Auch hier möchte ich nicht unnötig lange und tief einsteigen. Ich denke, das könnt ihr längst. Also erstellen wir einen Button.
Dieser Vorgang sollte ja soweit klar sein, aber wie ihr sehen könnt, öffnet sich das PDF-Dokument im neuen Tab/Fenster. Dies ist er Standard, aber wir wollen ja etwas anderes. Im nächsten Schritt, müsst ihr unten stehenden JQuery-Code in euer Divi-System integrieren.
Der Code für euer Divi-System
<script>jQuery(document).ready(function() { var downloadButton = jQuery('.download-button'); downloadButton.each(function(index) { jQuery(this).attr('download', ''); });});</script>Kopiert euch den Code hier in die Zwischenablage. Dann wechselt ihr in die Divi-Theme-Optionen und unter dem Reiter „Integration“ fügt ihr den Code in den <HEAD>-Bereich ein. Das Speichern bitte nicht vergessen.
Wir vergeben hier in dem Beispiel den Klassen-Namen „.download-button“. Es steht euch frei, dort auch einen anderen Namen zu verwenden.
Der nächste Schritt ist nun, dem Button noch die CSS-Klasse „.download-button“ zuzuweisen. Hierzu wechselt ihr wieder in die Modul-Einstellungen des Buttons und tragt inm Reiter „Erweitert“ den Namen in das Feld CSS-Klasse ein. Hier dürft ihr aber den „.“ nicht mit eingeben, nur den reinen Namen.
Divi – Button für direkte Downloads
Das war es im Prinzip schon. Speichert alles, speichert auch die Seite erneut und schon kann der Besucher eurer Website das PDF-Dokument über einen Klick auf den Button herunterladen. Ist es das erste Mal, das ein Besucher eine Datei von eurer Seite herunterlädt, muss er dies noch einmal bestätigen, aber das ist ja bei jedem Download so. Ich finde diesen Weg, Dateien zum Download anzubieten wesentlich schöner, als den Stadard-Weg.
Kleiner Bonus-Tipp – direkter Download ohne Button
Dies klappt alles auch ohne Button. Wenn ihr lieber einen Textlink verwenden möchtet um den Download anzubieten, müsst ihr wie folgt vorgehen:
Ihr erstellt einen Textlink – ich setze voraus, ihr wisst, wie das geht. Als Linkziel gebt ihr wieder die URL der Datei aus der Mediathek ein. Wechselt nun von der Ansicht „Visuell“ im Modul Text auf „Text“. Hier könnt ihr nun die Klasse „.download-button“ eintragen und das war es schon. Alles speichern und fertig.
Divi – Button für direkte Downloads – das war es schon
Nochmal zusammengefasst, sind eigentlich nur 2 Arbeitsschritte nötig.
1. Code in den <head>-Bereich der Seite eintragen
2. Klasse in die Eigenschaften des Buttons eintragen
Ich hoffe, der Beitrag war interessant für euch und ich konnte damit helfen. Ansonsten gilt auch hier wieder, euch viel Spaß und Erfolg bei der Webentwickliung zu wünschen. Fragen dürft ihr, wie immer in den Kommentaren stellen.
Danke für den Tipp! Das wurmt mich schon lange und gerade dachte ich, da muss es doch eine charmantere Lösung für geben. Habe es auf einer meiner Seiten direkt umgesetzt!
Hi Annika,
es freut mich sehr, wenn ich dir damit helfen konnte. Weiterhin viel Erfolg.
LG Michael
Danke für die tolle Arbeit die hier geleistet wurde, hier bekommt man sehr gute Informationen, die sehr nützlich sein können.
Lieben Gruß Mia
Herzlichen Dank, Mia. Es freut mich, wenn ich helfen kann.
Lieber Gruß, Michael