NAS
Support-24
Synology Diskstation Support
So schnell werde ich auch zum
SYNOLOGY

EXPERTEN

Unglaublich, wie schnell und unkompliziert das Ganze über die Bühne gegangen ist. So einfach und wertvoll hätte ich mir das bestimmt nicht vorsgestellt. Ich bin vollauf begeistert und freue mich auf´s nächste Mal

1

Anleitung

hier zeige ich noch einmal Schritt für Schritt wie Ihr diese Seite nachbauen könnt. Natürlich müßt Ihr nicht gleich alle Werte und Farben für Schrift und Style übernehmen. Seid einfach mal kreativ und experimentiert selber etwas herum:

Neue Standard Sektion

Beginnen wir zuerst mit einer neuen Seite, oder öffnet einfach eine bestehende Seite und wechselt nach dem Speichern in den Visual-Builder:

Erstellen wir zum Anfang erst einmal eine Standard-Sektion und öffnen die Eigenschaften der Sektion, wo wir den Hintergrund auf Farbverlauf stellen. Ich habe dazu folgende Farbwerte verwendet:

 

  • erste Farbe:
  • zweite Farbe:
  • Verlaufstyp: Linear
  • Startposition: 160deg
  • Endposition: 53%

Divi Tutirial Verlaufstyp

Zwischenraum (Spacing)

Wechseln wir nun zum Design-Tab und öffnen die Zwischenraum Kathegorie und stellen ein paar Abstände und Puffer für den oberen und unteren Rand ein:

  • Abstand oben: 60px
  • Abstand  unten: 150px

Die erste Zeile

Als nächster Schritt steht das Einrichten der ersten Zeile an. Hier nutzen wir den Plus-Button und erstelle eine neue Zeile im einspaltigen Layout:

Divi Tutorial

Der Zwischenraum

Bevor wir nun damit Beginnen, die Module in diese Zeile hinzuzufügen, sollten wir noch schnell den Abstand bzw. Zwischenraum (Padding) einstellen

  • Benutzerdefinierter Abstand unten: 150px

 

Das erste Text-Modul

Text Einstellungen

Jetzt können wir mit Einfügen der Text-Module in der Zeile/Spalte beginnnen. Als erstes fügen wir ein einfaches Textmodul für die große Überschrift (in meinem Falle NAS) ein. Die Schriftgröße und Schriftweite sollten unterschiedlich für die verschiedenen Anzeigegeräte, wie Smartphone, iPad oder Computer, eingestellt werden.

Welche Werte für die Textgröße und Schriftweite (Letter Spacing) hier am Besten für euch passen, mü0t Ihr selbst ausprobieren, da es auf die Textlänge (bei mir NAS) ankommt, die Ihr verwendet habt. Hier stehen mal meine Werte so als Richtwert. In jedem Falle solltet Ihr die Werte für Smartphone und Tablet anpassen.

  • Text Font weight: Ultra Bold
  • Text Font Style: Uppercase
  • Text Größe (Size): 300px (Desktop), 210px (Tablet), 125px (Phone)
  • Text Farbe:
  • Zeichenabstand: -20px (Desktop), -15px (Tablet), -8px (Phone)
  • Zeilenhöhe: 1em
  • Text Shadow Blur Streng: 0.02em
  • Text Schatten Farbe: rgp(0,0,0,0,47)
  • Text Ausrichtung: Zentriert (center)

 

BILD FEHLT NOCH /WIRD NACHGEREICHT

Das letzte Text Modul

Für den zweiten Teil, bei mir der Schriftzug „Support-24“ brauchen wir ein weiteres Textmodul in dieser Zeile.

Dort müßen dann folgende Eigenschaften abgeändert werden, Ihr könnt die Werte natürlich an eure Gegebenheiten anpassen:

  • Text Font: Allura (oder was euch gefällt)
  • Text Größe: 88px (Desktop), 78px (tablet),39px(Phone)
  • Text Farbe: rgb(255,255,255,0,86)
  • Zeilenhöhe: 1em
  • Text Ausrichtung: Zentriert (center)

Zwischenraum (Spacing)

Damit das neue Text-Modul auch tatsächlich über dem ersten Schriftzug (NAS) überlappt, müssen hier die Ränder und Abstände noch angepasst werden.

Erst dann schwebt das 2.te Text-Modul über dem 1. Text-Modul, passt die Werte an euren Schriftzug einfach an, bis es da steht wo es euch gefällt. Hier sind meine Werte:

  • Zwischenraum
  • Benutzerdefinierte Begrenzung: -200px(Desktop), -150px(Tablet), -100px(Phone)

Die untere Überschrift

