So erstellen Sie eine Spielstandsanzeige mit Divis Soccer Club Layout Pack

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben. Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divis Soccer Club Layout Pack eine coole Spielstandsanzeige erstellen. Wir werden diese neueste Spielstandsanzeige nur mit den integrierten Optionen von Divi erstellen, also kommen wir dazu!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Laden Sie das Layout-Paket des Fußballklub-Layout-Pakets hoch

Um dieses Tutorial zu erstellen, verwenden wir die Landingpage des Soccer Club Layout Packs, also fahren Sie fort und fügen Sie eine neue Seite mit diesem Layout hinzu.

Neuen Abschnitt hinzufügen

Fügen Sie dann gleich hier einen neuen Abschnitt hinzu:

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und fügen Sie als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f4f4f4

Abstand

Spielen Sie auch mit den Abstandswerten herum.

• Obere Polsterung: 55px
• Untere Polsterung: 140px

Zeile klonen und im Abschnitt platzieren

Zeile suchen und Klon erstellen

Um Zeit zu sparen, werden wir im nächsten Abschnitt die Titelzeile klonen.

In neuer Sektion platzieren

Text ändern

Ändern Sie die Kopie des Textmoduls in der Zeile, damit sie dem neuen Abschnitt entspricht.

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie direkt unter der vorherigen Zeile fort und fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Spalte 1 Hintergrundfarbe

Fügen Sie auch eine Hintergrundfarbe für Spalte 1 hinzu.

• Spalte 1 Hintergrundfarbe: #fcfcfc

Spalte 3 Hintergrundfarbe

Wiederholen Sie den gleichen Schritt für Spalte 3.

• Spalte 3 Hintergrundfarbe: #fcfcfc

Größe

Ändern Sie auch die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhe ausgleichen: Ja

Abstand

Entfernen Sie als nächstes alle Standard-Paddings.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Grenze

Fügen Sie der Zeile einen oberen und unteren Rand hinzu, um dem Layoutpaket zu entsprechen.

• Breite des unteren Rands: 8px
• Farbe des unteren Rands: #00aaff

Box Schatten

Fügen Sie schließlich einen subtilen Kastenschatten hinzu, um der Seite Tiefe zu verleihen.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -20px
• Schattenfarbe: rgba(0,0,0,0.56)

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Beginnen Sie mit einem Textmodul in Spalte 1 und fügen Sie einige Inhalte hinzu.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe.

• Hintergrundfarbe: #E8E8E8

Texteinstellungen

Fahren Sie fort, indem Sie mit den Texteinstellungen herumspielen.

• Textschriftart: Squada One
• Textschriftart: Großbuchstaben
• Textfarbe: #333333
• Textgröße: 20px
• Textausrichtung: Mitte

Abstand

Fügen Sie dann einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 10px
• Rechte Polsterung: 10px

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie ein neues Textmodul direkt unter dem vorherigen Textmodul in Spalte 1 hinzu. Fügen Sie anschließend Inhalt zum Inhaltsfeld hinzu.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textschriftart: Open Sans
• Schriftstärke des Textes: Fett
• Textfarbe: #333333
• Textgröße: 18px
• Textausrichtung: Mitte

Abstand

Spielen Sie auch mit den Abstandswerten herum.

• Obere Polsterung: 20px
• Untere Polsterung: 20px

Bildmodul zu Spalte 1 hinzufügen

Vereinslogo hochladen

Das letzte in Spalte 1 benötigte Modul ist ein Image-Modul, das das Vereinslogo einer der teilnehmenden Mannschaften enthält.

Größe

Nachdem Sie das Bild des Vereinslogos hochgeladen haben, gehen Sie zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

• Breite: 45 % (Desktop), 16 % (Tablet), 28 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Fahren Sie fort, indem Sie benutzerdefinierte Randwerte in den Abstandseinstellungen hinzufügen.

• Oberer Rand: 20px
• Unterer Rand: 50px

Module klonen und Duplikate in Spalte 3 platzieren

Wenn Sie mit allen drei Modulen in Spalte 1 fertig sind, können Sie sie klonen und die Duplikate in die dritte Spalte einfügen.

Inhalt ändern

Natürlich müssen Sie den Inhalt jedes geklonten Moduls ändern.

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte platzieren wir das Datum und das Endergebnis. Beginnen Sie damit, ein Textmodul mit einem Datum hinzuzufügen.

Hintergrundfarbe

Fügen Sie als nächstes eine Hintergrundfarbe hinzu, die dem Layoutpaket entspricht.

• Hintergrundfarbe: #00aaff

Texteinstellungen

Ändern Sie auch die Texteinstellungen.

• Textschriftart: Squada One
• Textschriftart: Großbuchstaben
• Textfarbe: #FFFFFF
• Textgröße: 42px
• Textausrichtung: Mitte

Abstand

Gehen Sie dann zu den Abstandseinstellungen und geben Sie dem Modul etwas mehr Polsterung.

• Obere Polsterung: 30px
• Untere Polsterung: 30px

Sichtweite

Deaktivieren Sie zuletzt das Modul auf Telefon und Tablet.

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das zweite Textmodul in Spalte 2 muss den Spielstand enthalten.

Texteinstellungen

Ändern Sie nach dem Hinzufügen des Inhalts die Texteinstellungen.

• Textschriftart: Squada One
• Textfarbe: #333333
• Textgröße: 150px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Abstand

Fahren Sie fort, indem Sie die Abstandswerte ändern.

• Oberer Rand: 40 Pixel (Desktop), 20 Pixel (Tablet und Telefon)
• Unterer Rand: 20px (Tablet & Telefon)
• Linke Polsterung: 10px
• Rechte Polsterung: 10px

