Fixe Breite im Enfold Theme vergrößern oder verkleinern

Wer das Enfold Theme nutzt oder kennt, weiß um seine Qualitäten. Klasse Optik, gepaart mit jeder Menge vorgefertigter Features und einem einfachen Backend. Das Layout lässt sich wunderbar per Optionen und CSS anpassen. Nur leider lässt das Theme Anpassungsmöglichkeiten in der Breite der Seite missen, insofern man nicht auf Responsive Design verzichten möchte. So ändert man die Breite des WordPress Enfold Themes im Boxed Layout.

Du kennst das Enfold-Theme nicht: Dann wird’s Zeit…:
Du findest das Premium-Theme hier.

Update vom 07.01.2025: Anpassungsmöglichkeiten bei neueren Versionen

1. Individuelle Breite mit CSS anpassen

Du kannst eigene CSS-Regeln hinzufügen, um die Breite der Website nach deinen Wünschen zu ändern:

Gehe zu den Enfold-Einstellungen:

Enfold > Allgemeines Layout > Layout-Stil

Stelle sicher, dass du ein Boxed Layout oder Breites Layout gewählt hast.

Benutzerdefiniertes CSS hinzufügen:

Gehe zu

Enfold > Allgemeine Styling-Optionen > Benutzerdefiniertes CSS-Feld

oder verwende den WordPress-Customizer (Design > Customizer > Zusätzliches CSS).

Füge diesen CSS-Code hinzu, um die Breite anzupassen:

.container {
max-width: 1400px; /* Deine gewünschte Breite */
margin: 0 auto; /* Zentriert die Seite */
}
Passe den Wert 1400px nach deinen Bedürfnissen an.

2. PHP-Filter verwenden

Wenn du mehr Kontrolle benötigst, kannst du die Breite mit einem Filter in der functions.php deines Child-Themes anpassen:

Öffne die functions.php deines Child-Themes.

Füge folgenden Code ein:

add_filter('avf_container_width', function() {
return '1400px'; // Breite in Pixel oder Prozentsatz
});

3. Container-Breite bei Raster-Layout anpassen

Falls du das Raster-Layout benutzt, kannst du die Breite direkt in den Einstellungen definieren:

Enfold > Allgemeines Layout > Breite der Website (Containerweite in Pixel)

Hier kannst du Werte wie z. B. 1310px oder 85% eingeben, falls du nicht bei den Standardwerten bleiben möchtest.

Frühere Versionen von Enfold:
Die Breite des Enfold Themes anpassen

Leider gibt es das Enfold Theme nur in den folgenden Größen einzurichten: fullscreen (Stretched Layout), 1030px (Boxed Layout), 1210px  (Boxed Layout) und fixed Layout mit variabler Breite ohne responsive Design. Möchte man nun ein Responsive Design im Boxed Layout (Einstellung siehe nebenstehendes Bild, im Backend zu finden unter den Enfold Optionen->Styling->General) mit einer anderen Breite als vordefiniert verwenden, muss man das Theme über die grid.css (liegt im Ordner wp-content/themes/enfold/css) lösen. Leider habe ich keinen Weg gefunden, diese css-Datei im Child-Theme zu verwenden, um die Updatefähigkeit nicht zu verlieren, ohne die ganze Datei zu de-registrieren und neu einzubinden (nicht nachmachen!).

Sollte ein Leser/eine Leserin dieses Artikels eine Lösung hierzu wissen, würde ich diese Info gerne noch nachschießen. Ich bin nun in der grid.css relativ rabiat vorgegangen und habe alle Einträge mit dem Attribut „width“ angepasst. Und zwar nicht nur bei den Containern an sich, sondern NATÜRLICH auch bei den einzelnen Grid-Spalten. Diese müssen passend zur neuen Größe sein. Das kann man stufenweise in Prozentschritten realisieren. D.h. ich habe z.B. bei allen width-Angaben 10% abgezogen. Sollte es einmal nicht aufgehen, wird ABGERUNDET!… Das war’s auch schon…