Abstand HEADER zu SEITE ist zu groß (TwentyTwentyThree)

flytokiwi

Hallo zusammen,

ich bin gerade dabei unsere Internetseite auf Twenty Twenty Three umzustellen.
Mein Problem ist das der Abstand zwischen der Naviagtion (im HEADER) und dem Seitentitel sehr groß ist und ich nach langer Suche nicht fündig geworden bin wie ich diesen Abstand verringern kann.
Auch der Abstand zwischen Seitentitel und Seiteninhalt ist mir zu groß. Auch hier finde ich die entsprechende Stelle nicht.

Kann mir jemand sagen wo ich diese Werte ändern kann? Danke.

Die Seite ist aktuell Lokal und daher nicht erreichbar. Zur Demo habe ich ein Bild anghängt.

Gruß Ralph

P.S.: Ich verwende ein Child-Theme von Twenty Twenty Three.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

r23

Zitat von flytokiwi

Auch der Abstand zwischen Seitentitel und Seiteninhalt ist mir zu groß. Auch hier finde ich die entsprechende Stelle nicht.

Du könntest deine Webseite mit Firefox untersuchen. strg + umschlat + i im inspektor die Stelle dann suchen.

flytokiwi

Zitat von r23

Du könntest deine Webseite mit Firefox untersuchen. strg + umschlat + i im inspektor die Stelle dann suchen.

Ich habe die PAGE.HTML im Ordner TEMPLATES in mein Child-Theme übernommen und dort style="margin-top:var(--wp--preset--spacing--50 auf style="margin-top:var(--wp--preset--spacing--01 geändert.

Im Codeinspektor wird der Abstand zwischen Navigation und Seitentitel kleiner. Aber in der Testseite nach dieser Änderung nicht. Muss noch etwas anderes im Child-Theme eingetragen werden, damit der die PAGE.HTML verwendet?

r23

Ich bin mir nicht sicher, was du mit deinem Code erreichen möchtest, aber wenn du den Abstand zwischen den Elementen in deinem WordPress-Theme ändern möchtest, kannst du die CSS-Eigenschaften `margin-top` oder `margin-bottom` verwenden, um den vertikalen Abstand zu kontrollieren. Zum Beispiel:

```css
p {
margin-top: 10px;
margin-bottom: 10px;
}
```

HTML

p {
  margin-top: 10px;
  margin-bottom: 10px;
}

Dies würde einen Abstand von 10 Pixeln vor und nach jedem Absatz erzeugen. Du kannst auch andere Einheiten wie `em` verwenden, die sich auf die Schriftgröße beziehen. Zum Beispiel:

```css
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
```

HTML

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

Dies würde einen Abstand von der Hälfte der Schriftgröße vor und nach jedem Absatz erzeugen. Du kannst mehr über die CSS-Eigenschaften `margin-top` und `margin-bottom` hier How to Adjust Text Spacing in WordPress (P, H2, H3, li) (buildthatwebsite.com) erfahren.

Wenn man kaputtes css verwenden möchte...

Diese Variablen `var(--wp--preset--spacing--60)` und `var(--wp--preset--spacing--50)` erlauben es dem Theme, die Abstände dynamisch anzupassen, je nach den Einstellungen des Themes. Wenn du diese Variablen ändern möchtest, solltest du benutzerdefiniertes CSS hinzufügen, das diese Variablen überschreibt. Zum Beispiel:

```css
:root {
--wp--preset--spacing--60: 20px;
--wp--preset--spacing--50: 10px;
}
```

HTML

:root {
  --wp--preset--spacing--60: 20px;
  --wp--preset--spacing--50: 10px;
}

Dies würde die Werte der Variablen auf 20 Pixel und 10 Pixel ändern.

Es ist besser ein Plugin zu verwenden, das benutzerdefiniertes CSS erlaubt.

Es gibt viele Plugins für benutzerdefiniertes CSS. Einige der beliebtesten sind:

- Simple Custom CSS and JS: Dieses Plugin ermöglicht es dir , benutzerdefiniertes CSS und JavaScript zu Ihrer Website hinzuzufügen, ohne die Theme-Dateien zu ändern.

- WP Add Custom CSS: Dieses Plugin ermöglicht es benutzerdefiniertes CSS zu gesamten Website oder zu einzelnen Seiten und Beiträgen hinzuzufügen.

Und wenn du neue Variablen in dein Theme einbauen möchtest, empfehle ich dir ein passenden Online Kurs

flytokiwi

Hallo,

vielen Dank für die Antwort. Ich habe jetzt alles durchprobiert, aber es hat keine Auswirkung.
Damit Ihr euch das ansehen könnt, habe ich die Entwicklungsseite in eine Subdomain geladen und mit einem HTACCESS Zugang geschützt.

Link zur Seite: https://test.penguin-tappers.de/
Benutzer: wpde
Kennwort wpde123!

Es geht mir um den Abstand zwischen der Navigation im Header und dem Beitragstitel (STARTSEITE), sowie zwischen dem Beitragstitel und dem Absatz ("STARTSEITE -> "--TESTSEITE--"). Der Codeinspektor zeigt mir (zumindest ich sehe es nicht) die Stelle an der ich entsprechend eingreifen kann. Unten im Bild die Stelle im Codeinspector die wohl am Abstand zwischen Navigation und Beitragstitel Schuld ist.

Das mit einem Kurs wäre ansich schon OK. Leider gibt es mein Problem wenn das Design fertig ist, mache ich die nächsten Jahre nichts mehr damit. In meinem Alter habe ich das dann alles wieder vergessen :(.

Gruß Ralph

P.S.: Änderungen in der style.css funktionieren grundsätzlich, da ich für ein Plugin dort schon Änderungen eingebaut habe. In meinem Child-Theme von "Twenty Twenty-Three" gibt es eine function.php die die Verwendung der style.css regelt.

r23

und selbstverständlich kann man bei einem Full Site Edding Seite auch alles in Gutenberg einstellen

flytokiwi

Hallo r23,

vielen Dank für deine Mühe.
Ich habe das Problem jetzt so gelöst:

1) Das Plugin SiteOrigin CSS installiert
2) mit diesem Plugin die entsprechenden Werte geändert
3) Den CSS Code den das Plugin generiert in meine styles.css im Child-Theme kopiert
4) Plugin entfernt

Hier der generierte Code:

HTML

.wp-block-group.alignwide.is-content-justification-center.is-layout-flex.wp-container-5 {
  bottom: 0px;
}


.wp-site-blocks {
  margin-bottom: 0px;
}


.wp-block-group.has-global-padding.is-layout-constrained {
  margin-top: -85px;
}


.entry-content.wp-block-post-content.has-global-padding.is-layout-constrained.wp-container-8 {
  margin-top: -40px;
}

Alles anzeigen

Gruß Ralph

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abstand HEADER zu SEITE ist zu groß (TwentyTwentyThree)

Jetzt mitmachen!