Sichtweite

Blenden Sie dieses Modul auch auf Telefon und Tablet aus. Im nächsten Teil werden wir die Alternative für kleinere Bildschirmgrößen erstellen.

Beide Module klonen und in Spalte 1 platzieren

Klonen Sie beide Module, die Sie in Spalte 2 finden, und platzieren Sie die Duplikate in der ersten Spalte über den anderen Modulen.

Sichtbarkeit ändern

Wir verwenden diese beiden Module, um auf Tablets und Telefonen ein besseres Ergebnis zu erzielen. Um sicherzustellen, dass diese Module nur auf kleineren Bildschirmgrößen angezeigt werden, deaktivieren Sie sie auf dem Desktop.

Zeile 3 hinzufügen

Spaltenstruktur

In der nächsten Zeile werden die verschiedenen Ziele auf dem Desktop angezeigt. Verwenden Sie die folgende Spaltenstruktur:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Spalte 2 Hintergrundfarbe

Ändern Sie auch die Hintergrundfarbe von Spalte 2.

• Spalte 2 Hintergrundfarbe: #f7f7f7

Größe

Entfernen Sie als nächstes alle Leerzeichen zwischen den Spalten in den Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 0
• Spaltenhöhe ausgleichen: Ja

Abstand

Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 untere Polsterung: 100px
• Spalte 1 rechte Polsterung: 10px
• Spalte 3 linker Abstand: 10px

Grenze

Fügen Sie dann der Reihe einen subtilen unteren Rand hinzu.

• Breite des unteren Rands: 8px
• Farbe des unteren Rands: #00aaff

Box Schatten

Um der Seite Tiefe zu verleihen, fügen Sie einen Zeilenrahmenschatten hinzu.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -20px
• Schattenfarbe: rgba(0,0,0,0.56)

Sichtweite

Wie bereits erwähnt, verwenden wir diese Zeile nur zum Anzeigen von Zielen auf dem Desktop. Deaktivieren Sie die Zeile daher auf Telefon und Tablet. Später im Beitrag erstellen wir eine Tablet- und Telefon-Alternative.

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie der ersten Spalte mit den ersten Zieldetails ein neues Textmodul hinzu.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textschriftart: Squada One
• Textschriftart: Großbuchstaben
• Textfarbe: #333333
• Textgröße: 27px
• Textausrichtung: Rechts

Abstand

Spielen Sie auch mit den Abstandswerten herum.

• Oberer Rand: 100px
• Untere Polsterung: 20px

Grenze

Fahren Sie fort, indem Sie einen subtilen unteren Rand hinzufügen.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #333333

Textmodul zweimal klonen

Abstand von Duplikaten ändern

Klonen Sie das soeben erstellte Textmodul zweimal und ändern Sie die Abstandswerte beider Duplikate.

• Oberer Rand: 200px
• Untere Polsterung: 20px

Klonen Sie Textmodul Nr. 1 und platzieren Sie Duplikat in Spalte 3

Texteinstellungen ändern

Klonen Sie den ersten Textbaustein in Spalte 1 erneut und platzieren Sie das Duplikat in Spalte 3. Fahren Sie fort, indem Sie die Textausrichtung ändern.

• Textausrichtung: Links

Abstand ändern

Der obere Rand muss ebenfalls erhöht werden.

• Oberer Rand: 200px

Textmodul in Spalte 3 klonen

Sie können diesen Textbaustein nun wieder klonen.

Zeile 4 hinzufügen

Spaltenstruktur

Zeit, die letzte Zeile hinzuzufügen! Wählen Sie die folgende Spaltenstruktur:

Hintergrundfarbe

Ändern Sie die Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #FFFFFF

Größe

Entfernen Sie als nächstes den gesamten Abstand zwischen den Spalten.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Fügen Sie etwas zusätzliche obere und untere Polsterung hinzu.

• Obere Polsterung: 100px
• Untere Polsterung: 100px

Grenze

Wir brauchen auch für diese Zeile einen subtilen unteren Rand.

• Breite des unteren Rands: 8px
• Farbe des unteren Rands: #00aaff

Box Schatten

Als nächstes fügen Sie der Zeile einen Boxschatten hinzu.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -20px
• Schattenfarbe: rgba(0,0,0,0.56)

Sichtweite

Schließlich blenden Sie die Zeile auf dem Desktop aus.

Textmodul #1 hinzufügen

Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein neues Textmodul hinzu und fügen Sie die Zieldetails hinzu.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Textschriftart: Squada One
• Textschriftart: Großbuchstaben
• Textgröße: 27px
• Textausrichtung: Rechts

Abstand

Verwenden Sie als nächstes benutzerdefinierte Abstandswerte.

• Rechter Rand: 150px
• Untere Polsterung: 20px

Grenze

Wir fügen auch einen subtilen unteren Rand hinzu.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #333333

Textmodul klonen

Texteinstellungen ändern

Klonen Sie das erstellte Textmodul und ändern Sie die Textausrichtung des Duplikats.

• Textausrichtung: Links

Abstand

Ändern Sie auch die Abstandswerte.

• Höchste Marge: 200px
• Linker Rand: 150px

Klonen Sie beide Textmodule so oft wie nötig

Sie können diese Module nun beliebig oft klonen, um alle unterschiedlichen Ziele anzuzeigen.

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Soccer Club Layout Pack eine Spielstandsanzeige erstellen. Dies ist eine großartige Möglichkeit, Ihrer Website mehr Anreize zu verleihen und mit Ihrem Publikum in Kontakt zu treten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!