Divi – Button für direkte Downloads

24.05.2021Webdesign0 Kommentare

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.

Datei zur Mediathek hinzufügen

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.

Hier wird die CSS-Klasse für den Button eingetragen

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.

Hier wird die CSS-Klasse für den Textlich eingetragen

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.

Share This

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen