An overview of Ghost editor cards and and how they work

Ghost editor cards simplify content creation by providing a wide range of pre-built elements, making it easy for non-technical users to customize their site. In this article, we’ll explore what Ghost editor cards are, how to use them, and give you a detailed look at the existing cards available in Ghost.

What are editor cards

Ghost editor cards are pre-designed content blocks that allow you to easily add and structure different types of content within your posts or pages. They are an integral part of the Ghost editor, providing a simple and intuitive way to create rich, engaging layouts without the need for coding.

Each editor card is tailored to a specific type of content or functionality. These cards are designed to be flexible, allowing you to mix and match them to create a seamless and visually appealing user experience.

How to use editor cards

Using Ghost editor cards is simple and intuitive, making it easy to enhance your content without any technical expertise. Here’s a step-by-step guide to help you get started:

• Adding a new card

  1. Open the Ghost Admin and navigate to the post or page editor.
  2. Click the + icon that appears on a new line or type / to bring up the card menu.
  3. Select the type of card you want to add from the dropdown menu (e.g., Image, Markdown, HTML, etc.).
  4. Once the card is added, you can start customizing it by filling in the content or adjusting its settings.

  

• Reordering and editing cards

  • To reorder cards, simply drag and drop them into the desired position within your content.
  • To edit a card, click directly on the card to make changes. The editor provides context-specific tools for each card type, ensuring a smooth editing experience.

Existing Ghost editor cards

Ghost offers a wide range of editor cards, each tailored to specific content needs. Below is a list of all available cards, along with a brief description of their functionality:

• Image — Upload standalone images, adjust alignment, and add alt text for accessibility.
• Markdown — Add advanced text formatting using Markdown syntax.
• HTML — Embed custom HTML code for widgets, forms, or other elements.
• Gallery — Display multiple images in a grid or carousel layout.
• Divider — Insert a horizontal line to separate sections of content.
• Bookmark — Generate a visual preview for external links with title, description, and image.
• Email Content — Add content visible only in email newsletters.
• Email Call-to-Action — Create buttons or prompts specifically for email subscribers.
• Public Preview — Display a teaser of member-only content to encourage signups.
• Button — Add customizable buttons for CTAs like “Subscribe” or “Learn More.”
• Callout — Highlight important information in a stylized box.
• GIF — Insert animated GIFs to make content more engaging.
• Toggle — Create collapsible sections for FAQs or detailed information.
• Audio — Embed audio files or links with a simple playback interface.
• Video — Add videos from platforms like YouTube or upload your own files.
• File — Share downloadable files such as PDFs or ZIPs.
• Product — Showcase a product with an image, description, and purchase link.
• Header — Insert large, styled headings to organize content.
• Embeds — Integrate multimedia from platforms like Instagram, Spotify, or Twitter.
• Signup — Add a newsletter signup form directly to your content.

Ghost editor cards offer a powerful, flexible way to enhance your content with rich multimedia, interactive elements, and tailored layouts. Whether you’re embedding a video, showcasing a product, or adding a call-to-action, these cards make it easy to create engaging and visually appealing posts without the need for coding.

By understanding the purpose and functionality of each card, you can leverage them to deliver a better experience for your readers and make your content stand out. Experiment with the available options and find the perfect combination to suit your style and goals.