So erstellen Sie mit Divi . einen scrollenden Modekatalog

In diesem Beitrag zeigen wir Ihnen, wie Sie einen scrollenden Modekatalog erstellen können. Wenn Sie diese Methode verwenden, können Sie sich mit Ihrem Publikum verbinden, als ob Sie ihm einen Katalog in Papierform aushändigen würden. Das Erstellen eines online scrollenden Modekatalogs kann dazu beitragen, die Ergebnisse des Katalogs zu verbessern. Durch direkte Verlinkungen zum Beispiel zu Shop-Artikeln wird auch der Kaufprozess verbessert.

Ergebnis

Das Ergebnis, das wir Ihnen Schritt für Schritt zeigen, sieht auf dem Desktop so aus:

Und so auf Handy und Tablet:

So erstellen Sie mit Divi . einen scrollenden Modekatalog

Abonnieren Sie unseren Youtube-Kanal

Fügen Sie mit Photoshop transparente Formen zu Bildern hinzu

Als erstes zeigen wir Ihnen, wie Sie mit Photoshop einen transparenten Teil zu einem Bild hinzufügen. Es gibt eine kostenlose Alternative für Photoshop namens GimpShop, aber in diesem Teil des Tutorials verwenden wir nur Photoshop. Wir benötigen zwei Bilder mit jeweils zwei unterschiedlichen Formen; eine für Desktop und eine für Handy und Tablet. In diesem Teil zeigen wir Ihnen einfach, wie Sie dem Bild eine transparente Form hinzufügen. Anschließend können Sie alle benötigten Bilder selbst erstellen.

Öffnen Sie Photoshop

Öffnen Sie zunächst Photoshop auf Ihrem Computer.

Bild öffnen

Öffnen Sie als Nächstes das erste Bild, das Sie bearbeiten möchten. Die Methode bleibt für alle drei Bilder, die Sie in diesem Tutorial verwenden, gleich. Deshalb werden wir es nur einmal erklären.

Doppelklick auf Bild & Ebene erstellen

Nachdem Sie das zu bearbeitende Bild geöffnet haben, doppelklicken Sie auf das Bild und erstellen Sie eine neue Ebene dafür.

Eine weitere Ebene hinzufügen

Fahren Sie fort, indem Sie eine weitere leere Ebene darüber hinzufügen.

Wählen Sie Layer 1 & polygonales Lasso-Werkzeug

Wählen Sie Ebene 1 und beginnen Sie mit der Verwendung des Polygonal Lasso-Werkzeugs.

Mach eine Form

Während das Polygonal Lasso-Werkzeug aktiviert ist, erstellen Sie die transparente Form in Ihrem Bild.

Machen Sie Ebene 1 unsichtbar und drücken Sie die Entf-Taste, während Sie Ebene 0 ausgewählt haben

Sobald Sie den Bereich ausgewählt haben, der transparent werden soll, machen Sie Layer 1 unsichtbar, wählen Sie Layer 0 erneut aus und drücken Sie die Entf-Taste auf Ihrer Tastatur.

Wählen Sie das rechteckige Auswahlwerkzeug und klicken Sie irgendwo auf das Bild

Sobald Sie das getan haben, wählen Sie das Rechteckige Auswahlwerkzeug aus und klicken Sie irgendwo auf Ihr Bild.

Bild als PNG speichern

Schließlich müssen Sie das Bild als PNG speichern und den gleichen Vorgang für alle vier Bilder wiederholen, die Sie im gesamten Layout verwenden.

Einstellungen der primären Menüleiste

Die Einstellungen der primären Menüleiste, die wir für das zu erstellende Layout benötigen, sind die folgenden:

• Logobild ausblenden: Aktivieren
• Menühöhe: 30
• Textgröße: 15
• Buchstabenabstand: -1
• Schriftart: Lato
• Schriftstil: Fett & Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: rgba(255,255,255,0)
• Hintergrundfarbe des Dropdown-Menüs: rgba(255,255,255,0)

Ausgabe-Intro

Nachdem Sie die primäre Menüleiste geändert haben, können Sie eine neue Seite hinzufügen, den Divi Builder verwenden und zum Visual Builder wechseln.

Neuen Abschnitt hinzufügen

Beginnen Sie auf dieser Seite mit dem Hinzufügen eines Standardabschnitts.

Abschnitt Hintergrundfarbe

Der Hintergrund dieser Farbe muss '#d6d6d6' sein.

Benutzerdefinierte Polsterung

Wechseln Sie zur Registerkarte Design dieses Abschnitts. Fügen Sie in der Unterkategorie Abstand '24px' zum oberen Abstand und 0px zum unteren hinzu.

Zeile mit einer Spalte hinzufügen

Sobald dies erledigt ist, können Sie dem Abschnitt eine einspaltige Zeile hinzufügen.

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Unterkategorie Dimensionierung:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: 1

Benutzerdefinierte Polsterung

Scrollen Sie nach unten und fügen Sie '0px' zum oberen Abstand der Zeile hinzu.

Erstes Textmodul

Sobald dies erledigt ist, können Sie der Zeile ein Textmodul hinzufügen. Nachdem Sie den anzuzeigenden Text eingegeben haben, gehen Sie zur Registerkarte Design und stellen Sie sicher, dass die folgenden Änderungen für die Unterkategorie Text gelten:

• Textschriftart: Old Standard TT
• Schriftstil: Großbuchstaben
• Schriftgröße des Textes: 72 (Desktop), 41 (Tablet), 29 (Telefon)
• Textfarbe: #000000
• Text Buchstabenabstand: 11px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Öffnen Sie die Unterkategorie Abstand und fügen Sie '30px' zum oberen und unteren Abstand hinzu.

Teilermodul

Fügen Sie direkt unter dem Textmodul ein Teilermodul hinzu und aktivieren Sie die Option "Teiler anzeigen".

Gehen Sie zur Registerkarte Design und wählen Sie '#FFFFFF' als Teilerfarbe.

Wählen Sie als Nächstes 'Solid' als Teilungsstil und 'Oben' als Teilerposition innerhalb der Unterkategorie Stile.

Öffnen Sie dann die Unterkategorie Dimensionierung und nehmen Sie die folgenden Einstellungen vor:

• Teilergewicht: 10px
• Höhe: 23px
• Breite: 100%
  

Zweites Textmodul

Fügen Sie direkt unter dem Trennmodul ein weiteres Textmodul hinzu. Wählen Sie ein beliebiges Symbol in Ihrer Zeichentabelle (Windows) oder Zeichenpalette (Mac) und platzieren Sie es auf der Registerkarte Inhalt. In diesem Beispiel haben wir das folgende Symbol verwendet: '↓'. Gehen Sie dann auf die Registerkarte Design und nehmen Sie die folgenden Einstellungen vor:

• Schriftgröße des Textes: 42px
• Textfarbe: #000000
• Textausrichtung: Mitte

Desktop-Modekatalog (Neuer Abschnitt)

Fügen Sie nun einen weiteren Standardabschnitt hinzu. Dieser Abschnitt enthält zwei Zeilen, die einen anderen Teil des Katalogs auf dem Desktop anzeigen.

Abschnittseinstellungen

Hintergrundfarbe

Verwenden Sie '#FFFFFF' als Hintergrundfarbe dieses Abschnitts.

Benutzerdefinierte Polsterung

Gehen Sie dann zur Registerkarte Design und fügen Sie '15px' zum oberen Abstand hinzu.

Erste Reihe

Spaltenstruktur

Nachdem Sie die Einstellungen geändert haben, fügen Sie eine Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und fügen Sie 'rgba(255,255,255,0.14)' als Hintergrundfarbe hinzu.

Hintergrundbild

Fügen Sie eines der Bilder hinzu, die Sie im Photoshop-Teil dieses Beitrags erstellt haben, und verwenden Sie 'Farbton' als Hintergrundbildmischung.

Größe

Nehmen Sie zuletzt die folgenden Änderungen an der Unterkategorie Größenanpassung vor:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Erstes Textmodul

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, fügen Sie der zweiten Spalte ein Textmodul hinzu. Verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Bitter
• Schriftgröße des Textes: 63px
• Textfarbe: #000000
• Textausrichtung: Mitte

Teilermodul

Fügen Sie direkt unter dem ersten Textmodul ein Teilermodul hinzu und aktivieren Sie die Option "Teiler anzeigen".

Wechseln Sie zur Registerkarte Design und verwenden Sie '#000000' als Teilerfarbe.

Verwenden Sie in der Unterkategorie Stile 'Solid' als Trennstil und 'Top' als Trennposition.

Scrollen Sie auf derselben Registerkarte nach unten und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Dimensionierung gelten:

• Teilergewicht: 3px
• Höhe: 23px
• Breite: 57%
• Modulausrichtung: Links

Schließlich fügen Sie einen oberen Rand von '30px' und einen unteren Rand von '50px' hinzu.

Zweites Textmodul

Sobald die Trennlinie vorhanden ist, fügen Sie das zweite Textmodul hinzu, das einen Titel enthält. Verwenden Sie zunächst '#000000' als Hintergrundfarbe auf der Registerkarte Inhalt.

Wechseln Sie dann zur Registerkarte Design und nehmen Sie die folgenden Einstellungen vor, die für die Unterkategorie Text gelten:

• Textschriftart: Bitter
• Schriftgröße des Textes: 92px
• Textfarbe: #000000
• Textzeilenhöhe: 1em
• Textausrichtung: Links

Öffnen Sie die Unterkategorie Rahmen und verwenden Sie den folgenden Rahmen:

• Rand verwenden: Ja
• Randfarbe: #000000
• Rahmenbreite: 3px
• Rahmenstil: Solid

Verwenden Sie außerdem eine Breite von '77 %' und eine linke Modulausrichtung.

Schließlich fügen Sie '15px' zum oberen, rechten, unteren und linken Abstand des Textmoduls hinzu.

Drittes Textmodul

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul hinzu. Dieser wird die Beschreibung darstellen. Gehen Sie zur Registerkarte Design und verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Lato
• Schriftgröße des Textes: 16px
• Textfarbe: #000000
• Textzeilenhöhe: 1em
• Textausrichtung: Links

Öffnen Sie die Unterkategorie Dimensionierung, verwenden Sie '70%' für die Breite und wählen Sie die linke Modulausrichtung.

Schließlich fügen Sie einen oberen Rand von '20px' hinzu.

Fünftes Textmodul

Das fünfte Textmodul dient als minimalistischer Button. Verwenden Sie innerhalb des Inhalts-Tabs das '→'-Symbol + den Text und fügen Sie einen Link dahinter ein.

Wechseln Sie dann zur Registerkarte Entwurf. Verwenden Sie die folgenden Einstellungen für die Unterkategorie Text:

• Textschriftart: Bitter
• Schriftgröße des Textes: 23px
• Textfarbe: #000000
• Textzeilenhöhe: 1em
• Textausrichtung: Links

Scrollen Sie auf derselben Registerkarte nach unten, bis Sie auf die Unterkategorie Größenanpassung stoßen. Verwenden Sie innerhalb dieser Unterkategorie eine Breite von '49%' und eine rechte Modulausrichtung.

Fügen Sie zuletzt einen oberen Rand von '80px' hinzu.

Sechstes Textmodul

Das sechste und letzte Modul, das wir benötigen, ist fast das gleiche wie das vorherige. Verwenden Sie den '→' + Text und fügen Sie einen Link dahinter ein.

Die Einstellungen für die Unterkategorie Text sind die folgenden:

• Textschriftart: Bitter
• Schriftgröße des Textes: 23px
• Textfarbe: #e02b20
• Textzeilenhöhe: 1em
• Textausrichtung: Links

Ändern Sie die Breite auf '39%' und verwenden Sie auch die richtige Modulausrichtung.

Zweite Reihe

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und fügen Sie 'rgba(255,255,255,0.14)' als Hintergrundfarbe hinzu.

Hintergrundbild

Fügen Sie eines der Bilder hinzu, die Sie im Photoshop-Teil dieses Beitrags erstellt haben, und verwenden Sie 'Farbton' als Hintergrundbildmischung.

Spaltenstruktur

Die zweite Zeile, die Sie dem Standardabschnitt hinzufügen müssen, ist genau das Gegenteil der vorherigen.

Module klonen

Die Module, die wir in der vorherigen Zeile verwendet haben, sind die gleichen, die wir für diese Zeile benötigen, also fahren Sie fort, klonen Sie sie und platzieren Sie sie in der ersten Spalte statt in der zweiten. Im nächsten Teil dieses Beitrags müssen wir einige Änderungen an der Ausrichtung vornehmen.

Erste Textmodul-Änderungen

Öffnen Sie das erste Textmodul und fügen Sie einen oberen Rand von '20px' hinzu.