Das letzte Text-Modul in dieser Zeile ist die untere Überschrift – in meinem Fall der Schriftzug: SYNOLOGY DISKSTATION SUPPORT und den habe ich bei der Farbe, Weite usw. wie folgt angepasst:

Auch hier müßt Ihr die Werte selbst heraus finden, je nachdem wie lang euer Text an dieser Stelle ist. Meine Werte könnt Ihr schon mal als Anhaltspunkt nutzen:

  • Text Font Style: Uppercase
  • Text Größe: 17px (Desktop), 16px (Tablet), 14px (Phone)
  • Text Frabe: was euch gefällt
  • Zeichenabstand: 22px (Desktop), 14px (Tablet), 8px (Phone)
  • Text Zeilenhöhe 1.5em
  • Text Ausrichtung: Center

Zwischenraum /Abstand

Jetzt müßen wir nur noch den Abstand, besser gesagt die Begrenzung nach oben hin etwas anpassen, damit sich die Textzeile auch wirklich unterhab der Überschrift wiederfindet. Versucht mal die Werte um 100 -180px. Je nachdem was bei euch am Besten aussieht.

Hinzufügen der zweiten Zeile

Spaltenlayout

So, jetzt können wir die erste Zeile mit einem zweispaltigen Layout hinzufügen:

Hintergrund Einstellung

Bevor wir allerdings ein Modul hinzufügen, müßen wir erst die Spalten-Einstellungen konfigurieren, stellt den Hintergrund für die Spalten auf „#ffffff“. Damit hebt sich die „Karte – später – sehr schön von der Farbe der Webseite ab.

 

Hintergrund Spalte 1

Ich habe den Background (Hintergrund) meiner ersten Spalte mit einem sanften Grau definiert: #f7f7f7

 

Größe

Damit die beiden Zeilen die gleiche Höhe haben, müßen wir noch den Schalter „Spaltenhöhe anpassen“ einschalten und den Absstand entfernen

 

Abstand

Um den oberen und unteren Abstand der beiden Spalten zu entfernen, muss lediglich der Wer „0px“ eingetragen werden, anderfalls wird der Abstand zwischen den beiden Splaten vom alllgemeinen CSS des Themes definiert und der ist garantiert mehr als 0px

Box Schatten (Shadow)

Zum Schluss brauchen wir noch einen schönen Schatten, der die Textbox später umgeben soll, Ergo stellen wir den Schatten wie folgt ein:

  • Box Schatten Blur Strengh: 80px
  • Shadow Color: rgba(0,0,0,,0,49)

Das erste Text-Modul in Spalte 1

Text Einstellung

So, jetzt können wir mit dem Einfügen des „ersten Modul“ in der ersten Spalte beginnen. Fügen wir also in Spalte 1 ein neues Textmudol ein und passen sogleich die Einstellungen an:

  • Text Font: z.B. Allura (oder was euch gefällt)
  • Text Font Weight: Bold
  • Text Größe: 29px
  • Textcolor: (eure Wahl)

Zwischenraum

Um das Textmodul vertikal zu zentrieren, benötigen etwas Abstand nach oben und zur linken Seite:

  • Benutzerdefinierte Begrenzung oben: 250px (Desktop), 50px(Tablet und Phone)
  • Benutzerdefinierte Begrenzung links: 17% (Desktop), 10% (tablet und Phone)

Zweites Textmudul in der 1. Spalte

