Skip to Content
Meet our new project Fantasma: Create custom themes visually for Free.
DocsScopeLanding SectionsFeatures Split Section

Features Split Section

The Features Split section displays features in an alternating image-text layout. This creates a visually engaging presentation where images and content switch sides.

Features split section example

Creating a Features Split Section

  1. Log in to Ghost admin
  2. Go to Pages, click New page
  3. Set the Page title (e.g., โ€œWhat Makes Us Differentโ€)
  4. Optionally add an Excerpt for a section description
  5. Add features with images to the content (see structure below)
  6. Open the Page settings sidebar
  7. Add these internal tags: #landing, #landing-features-split
  8. Click Publish

Required Tags

Internal TagDescription
#landingRequired for all landing sections
#landing-features-splitEnables the alternating split layout

Layout Options

Control how features alternate:

Internal TagDescription
#landing-features-split-evenImage on left for even items
#landing-features-split-oddImage on left for odd items
#landing-features-split-endImage always at the end

Default Behavior

Without a layout tag, features alternate automatically:

  • 1st feature: Image left, text right
  • 2nd feature: Text left, image right
  • 3rd feature: Image left, text right
  • And so onโ€ฆ

Even Layout

#landing #landing-features-split #landing-features-split-even

Forces images to the left on even-numbered features.

Odd Layout

#landing #landing-features-split #landing-features-split-odd

Forces images to the left on odd-numbered features.

End Layout

#landing #landing-features-split #landing-features-split-end

Places images at the end (right side on desktop) for all features.

Adding Split Features

Add features using Product Cards:

  1. Click the + button in the editor
  2. Select Product
  3. Upload your feature image
  4. Add a Title for the feature name
  5. Add a Description for the feature details
  6. Optionally add a Button with a link for call-to-action
  7. Repeat for each feature

The layout will automatically alternate between image-left/text-right and text-left/image-right.

Optional Settings

Combine with base settings:

Internal TagEffect
#landing-hide-titleHide the section heading
#landing-container-wideWider split layout
#landing-16-9Widescreen aspect ratio for images