• Startseite
  • Artikel
  • Thema
  • 6 Möglichkeiten, wie Sie die Funktion zum Hochladen von Dateien per Drag & Drop von Divi verwenden können, um die Produktivität zu steigern

6 Möglichkeiten, wie Sie die Funktion zum Hochladen von Dateien per Drag & Drop von Divi verwenden können, um die Produktivität zu steigern

Veröffentlicht: 2018-08-22

Die Funktion zum Hochladen von Dateien per Drag & Drop von Divi kann ein wunderbares Werkzeug sein, um die Produktivität als Webdesigner zu steigern. In diesem Tutorial werde ich Sie durch 6 Möglichkeiten führen, wie Sie die Drag-and-Drop-Funktion verwenden können, um Ihren Divi-Design-Workflow zu verbessern. Ich werde Ihnen auch einige hilfreiche Tipps, Beispiele und Bonuscode-Snippets geben. Wenn überhaupt, macht es immer Spaß, Dateien per Drag & Drop zu ziehen, nur um zu sehen, was passiert.

Lass uns anfangen!

Ein kurzer Überblick über die Funktion zum Hochladen von Dateien per Drag & Drop von Divi

Die Drag & Drop-Funktion zum Hochladen von Dateien ist eine einfache Möglichkeit, Ihrer Seite Inhalte hinzuzufügen, wenn Sie den Divi Builder verwenden. Wie der Name schon sagt, können Sie Dateien per Drag-and-Drop auf Ihre Seite ziehen, um Inhalte hinzuzufügen, ohne zuvor Ihren Abschnitt, Ihre Zeile und Ihr Modul einrichten zu müssen. Und Divi platziert Inhalte je nach Dateityp unterschiedlich. TXT-Dateien werden beispielsweise zu Textmodulen hinzugefügt, HTML-Dateien zu Codemodulen und CSS-Dateien werden als benutzerdefiniertes CSS zu Ihrer Seite hinzugefügt.

Unterstützte Dateitypen und ihr Drag & Drop-Verhalten

Hier ist eine Liste aller Dateitypen, die derzeit von der Drag & Drop-Funktion unterstützt werden. Dies kann nützlich sein, wenn Sie darüber nachdenken, wie Sie die Funktion in Ihrem Designprozess nutzen können. Ich habe auch eine kurze Beschreibung hinzugefügt, damit Sie verstehen, was passiert, wenn diese Dateitypen hineingezogen werden.

Bilddateien

  • gif
  • jpeg
  • jpg
  • png

Beim Einfügen einer einzelnen Bilddatei erstellt Divi einen neuen Abschnitt und eine einspaltige Zeile und fügt dann ein Bildmodul mit Ihrem bereits in das Modul hochgeladenen Bild hinzu.

Beim gleichzeitigen Einfügen mehrerer Bilddateien erstellt Divi dieselbe Struktur (neuer Abschnitt und neue Zeile), fügt Ihre Bilder jedoch zu einem Galeriemodul hinzu.

Textdateien

  • TXT

Durch das Einfügen einer TXT-Datei wird der Text zu einem neuen Textmodul in einem neuen Abschnitt und einer neuen Zeile hinzugefügt.

Schriftdateien

  • otf
  • ttf

Durch das Einfügen einer Schriftartdatei wird das Popup-Fenster zum Hochladen von Schriftarten gestartet, wobei Ihr Schriftartname und Ihre Schriftart bereits geladen sind. Sie müssen lediglich bestätigen, dass Sie alle unterstützten Schriftstärken einschließen möchten, bevor Sie auf die Schaltfläche zum Hochladen klicken.

Videodateien

  • m4v
  • bewegen
  • webm
  • wmv
  • mp4

Durch das Einfügen einer oder mehrerer Videodateien wird jedes Video zu einem neuen Videomodul in einem neuen Abschnitt und einer neuen Zeile hinzugefügt.