Modifikationen des Teilermoduls

Öffnen Sie dann das Trennmodul und ändern Sie die Modulausrichtung in der Unterkategorie Dimensionierung nach rechts.

Änderungen des zweiten Textmoduls

Setzen Sie die Textausrichtung des zweiten Textmoduls auf rechts.

Und wählen Sie auch in der Unterkategorie Dimensionierung eine richtige Modulausrichtung.

Änderungen des dritten Textmoduls

Das dritte Textmodul benötigt auch eine richtige Textausrichtung.

Und auch eine richtige Modulausrichtung.

Fünfte Textmodul-Änderungen

Das einzige, was Sie für das fünfte Textmodul tun müssen, ist die Breite in '82%' zu ändern.

Sechste Textmodul-Änderungen

Gleiches gilt für das sechste Textmodul, aber stattdessen '87%' verwenden.

Abschnitt für Tablet und Telefon ausblenden

Sobald Sie die beiden Zeilen abgeschlossen haben, können Sie den gesamten Abschnitt auf dem Telefon und Tablet deaktivieren.

Tablet- und Telefonkatalog (neuer Abschnitt)

Damit alles auch auf Tablet und Telefon gut aussieht, werden wir einen neuen Standardbereich erstellen.

Abschnittseinstellungen

Hintergrundfarbe

Fügen Sie '#FFFFFF' als Hintergrundfarbe dieses Abschnitts hinzu.

Benutzerdefinierte Polsterung

Wechseln Sie zur Registerkarte Design und fügen Sie eine obere Auffüllung von '15px' hinzu.

Erste Reihe

Spaltenstruktur

Fügen Sie dann dem Abschnitt eine zweispaltige Zeile hinzu.

Größe

Gehen Sie zur Unterkategorie Größenanpassung dieser Zeile und nehmen Sie die folgenden Änderungen vor:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Bildmodul

Anstatt ein Hintergrundbild zu verwenden, verwenden wir stattdessen ein Bildmodul. Auf diese Weise stellen wir sicher, dass sich Text und Bild nicht überlappen. Fahren Sie fort und fügen Sie der ersten Spalte der Zeile ein Bildmodul hinzu und laden Sie ein Bild hoch.

Module der ersten Reihe in der Desktop-Version klonen

Klonen Sie dann alle Module, die Sie in der ersten Zeile der Desktop-Version verwendet haben, und platzieren Sie sie in der zweiten Spalte.

Schriftgröße des zweiten Textmoduls ändern

Es gibt nur eine Sache, die geändert werden muss; die Schriftgröße des zweiten Textbausteins. Ändern Sie es in 65px.

Zweite Reihe

Spaltenstruktur

Fahren Sie dann fort und fügen Sie dem Abschnitt eine weitere zweispaltige Zeile hinzu.

Größe

Diese Zeile benötigt auch eine geänderte Unterkategorie für die Größenanpassung:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Bildmodul

Fügen Sie das Bildmodul ebenfalls in die erste Spalte ein und laden Sie ein Bild hoch.

Klonen von Modulen der zweiten Reihe in der Desktop-Version

Fahren Sie dann fort und klonen Sie die Module, die sich in der zweiten Reihe der Desktop-Version befinden. Nachdem Sie sie geklont haben, platzieren Sie sie in der zweiten Spalte dieser Zeile.

Schriftgröße des zweiten Textmoduls ändern

Die Textgröße des zweiten Textmoduls muss ebenfalls geändert werden. Fahren Sie fort und geben Sie ihm eine Schriftgröße von '65px'.

Abschnitt für Desktop ausblenden

Sobald Sie mit beiden Zeilen fertig sind, können Sie den gesamten Abschnitt auf dem Desktop deaktivieren.

Ergebnis

Et voila, nachdem Sie alle Schritte in diesem Beitrag befolgt haben, sollten Sie auf dem Desktop das folgende Ergebnis erzielen:

Und folgendes auf Telefon und Tablet:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie einen schönen scrollenden Modekatalog erstellen können. Damit unser Design funktioniert, haben wir Ihnen zuerst gezeigt, wie Sie mit Photoshop eine transparente Form in Ihrem Bild erstellen. Anschließend haben wir diese Bilder in unserem Divi-Tutorial verwendet, um das Design zu erstellen. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von Rvector / shutterstock.com