Blog Post Styling
Hello liebe Autor*innen,
hier ein kleiner Guide wie wir ab sofort die Blogposts anlegen und Stylen um ein einheitliches Postlayout vom Start sicherzustellen. Kurz zum Hintergrund: Der Webflow Editor ist ein reiner HTML Editor - das heißt das reale Styling kann stark vom Layout im Editor abweichen.
Ab sofort werden alle Abstände durch CSS Styles geregelt - nicht direkt über das Aussehen im Editor. Der Vorteil durch diese Art des Stylings: Wir können Änderungen global für die ganze Seite machen.
- Wichtigste Regel: Wir verwenden gar keine Absätze mehr. Alle Abstände werden durch die Klasseneigenschaften gesteuert. Jedes Element folgt direkt auf das Nächste!
- Normaler Fließtext: Bitte die Texte zu Blöcken zusammenfügen, Am Besten 2-3 Sätze nacheinander ohne Absätze. Bei zu vielen Absätzen wird der Leseflow auf kleinen Devices (z. B. Handy) wird schlechter. Jeder dieser Absätze hat nach oben und unten bereits durch das CSS Styling einen Abstand - ihr könnt das im Editor nur noch nicht sehen - erst auf der "veröffentlichten" Seite.
- Normaler Fließtext: Links im Text werden automatisch Bold. Bitte keine Italic Formatierung verwenden.
- In den Content Feldern bitte nur h3 & h4 als Überschriften verwenden. Überschriften dürfen nie einen Bold oder Italic Style haben
- Alle Embeds dürfen auch keine Abstände haben. Bitte im Embed schauen, ob es den Value "With" gibt. Diesen dann auf "100%" setzen. So wird das Embed auf die gesamte verfügbare Breit gestellt. Bei Instagram geht das jedoch nicht.
- Links: Achtung, wenn ihr nach extern verlinkt immer den Haken "in neuem Tab öffnen" setzen. Sonst haben wir den User verloren
- Tipp zum Entfernen von Absätzen. Es kommt unter Umständen vor, dass sich ein Absatz den ihr seht vermeintlich nicht löschen lässt. In diesem Fall Absatz markieren - dann die "Entfernen" Taste drücken ==> der Absatz zeigt dann das Pluszeichen - das könnt ihr nun wie gewohnt löschen.
- Listen: Bitte verwendet immer die Listenoptionen, entweder nummeriert oder nur Bullet-Points. Nicht selbst eine Art Liste anlegen - das mag google nicht.
h1 Nicks Stylesheet
h2
h3
h4
h5
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- Headings, paragraphs, blockquotes, figures, images, and figure captions
- Headings, paragraphs, blockquotes, figures, images, and figure captions
- Headings, paragraphs, blockquotes, figures, images, and figure captions
- Headings, paragraphs, blockquotes, figures, images, and figure captions
- Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
-