Audiodateien

  • mp3
  • wellenartig

Durch das Einfügen einer oder mehrerer Audiodateien wird jede Audiodatei zu einem neuen Audiomodul in einem neuen Abschnitt und einer neuen Zeile hinzugefügt.

Webdateien

  • json
  • html
  • CSS

Die JSON-Datei ist für alle Seitenlayouts, die Sie exportiert haben. Durch Ziehen in der JSON-Datei wird das Seitenlayout automatisch auf die Seite geladen.

Durch das Ziehen einer HTML-Datei wird der HTML-Code einem neuen Codemodul innerhalb eines neuen Abschnitts und einer neuen Zeile hinzugefügt.

Wenn Sie eine CSS-Datei hineinziehen, wird der CSS-Code automatisch dem benutzerdefinierten CSS für Ihre Seite hinzugefügt, das Sie in Ihren Seiteneinstellungen auf der Registerkarte „Erweitert“ finden.

Insgesamt ist der Prozess intuitiv und bietet einige großartige Möglichkeiten zur Verbesserung des Workflows. Lassen Sie uns auf einige der Möglichkeiten eingehen, wie Sie die Funktion verwenden können.

#1 Ziehen Sie benutzerdefinierte CSS-Snippets nach Bedarf auf Ihre Seite

Die meisten von euch Divi-Benutzern da draußen lieben Divi speziell, weil ihr kein benutzerdefiniertes CSS verwenden müsst. Das macht Divi so großartig. Wenn es jedoch um die Anpassung des WordPress-Themes geht, ist benutzerdefiniertes CSS (auch innerhalb von Divi) immer noch ein wertvolles Gut.

Wie jeder gute Webentwickler sollten Sie Ihre CSS-Schnipsel unterwegs speichern, damit Sie für zukünftige Projekte leicht darauf zugreifen können. Dadurch werden Sie nicht nur geübter beim Erstellen von Websites, sondern können auch die Drag & Drop-Funktion von Divi nutzen.

Angenommen, Sie haben ein CSS-Snippet zum Ausblenden der unteren Fußzeilenleiste auf Ihrer Divi-Seite. Wenn Sie dieses Snippet als CSS-Datei mit dem Titel „Untere Fußzeile ausblenden“ speichern, können Sie diese Datei dann greifen und auf Ihre Seite ziehen, um sofortige Ergebnisse zu erzielen.

Divi organisiert Ihre Snippets automatisch mit jedem Tropfen

Mit jeder CSS-Datei, die Sie auf Ihre Seite ziehen, extrahiert Divi das CSS und fügt es Ihrer Seite hinzu. Sie können dieses benutzerdefinierte CSS jederzeit auf der Registerkarte "Erweitert" Ihrer Seiteneinstellungen anzeigen.

Sie werden auch feststellen, dass Divi Ihr CSS-Snippet intelligent organisiert, indem es mit Kommentaren umhüllt wird. Wenn Sie es nicht wissen, werden Kommentare im Code verwendet, um bestimmte Codeblöcke leicht zu identifizieren und/oder zu beschreiben. Vor Ihrem CSS-Snippet fügt Divi einen Kommentar mit dem Text „Begin“ gefolgt vom Titel Ihrer CSS-Datei „Hide Bottom Footer“ ein. Nach dem Snippet fügt Divi einen weiteren Kommentar mit dem Text „Ende“ ein, gefolgt vom Titel der Datei.

Hier ist ein Beispiel dafür, wie ein Snippet in den Seiteneinstellungen aussehen würde, nachdem es in die CSS-Datei „Hide Bottom Footer“ gezogen wurde. 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

