Wer kennt das nicht. Will man mit Divi auf seiner Webseite ein Bild, Video, PDF oder eine sonstige Datei zum Download zur Verfügung stellen öffnet sich mit Klick auf den Link oder einen Downloadbutton erst eine weitere Seite in der man die Datei dann herunterladen kann. Was aber wenn man seinen Usern die Möglichkeit geben will die Datei direkt mit einem Klick und ohne den Umweg über eine neue Seite herunterladen zu können? Eigentlich sollte das standardmäßig gehen, aber scheinbar gibt es dafür keine Möglichhkeit in Divi. Das Button-Modul bietet es jedenfalls nicht an.
Ich zeige dir hier gleich 4 Wege wie du diesen direkten Download dennoch einfach und schnell in deine Seite integrieren kannst.
Vorbereitung
Bevor wir einen Download anbieten können müssen wir die entsprechende Datei natürlich erst einmal bei uns verfügbar machen. Geht dazu einfach in eure Mediathek und ladet die Datei dort hoch. Das funktioniert neben Bildern und Videos auch mit PDFs und .zip Dateien problemlos. Solltet ihr eine Datei haben bei der WordPress den Upload in die Mediathek nicht erlauben will erfahrt ihr in meinen Quicktipps einen ganz einfachen Trick wie ihr dennoch jeden Dateityp hochladen könnt.
Wenn ihr die Datei hochgeladen habt kopiert ihr euch den Link dazu in die Zwischenablage. Den brauchen wir dann später noch.
Button Modul erweitern
In der Standardeinstellung gibt es im Divi Button keine Möglichkeit einen direkten Download einzustellen. Wenn wir ihn dennoch benutzen wollen müssen wir ihn erst dazu bewegen das zu tun. Zum Glück geht das relativ einfach.
Dazu erstellt du den Button wie gewohnt nach deinen Vorlieben und trägst anschließend im Reiter Inhalt unter „Link“ den Link ein den du dir vorhin gemerkt hast als du deine Datei hochgeladen hast.
Nun gehst du auf den Reiter Erweitert. Dort klickst du auf „CSS ID & Klassen“ und trägst unter „CSS Klasse“ einen Begriff deiner Wahl ein. Im Beispiel habe ich „direkt-download“ eingetragen, aber du kannst wie schon gesagt nehmen was du möchtest. Achte dabei aber darauf alles klein zu schreiben und keine Leerzeichen zu verwenden. Den von dir gewählten Begriff merkst du dir wieder, denn wir werden ihn später noch brauchen.
Code für den Head Bereich
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.direkt-download');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
Wenn du in dem Button einen anderen Begriff gewählt hast als ich im Beispiel dann ersetzt du meinen Begriff „direkt-download“ (ohne Anführungszeichen) durch den von dir gewählten. Jetzt müssen wir noch den folgenden Code eintragen damit der Buton dann später auch weiß was er tun soll.
Dafür hast du 2 Möglichkeiten:
1. Solltest du kein Child Theme haben trägst du den Code in deinem Dashboard unter Divi – Theme-Optionen – Integration in den Head-Bereich ein.
2. Falls du ein Child Theme benutzt das eine eigene Java-Script Datei hat kannst du den Code auch in diese Datei schreiben. Achte dabei aber bitte darauf die beiden <script> Tags am Anfang und am Ende zu entfernen.
Das Ergebnis ist beides Mal das selbe. sobald jemand auf den Button drückt startet automatisch der Downloadvorgang.
einen Direktlink verwenden
Mit dem soeben erstellten Code kannst du alternativ auch einen Direktlink erstellen der dann wie der Button einen Dateidownload mit nur einem Klick auslöst.
Dazu erstellst du einfach einen ganz normalen Link mit URL der Datei die du zum Download freigeben willst und wechselst anschließend vom Reiter Visual auf den Reiter Text. Dort fügst du deine Klasse ein so wie auf dem Bild zu sehen und schon hast du deinen direkten Downloadlink. Vergiss aber bitte nicht zu speichern.
mit einem PlugIn
Elegant Themes hat es in Divi bis heute nicht geschafft einen Button zum direkten Download zur Verfügung zu stellen obwohl es wie wir gesehen haben gar kein so großer Aufwand ist. In diese Lücke sind daher andere gesprungen und haben genau so einen Button entwickelt. Wenn du also lieber ein PlugIn verwendest als mit Code zu arbeiten dann solltest du dir diesen Artikel einmal genauer ansehen:
Divi Supreme ist eine großartige PlugInsammlung und beinhaltet unter anderem auch einen sehr flexiblen Downloadbutton.
Ich bin eigentlich kein großer Freund von PlugIns und versuche möglichst viel selbst zu machen aber das hier ist eine großartige Sammlung von nützlichen PlugIns und der Support ist erstklassig und wenn du dir das Changelog ansiehst wirst du feststellen, dass es oft Updates und neue Funktionen gibt.
Dynamische Downloads mit ACF
Zum Schluss möchte ich dir noch eine Methode zeigen mit der du dynamische Links erstellen kannst. Wenn du also viele und/oder oft wechselnde Downloads anbieten willst dann wäre das vielleicht die Methode deiner Wahl.
Mit einem dynamischen Download-Link kannst du jedem Beitrag mit demselben Layout einen eigenen Link hinzufügen. Divi kann zwar schon seit längerem dynamische Inhalte anzeigen aber um dynamische Downloads zu realisieren benötigst du zusätzlich noch ACF (Advanced Custom Fields) oder ein ähnliches PlugIn.
Dynamisches Feld in ACF erstellen
Als erstes musst du das ACF PlugIn (Advanced Custom Fields) oder eine vergleichbare Alternative wie z.B. Pods installieren. Anschließend fügst du in WordPress ein benutzerdefinierte Feld ein und stellst dabei den Feldtyp auf URL um. Gib dabei sowohl der Gruppe als auch dem Feld einen aussagekräftigen Namen. Jetzt wechselst du zum Standort Block in dem du die Regeln wie folgt festlegst:
Beitragstyp → Ist gleich → Beitrag
Die Einstellungen kannst du unverändert lassen und zum speichern musst du nur auf „Veröffentlichen“ klicken.
Nachdem dies erledigt ist brauchst du noch eine Vorlage der du das soeben erstellte benutzerdefierte Feld zuweisen kannst. Der Zweck der benutzerdefinierten Vorlage besteht darin, mithilfe der Divi-Funktionalität für dynamische Inhalte den Link aus dem jeweiligenBlogbeitrag abzurufen.
Theme Builder Vorlage erstellen
Öffne dazu einfach in deinem Dashboard unter Divi – Theme Builder eine neue Vorlage indem du dort auf das + Zeichen klickst und dann „Neue Vorlage erstellen“ wählst. In dem sich öffnenden Fenster machst du eiinen Haken bei alle Beiträge und anschliesend auf „Benutzerdefinierten Körper hinzufügen“
Jetzt erstellst du einfach einen neuen Beitrag genau so wie du es immer machst und wie es zu deinem Design passt. Das einzige was jetzt noch fehlt ist der Downloadbutton. dazu erstellst du einen gewöhnlichen Button den du z.B. Download nennst. Diesen Button müssen wir nun noch für die jeweiligen Downloads vorbereiten.
Dafür klickst du unter Link im Feld „Link-URL des Buttons“ ganz rechts auf das Symbol „Dynamischen Inhalt verwenden“ und scrollst im sich öffnenden Auswahlfenster ganz nach unten bis du den vorhin von dir im ACF erstellten Link findest.
Speichere deine neue Vorlage ab und das war`s dann auch schon. Wenn du ab jetzt einen neuen Beitrag erstellst, musst du nur noch unter Bearbeiten auf das von dir erstellte ACF Feld klicken und die entsprechende URL unter dem sich dein jeweiliger Download befindet eintragen.
Schlussworte
Das war`s dann auch schon. Wie du siehst war das gar nicht so schwer. Da wundert es mich doch immer wiedere, dass Elegant Themes nicht schon längst einen entsprechenden Button realisiert hat.
Ich hoffe meine kleine Auswahl an verschiedenen Möglichkeiten hat dir etwas gebracht und du hast deine für dich richtige Methode gefunden.
0 Kommentare