Change landing page

I’m using Ali Abdaals theme, but I would prefer to use the free Ghost Source theme, as I find it more appealing. However, I’m unsure how to create a split landing page featuring an image and an email sign-up section. Could anybody help me with that?

Example how I want:

Setup information

Ghost Version
Version: 5.74.2+moya
Ghost pro on Ghost.io

Browser & OS version
120.0 (64-bit)Firefox and also Chrome Version 119.0.6045.159 (Official Build) (64-bit)

That is not a built-in option for the Source theme.

Here you can find all the header styles available: Source Documentation

Anything other than that will need to be coded by yourself or a theme developer you hire.

If you decide to do it yourself, look how this is done in Solo, the example you posted: https://github.com/TryGhost/Solo/blob/bd25e6b4a194305798a7c8731ccf99fef0895fc6/index.hbs#L3-L46

Keep in mind that you won’t be able to just copy and paste it, though.

Thank you, Jannis. :+1:

I think whether this is possible or not depends on what exactly @Ramunas wants. It’s possible to cause Ghost to direct / to a custom page, and it’s possible to set up a custom page that uses a side by side layout like the top of Solo, using the new ‘header’ (set to side by side) or ‘sign-up’ cards. But if you went that route, you’d be responsible for the rest of the page content. It would be a specific page, not an ‘index’ page collecting posts.

Another option would be to use some code injection to restyle the ‘landing’ layout to look more like Solo. (But be warned: Source doesn’t show the top section at all for users who are logged in.) I did a little playing around, and got this, which could be done with code injection only:

1 Like

I really love your thinking with these challenges, Cathy! :smiley:

1 Like

Hello @Cathy_Sarisky, this is pretty much how I envisioned my landing page. Would you mind sharing a code injection? I would like to try it on my LP. Thanks.

NOT comprehensively tested and not tested for mobile at all…

.gh-header.is-classic.has-image .gh-header-image {
  width: 50%;
}
.gh-header.is-classic.has-image .gh-header-inner {
   width: 40%;
   transform: translateX(60%);
}

(You’ll want a @media query to do something different on mobile, I think.)