Für diejenigen unter Ihnen, die nicht wissen, wie Sie Ihr eigenes CSS erstellen, können Sie sich auf die hilfreichen Tutorials im Internet verlassen, die es für Sie bereitstellen. Das ist cool. Wir alle tun es. Wenn Sie jedoch die Drag-and-Drop-Funktion nutzen möchten, sollten Sie diese Schnipsel als einzelne Dateien speichern und sie entsprechend benennen. Auf diese Weise ist jedes Snippet nur ein Drag & Drop entfernt.

Zwei Beispiele für CSS-Snippets, die Sie für Hover-Animationen verwenden können

Mit CSS sind die Möglichkeiten nahezu endlos. Aber ich dachte, ich würde Ihnen ein paar Beispiele für CSS-Snippets geben, die Sie in Ihrer Bibliothek speichern können und die Ihrer Site Animationen hinzufügen.

Speichern Sie das folgende CSS-Snippet als „.css“-Datei (benennen Sie es in etwa wie „Scale Icons on Hover“). 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Speichern Sie dann dieses folgende Snippet als eine weitere „.css“-Datei mit dem Namen „Blurb Shadow on Hover“.

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

Sobald Sie beide Dateien auf Ihrem Computer gespeichert haben. Wählen Sie beide Dateien aus und ziehen Sie sie auf die Seite. Sie können natürlich nur eine ziehen, wenn Sie möchten, aber ich dachte, ich würde Ihnen zeigen, dass es auch mit mehreren Dateien funktioniert. Dies führt sofort dazu, dass alle Klappenmodule einen Popup-Effekt haben, indem beim Schweben ein Kastenschatten hinzugefügt wird. Außerdem werden alle Klappensymbole skaliert (vergrößert), wenn Sie mit der Maus darüber fahren.

Ziemlich cooles Zeug.

Und Sie können sich vorstellen, wie hilfreich es sein wird, wenn Ihnen ein Arsenal dieser CSS-Dateien zur Verfügung steht.

#2 Ziehen Sie benutzerdefinierte Schriftarten per Drag & Drop auf Ihre Seite und ersetzen Sie schnell aktuelle Schriftarten

Wenn Sie Websites erstellen, kennen Sie die Notwendigkeit, eine große Auswahl an Schriftarten zur Verfügung zu haben. Divi hat Hunderte von Schriftarten in den Divi Builder integriert, was die Dinge viel einfacher macht. Und Sie können jederzeit die Option verwenden, um neue Schriftarten aus dem Divi Builder heraus hochzuladen. Aber mit der neuen Drag-and-Drop-Funktion von Divi ist das Hinzufügen neuer Schriftarten zu Ihrer Site lächerlich einfach.

Nehmen wir an, Sie verwenden eines der vorgefertigten Layouts, möchten aber eine neue Schriftart ausprobieren, die Divi noch nicht zur Verfügung hat. So einfach können Sie die Schriftart ändern:

Stellen Sie sicher, dass der Visual Builder aktiviert ist und Sie Ihr vorgefertigtes Layout hochgeladen haben. Dann müssen Sie nur noch Ihre Schriftartdatei von Ihrem Computer auf die Seite/den Visual Builder im Browserfenster ziehen. Klicken Sie dann auf die Schaltfläche Hochladen.

Drag & Drop mit Suchen & Ersetzen ist eine leistungsstarke Kombination

Um noch einen Schritt weiter zu gehen, können Sie die Funktion Suchen & Ersetzen von Divi verwenden, um die in den vorgefertigten Layout-Überschriften verwendete Schriftart durch die neue Schriftart zu ersetzen, die Sie gerade eingefügt haben.

Öffnen Sie im Landing Page-Layout der Kreativagentur das Textmodul, das den Kopfzeilentext im oberen Bereich enthält. Klicken Sie dann mit der rechten Maustaste auf die Option Schriftart für die Überschrift. Wählen Sie im Rechtsklick-Menü Suchen und Ersetzen aus.

Wählen Sie im Popup „Suchen & Ersetzen“ Ihre neue Schriftart unter der Option „Ersetzen durch“ aus und klicken Sie auf die blaue Schaltfläche „Ersetzen“.

