Erstellen Sie mit Divi . atemberaubende benutzerdefinierte Beitragstyp-Vorlagen für Events

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 Divi mithilfe des kostenlosen Meetup-Layout-Pakets beeindruckende benutzerdefinierte Vorlagen für Veranstaltungsbeiträge erstellen. Dieses Anwendungsfall-Tutorial wird durch die Divi Builder Custom Post Type Support-Funktion ermöglicht, eine der jüngsten Aktualisierungen von Divi. Wir werden eine Vorlage erstellen, die dem Meetup-Layout-Paket entspricht. Nachdem Sie diese Vorlage erstellt haben, können Sie sie für alle Ereignisse, die Sie auf Ihrer Website teilen, wiederverwenden.

Lasst uns anfangen!

Vorschau

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

Installieren Sie das Veranstaltungskalender-Plugin

Gehen Sie zu Plugins und fügen Sie ein neues hinzu

Um unserer Website benutzerdefinierte Beitragstypen für Veranstaltungen hinzuzufügen, verwenden wir das Plugin The Events Calendar. Dies ist ein kostenloses Plugin, das Sie finden können, indem Sie zu Ihrem WordPress-Dashboard> Plugins> Neu hinzufügen> Suche nach dem Ereigniskalender-Plugin gehen .

Plugin aktivieren

Stellen Sie nach der Installation des Plugins sicher, dass Sie es sofort aktivieren, damit Sie es verwenden können.

Theme-Anpasser-Einstellungen ändern

Typografie ändern

Bevor wir eine Veranstaltung erstellen, beginnen wir damit, die Grundlagen unserer Website richtig zu machen. Öffnen Sie Ihren Theme Customizer, indem Sie zu Ihrem WordPress-Dashboard > Erscheinungsbild > Anpassen gehen . Navigieren Sie zur Typografie Ihrer Website, indem Sie als nächstes auf Allgemeine Einstellungen > Typografie gehen . Sobald Sie dort sind, wenden Sie die folgenden Einstellungen an:

• Körpertextgröße: 16
• Körperlinienhöhe: 1,9
• Header-Schriftart: Roboto

Die Einstellungen für den Veranstaltungskalender

Das Eventkalender-Plugin hat auch einige eigene Einstellungen im Theme Customizer. Gehen Sie zurück zum Hauptmenü Ihres Theme Customizers > The Event Calendar > General Theme > Und verwenden Sie die folgenden Farben:

• Akzentfarbe: #06c8ff
• Empfohlene Highlight-Farbe: #06c8ff

Gehen Sie zurück zu den Einstellungen von Der Veranstaltungskalender > Allgemeines Thema und verwenden Sie dieselbe '#06c8ff'-Farbe für alle Optionen, die Sie dort finden können.

Ein neues Ereignis hinzufügen

Neues Ereignis hinzufügen

Wir sind jetzt bereit, eine neue Veranstaltung zu erstellen. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Events > Add New . Nachdem Sie ein neues Ereignis hinzugefügt haben, vergewissern Sie sich, dass Sie ihm auch einen Titel geben.

Ereignisdetails hinzufügen

Fahren Sie fort, indem Sie Ihre Veranstaltungsdetails eingeben. Das beinhaltet:

• Zeit Datum
• Standort
• Veranstalter
• Event-Website
• Veranstaltungskosten

Ausgewähltes Bild hinzufügen

Fügen Sie Ihrem Event auch ein vorgestelltes Bild hinzu. Später in diesem Beitrag werden wir dies aus dem Frontend entfernen, aber wir benötigen es weiterhin für das Teilen in sozialen Netzwerken.

Divi-Seiteneinstellungen ändern

In der rechten Ecke Ihres Events sehen Sie die Divi-Seiteneinstellungen. Entfernen Sie dort die Seitenleiste, indem Sie für das Seitenlayout "Keine Seitenleiste" auswählen.

Veranstaltung veröffentlichen

Jetzt können wir mit der Arbeit am Frontend beginnen. Mach weiter und veröffentliche deine Veranstaltung.

Dies ist das Standardseitendesign, ohne den Visual Builder aktiviert zu haben:

Meetup-Landingpage öffnen & Designelemente speichern

Suchen und speichern Sie eine Zeile in der Divi-Bibliothek

Effizientes Arbeiten ist wichtiger als hart zu arbeiten. Aus diesem Grund werden wir uns einige Zeit und Mühe sparen, indem wir Elemente des Meetup-Layout-Pakets wiederverwenden. Öffnen Sie zunächst die Landing Page mit dem Visual Builder von Divi. Suchen Sie dann die folgende Zeile auf Ihrer Seite und speichern Sie sie in Ihrer Divi-Bibliothek:

Abschnitt in der Divi-Bibliothek suchen und speichern

Wir benötigen auch den folgenden Abschnitt, also fahren Sie fort und speichern Sie auch diesen:

