Blog Post Page

Article page with content, author info, and related posts

Article Post Content

Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein

Create a blog post/article page:

1. POST HEADER
- Breadcrumb: Home > Category > Post
- Category tag (colored)
- Title (H1, large, compelling)
- Subtitle/excerpt
- Meta info:
  - Author with avatar
  - Publish date
  - Updated date (if different)
  - Read time
- Featured image (full-width or contained)
- Image caption/credit

2. ARTICLE CONTENT AREA
Max-width for readability (680-720px)

Content elements:
- Paragraphs with good line-height
- Headings (H2, H3, H4)
- Blockquotes (styled distinctly)
- Code blocks (syntax highlighted)
- Inline code
- Images with captions
- Image galleries
- Embedded videos
- Bullet and numbered lists
- Tables
- Callout boxes (tip, warning, note)
- Pull quotes
- Dividers

3. TABLE OF CONTENTS (optional)
- Sticky sidebar or top of post
- Auto-generated from headings
- Smooth scroll to sections
- Highlight current section

4. ENGAGEMENT ELEMENTS
Inline:
- Highlight to share
- Click to tweet quotes

Bottom of post:
- Share buttons (Twitter, Facebook, LinkedIn, Copy link)
- Like/clap button
- Save/bookmark button

5. AUTHOR BOX
- Author photo (larger)
- Author name and title
- Bio paragraph
- Social links
- "View all posts by [Author]"

6. TAGS SECTION
- "Tagged:" followed by tags
- Clickable, links to tag archive

7. COMMENTS SECTION
- Comment count
- Comment form (if logged in)
  - Or "Sign in to comment"
- Comment list:
  - Avatar
  - Name and date
  - Comment text
  - Reply button
  - Like/upvote
- Threaded replies
- Load more comments

8. RELATED POSTS
- "You might also like"
- 3 related post cards
- Based on category or tags

9. NAVIGATION
- Previous/Next post links
- Back to blog link

10. NEWSLETTER CTA
- End-of-post signup prompt
- "Enjoyed this? Subscribe for more"

Design: Typography-focused. Comfortable reading experience. Mobile: Full-width images, adjusted font sizes.

So verwendest du diesen Prompt

1 Kopiere den Prompt oben
2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
3 Die KI generiert den Website-Code für dich
4 Passe an und iteriere nach deinen Bedürfnissen

Zurück zuBlog Alle Kategorien durchsuchen

Mehr Blog Prompts

Author Page

Author profile with bio and post list

Author Profile

Blog Archive Page

Paginated blog listing with filters

Archive Listing

Magazine/Publication Style

Editorial blog with magazine-style layouts

Magazine Editorial

Über diesen Blog Prompt

Dieser Blog Post Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle blog-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.

Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von blog post page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.

Kompatible KI-Tools

ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
v0 von Vercel - Perfekt für React- und Next.js-Komponenten
Cursor - Ideal für KI-gestütztes Coding in deiner IDE
Bolt.new - Schnelles Prototyping und Full-Stack-Apps
Lovable - Benutzerfreundlicher KI-Website-Builder