WebMasterService N3rds@Work

UpFront Shortcodes Spalten

Der Inhalt kann mit Hilfe von zwei Shortcodes in Spalten unterteilt werden –  [su_row]  und  [su_column] . Der erste Shortcode,  [su_row] , dient als Container für Spalten und wird zum Erstellen der Zeile mit Spalten verwendet. Der zweite Shortcode,  [su_column] , erstellt Spalten und sollte den erforderlichen Inhalt enthalten.

Optionen

[su_row] – Spaltencontainer

Optionsname Mögliche Werte Standardwert
class
Zusätzliche CSS-Klassennamen, durch Leerzeichen getrennt
CSS-Klassenname(n) durch Leerzeichen getrennt – keiner –

[su_column] – einzelne Spalte

Optionsname Mögliche Werte Standardwert
Größe
Spaltenbreite auswählen. Diese Breite wird abhängig von der Seitenbreite berechnet
1/1 (volle Breite)
1/2 (eine Hälfte)
1/3 (ein Drittel)
2/3 (zwei Drittel)
1/4 (ein Viertel)
3/4 (drei Viertel)
1/5 (ein Fünftel)
2 /5 (Zwei Fünftel)
3/5 (Drei Fünftel)
4/5 (Vier Fünftel)
1/6 (Ein Sechstel)
5/6 (Fünf Sechstel)
1/2
center
Ist diese Spalte auf der Seite zentriert?
yes oder no Nein
class
Zusätzliche CSS-Klassennamen, durch Leerzeichen getrennt
CSS-Klassenname(n) durch Leerzeichen getrennt – keiner –

Benutzerdefinierte Formatierung

Wenn Du die  Shortcodes [su_row]  und  [su_column] verwendest  , wird empfohlen, den benutzerdefinierten Formatierungsmodus zu verwenden. Dieser Modus kann auf der Seite mit den Plugin-Einstellungen aktiviert oder deaktiviert werden. Folge dem Pfad:  Dashboard – Shortcodes – Einstellungen – Registerkarte Einstellungen . Standardmäßig ist dieser Modus aktiviert.

Die benutzerdefinierte Formatierung ermöglicht es, eine falsche Formatierung von Shortcodes bei der Verarbeitung von Postinhalten zu vermeiden.

Formatierung von Shortcodes

Wenn Du übermäßige Lücken in Spalten oder eine falsche Ausrichtung feststellst, solltest Du Zeilenumbrüche und zusätzliche Leerzeichen zwischen Shortcodes löschen. Dieser Ansatz kann auch bei aktiviertem benutzerdefinierten Formatierungsmodus verwendet werden. Beispiel:

[su_row][su_column size="1/2"] Inhalt [/su_column] [su_column size="1/2"] Inhalt [/su_column][/su_row]

Rahmen und Hintergrund

Du kannts Spalten ganz einfach mit benutzerdefiniertem CSS-Code Rahmen und Hintergründe hinzufügen. Befolge dazu die nachstehenden Anweisungen.

Navigiere zunächst zu Dashboard – Shortcodes – Einstellungen und füge das folgende CSS-Snippet in das Feld Benutzerdefinierter CSS-Code ein:

.su-row.columns-with-border .su-column-inner {
  border: 2px solid #de3e35;
  padding: .5rem 1rem;
}
.su-row.columns-with-border .column-with-green-border .su-column-inner {
  border: 2px solid #5dde35;
}

.su-row.columns-with-background .su-column-inner {
  background: #de3e35;
  color: #fff;
  padding: .5rem 1rem;
}
.su-row.columns-with-background .column-with-green-background .su-column-inner {
  background: #5dde35;
}

Verwende die folgenden benutzerdefinierten CSS-Klassen, um Rahmen hinzuzufügen:

[su_row class="columns-with-border"] [su_column size="1/3"] Spalteninhalt [/su_column] [su_column size="1/3"] Spalteninhalt [/su_column] [su_column size="1/3" class="column-with-green-border"] Spalteninhalt [/su_column] [/su_row]

Verwende die folgenden benutzerdefinierten CSS-Klassen, um Hintergründe hinzuzufügen:

[su_row class="columns-with-background"] [su_column size="1/3"] Spalteninhalt [/su_column] [su_column size="1/3"] Spalteninhalt [/su_column] [su_column size="1/3" class="column-with-green-background"] Spalteninhalt [/su_column] [/su_row]