Hey everyone,
I got tired of wrestling with handlebars every time I wanted to change something simple on my homepage so I started building Defalt. Itās a visual theme editor for Ghost. Itās based on the Source theme, and still very much rough around the edges (generous beta), but itās at the point where it might be useful to others.
What works so far:
Drag sections around your homepage
Toggle them on/off
Adjust padding
Export a working theme ZIP
Add section Ghost cards, Tag any page with ghost-defalt, and manage everything right inside Ghostās page editor (personal favorite)
Fair warning: There are bugs. Some features are half-baked. The UI might make questionable choices. But maybe itāll help someone else. If you try it:
Does the interface make sense or is it confusing as hell?
What homepage customization are still a pain that I should tackle next?
I think the real benefit for people would be uploading any theme and being able to visually edit that. That is quite difficult to implement though, I know
To your questions:
It does to me. I was looking for a āswitch themeā option though, before realising itās supposed to be for Source only.
From my experience there is a big demand for more ālanding pageā style components. You can hack them together using editor cards, but having them pre-built could be a big time benefit for people. Think feature sections, split layouts, etc.
OMG Where have you been all my life! This is exactly what I cannot do right now. Iām a web designer who found Ghost via WordPress, Squarespace, Clickfunnels and more. Iāve wanted to add sections to Source, to move the blog down to change padding et al. This is like a dream come true.
Source can enter the website arena with this.
Further, if the blog element on the home page could be hidden or post numbers reduced to 3 or 6, as we can still access all on the archive then even better.
Iām no developer, but now I donāt need to be. Iād use it in an instant. Iām going to play with this today for sure. What a find. There has got to be a market for this. Source was my default for my first 3 client sites and I know good reason to edit what they have and use this.
Please keep developing this. Itās awesome. Well done!
Thank you for taking it for a ride @jannis. I began with the Source theme because itās beautiful, simple, and a good base to experiment with.
This would be a monumental task. In theory it could work with any theme, but each theme would need a small manifest that tells Defalt how to find and edit its sections (kind of like Shopifyās schema for theme sections).
More pre-built sections are definitely coming. I just want to keep them opinionated enough to feel cohesive, without going into WordPress territory.
The idea is that you manage content in Ghost (cards, images, etc.) and Defalt focuses on how it shows up on the homepage. Iād love to make that flow one-click.
You just need to add the Ghost cards section and tag a published page in Ghost with ghost-defalt. Then what ever content you have in that page renders on the homepage.
Would like ability to change hero text and button text colour and also add an image, which we get by default with Source.
Be good to see your own domain https://www.defalt.org/ being used as an example. Otherwise the video on the home page looks out of date already. Lead by example. Show us what it can do.
The editor runs entirely in the browser. It loads the Source theme templates, compiles them with Handlebars, and fills them with mock Ghost data for preview. I plan to add an option to pull real Ghost content via the API.
This would be a life-saver when fully developed. Great job @frederico
Like @weemediahq Iām unable to add specific Ghost Cardsā¦perhaps Iām doing something wrong or not doing something right.
Nevertheless, this would be great for folks who already have a theme they like, but want to make edits to their theme in a safe (ghost-friendly) way. For instance, Iād love to be able to change my homepage/landing page to make it more on-brand by showcasing specific content.
Itās not working for me. Have a new page. Added a product card, added the hashtag although should it not be an internal tag? Iāll persevere again laters. Maybe add a support line to your site. Donāt think Ghost will want you using the forum for support. LOL.
PS. Nice to see your site expanded. ;)
EDIT. It is very buggy. About page and post page still show home page edits below.
Is there going to be a way to save our designs to go back to later, because it seems to save as a one off, but then if you want to change anything you have to go back to the start and redesign everything all over again?
Iād also like the option to hide the footer sign up as donāt have them on 3 of my client sites, which I hid with CSS.
Otherwise, love the smaller width option on the hero - thatās a nice touch! Thank you. ;)
Added a support button for anyone who needs extra help, so we can keep the forum tidy. Iāll keep updating the post with new features, and keep an eye for useful suggestions. You can also DM me for any support.
You can download a JSON file of your setup or log in to save it online. If you prefer not to register, just upload that file later to continue where you left off.
To hide the footer, click the eye icon, then save and export.
Those layouts are now included. The previewās still a bit buggy, but you can already export the sections.
Love all of this Frederico! One of the most difficult things to do on any page in Ghost without custom code is setting up multiple cards in a single row, but multiple columns. How others are tackling this in themes is similar to your approach, by using tags. Iām thinking that extending this concept to āghost-defalt-1ā, āghost-defalt-2ā, āghost-defalt-3ā, etc. could then point back to css flex or grid markup.