Beginnen Sie mit der Erstellung einer benutzerdefinierten Ereignistypvorlage

Fügen Sie benutzerdefinierte CSS-Codezeilen hinzu, die dem Meetup-Layout-Paket entsprechen

Wir können den Visual Builder für Ereignisseiten verwenden, aber leider nicht überall. Um sicherzustellen, dass alles mit dem Meetup Layout Pack übereinstimmt, werden wir im Voraus ein paar CSS-Codezeilen hinzufügen:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Wechseln Sie zu Visual Builder

Wir können jetzt auf die Verwendung des Visual Builder für unser Event umsteigen!

Einen neuen Abschnitt hinzufügen

Hintergrundbild

Sie werden sehen, dass auf der Seite bereits ein Abschnitt vorhanden ist. Das ist die Stelle auf der Seite, die wir ändern können. Öffnen Sie zunächst die Abschnittseinstellungen und fügen Sie das Hintergrundbild " bg-4.png " hinzu. Du findest dieses Bild in deiner Medienbibliothek, wenn du das Meetup-Layout-Paket bereits auf deine Website hochgeladen hast. Verwenden Sie zusammen mit dem Hintergrundbild die folgenden Einstellungen:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Unten rechts

Abstand

Öffnen Sie als nächstes die Abstandseinstellungen Ihres Abschnitts und fügen Sie am oberen Rand '100px' hinzu.

Grenze

Wir erstellen auch diese Art von Zeitachseneffekt für unsere Vorlage. Gehen Sie zu Ihren Randeinstellungen und fügen Sie den folgenden linken Rand hinzu:

• Linker Randbreite: 7px
• Farbe des linken Rands: #8301e9

Eine neue Zeile hinzufügen

Spaltenstruktur

Nachdem wir die Abschnittseinstellungen geändert haben, können wir mit dem Hinzufügen unserer Zeilen beginnen. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Einstellungen Ihrer Zeile und aktivieren Sie in den Größeneinstellungen die Option „Make This Row Fulliwdth“. Dies werden wir für jede der Zeilen in diesem Layout tun.

Textmodul zu Zeile hinzufügen

Größe

Fügen Sie als Nächstes ein Textmodul mit einer Beschreibung Ihres Ereignisses hinzu, gehen Sie zu den Größeneinstellungen und verwenden Sie die folgende Breite:

• Desktop: 47 %
• Tablet & Telefon: 100%

Gespeicherte Zeile importieren

Direkt unter der Zeile, die Sie hinzugefügt haben, importieren Sie die Zeile, die Sie in Ihrer Divi-Bibliothek gespeichert haben.

Größe

Wir müssen einige Dinge an dieser Zeile ändern, beginnend mit den Größeneinstellungen. Aktivieren Sie die Option 'Diese Zeile in voller Breite erstellen'.

Entfernen Sie das Textkörpermodul und das Schaltflächenmodul

Entfernen Sie als nächstes den Absatz des Textmoduls und des Schaltflächenmoduls in der ersten Spalte.

Textmodul klonen und Größe entfernen

Machen Sie weiter und klonen Sie das Textmodul in Ihre erste Zeile und platzieren Sie es in der ersten Spalte Ihrer neuen Zeile. Öffnen Sie als nächstes die Größeneinstellungen und entfernen Sie die benutzerdefinierte Breite für den Desktop.

Gespeicherten Abschnitt importieren

Wir sind fertig mit dem Ändern des ersten Abschnitts! Fahren Sie fort und importieren Sie den Abschnitt, den Sie als nächstes gespeichert haben.

Rahmen hinzufügen

Wir fügen diesem Abschnitt auch einen linken Rand hinzu:

• Linker Randbreite: 7px
• Farbe des linken Rands: #06c8ff

Ändern Sie die Größe jeder Zeile

Der gerade importierte Abschnitt enthält einige Zeilen. Aktivieren Sie die Option "Diese Zeile in voller Breite erstellen" für jede dieser Zeilen.

Tastenausrichtung ändern

Ändern Sie zuletzt auch die Tastenausrichtung auf links.

Vorlage in der Divi-Bibliothek speichern

Zur Bibliothek hinzufügen

Die Layoutvorlage ist fertig! Sie können es jetzt in Ihrer Divi-Bibliothek speichern und auch für andere Ereignisse wiederverwenden.

Vorschau

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

Abschließende Gedanken

In diesem Use-Case-Blog-Post haben wir Ihnen gezeigt, wie Sie beeindruckende benutzerdefinierte Event-Post-Typ-Vorlagen erstellen. Die von uns erstellte Vorlage entspricht dem Stil des Meetup-Layout-Pakets. Nachdem wir diese Vorlage erstellt haben, haben wir sie auch in der Divi-Bibliothek gespeichert, damit wir sie auch für andere Ereignisse wiederverwenden können. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!