Blog erstellen
Mit dem Divi-Theme kann man selbstverständlich auch einen ganz normalen Blog betreiben. Grundsätzlich ist die Einrichtung eines Blogs denkbar einfach. Denn im Prinzip muss man gar nichts tun. Das Divi kann den ganz normalen Blog von WordPress nutzen. Wer jedoch einen etwas anspruchsvolleren Blog haben möchte, kann diesen komplett selbst gestalten. Wie dies geht, zeige ich in diesem Beitrag.
Beitrag & Kategorie anlegen
Im ersten Schritt müssen wir einen neuen Beitrag anlegen. Solltet ihr bereits einen Blog mit verschiedenen Beiträgen haben, könnte diesen Punkt natürlich überspringen.
Auch hier gilt, dass ihr einen Standardbeitrag von WordPress nutzen könnt. Alternativ könnt ihr auch bei dem einzelnen Beitrag den Pagebuilder von Divi nutzen, wie ich dies in diesem Beispiel mache.
Wichtig ist an dieser Stelle, dass ihr eine Kategorie festlegt, welcher dieser Beitrag zugeordnet werden soll. Später werden wir nämlich auswählen müssen, welche Kategorien unser Blog enthalten soll.
Den Inhalt des Blogbeitrags könnt ihr beliebig gestalten. Hier nutze ich einfach eine Standardsektion mit einer einzelnen Zeile und dem Modul Text. Ich empfehle, auch ein Beitragsbild festzulegen. Dieses wird später als Vorschau im Block angezeigt.
Ganz wichtig: Bitte das Veröffentlichen des Beitrages nicht vergessen! Andernfalls wird der Block später anzeigen, dass keine Inhalte zur Verfügung stehen.
Seite für den Blog anlegen
Um unseren Blog zu erstellen, nutzen wir eine ganz normale Seite. Wir erstellen also eine Seite und geben ihr einen beliebigen Namen. Wir können die Standardeinstellungen der Seite komplett übernehmen. Wir müssen aber in diesem Fall den Pagebuilder von Divi benutzen.
Sobald wir den Pagebuilder aktivieren, werden wir nach der gewünschten Vorlage für die Aufteilung der Seite gefragt. Ich möchte einen Block mit einer Seitenleiste erstellen. Dazu wähle ich die Aufteilung zwei Drittel für meinen Textinhalt und ein Drittel für die Seitenleiste.
In der ersten Spalte füge ich nun das Modul Blog hinzu. Hier wähle ich die von mir gewünschten Kategorien aus, die in meinem Blog angezeigt werden sollen.
Darüber hinaus kann ich nun verschiedenste Einstellungen vornehmen, welche Elemente auf meiner Seite ausgegeben werden sollen oder nicht. Ich kann beispielsweise den vollen Text des Beitrags anzeigen oder nur einen Auszug. Ich kann das Beitragsbild anzeigen lassen das Datum, den Autor, die Anzahl der Kommentare und vieles mehr. Über die Buttons kann man einfach die gewünschten Funktionen aktivieren oder deaktivieren.
Schauen wir uns den Blog jetzt einmal an. Bisher haben wir nur einen einzelnen Blogartikel. Das Beitragsbild steht über dem Titel, samt Metaangaben und Textausschnitt. Als Textauschnitt werden übrigens die ersten Zeichen des Textes genommen. Sofern du beim Beitrag einen Auszug festlegst (was ich aus SEO-Sicht immer empfehle), wird automatisch dieser Text als Auszug genommen.
Blog anpassen
Auf der weißen Seite sieht unser Blog noch etwas verloren aus. Im nächsten Schritt füge ich daher der Sektion einen Hintergrund hinzu. Dazu öffne ich das Menü der Sektion.
Und unter dem Punkt Inhalt finde ich den Unterpunkt Hintergrund. Hier kann ich nun eine beliebige Farbe, einen Verlauf oder ein Bild auswählen. In diesem Fall nehme ich einen leichten Braunton als Hintergrund.
Schauen wir uns das Ergebnis an.
Dies sieht schon viel besser aus. Allerdings steht jetzt der Titel und der Text des Beitrags etwas verloren unter dem Vorschaubild. Schöner wäre es, wenn alle Elemente des Beitrages zusammengefasst sind. Dazu lege ich einen Hintergrund für den Blog fest.
Hintergrund für den Blog
Ich öffne also das Menü des Blog und wähle dann eine Hintergrundfarbe.
Nun haben die Blogbeiträge eine andere Hintergrundfarbe als meine Seite, wodurch sich der Blog mehr von der Seite abhebt.
Was jetzt noch stört, ist, dass die Bilder, der Titel und die Vorschautexte direkt am Rand kleben. Um dies zu ändern, öffnen wir noch einmal das Blogmodul und gehen nun in die Kategorie Entwurf und dort zu dem Bereich Abstände. Bei den Abständen geben wir nun für oben, unten, links und rechts einen gewünschten Abstand ein. Ich wähle hier 20 Pixel. Im Ergebnis steht nun der Text sauber in meinem Blogbereich.
Zwischenergebnis:
Seitenleiste
Was jetzt noch fehlt ist eine Seitenleiste. Dazu wählen wir für die letzte Spalte das Modul Seitenleiste.
In dem Menü der Seitenleiste müssen wir zunächst die gewünschte Seitenleiste auswählen. Hier hast du vollen Zugriff auf alle Seitenleisten, die du unter WordPress in dem Bereich Design/Widgets angelegt hast.
Tipp: Du kannst übrigens verschiedene Seiten leisten Anliegen und dann in den verschiedenen Bereichen deines Blocks entsprechend ausgeben. Natürlich kannst du auch hier das Design der Seitenleiste weiter anpassen. So kannst du einen Hintergrund festlegen. Weitere Funktionen zur Anpassung des Designs findest du auch hier unter dem Menüpunkt Entwurf.
Da wir die Seitenleiste rechts eingefügt haben, ist der Trenner am rechten Bildrand (die kleine Linie am äußeren Rand) überflüssig. In meinem Beispiel entferne ich diese einfach. Dazu öffne ich erneut das Modul Blog und gehe zu dem Punkt Entwurf > Layout. Hier kann ich den Trenner über die Einstellung Links/Rechts versetzen oder einfach deaktivieren. Hier setze ich den Punkt „Show Border Seperator“ auf „Nein“.
Zwischenergebnis
Damit ist unser Blog fertig. Natürlich könnt ihr alle Layoutfunktionen individuelle anpassen, ganz gleich ob Schriften, Farben, Animationen, Ränder, Schatten und vieles mehr.
Damit ist unser Blog bereits fertig.
Masonry-Style
Sehr beliebt sind auch Blogs in einer Gitterdarstellung. Auch dies ist mit dem Pagebuilder sehr einfach umzusetzen. Ich wähle dazu in diesem Fall nur eine Spalte aus, um mehr Platz für meine Darstellung zu haben.
Im nächsten Schritt öffne ich das Modul Block. Hier gehe ich zu dem unter. Entwurf und wähle als Layout Gitter aus. Natürlich kann ich auch hier alle Designelemente wieder anpassen. Die Hintergrundfarbe der Beiträge, die Textfarben und Größen und so weiter.
Tipp: für meinen Blog auf Designers Inn habe ich unter dem Menüpunkt Erweitert/Advanced noch die Abstände unter dem Text und unter den Metaangaben verringert.
Dies geht mit dem Befehl: margin-bottom: 5px
Der fertige Block in der Gitterdarstellung sieht dann in etwa so aus:
Hintergrund
Jedes Element des Themes kann mit einem eigenen Hintergrund versehen werden. Die Einstellung findet ihr sowohl bei Sektionen, Zeilen als auch den Modulen unter INHALT > HINTERGRUND.
Hinweis: Die Möglichkeiten, jedes Element mit einem Hintergrund zu versehen, diese dann auch noch durchscheinen zu lassen oder mit Effekten versehen zu können, ist äußerst praktisch, kann aber auch zu Irritationen führen, wenn eine Farbeinstellung augenscheinlich nicht übernommen wird. Der Grund liegt meist darin, dass ein anderes Element mit einem Hintergrund "über" dem angepassten Element liegt.
Zur Verdeutlichung: Bei dem Theme liegen 4 Ebenen übereinander, die jeweils individuell angepasst werden können.
Ebene 1: Seitenhintergrund (Einstellung über Divi > Designmodifikator/Theme Customizer > Allgemeine Einstellungen > Hintergrund)
Ebene 2: Sektionshintergrund (Einstellung über Sektion > Inhalt > Hintergrund)
Ebene 3: Zeilenhintergrund (Einstellung über Zeile > Inhalt > Hintergrund)
Ebene 4: Modulhintergrund (Einstellung über Modul > Inhalt > Hintergrund)
Für den Hintergrund kannst du eine Farbe, einen Farbverlauf, ein Bild (auch Gif) und ein Video wählen. Klicke dazu in dem Menü Hintergrund einfach auf das Pluszeichen (wenn du das Pluszeichen siehst, ist die übrigens derzeit ausgestellt).
Die Farbe stellst du über den Picker ein oder du gibst direkt den Farbcode ein.
Wie du im Bild oben siehst, füllt der Hintergrund die komplette Sektion, Zeile oder das vollständige Modul. Dies ist in der Regel auch gewünscht. Bei manchen Modulen kann dies aber seltsam aussehen, vor allem bei Modulen mit Text. Hier klebt dann der Inhalt offensichtlich am Rand. Um dies zu beheben erhöhe unter DESIGN > ZWISCHENRAUM den "Abstand" zum inneren Rand.
Auch der Farbverlauf kann frei definiert werden. Der erste Farbwähler definiert die obere Farbe, der untere Farbwähler die untere Farbe.
Über die Funktion "Verlaufstyp" kannst du zudem den Verlauf feinabstimmen: Linear oder radial. Die Verlaufsrichtung ist in Grad (deg) angegeben. Zudem kannst du die Start- und Endposition festlagen, also ab wann der Vollton zum Verlauf wird. Zuletzt kannst du den Verlauf auch über ein Bild legen. Nutze dazu die Positionierung "Above Background".
Im Feld Bild kannst du ein Bild als Hintergrund wählen. In der Standardeinstellung wird dies "ausfüllend" positioniert, d.h. das ganze Modul wird mit dem Bild gefüllt und was zu viel ist, wird abgeschnitten.
Natürlich kann die genaue Positionierung angepasst werden. Zunächst kannst du den Parallax-Effekt für das Hintergrundbild nutzen. Bei dem "echten Parallax" wird das Bild vergrößert, um den Effekt erzielen zu können. Bei dem "CSS-Parallax" wird das Bild auf Seitenbreite gesetzt und halt der Raum ausgenutzt, der ober- und unterhalb zur Verfügung steht. Hier lohnt es sich die verschiedenen Modi einmal auszutesten, was für die konkrete Anwendung am besten geeignet ist.
Die Hintergrundbild-Größe kann als Abdeckung (der gesamte Hintergrund ist abgedeckt), Passen (das Bild wird komplett gezeigt, es kann dadurch aber ein leerer Rand links/rechts entstehen) und tatsächliche Größe (das Bild wird 1:1 eingefügt) gewählt werden.
Stimmt die Größe, lohnt es sich, der Position zu optimieren. In der Regel ist "Zentriert" ein guter Wert. Aber da der Bildausschnitt je nach Auflösung variiert, kann man bestimmen, wo der Anker/Fokus des Bildes liegt und entsprechend die Ausrichtung von "Oben Links" bis "Unten Rechts" vornehmen.
Über die Funktion Wiederholung kann man den klassischen Kacheleffekt nutzen. Dies eignet sich vor allem für Strukturen und Muster, da man so nur ein kleines Bild laden muss, welches dann eine endlose Fläche erben kann.
Zu guter Letzt kann ich noch über Füllung den Ebeneneffekt auswählen, sprich, wie das Bild auf die darunter liegende Ebene durchwirken soll. Wer sich mit Photoshop auskennt, wird hier viele alte Bekannt sehen. Wer nicht, kann mit diesen Effekten einfach mal ein wenig experimentieren.
Über den Punkt Video lässt sich ein Video als Hintergrund nutzen. Dies funktioniert aber nur mit Videos, die ihr bei euch selbst hochgeladen habt. Ihr könnt also keine YouTube-Url nutzen. Die Empfehlung ist, ein MP4-Video und WEBM-Video als Fallback hochzuladen, denn nicht jeder Browser unterstützt MP4.
Für eine optimale Darstellung sollte zudem die Breite und Hohe des Videos fixiert werden. Zudem kann man mit der Funktion Video Stoppen das Abspielen des Videos automatisch anhalten, wenn ein anderer Player im Vordergrund der Seite gestartet wird.
Größe einstellen
Ein Modul kann in der Größe verändert werden. Der Standardwert liegt bei 100%, sprich bei der vollen Ausnutzung der Spalte. Wir können diesen Wert aber auch beliebig ändern und das Modul frei in einer Zeile positionieren. Gehe dazu in die Ansicht DESIGN > GRÖ?E EINSTELLEN
Über den Schieberegler kann nun die Breite des Moduls verändert werden. Der Inhalt passt sich automatisch proportional an. Die Ausrichtung ist im Standard links, sodass das Modul von der rechten Seite aus schrumpft.
Sobald du die richtige Größe gefunden hast, kannst du das Modul neu positionieren (links/zentriert/rechts) 
Mit einem Klick auf das "Mobile Icon" kannst du die Positionierung für die Desktop-, Tablet- und Smartphoneansicht abstimmen. 
In der Regel Wird für Tablet und Smartphone eine 100%-Ansicht genutzt, auch wenn die Desktopansicht eine andere Einteilung nutzt.. 
Zwischenraum
Zwischen jedem Modul kann ein zusätzlicher Zwischenraum festgelegt werden. Dieser kann in Pixel (px) oder Prozent (%) eingetragen werden. Die Standardeinstellung ist Pixel. Gehe dazu innerhalb des Moduls zur Ansicht DESIGN > ZWISCHENRAUM.
Man unterscheidet zwischen zwei Zwischenräumen. Dies ist einmal die "Begrenzung" (margin) und einmal der "Abstand" (padding).
Begrenzung
Die Begrenzung legt den "äußeren Abstand" fest, also den Abstand zum nächsten Seitenlement. In diesem Beispiel erhöhe ich die "Begrenzung Unten" um 100px. Damit rutscht das untere Element (der zweite Textblock) um 100 Pixel nach unten.
Abstand
Der Abstand ist der "innere Abstand" des Inhalts zum Rand des Moduls. Wenn du dir das obige Bild anschaust, dann siehst du, dass der Text direkt am Rand des Moduls klebt. Im Bild unten habe ich 30 Pixel abstand hinzugefügt. Damit rückt der Textblock um 30 Pixel nach innen (innerer Abstand).
Hinweis: Am besten justiert man Abstände im Visuellen Builder. In meinem Beispiel unten habe ich bei dem Abstand "Oben" nichts eingetragen. Dies liegt daran, dass eine Überschrift ohnehin einen erhöhten Abstand nach oben hat. Je nach Modul und Inhalt muss man also entscheiden, wo man einen Abstand setzt.
Rand
Eine besonders schöne Funktion ist die Einstellung "Rand". Hier kann ich den Rand des jeweiligen Moduls umfangreich bearbeiten und schöne Effekte erzielen. Gehe dazu in deinem Modul zu dem Punkt DESIGN > RAND.
In diesem Beispiel habe ich ein einfaches Textmodul mit einem weißen Hintergrund (INHALT > HINTERGRUND) und 30 Pixel inneren Abstand (DESIGN > ZWISCHENRAUM > ABSTAND). Diesem Modul möchte ich jetzt einen Rand hinzufügen.
Um die Auswirkungen der Einstellungen zu sehen, müssen wir als erstes unter UMRANDUNG die Pixel der Linie erhöhen. Sobald du den Regler bewegst, siehst du auch schon den Rand um das Modul entstehen.
Über den Punkt STYLES kannst du gezielt eine einzelne Seite verändern. Hier klicke ich auf "unten" und vergrößere dann die Linienstärke.
Nun kann man die Ecken abrunden. Standardmäßig wirkt sich jeder Wert auf alle vier Ecken aus. Möchte man dies ändern, muss man auf das blaue "Linksymbol" in der Mitte der Ansicht kllciken.
Sobald man mit dem Format des Randes zufrieden ist, kann man unter "Umrandungsfarbe" die Farbe des Randes anpassen. Wie immer kann man seinen Farbcode eintragen oder die Farbe mit dem Picker frei wählen.
Zu guter letzt kann man unter "Umrandungsart" verschiedene Rahmen auswählen. Hier lohnt es sich, einfach mal die verschiedenen Modi auszutesten.
Schatten (Box Shadow)
Ob Bild, Infobox oder Slider: Schatten verleihen jedem Modul mehr Tiefe. Dank der Designoption "Schatten" (Box Shadow" kann nun jeder mit wenigen Klicks diesen tollen Effekt seiner Seite hinzufügen. Gehe dazu in das gewünschte Modul und dort zu dem Punkt DESIGN > BOX SHADOW.
Ich empfehle mit den Standardeinstellungen zu starten. Unter dem Punkt BOX SHADOW findest du die gängigen "inneren" und "äußeren" Schatten, mit denen du eigentlich sofort starten kannst. Wen etwas "mehr" möchte, kann den Schatten nach seinen Vorstellungen anpassen.
Zunächst lässt sich die horizontale Position des Schattens verschieben.
Ebenso kann man die vertikale Position des Schattens verschieben.
Mit der Einstellung "Blur" wird die Unschärfe des Schatten-Randes angepasst.
Mit dem Regler "Spread" kann man den Schatten unabhängig vom Objekt skalieren.
Sobald dir die Grundeinstellungen gefallen, kannst du auch die Farbe des Schattens beliebig anpassen. Hier kannst du einen Farbcode eintragen oder eine beliebige Farbe mit dem Picker wählen.
Zu guter letzt kann ein Schatten nicht nur nach außen abstrahlen, sondern auch als innerer Effekt genutzt werden. Unter dem Punkt POSITION legst du das Verhalten des Schattens fest.
Filter
Eine sehr mächtige Modulfunktion ist der "Filter". Hier lassen sich vor allem Bilder weitreichend manipulieren, ganz gleich ob Farbe, Sättigung, Invertierung und vieles mehr. Aber mit den Filtern kann man auch bei anderen Modulen tolle Effekte erreichen. Hier sind der Fantasie keine Grenzen gesetzt. Du findest den Filter im Modul unter DESIGN > FILTER.
Mit Farbton kann man den Farbraum des gesamten Bildes verschieben. Hier habe ich den Farbton in Richtung Blau verschoben, was man an dem Tablet gut erkennen kann.
Über Sättigung kann man die Farbe aus dem Bild ziehen (schwarzweiss) oder ...
... oder die Farbe verstärken.
Der Regler "Brightness" regelt die Helligkeit im Bild.
Und der Regler "Kontrast" verstärkt zugleich die Tiefen als auch die Höhen.
Schöne Effekte lassen sich über das invertieren der Ansicht erzielen.
Oder man fügt mit "Sepia" einen historischen Touch seinem Modul hinzu.
Gerne nutze ich auch den Regler "Opacity". Dieser legt die Deckkraft des Bildes fest. Habe ich zum Beispiel eine Hintergrundgrafik in der Sektion und lege dann ein Bild in die Sektion, kann ich in den Moduleinstellungen des Bildes die Deckkraft des Bildes herunterregeln, sodass die Grafik aus der Sektion durchscheint. Klingt kompliziert? Ist es aber nicht. Einfach mal ein wenig herumexperimentieren ...
Außerdem kann man ein Modul "unscharf" maskieren. Dies geschieht über den Regler "Blur".
Und nun kommt der Clou zum Schluss: Wie in Photoshop kann ich jedem Modul einen Blendmode zuweisen. Dieser beeinflusst, wie das Modul auf das darunter liegende Element wirkt. Auch hier empfehle ich einfach einmal eine Sektion mit einem Bild oder einem Verlauf anzulegen und dann das Modul "Bild" einzufügen. Anschließend einfach einmal die verschiedenen Modi durchklicken Hier ergeben sich tolle, kreative Effekte!
Animation
Animationen machen eine Website lebendig. Sparsam eingesetzt können Sie aus einer einfachen Website ein Erlebnis machen. Das tolle ist, dass sich in diesem Theme nahezu alles animieren lässt. Du findest alle Einstellungen in deinem Modul unter DESIGN > ANIMATION.
Zunächst empfehle ich die verschiedenen Animationen in den Grundeinstellungen einmal auszuprobieren, als da wären:
Verblassen: Das Modul blendet langsam ein.
Folie: Das Modul schiebt sich in den Sichtbereich.
Bounce: Das Modul zoomt ein, ein wenig aus und dann wieder ein.
Zoom: Das Modul zoomt ein.
Drehen: Das Modul kippt horizontal in den Sichtbereich.
Fold: Das Modul kippt vertikal in den Sichtbereich.
Roll: Das Modul dreht sich in den Sichtbereich.
Jede Animation kann zudem feinjustiert werden (nicht alle Regler stehen bei jeder Animation zur Verfügung).
Animation Repeat: Legt fest, ob die Animation einmal durchläuft oder sich wiederholt.
Animation Curve: Legt fest, mit welchem Schwung die Animation startet/endet.
Animation Direction: Legt fest, von welcher Bildschirmseite die Animation startet.
Animation Duration: Legt fest, wie schnell/langsam die Animation abläuft..
Animation Delay: Legt fest, ob die Animation mit einer Verzögerung startet.
Animation Starting Opacity: Legt fest, mit welcher Deckkraft die Animation startet.
CSS
Der letzte Punkt ERWEITERT ist vor allem für Entwickler gedacht. Hier ist es möglich, dem Element eine eigene CSS ID und CLASS zuzuweisen. Zudem können einzelne Elemente direkt per CSS umgeschrieben werden.
Sichtbarkeit
Interessant für jedermann ist der Abschnitt SICHTBARKEIT. Hier kann pro Endgerät (Telefon, Tablet, Desktop) festgelegt werden, ob das jeweilig ausgewählte Element (Sektion, Zeile, Modul) deaktiviert werden soll.