Jetzt haben alle Ihre Kopfzeilen die neue Schriftart!

#3 Ziehen Sie mehrere Bilder per Drag & Drop, um sofortige Fotogalerien mit Titeln zu erstellen

Mit der Drag-and-Drop-Funktion von Divi können Sie Bilder ganz einfach auf Ihre Site ziehen. Dies ist wirklich praktisch, wenn Sie Websites mit vielen Bildern erstellen. Und da die meisten Benutzer gespeicherte Bilder in einem Ordner auf ihrem Computer speichern, ist es äußerst praktisch, diese Bilder auszuwählen und auf Ihre Seite zu ziehen.

So funktioniert es beim Ziehen und Ablegen in einem einzelnen Bild.

Wenn Sie ein einzelnes Bild in den Visual Builder ziehen, wird automatisch Folgendes ausgeführt:
1. Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile
2. Fügen Sie der Zeile ein Bildmodul hinzu
3. Fügen Sie das Bild in dieses Bildmodul ein
4. Öffnen Sie die Bildeinstellungen, um den Bearbeitungsvorgang zu starten.

So funktioniert es beim Einziehen mehrerer Bilder.

Wenn Sie mehrere Bilder in Ihre Visual Builder-Seite ziehen, führt Divi automatisch Folgendes aus:

1. Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile
2. Fügen Sie der Zeile ein Galeriemodul hinzu
3. Fügen Sie die neuen Bilder in das Galeriemodul ein
4. Öffnen Sie die Galeriemoduleinstellungen, um den Bearbeitungsprozess zu starten.

Bereiten Sie Ihre Bilder vor, bevor Sie sie auf Ihre Seite ziehen

Damit Ihre Bildergalerie gut aussieht, hilft es, vorher ein paar Optimierungen vorzunehmen.

Bildgröße
Stellen Sie zunächst sicher, dass Ihre Bilder alle die gleiche Größe haben. Ich würde vorschlagen, Bilder mit einer Größe von etwa 1500 x 800 Pixel zu verwenden. Dies bietet eine schöne Größe für die Bilder, wenn sie in einer Lightbox bereitgestellt werden. Außerdem wird Divi eine kleinere Version des Bildes für das Miniaturbild in der Galerie verwenden. Wo wir gerade beim Thema sind, könnte es hilfreich sein, einige empfohlene Bildgrößen für Divi-Module zu überprüfen. Danach können Sie die Dateigröße etwas weiter verkleinern, indem Sie sie in TinyPNG ziehen oder Ihren Fotoeditor verwenden, um sie für Webspezifikationen zu speichern.

Bildtitel
Standardmäßig zeigt Divi den Titel Ihres Bildes unter jedem Miniaturbild in Ihrer Galerie an. Es macht also Sinn (wenn Sie diesen Titel anzeigen möchten), Ihren Bildern den richtigen Titel zu geben, bevor Sie sie ziehen.

#4 Ziehen Sie MP3-Dateien mit einer CSS-Datei auf Ihre Seite, um das Design zu starten

Für euch Podcaster da draußen könnte dies definitiv die Produktivität steigern. Da die Drag & Drop-Funktion von Divi MP3- und WAV-Dateiformate unterstützt, können Sie diese einfach im Builder ablegen, um den Erstellungsprozess zu starten.

Wenn Sie eine einzelne MP3- oder WAV-Datei auf die Seite ziehen, führt Divi automatisch Folgendes aus:

1. Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile
2. Fügen Sie ein neues Audiomodul mit Ihrer angehängten Audiodatei hinzu
3. Öffnen Sie das Auto-Einstellungen-Modal, um den Bearbeitungsvorgang zu starten.

