How I built that: Layouts for Ghost

I get a lot of requests to set up Ghost landing pages. Here are some options for making layouts that aren't just a column of text.

Option #1: Use what's available natively in Ghost

Making interesting layouts has gotten easier with the new header cards. The "card" below is native Ghost, no changes or extra CSS.

Hello! Do you love this card?

I built it with native Ghost, no tweaks.
You can do exactly this in the editor.

Want to join my newsletter for more great content?

Sign up

Another 'header' card option:

Ghost is pretty awesome and you should try it out

This is a standard header card set to full width.
You can put a fair amount of text in the subheading section, but long titles definitely start to look sort of strange.

Click me!

(Image credit: Photo by ilgmyzin on Unsplash)

The sign-up card below looks great, but it doesn't show up in email or for subscribed members, so plan carefully if it's a key part of your layout. In this post/newsletter, I'm actually adding it as an image (which means it's going to look wrong on phones, sorry), so that it'll show up everywhere.

Option #2: Repurpose Ghost elements

Part 1: Fun with product cards

I've had lots of requests for layouts with three-wide cards. Cards are a super common layout, but Ghost only really does them natively for posts. But fear not, the product card is here to help you solve your problem!

If you use cards without modification, you're going to get something like this:

But we can achieve the layout below instead! Now product cards pack three-across, like many of my customers have asked.

How'd we do that? Two tricks:

"Wrap" the product cards in a custom container, using HTML cards.

above the product cards:
<div class="three-box">

below:
</div>

Add some extra styling.

<style>
  .three-box {
    grid-column: wide-start/wide-end;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  @media screen and (max-width:767px) {
    .three-box {
       grid-template-columns: 1fr; }
  }
  
  .three-box .kg-product-card-container {
    height: 100%
  }
</style>

And that's it! Put the first two little HTML cards in as snippets, and drop the styles into code injection (or your theme), and you're ready to have three-wide cards anywhere!

Once you've got the .three-box selector as a handle, you could add additional restyling to the product cards, too!

For additional examples of rearranging the product card sections (and even tricking it into containing MORE sections), see this post:

Using Product Cards for things other than products.

How to make a post with multiple updates (like live news pages have)? I suggested a product card for each update and some CSS wizardry.

Spectral Web ServicesCathy Sarisky, Ghost Expert

Part 2: Fun with buttons

Another common request is buttons on a row. Here's an example:

<!-- in code injection or added to the theme -->
<style>
  .button-holder {
    display:flex; 
    align-items: flex-start;
  }
  .button-holder .kg-button-card {width: unset; padding-right: 16px}
</style>

And then wrap the button group with HTML cards containing:
<div class="button-holder">

and 

</div>

OK, great, but what if you want two buttons in a header card?

Note to email viewers and newsletter senders: Because this requires some javascript, it will not work correctly in email. If you really need this layout in an email newsletter, it would need to be scratch-built as an HTML card.

Happy Halloween

Did someone say candy?

Yes please!

Here's how I do it:

<script>
  let buttonHolder = document.createElement('div')
  buttonHolder.classList.add('button-container')
  let cardText = document.querySelector('.kg-header-card + .kg-button-card').previousElementSibling.querySelector('.kg-header-card-text')
  let firstButton = cardText.querySelector('a')
  let secondButton = document.querySelector('.kg-header-card + .kg-button-card > a')

  cardText.appendChild(buttonHolder)
  buttonHolder.appendChild(firstButton)
  buttonHolder.appendChild(secondButton)
  secondButton.classList.add('kg-header-card-button')
  
</script>

<style>
  .button-container {
    display: flex;
    margin-top: 16px;
  }
  .button-container a {
    margin: 8px;
  }
  .button-container a:nth-child(2) {
    background-color: transparent;
    border: 2px solid currentColor !important;
    color: white!important; /*needs improvement for other header colors*/
  }
</style>

And here's a snapshot of the result (in the browser):

More ideas:

I've also used this trick of wrapping editor content with html content to create side-by-side sections and sections with backgrounds. You can see several examples in use below:

Vigeo Physio | Christchurch Physio and Postural Therapist

Get your body back to its best with a tailored physiotherapy and postural therapy programme from our experienced Christchurch physio.

Vigeo PhysioCathy Sarisky

The general approach is similar. Wrap the content to be grouped in an outer div, wrap the content on the left side and right sides in separate divs, and then get them side by side for wide screens using some CSS. The result is a page built in the Ghost editor and fairly user-editable, while still creating layouts that match what the designer wanted.

Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!

Buy me a tea ☕️

Addendum - live product cards

A block of text here is the title

The description goes here!

It can be multiple paragraphs if desired.

• Bullets are cool, too
• So are links.

A block of text here is the title

The description goes here!

It can be multiple paragraphs if desired.

• Bullets are cool, too
• So are links.

A block of text here is the title

The description goes here!

It can be multiple paragraphs if desired.

• Bullets are cool, too
• So are links.