Zusätzlich zu dem ersten Textmodul, benöigen wir nun ein weiteres Textmodul, direkt unter dem erten Modul. Nachdem Ihr den Namen oder einen anderen Inhalt eingetragen habt, könnt Ihr die Anpassungen visuell vornehmen.

  • Text Font: Adamina (oder was euch gefällt)
  • Schriftweite: Bold
  • Schriftstyle: Uppercase
  • Textgröße: 71px (Desktop), 50px (Tablet), (45(Phone)
  • Textfarbe (grau oder dunkel)
  • Buchstabenabstand: -5px (Hier müßt Ihr mal ein bischen herum probieren, was bei eurer Schrift und Länge am Besten aussieht.)
  • Zeilenhöhe: 1em

Zwischenraum (Spacing)

Öffnen wir nun noch einmal die Einstellungen für den Zwischenraum von dem textmdul und passen dort die Werte noch etwas an:

  • Benutzerdefinierter Abstand
    unten: 50px (Tablet &Phone)
    links 17% (Desktop), 10% (Tabelt & Phone)

 

Bild in Spalte 2 einfügen

Nun brauchen wir das Bild, welches rechts in die zweite Spalte dieser Zeile eingefügt werden soll. Der erste wäre also das Hinzufügen einen Bild-Moduls und gleich die Ausrichtung nach links.  Achtet auch auf den Schalter, „Auf mobilden Geräten sas Bild immer znetrieren“ Dieer muss unbedingt AUS geschaltet sein.

Zwischenraum

Jetzt wollen wir das Bild etwas am oberen Rand überlappen lassen, dazu müssen wir die „Benutzerdefinierte Begrenzung“ mit den folgenden Werten einstellen. Hier müßt Ihr einfach mal mit den Werten etwas herum probieren, da das natürlich davon abhängt, wie groß das Bild und euer „Kasten Text“ ist.

  • Benutzerdefinierte Begrenzung:
    oben: -50px
    links: -5%

 

Rahmen:

Ok, geben wir dem ganzen noch ein schicken Border (Rahmen) damit das Bild nachher noch etwas mehr „heraus sticht“:

  • Umrandungsbreite: 35px
  • Farbe: #FFFFFF
  • Style: Solid

 

Box Shadow (Rahmen Schatten)

Zum Schluß brauchen wir noch etwas Schatten hinter dem Bild. Das gibt dem Bild dann endlich auch etwas mehr Dynamik und hebt das ganze auch optisch mehr vom Background ab.

  • Box Shadow Vertical Position: 24px
  • Box Shadow Blur Strength: 41px
  • Shadow Color: rgba(0,0,0,0.3)

Box Shadow einstellen

Text Modul zur Spalte 2 hinzufügen

Text Einstellungen

Direkt unterhalb von dem Bild-Modul was wir gerade hinzugefügt hatten, setzen wir nun noch ein weiteres Text-Modul und stellen das mit den nachfolgenden Werte optimal ein:

  • Text Size: 15px
  • Text Color: #828282
  • Text Line Height: 1.4em
  • Text Orientation: Justify

Text-Modul in Divi hinzufügen

Größe

Jetzt sollten wir die Bildgröße noch mal etwas anpassen: Das Bild sollte in jedem Falle etwas kleiner sein als die Spalte. Das können wir in der Subkategorie „Größe einstellen“ im „Design“-Tab erledigen:

Stellen wir hier mal die Bildgröße auf 70%

Zwischenraum

Im „Design“-Tab können wir auch gleich den „Benutzerdefinierten Abstand“ für oben und für den linken Rand etwas einstellen:

  • Benutzerdefinierten Abstand:
  • Oben: 50px (Deskop) die anderen Anzeigen nicht ändern
  • links: 10% (bei tablet und Phone) die anderen Anzeigen nicht ändern

Schalter einfügen in Spalte 2

Schalter Ausrichtung

Das letzte Modul in dieser Zeile, ist ein Schalter, bzw. Taste wie es im Divi-Builder übersetzt heißt. Nachdem wir den CTA (Taste) eingefügt haben, gehern wir wieder in das „Design“-Tab und suchen die Subkategorie „Ausrichtung.

  • Ausrichtung: links

Taste Einstellungen

Jetzt brauchen wir nur noch ein paar Feinheiten um die Taste optisch anzupassen, dazu muß die Option „..Benutzerdefierte Formatvorlagen für Taste“ zuerst einmal ein geschaltet werden.

  • Benutzerdefierte Formatvorlagen für Taste: Ja
  • Button Text Size: 13px
  • Button Text Color: #ffffff
  • Button Background Color: Color #5
  • Button Border Width: 0px
  • Button Letter Spacing: 6px
  • Button Font Style: Uppercase

 

Zwischenraum einstellen

Zum Schluß könnten wir die Taste noch etwas ausrichten, ich habe das mit den folgenden Einstellungen im Design-Tab der Taste durchgeführt:

  • Benutzerdefinierte Begrenzung:
    Unten: 20px
  • Benutzerdefinierter Abstand:
    Oben: 10px
    Rechts: 40px
    Unten: 10px
    links: 40px

Das wars

Jetzt sollte die Seite so ungefähr aussehen, wie meine Beispielseite, die ich euch oben vorgeführt habe. Die einzelnen Werte für Abstand, Zwischenraum und Text- oder Bildgrößen varieren natürlich mit eurem Ergebnis. Da üßt Ihr einfach mal etwas herum probieren, was bei euch am Besten passt.

Inspiriert wurde diese Toturial durch einen englischen Beitrag von Elegeant Themes.

Wenn Ihr noch tiefer in die Materie mit Divi einstelgen möchtet, empfehle ich euch ein Coaching oder einen Online-Video-Kurs, wosolche Layout Konzepte noch einmal Schritt für Schritt und im Detail behandelt werden. Klickt euch einfach mal rein