Wenn Sie mehrere MP3- oder WAV-Dateien auf die Seite ziehen, macht Divi dasselbe wie beim Ziehen einer einzelnen Audiodatei, außer dass dies mehrere Male geschieht. Wenn Sie also 4 Audiodateien hineinziehen, erstellt Divi 4 verschiedene Abschnitte mit einer einspaltigen Zeile, die das Audiomodul mit der angehängten Audiodatei enthält. Das Audioeinstellungs-Modal wird auch angezeigt, um mit der Bearbeitung des zuletzt der Seite hinzugefügten Audiomoduls zu beginnen.

Ziehen Sie eine CSS-Datei hinein, um alle Audiomodule auf einmal zu stylen

Wenn Sie es gewohnt sind, benutzerdefiniertes CSS zu verwenden, um Ihren Divi-Seiten zusätzliches Styling hinzuzufügen, schlage ich vor, dass Sie diese Schnipsel in einer CSS-Datei speichern, um sie für zukünftige Builds zu verwenden (obwohl Sie das sicher bereits wussten). Wenn Sie also ein CSS-Snippet haben, um Audiomodule auf eine bestimmte Weise zu stylen, speichern Sie dieses CSS in einer separaten CSS-Datei. Dann können Sie diese CSS-Datei einfach auf die Seite ziehen, um alle Ihre Audiomodule sofort zu stylen.

Das CSS, das ich in der obigen Abbildung verwendet habe, ist ein kurzes Beispiel, aber wenn Sie es ausprobieren möchten, kopieren Sie das folgende benutzerdefinierte CSS: 

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

Fügen Sie es dann in einen Texteditor ein und speichern Sie es im CSS-Dateiformat (es muss die Erweiterung „.css“ haben). Sobald Sie es auf Ihrem Computer speichern. Ziehen Sie es in den Visual Builder, der Ihre Audio-Klappen enthält.

#5 Erstellen Sie wiederverwendbare Codeblöcke, die zur sofortigen Implementierung auf Ihre Seite gezogen werden können

Die Drag & Drop-Funktion von Divi unterstützt CSS- und HTML-Dateien (leider sind keine Javascript-Dateien erlaubt). Für diejenigen, die wissen, was sie tun, können Sie der HTML-Datei möglicherweise Skripte hinzufügen, die diese Javascript-Funktionalität für Sie hinzufügen. Dies lässt jedoch die Möglichkeit, diese Dateien zu kombinieren, um nützliche Codeblöcke zu erstellen, die Sie für sofortige Ergebnisse auf eine Seite ziehen können.

Beispiel 1: Ziehen Sie exportierte Code Pen-Dateien per Drag & Drop auf Ihre Seite

Wenn Sie ein Fan von Codepens sind, sind Sie möglicherweise bereits für einige nützliche Drag-and-Drop-Zauber eingerichtet. Bevor Sie zu aufgeregt sind, muss ich Sie warnen, dass Sie zum Erstellen von Dateien, die sich beim Einfügen sofort auf Ihre Site auswirken, auf Codepens beschränkt sind, die nur eine Kombination aus HTML und CSS verwenden.

Hier ist, wie dieser Prozess für Sie funktionieren kann.

Gehen Sie zu der Seite, die den Codepen enthält, den Sie exportieren möchten, und klicken Sie auf die Schaltfläche Exportieren unten rechts auf der Seite.

Extrahieren Sie die Dateien auf Ihrem Computer und suchen Sie die HTML- und die CSS-Datei. Verwenden Sie einen Texteditor, um Ihre HTML-Datei anzuzeigen und entfernen Sie alle Tags, die Sie nicht benötigen (Doctype, HTML, Header, Body), sodass nur noch der HTML-Code übrig bleibt, den Sie in der HTML-Box des Codepen sehen . Speichern Sie dann die Datei.

Tatsächlich ist es für die HTML-Datei möglicherweise besser, den HTML-Code direkt aus dem Stift zu kopieren und Ihre eigene HTML-Datei zu erstellen.

