Einfache CSS-Rasterlayouts in WordPress integrieren

Ein konsistentes, solides Rasterlayout in WordPress zu erstellen, kann mit den richtigen Werkzeugen ein schmerzloser Prozess sein. In diesem Lernprogramm erfahren Sie Schritt für Schritt, wie Sie ein Rastersystem in WordPress einrichten, das sehr leicht und einfach zu ändern ist. Wir werden das Design einfach halten, damit wir uns darauf konzentrieren können, die richtigen Werkzeuge zum Einrichten Ihres Gitters zu verwenden. Denken Sie jedoch daran, dass Sie das Gitter bei Bedarf selbst gestalten können.

Ich werde für dieses Tutorial ein Standard-Pool-Theme in WordPress verwenden, um Ihnen einen Ansatz "von vorne" zu zeigen, um die Raster genau richtig zu machen.

Schritt 1: Bestimmen Sie Ihre Gitterbreite

Bevor Sie beginnen, müssen Sie festlegen, wie breit Ihr Raster sein muss. Für meine WordPress-Site kann ich sehen, dass die Breite meiner Hauptspalte 450 Pixel beträgt, wenn Sie die Funktion "Element prüfen" von Google Chrome verwenden, wenn Sie mit der rechten Maustaste auf ein Objekt klicken. Dies ist der schnellste Weg, den ich gefunden habe, der die Breite und Höhe eines Objekts auf einer Webseite schnell bestimmen kann.

Schritt 2: Grid Designer

Anstatt ein Gitter manuell aufzubauen, was Sie tun können, wenn Sie möchten, schlage ich vor, mit einem der vielen verfügbaren Raster-Generator-Tools zu arbeiten. Für dieses Tutorial werde ich den Grid-Generator von MindPlay verwenden. Es ist ein sehr einfacher und Lichtgittergenerator.

Ich möchte eine dreispaltige Anzeige und muss sicherstellen, dass sich meine Pixel bei 450 befinden. Passen Sie das Bild entsprechend an und fahren Sie mit der Registerkarte "Export" fort. Wir werden nicht über das gehen *Typografie Dieses Tutorial enthält Funktionen, auch wenn dies auf jeden Fall eine Erkundung wert ist.

Verwenden Sie auf der Registerkarte "Export" den obersten Frame "Style Sheet" und scrollen Sie nach unten, bis Sie den Kommentar "Grid" sehen. Sie werden alles vom Kommentar an den unteren Rand dieses Rahmens kopieren. Es sollten nur etwa 30 Zeilen sein

Schritt 3: Aktualisieren Sie Ihr WordPress-Stylesheet

Melden Sie sich bei Ihrer WordPress-Site an und gehen Sie zu Aussehen> Editor.

In der rechten unteren Ecke des Editorfensters sehen Sie ein Styles.css Datei (oder etwas Ähnliches, abhängig von Ihrem Thema). Klicken Sie hier, um es zu öffnen.

Scrollen Sie zum unteren Rand des Arbeitsblatts und fügen Sie Ihre Vorlage aus MindPlay.dk ein:

Schritt 4: Implementieren des Gitters

Um das Raster zu verwenden, erstellen Sie einfach ein

mit der Klasse "Raster". Jeder Bereich des Gitters ist im CSS definiert. Öffnet eine neue Seite oder einen neuen Beitrag. Wechseln Sie zur Registerkarte HTML, um das Raster zu erstellen.

Hier ein paar Beispiele, die Sie einfügen können, um den Einstieg zu erleichtern:

   Linke Spalte
  Mittlere Spalte
  Rechte Spalte

So sieht es in WordPress aus:

Speichern / Aktualisieren Sie die Seite und sehen Sie sich die Ergebnisse an. In meinem Fall ist dies die Homepage für die Site:

Wie Sie dem obigen Screenshot entnehmen können, haben wir unsere drei Spalten und alles ist genau dort, wo wir es erwarten. Sie können so viele Zeilen hinzufügen, wie Sie möchten, indem Sie einfach mit den folgenden beginnen

    Linke Spalte
  Mittlere Spalte
  Rechte Spalte
    Linke Reihe # 2
  Mittlere Reihe # 2
  Rechte Reihe # 2

So sieht es bisher aus:

Jetzt können Sie Bilder oder Text hinzufügen und jede Zeile so gestalten, wie Sie möchten.

Tipps zum Optimieren

In einigen Browsern können Probleme auftreten, wenn Sie mehr als eine Zeile haben. Um dieses Problem zu umgehen, müssen Sie den Rand ganz rechts machen (.grid-m4, in unserem Fall) auf die Höhe, die jede Reihe haben soll. Wenn Sie Bilder verwenden, die 250 x 250 Pixel groß sind, legen Sie die Zeilenhöhe im fest .grid-m4 250px sein:

.grid-m4 float: left; Breite: 20px; Höhe: 250px;

Dies wird sicherstellen, dass Ihre .grid-m1 auf der linken Seite der nächsten Reihe schwebt nicht bis zu der darüber liegenden Reihe.

Wenn Sie den Hintergrund des gesamten Gitters anpassen möchten, müssen Sie die Höhe des Gitters anpassen .Gitter Klasse. Nehmen wir also an, Sie haben vier Reihen mit jeweils 250 Pixeln in Ihrem Raster. Sie möchten die .grid-Klasse um 1000px erhöhen, sodass alle hinzugefügten Stilelemente den gesamten Rasterentwurf abdecken.

.Gitter Breite: 450px; Höhe: 1000px; Marge: auto;

Abhängig von der Version des von Ihnen verwendeten MindPlay.dk-Rastergenerators generiert die Site möglicherweise nicht das ".grid-m4". Stattdessen müssen Sie verwenden .grid-m1 nach dem .grid-c3 um sicherzustellen, dass sich Ihr Raster an der richtigen Stelle erstreckt:

  Linke Spalte
  Mittlere Spalte
  Rechte Spalte

Endgültige Ergebnisse

So sehen meine Endergebnisse mit zwei Zeilen und einfachen Grafiken aus:

Haben Sie Spaß beim Entwerfen und denken Sie daran, dass Sie Ihr Raster beliebig gestalten können.

Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Tara Hornor für Hongkiat.com. Tara hat einen Abschluss in Englisch und schreibt über Marketing, Werbung, Branding, Grafikdesign und Desktop Publishing. Neben ihrer Karriere als Schriftstellerin verbringt Tara auch gerne Zeit mit ihrem Ehemann und zwei Kindern.