Suchen Sie nun die CSS-Datei (sollte sich im CSS-Ordner befinden). Stellen Sie sicher, dass Sie die CSS-Datei und nicht die SCSS-Datei verwenden (dieser Dateityp wird von der Drag-and-Drop-Funktion nicht unterstützt).

Ziehen Sie nun beide Dateien mit aktivem Visual Builder auf die Seite.

Das passiert automatisch:

1. Divi erstellt einen neuen Abschnitt mit einer einspaltigen Zeile.
2. Divi fügt der Zeile ein Codemodul mit Ihrem HTML-Inhalt als Inhalt hinzu.
3. Divi fügt das benutzerdefinierte CSS zu Ihrem benutzerdefinierten CSS-Block für die Seiteneinstellungen hinzu.

Wenn Sie einen Fehler erhalten, bedeutet dies, dass Sie entweder nicht den richtigen Dateityp haben oder der Inhalt der Datei Code enthält, der nicht unterstützt wird. Wenn die HTML-Datei beispielsweise die Tags doctype und html enthält, funktioniert die Datei nicht. Auch wenn Ihre CSS-Datei SCSS-Code enthält, kann dies ebenfalls einen Fehler auslösen.

Zugegeben, dies ist zunächst nicht der reibungsloseste Prozess. Sie müssen Ihren Code und Ihre Dateien ein wenig organisieren. Wenn Sie also mit HTML und CSS nicht vertraut sind, kann dies ein Problem sein. Das Endergebnis könnte sich jedoch als sehr wertvoll erweisen, da Sie sich mit einigen wiederverwendbaren Codeblöcken eindecken können, die nur per Drag & Drop entfernt sind.

Ich sollte auch beachten, dass Sie mit der Lizenzierung von Codepen vertraut sein sollten, bevor Sie Code kopieren, der nicht Ihr eigener ist.

Beispiel 2: Ziehen Sie isolierte Instanzen von Font Awesome auf Ihre Seite und legen Sie sie ab

Wenn Sie es gewohnt sind, Font Awesome auf Ihrer Divi-Site zu verwenden, können Sie davon profitieren, einige „drag-ready“-Dateien zur Hand zu haben, mit denen Sie Font Awesome-Instanzen in Ihre Seite einfügen können. Dies kann tatsächlich mit einer einzigen HTML-Datei erfolgen.

Hier ist, wie dieser Prozess für Sie funktionieren kann.

Holen Sie sich das Font Awesome-Skript von ihrer Website. Stellen Sie sicher, dass es sich um die SVG + JS-Version handelt. Kopieren Sie dann das Skript in Ihre Zwischenablage.

Erstellen Sie dann eine neue Textdatei und fügen Sie den Code ein. Fügen Sie unter dem Skript den HTML- und Schriftartcode hinzu, den Sie auf Ihrer Seite bereitstellen möchten.

Hier ist ein Beispiel für einen "drag-ready" HTML-Code mit einer Liste mit fantastischen Schriftsymbolen: 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

Stellen Sie sicher, dass Sie Ihre Datei als HTML-Datei speichern. Ziehen Sie es dann mit dem Visual Builder auf Ihre Seite.

Divi fügt den HTML-Code automatisch für Sie zu einem Codemodul hinzu und jetzt haben Sie eine tolle Liste mit Schriftarten, die Sie für Ihre Seite bearbeiten können.

Sie wünschen sich wahrscheinlich, dass die Liste in einen Textbaustein eingefügt wurde, damit Sie die Texteinstellungen des Inhalts verwenden können. Da dies jedoch nicht automatisch geschieht, sollten Sie Ihre HTML-Datei auf das Skript beschränken. Und dann fügen Sie Ihren HTML-Code in ein Textmodul ein. Aber für diejenigen unter Ihnen, die eine CSS-Datei zur Hand haben, um das Design zu bearbeiten, ist es schön, diese mit Ihrer HTML-Datei hineinziehen zu können.

#6 Erstellen Sie eine Bibliothek mit Divi-Seitenlayouts (json-Dateien) auf Ihrer Festplatte, die Sie für eine schnellere Entwicklung in Ihre Seiten ziehen können

Mit Divi können Sie ganz einfach selbst gestaltete Seitenlayouts speichern und exportieren. Diese Funktionalität hat zwei wirklich große Vorteile. Der erste Vorteil besteht darin, dass Sie Seitenlayouts in der Divi-Bibliothek speichern können, um den Designprozess beim Erstellen einer Website zu beschleunigen. Der zweite Vorteil ist die Möglichkeit, Seitenlayouts auf Ihren eigenen Computer zu exportieren. Auf diese Weise können Sie eine wertvolle Sammlung von Seitenlayouts (json-Dateien) ansammeln, um Ihr nächstes Projekt zu starten.

Und mit der neuen Drag-and-Drop-Funktion können Sie diese gespeicherten Layouts für eine noch schnellere Entwicklung schnell in den Visual Builder ziehen.

So könnte dieser Prozess für Sie funktionieren.

Angenommen, Sie möchten nur den Kopfzeilenabschnitt des Landing Page-Layouts der Designagentur speichern (Dies könnte ein beliebiges Design sein, aber für dieses Beispiel verwende ich ein vorgefertigtes Layout). Nachdem Sie das Layout auf Ihre Seite geladen haben, löschen Sie jeden Abschnitt im Layout mit Ausnahme des oberen Kopfzeilenabschnitts. Dann würden Sie das Layout auf Ihre Festplatte exportieren.

Um ein Seitenlayout mit dem Visual Builder zu exportieren, öffnen Sie das Einstellungsmenü und klicken Sie auf das Portabilitätssymbol. Geben Sie dann im Portabilitäts-Popup einen Namen ein („Design Agency Header Layout“) und klicken Sie auf die Schaltfläche Divi Builder Layout exportieren.

Dadurch wird das Layout als JSON-Datei auf Ihrem Computer gespeichert.

Wenn ich nun den Header-Abschnitt auf meiner Seite lösche, sodass meine Seite jetzt keine Abschnitte mehr enthält, kann ich diesen Header ganz einfach wieder zu meiner Seite hinzufügen, indem ich die JSON-Datei in die Seite ziehe.

Wenn ich die JSON-Datei ziehe, wird das Portabilitäts-Modal automatisch angezeigt, damit ich die Option zum Ersetzen vorhandener Inhalte auswählen oder zuvor ein Backup erstellen kann. Da ich keinen Inhalt ersetzen muss, muss ich nur auf den Import-Button klicken und er wird sofort auf die Seite geladen.

Das mag nicht so beeindruckend erscheinen, aber es hat die Möglichkeit, den Designprozess wirklich zu beschleunigen. Wenn ich eine große Sammlung von Json-Dateien mit unterschiedlichen Seitenlayouts hätte (jedes mit bestimmten Elementen, die mir gefallen). Ich kann diese Dateien dann wie einen Baustein verwenden und sie einzeln auf die Seite ziehen. Stellen Sie nur sicher, dass die Titel, die Sie ihnen beim Export geben, beschreibend sind.

Abschließende Gedanken

Die Drag & Drop-Funktion von Divi kann definitiv ein nützliches Werkzeug sein, um Ihren Webdesign-Workflow zu verbessern. Es gibt einige Einschränkungen, die zunächst zu Frustration führen können, aber hoffentlich hilft Ihnen dieser Artikel dabei, zu verstehen, wie Sie diese Funktion nutzen können, um eine persönliche Bibliothek mit ziehbaren Dateien zu erstellen, die Ihre Produktivität im Webdesign erhöht.

Ich würde gerne Ihre eigenen Ideen in den Kommentaren unten hören.

Danke schön!