> ## Content Index
> Fetch the complete content index at: https://themex.studio/llms.txt
> Use this file to discover other available public pages before exploring further.
# Enjin Docs
- URL: https://themex.studio/docs/enjin-docs/
- Published: 2025-12-18T04:44:31.000Z
- Updated: 2026-06-11T14:49:47.000Z
- Description: This documentation guides installing, customizing, and leveraging the Enjin theme for your Ghost blog or newsletter.
- Author: Trong @ Themex
- Tags: Documentation, #Theme Enjin Data
##### On this page
### Introduction
The theme's core concept is for content-first creators who want to build a subscriber-based publication around deep, research-driven content in arts, culture, history, tech, lifestyle. This is a solid, professional theme with strong editorial design, strong visual hierarchy. This is also a highly customizable Ghost theme.
Since this is a Ghost theme documentation, you are assumed to have a basic knowledge of the Ghost CMS. If you're starting with Ghost, it is best to see the guides in the official [Ghost Help Center](https://ghost.org/help/?ref=themex.studio) – check this out, and you'll have all the available information.
---
## Getting started
### Welcome
Enjin is built on a simple philosophy: your content deserves to be presented like it matters. This theme gives you the structure of a professional magazine with the flexibility to make it unmistakably yours. Change colors, swap fonts, adjust imagery—the foundation remains solid: organized, readable, and designed to build an audience.
### Install theme
#### Upload zip file
To begin, **unzip** the downloaded package by double-clicking it on a Mac or by right-clicking and selecting "Extract All" on Windows.
Inside the new **Enjin folder**, you will find the Enjin.zip theme files.
###### Step-by-Step to Upload the Theme to Your Website
1. Log in to your Ghost website admin (example.com/ghost).
2. Click the **settings icon** ( ⚙️ ) at the bottom of the left-hand side.
3. Go to **Design & branding > Theme > Change theme**.
4. Click **Upload theme** and select the Enjin.zip theme file.
5. Once uploaded, click **Activate now** to activate the theme.
---
## General settings
### Colors
The theme supports changing the Accent color and offers different color combinations.
#### Set accent color
The Accent color is the primary color used throughout your publication theme in buttons, social sharing hovers, links, and other interactive elements. You can change the theme Accent color from the Ghost admin.
Change the Accent color from the admin **Settings > Design & Branding > Customize > Brand > Accent color**.
#### Preset color combinations
The theme provides 8 different color combinations. Choose the one that fits your style:
- **Default** \- Classic and versatile color scheme
- **Pure** \- Clean, minimalist black and white
- **Onyx** \- Deep, sophisticated dark tones
- **Rust** \- Warm, earthy palette
- **Fossil** \- Natural, muted tones
- **Mint** \- Fresh, cool greens
- **Ember** \- Warm, energetic oranges
- **Ice** \- Cool, crisp blues
###### Step-by-Step to Choose Your Preferred Color Combination:
1. Go to the admin **Settings > Design & Branding > Customize > Theme**.
2. Click on **Color combinations** and select your color combination.
3. Preview and Save.
!\[TK: Color combination options\]
### Light / dark mode
You can easily switch between light, dark, system, or user-defined modes directly from your Ghost admin panel.
The theme supports:
- **Light** \- Always display light mode
- **Dark** \- Always display dark mode
- **System** \- Automatically match the user's operating system preference
- **User defined** \- Allow users to toggle between light and dark mode with their preference saved
###### Step-by-Step to Customize
1. Go to **Settings > Design & branding > Theme** from the admin menu
2. Choose a preferred mode by clicking on **Appearance**
3. Click **Save**
!\[TK: Light/dark mode settings\]
> **Note:** When set to "User defined", a theme toggle button appears in the header allowing visitors to switch between light and dark modes. Their preference is saved locally.
### Typography
Depending on the selected option, this setting will change the heading and body text fonts.
#### Custom fonts
Ghost provides built-in custom font functionality, allowing users to select heading and body fonts from a curated list directly in the admin interface.
###### Step-by-Step to Change Fonts:
1. Go to **Settings > Design & branding > Customize > Brand**
2. Under **Typography**, select:
- **Title font** for headings
- **Body font** for main text
3. Click **Save**
!\[TK: Typography settings\]
#### Host your own fonts
You can change any font from the Ghost admin interface using Code Injection and Google Fonts, or your own font. For example, if you want to use "EB Garamond" fonts from Google Fonts, your code in Code Injection will be:
```html
```
You can also use your custom local font by including it in your theme with a code editor. This technique is more advanced but allows you to add 'your own' fonts.
[Check out the detailed guide to add your own fonts](https://themex.studio/guides/how-to-add-your-own-custom-fonts-to-ghost-theme/)
### Header navigation
###### Step-by-Step to Add an Item to Header Navigation:
1. Go to **Settings > Navigation > Primary Navigation**.
2. Type the page's name in the label field as you'd like it to appear on your menu.
3. Click on the item's URL. The blog URL will already be auto-populated.
4. When satisfied with your page configurations, click the **Save** button.
### Navigation dropdown menus
You can create dropdown sub-menus in your Ghost site navigation to organize your content more effectively and improve site navigation. This feature helps visitors quickly find specific pages under broader categories.
Follow these steps to set up dropdown navigation menus:
1. In your Ghost Admin panel, go to **Settings → Navigation**
2. Add your main menu items normally
3. To create submenu items, add them with a dash (-) prefix before the child item
4. Arrange items in the order you want them to appear
Example Settings:
```
Home /
About /about
- Team /team
- Contact /contact
Blog /blog
```
### Header logo
Header profile displays Publication logo from **Settings → Design & branding → Brand → Publication logo**. If no logo is uploaded, the site title will display instead.
### Header call-to-action button
You can add your own CTA text and link in the header. If you leave it empty, the button will be hidden.
###### Step-by-Step to Add Header CTA:
1. Go to **Settings > Design & branding > Theme**
2. Scroll to **Header action text**:
- Add the text to **Header action text**. Leave it empty if you want to hide it.
- Add link to **Header action link**
3. Click **Save**
Example configurations:
- Contact button:
- Text: "Contact Us"
- Link: "/contact"
- External link:
- Text: "Get Started"
- Link: "https://example.com/start"
### White logo on dark mode
If you use a black logo image and enable dark mode, you would need your logo visible when users enable dark mode.
You can use Code injection and insert this CSS to support different logo color on light/dark mode
```html
```
### Footer
Like the header, you can add the footer navigation links from the Ghost Admin **Settings > Navigation > Secondary**
To group footer items into different groups, add `#` before the name.
Example configuration:
```
#Company
About Us /about
Careers /careers
#Legal
Privacy /privacy
Terms /terms
```
### Footer social links
The Enjin theme includes a comprehensive global social links system that automatically detects and displays social media icons from URLs you provide. The social links appear in the hero section (when enabled) and in the footer, providing consistent social presence across your site.
Simply paste the full URL to your profile on any supported platform. The theme will automatically detect the platform and display the correct icon. No need to specify the platform name or icon.
#### Supported platforms
The theme automatically recognizes and displays icons for 40 platforms, including:
**Social media:** Instagram, Threads, Facebook, Twitter/X, LinkedIn, TikTok, Bluesky, Mastodon, Pinterest, Reddit, Snapchat, WeChat
**Professional:** GitHub, Dribbble, Behance, Medium, Stack Overflow, CodePen
**Media:** YouTube, Vimeo, Spotify, Apple Podcasts, SoundCloud, Twitch
**Communication:** Email, Phone, WhatsApp, Telegram, Discord, Slack
**Business:** Etsy, Amazon, Ko-fi, Patreon, Trustpilot, Yelp, TripAdvisor, Google Maps
**And more...** The system automatically detects the platform from your URL and displays the appropriate icon.
###### Step-by-step to add social links
1. Go to **Settings > Design & branding > Theme**
2. Find the **Social links** field in the theme settings
3. Add your social media profile URLs separated by commas
4. Example: `https://twitter.com/yourusername, https://instagram.com/yourusername, https://github.com/yourusername`
5. Click **Save**
#### Display locations
Social links appear in two locations:
1. **Hero section** \- When you select "Social links" in the Hero actions dropdown (Settings > Theme > Homepage > Hero actions)
2. **Footer** \- Social links always appear in the footer alongside your traditional Ghost social links (Facebook, Twitter)
#### Adding special link types
**Email links:**
- Add `mailto:your@email.com` or just `your@email.com`
- The theme will automatically display an email icon
**Phone links:**
- Add `tel:+1234567890` or just `+1234567890`
- The theme will automatically display a phone icon
**Custom URLs:**
- For platforms not automatically recognized, add the URL anyway
- The theme may display a generic link icon or skip unsupported platforms
---
## Homepage
### Homepage overview
The Enjin theme homepage is designed for flexibility and easy customization. You can build a dynamic homepage using Ghost's built-in features, managing sections directly from the Ghost admin interface—no coding required!
The homepage consists of several key sections:
1. **Hero Section** \- Introduction with site title/description or custom content
2. **Featured Posts** \- Highlighted content with auto-generated color backgrounds
3. **Latest Posts** \- Recent articles feed
4. **Category Navigation** \- Tag-based navigation bar for content exploration
5. **Tag-based Posts Sections** \- Curated collections grouped by topic tags (configured via theme settings)
6. **Posts by Category** \- Tag-filtered content sections (configured via pages)
7. **Additional Sections** \- Logos, testimonials, authors, static text, custom content
All sections are fully customizable through the Ghost admin panel.
### Hero section
The hero section is the first thing visitors see on your homepage. It displays a customizable heading and description that you can set directly in your theme settings.
###### Step-by-step to customize hero content
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find the **Hero heading** field and enter your main hero title
3. Find the **Hero description** field and enter your supporting text
4. Click **Save**
> **Note:** Both the heading and description fields support HTML formatting. You can use tags like ``, ``, or ` ` for text formatting if needed.
### Hero background image
Add a stunning visual background to your hero section to create a more impactful first impression. The hero background image feature lets you upload a custom image that spans the full width of the hero section.
The theme comes with a set of beautiful, minimal and text-ready background to use. You can download it from here:
[Enjin BackgroundsAdd a stunning visual background to your Enjin Ghost theme hero section to create a more impactful first impression.Themex StudioTrong Themex](https://themex.studio/guides/enjin-bg/)
###### Step-by-step to add hero background image
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find the **Hero background image** option
3. Click **Upload** and select your background image
4. The image will automatically be displayed at responsive sizes (up to 1920px wide)
5. Click **Save**
> **Tip:** For best results, use high-quality images with at least 1920px width. Images with subtle patterns or soft gradients work well as backgrounds.
#### Black hero text option
When you use a hero background image, you might find that your hero text isn't easy to read depending on the image's colors. The black hero text option allows you to change the hero text color to black for better readability on light-colored background images.
###### Step-by-step to enable black hero text
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find the **Black hero text** toggle
3. Enable it by switching the toggle to ON
4. Click **Save**
> **Note:** This option only works when you have a hero background image set. Use this when your background image is light-colored and the default white text is hard to read.
### Hero actions
Choose to show social links, subscription box, or nothing below the hero content.
###### Step-by-step to set hero action
1. Log in to your Ghost Admin dashboard.
2. Go to **Settings** → **Site** → **Design & branding** → **Customize**
3. Go to **Theme** tab and find the **Homepage** section.
4. Locate the **Hero actions** dropdown, select the option you want:
- **Social links:** Display your global social links configured in theme settings (see [Social links](#social-links) section)
- **Subscription form:** Display the subscription box
- **None:** No action shown
5. Save and refresh the homepage
> **Note:** To configure which social links appear, see the [Social links](#social-links) section in General settings. The social links system supports 40+ platforms and automatically detects icons from URLs.
### Featured posts section
The featured posts section displays prominent content at the top of your homepage with multiple display options. You can showcase a single featured post, multiple featured posts in a grid, or even featured pages.
Enjin offers five options for the featured posts section:
1. **One featured post** \- Display a single large featured post card
2. **Multiple featured posts** \- Show multiple featured posts in a compact grid (first post expanded, others collapsed)
3. **Multiple featured posts (all expanded)** \- Show multiple featured posts with all cards fully expanded
4. **Featured pages** \- Display featured pages instead of posts (useful for portfolios, case studies, or static content)
5. **None** \- Hide the featured section completely
###### Step-by-step to configure featured posts
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find **Define type of featured posts** dropdown
3. Select your preferred option:
- **One featured post** \- Displays one large featured post with full details
- **Multiple featured posts** \- Shows a grid with the first post expanded and others as smaller cards
- **Multiple featured posts (all expanded)** \- Shows all featured posts as large expanded cards
- **Featured pages** \- Shows pages marked as featured instead of posts
- **None** \- Hides the featured section entirely
4. Click **Save**
###### How to mark content as featured
**For posts:**
1. Go to **Posts** in Ghost admin
2. Click on the post you want to feature
3. Click the settings icon (⚙️) in the top right
4. Toggle **Feature this post** to ON
5. Update the post
**For pages:**
1. Go to **Pages** in Ghost admin
2. Click on the page you want to feature
3. Click the settings icon (⚙️) in the top right
4. Toggle **Feature this page** to ON
5. Update the page
> **Tip:** Use "One featured post" for a bold, magazine-style homepage. Use "Multiple featured posts" for a more dynamic layout with several highlights. Choose "Featured pages" when you want to showcase portfolio work, case studies, or evergreen content instead of blog posts.
### Tag navigation bar
The tag filter navigation system is one of Enjin's most powerful features for content discovery. It displays a horizontal navigation bar with your chosen tags, allowing visitors to filter and explore posts by topic without leaving the homepage.
The tag filter navigation is JavaScript-powered and provides a smooth, fast filtering experience with:
- Dynamic post loading without page refresh
- Smooth scroll navigation for long tag lists
- Skeleton loading states for visual feedback
- "View all" button for filtered tag archives
- Automatic tag selection or custom tag curation
#### Setting up tag filter navigation
You have two options for configuring which tags appear in the navigation bar:
**Option 1: Automatic selection (default)**
- Leave the tag settings empty
- The theme automatically displays your top 8 tags by post count
- Perfect for getting started quickly
**Option 2: Custom tag selection (recommended)**
- Manually select which tags to display
- Control the order of tags
- Better for curated content experiences
###### Step-by-step to customize tag filter navigation
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find **Home category bar tags** field
3. Enter tag slugs separated by commas (no spaces)
4. Example: `ai-trends,engineering,design,product,marketing`
5. Click **Save**
> **Tip:** To find the exact tag slug, go to **Tags** in the Ghost admin, click on the tag name, then copy the text in the **Slug** field. The slug is the URL-friendly version of your tag name (e.g., "AI Trends" becomes "ai-trends").
### All articles posts
The All articles section displays your most recent blog posts in a grid layout with pagination. This is typically the main content area of your homepage, showing your newest published content.
The latest posts section includes:
- Grid layout with your recent posts
- Automatic pagination for older posts
- Integration with tag filter navigation
#### Feed image orientation
Control the aspect ratio of post card images throughout your site.
###### Step-by-Step to Set Image Orientation
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find **Feed image orientation**
3. Select your preferred option:
- **Landscape** \- Horizontal rectangular images
- **Square** \- Equal width and height
- **Portrait** \- Vertical rectangular images
- **Free** \- Original aspect ratio maintained
4. Click **Save**
> **Note:** This setting applies to post cards throughout the site, including homepage, blog page, tag pages, and related posts.
#### Customizing posts per page
By default, the homepage displays 12 posts per page. You can change this number by editing your theme's `package.json` file.
###### Step-by-step to change posts per page
1. Download your theme from Ghost admin (**Settings > Design & branding > Theme > Advanced > Download**)
2. Unzip the theme folder
3. Open `package.json` in a text editor
4. Find this section:
```json
"config": {
"posts_per_page": 12
}
```
1. Change `12` to your preferred number (e.g., `9`, `15`, `18`)
2. Save the file
3. Re-zip the theme folder
4. Upload and activate the theme in Ghost admin
> **Tip:** Choose numbers that divide evenly into your grid layout. For a 3-column grid, use multiples of 3 (6, 9, 12, 15). For a 2-column grid, use even numbers (6, 8, 10, 12).
> **Note:** The posts per page setting affects pagination throughout your site, including tag pages, author pages, and the blog page.
### Logo wall section
Sometimes you want to show some kind of social proof, and a logo board can help achieve that. Display partner logos, client logos, or featured brands.
###### Step-by-Step to Add Logo Wall
1. In the Ghost admin page, go to **Pages** \> click on **New page**.
2. Enter the title of the page. This title will be the section title on the homepage.
3. Upload all logos you want to show on the homepage as images in the page content.
- **Important:** Don't add any line breaks above, between, or after the images. It will create odd alignment.
4. In the Page Setting sidebar, add a tag named: `#section-logos`. (with `#` symbol)
5. Publish and check your homepage.
> **Tip:** If you want to hide the section title, add `#no-title` tag to the page.
### Testimonials section
Display testimonials from your users, clients, or partners in a rotating slider format.
###### Step-by-Step to Add Testimonial Section
1. In the Ghost admin page, go to **Pages** \> click on **New page**.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. Add `#section-testimonials` (with `#` symbol) to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing `/product` in the editor, then select the **Product** option.
5. On the product card, fill in the details:
- **Title** \- The testimonial main text
- **Description** \- Person's name and job title
- **Image** \- Profile picture
- **Stars** \- Rating (1-5 stars)
6. Add more Product cards to add more testimonials.
7. Publish.
### Static text section
The static text section is useful for adding custom text on the homepage, such as your services, working principles, or values.
###### Step-by-Step to Add Static Text Section
1. In the Ghost admin page, go to **Pages** \> click on **New page**.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. Add `#section-static-text` (with `#` symbol) to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing `/product` in the editor, then select the **Product** option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.
> **Tip:** If you want to hide the section title, add `#no-title` tag.
If you want to create multiple sections using Static text, create a new page and repeat the same steps above.
### Static banner section
Similar to the static text section, the static banner section displays custom formatted content on the homepage. Use this for important banners, callouts, or announcements.
###### Step-by-Step to Add Static Banner Section
1. In the Ghost admin page, go to **Pages** \> click on **New page**.
2. Enter the title of the page. This title will be the section title on the homepage.
3. Add `#section-static-banner` to the Tags field.
4. In the page content, add your banner content using text, images, HTML cards, or other elements.
5. Add more content blocks as needed for your banner layout.
6. Publish.
> **Tip:** If you want to hide the section title, add `#no-title` tag.
If you want to create multiple banner sections, create a new page and repeat the same steps above.
### Add-ons section
Display resource cards, tools, or add-ons in a 3-column grid layout. This section is perfect for showcasing supplementary resources or plugins.
###### Step-by-Step to Add Add-ons Section
1. In the Ghost admin page, go to **Pages** \> click on **New page**.
2. Enter the title of the page. This title will be the section title on the homepage (e.g., "Resources" or "Tools").
3. Add `#section-addons` to the Tags field.
4. In the **Twitter description** field, enter the tag slug for posts or pages you want to display (e.g., `resources`).
- Leave empty to show no items
5. Add the tag `#source-pages` if you want to filter pages, or leave it to filter posts (default)
6. (Optional) To add a separate page for this content, select **ZPage Collection** in **Page settings / Template**
7. Publish.
> **Note:** If you want to hide the section title, add `#no-title` tag to the page.
On the homepage, the section displays up to 3 items. On dedicated pages, it displays all matching items.
### Authors section
Display your site's authors and contributors in a professional grid layout. Each author card shows their profile photo, name, bio, and post count.
###### Step-by-Step to Add Authors Section
1. In Ghost admin, create a new Page.
2. Give it a title; this title will be the section title on the homepage (e.g., "Our Writers" or "Contributors").
3. Add `#section-authors` to the Tags input.
4. (Optional) To add a Authors page, select **ZPage Authors** in **Page settings / Template**
5. Publish.
The section will automatically display the top 4 authors on your site, sorted by post count (authors with the most posts appear first).
> **Note:** If you want to hide the section title, add `#no-title` tag to the page.
### Tag-based posts sections
Display multiple curated collections of posts grouped by topic tags directly on your homepage. Unlike page-based sections, this feature allows you to create tag-filtered post sections simply by entering tag slugs in your theme settings—no page creation required.
This feature is perfect for:
- Showcasing content from multiple topics or categories
- Highlighting posts from specific subject areas
- Building topic-based content hubs on your homepage
#### How tag-based sections work
When you enter tag slugs in the theme settings, the theme automatically:
1. Creates a section for each tag you specify
2. Uses the tag name as the section title
3. Displays the 3 most recent posts with that tag
4. Adds a "View all" link to the tag archive page
The sections appear on your homepage in the order you list the tags, and each section automatically updates as you publish new posts with those tags.
#### Setting up tag-based sections
###### Step-by-step to add tag-based posts sections
1. Go to **Settings > Design & branding > Theme > Homepage**
2. Find the **Home tag sections** field
3. Enter tag slugs separated by commas (no spaces needed)
4. Example: `design,engineering,product,marketing`
5. Click **Save**
> **Tip:** To find the exact tag slug, go to **Tags** in the Ghost admin, click on the tag name, then copy the text in the **Slug** field. The slug is the URL-friendly version of your tag name (e.g., "AI Trends" becomes "ai-trends").
#### Configuration examples
**Simple topic sections:**
```
design,technology,lifestyle
```
This creates three sections showing posts tagged with "design", "technology", and "lifestyle".
**Multi-word tag slugs:**
```
web-development,product-design,case-studies,behind-the-scenes
```
For tags with multiple words, use the slug format with hyphens.
### Custom content section
This section allows you to display any custom content of a specific page on the homepage. Use this for adding rich formatted content, HTML, or any special content blocks.
###### Step-by-Step to Add Custom Content Section
1. In Ghost admin, create a new Page.
2. Give it a title; this title won't be shown on the homepage.
3. Add your custom content in the page editor (text, images, galleries, HTML cards, etc.).
4. Add `#section-custom-content` to the Tags input.
5. Publish.
The entire content of this page will be rendered as a section on the homepage, giving you complete flexibility to add any type of content.
### Advanced homepage features
The Enjin theme includes several advanced features for fine-tuning your homepage sections. These features give you precise control over which content appears, how it's sourced, and how sections are displayed.
#### Excluding sections from homepage
Sometimes you want to create a section page but not display it on the homepage. The `#homepage-exclude` tag allows you to do exactly that.
###### Step-by-Step to Exclude a Section from Homepage
1. Create your section page as normal (e.g., with `#section-testimonials` or `#section-addons`)
2. In the page settings, add the `#homepage-exclude` tag along with your section tag
3. Publish the page
4. The section will not appear on the homepage but can be accessed via its page URL
#### Section background colors
Each homepage section can have a custom background color by using tag accent colors. This creates visual separation between sections and allows for creative color blocking.
###### Step-by-Step to Add Section Background Color
1. Go to **Tags** in Ghost admin
2. Find the tag you're using in your section's page
3. Click on the tag to edit it
4. Set the **Accent color** for that tag
5. Save the tag
6. The section on your homepage will automatically display with that background color
**Example:**
- Section: "Resources" (`#section-addons`)
- Tag "#section-addons" accent color: Light blue (#E3F2FD)
- Result: Resources section has light blue background
> **Tip:** Use subtle, light colors for section backgrounds to maintain readability. Dark colors work best with dark mode.
#### Hiding section titles
By default, each homepage section displays its page title as the section heading. You can hide these titles using the `#no-title` tag for a cleaner, more minimal look.
###### Step-by-Step to Hide Section Title
1. Create your section page as normal
2. Add the `#no-title` tag to the page (along with your section tag)
3. Publish the page
4. The section content will appear without the title heading
### Reordering homepage sections
By default, homepage sections appear in a predefined order. However, you can customize the order of sections without editing theme files by using CSS flexbox order property through Code Injection.
#### Understanding section classes
Each homepage section has a unique CSS class that you can target for reordering:
| Section | CSS Class |
| ------------------------------------------- | ----------------------- |
| Hero Section | .hero-intro |
| Featured Posts | .featured-posts-section |
| Logo Wall | .section-logo-board |
| Feed or Latest Post (together with Tag bar) | .feed-container |
| Testimonials | .section-testimonials |
| Category Navigation | .cat-nav |
| Static Text | .section-static-text |
| Static Banner | .section-static-banner |
| Add-ons | .section-addons |
| Authors | .section-authors |
| Custom Content | .section-custom-content |
#### How flexbox order works
The parent container `.site-layout` uses flexbox, allowing you to control the order of child sections using the `order` property. Sections with lower order values appear first, while sections with higher values appear later.
- Default order value: `0`
- Lower numbers (e.g., `-1`, `-2`) move sections earlier
- Higher numbers (e.g., `1`, `2`, `3`) move sections later
###### Step-by-Step to Reorder Sections
1. Go to **Settings > Code injection** in Ghost Admin
2. Add CSS code to the **Site Header** section
3. Use the `order` property to rearrange sections
4. Click **Save**
#### Example: Basic reordering
This example moves the Latest Posts section before the Featured Posts section:
```html
```
#### Example: Advanced reordering
Move testimonials and logo wall to appear right after the hero section:
```html
```
## Post templates
The theme provides 6 different post layout options to showcase your content in unique ways.
### Available post templates:
1. **No feature image** \- Clean text-focused layout without feature image
2. **Wide feature image** \- Feature image spanning content width
3. **Full feature image** \- Feature image spanning full viewport width
4. **Overlay feature image** \- Feature image with overlay text effect
5. **Split** \- Content and image in two-column layout
6. **Split reverse** \- Split layout with image on left
### Setting default post layout
You can set a default post layout that applies to all new posts.
###### Step-by-Step to Set Default Post Layout:
1. Go to **Settings > Design & branding > Theme > Post**
2. Find **Default post hero layout**
3. Select your preferred default layout
4. Click **Save**
### Choosing layout for individual posts
To choose which template to use when you publish a specific post:
1. In the post editor page, click the icon in the top right corner to open the **Post settings**.
2. Find the **Template** selector and choose the style you want for your post.
3. Publish or update your post.
> **Note:** Layouts with "color" generate a unique background color based on the dominant color of your feature image, creating a cohesive visual experience.
### Post page options
The theme supports additional post customizations to control what appears on post pages.
###### Step-by-Step to Customize Post Options
1. Go to **Settings > Design & branding > Theme > Post**
2. Toggle options:
- **Show author** \- Display author card with bio and social links
3. Click **Save**
### Table of contents
You can add a table of contents (TOC) to any post for better navigation through long-form content. The TOC automatically generates from h2 and h3 headings in your post.
###### Step-by-Step to Add Table of Contents
1. Create a new post and write your post using h2 and h3 headings
2. Right under the title, add an HTML card
3. Insert the following code:
```html
```
1. Publish and review it
> **Note:** The TOC will automatically populate with links to all h2 and h3 headings in your post. You can change the title "On this page" to any text you prefer, or remove the h4 element entirely for a TOC without a title.
#### Customizing TOC heading levels
By default, the table of contents displays only h2\. If you want to show only specific heading levels (for example, show both h2 and h3 headings), you can customize this using Code Injection.
###### Step-by-step to customize TOC headings
1. Go to **Settings > Code injection** in Ghost Admin
2. Add the following code to the **Site Header** section:
```html
```
1. Modify the `headingSelector` value to match your needs:
- `'h2'` \- Only h2 headings
- `'h2, h3'` \- Both h2 and h3 headings (default)
- `'h2, h3, h4'` \- h2, h3, and h4 headings
2. Click **Save**
That's it! You only need to specify the setting you want to change. The theme will automatically merge your custom configuration with the default settings.
> **Note:** This code must be added to the **Site Header** section (not Site Footer) so it loads before the theme's TOC initialization script.
### Videos for posts and pages hero
You can use a videos as the feature media to your posts and pages to create engaging, dynamic content. Videos will autoplay when visitors scroll to them and pause when scrolled out of view. This feature works on post hero sections, post cards, and collection pages.
###### Step-by-step to add a video
1. Create or edit a post or page in Ghost admin
2. Add a feature image (this will be used as the video poster frame)
3. Click the settings icon (⚙️) in the top right corner to open **Post/Page settings**
4. Scroll to the **Meta data** section
5. In the **Facebook description** field, paste the direct URL to your video file (e.g., `https://example.com/video.mp4`)
6. Update or publish your post/page
!\[TK: Video settings example\]
> **Note:** The Facebook description field (og\_description) is repurposed for video URLs. Your actual meta description should be set in the **Excerpt** field instead.
### Email signup text
Customize the email subscription box that appears at the bottom of posts and on the homepage.
###### Step-by-Step to Customize Email Signup
1. Go to **Settings > Design & branding > Theme > Post**
2. Edit the following fields:
- **Email signup heading** \- Main heading (default: "Subscribe to my newsletter")
- **Email signup description** \- Supporting text (default: "Subscribe to my newsletter to get the latest updates and news")
3. Click **Save**
## Other templates
### Individual tag pages
Each tag has its own page showing all posts with that tag.
Tag pages include:
- Tag name and description (if set)
- Count of posts
- Grid of posts with the tag
- Pagination for tags with many posts
###### Step-by-Step to Customize Tag Information:
1. Go to **Tags** in Ghost admin
2. Click on the tag you want to edit
3. Add or edit:
- Tag name
- Tag description
- Tag image
4. Click **Save**
### Authors template
Create a dedicated page to showcase all your site's authors and contributors using the Authors page template.
This custom template displays authors in a 4-column grid layout, showing up to 8 authors sorted by post count (most prolific authors first).
###### Step-by-Step to Create Authors Page:
1. Go to **Pages** in Ghost admin
2. Click **New page**
3. Add a title (e.g., "Our Authors" or "Contributors")
4. (Optional) Add a feature image
5. In the **Page settings** sidebar (click the settings icon), find the **Template** dropdown
6. Select **Zpage Authors** from the template options
7. Publish
### Individual author pages
Each author has their own page showing their profile and posts.
Author pages include:
- Author photo
- Author name and bio
- Social links
- Count of posts
- Grid of author's posts
- Pagination
###### Step-by-Step to Customize Author Information:
1. Go to **Settings > Staff** in Ghost admin
2. Click on the author you want to edit
3. Add or edit:
- Profile photo
- Name
- Bio
- Location
- Website
- Social media links (Twitter, Facebook, LinkedIn, etc.)
4. Click **Save**
### Collection template
Create curated collection pages that display posts filtered by specific tags. This template is perfect for creating topic-based collections, featured content galleries, or any custom grouping of posts.
The Collection page template allows you to:
- Add custom introductory content at the top of the page
- Display posts filtered by one or more tags
###### Step-by-Step to Create Collection Page:
1. Go to **Pages** in Ghost admin
2. Click **New page**
3. Add a title for your collection (e.g., "Featured Articles" or "Design Resources")
4. (Optional) Add introductory content in the page editor—this appears above the filtered posts
5. (Optional) Add a feature image
6. In the **Page settings** sidebar (click the settings icon), find the **Template** dropdown
7. Select **Zpage Collection** from the template options
8. In the **Twitter description** field, enter the tag slug(s) you want to filter posts by
- Single tag: `design`
- Multiple tags: `design+technology`
9. Publish
#### Specifying which posts to display
The Collection template uses the **Twitter description** field to determine which posts to show. This is a clever use of an existing Ghost field.
**Examples:**
- To show all posts tagged "featured": Enter `featured` in Twitter description
- To show posts with "design" OR "technology": Enter `design,technology`
- To show posts with "design" AND "technology": Enter `design+technology`
### Timeline templates
The Enjin theme includes two specialized timeline templates for displaying content in chronological order. These templates are perfect for journey documentation, timeline, history, or any content where chronological presentation matters.
#### Timeline (full content) template
The full content timeline template displays posts or pages in expanded format, showing the complete content of each entry. This creates an immersive, story-like reading experience perfect for project logs, series, or detailed journeys.
**Use cases for full content timeline:**
- Project development logs showing progress over time
- Tutorial series where each step builds on the previous
- Journey documentation (travel blogs, learning journeys)
- Company history or milestone timeline
- Portfolio showcases with detailed case studies
- Behind-the-scenes content series
###### Step-by-Step to Create Full Content Timeline Page:
1. Go to **Pages** in Ghost admin
2. Click **New page**
3. Add a title for your timeline (e.g., "Project Journey" or "Development Log")
4. (Optional) Add introductory content in the page editor—this appears above the timeline
5. (Optional) Add a feature image
6. In the **Page settings** sidebar (click the settings icon), find the **Template** dropdown
7. Select **Zpage Timeline** from the template options
8. In the **Twitter description** field, enter the tag slug for content you want to display (e.g., `project-alpha`)
9. (Optional) To show pages instead of posts, add the `#source-pages` tag to your page
10. Publish
**Twitter description examples:**
- Single tag: `project-updates` \- Shows all posts tagged with "project-updates"
- Multiple tags: `development,frontend` \- Shows posts with BOTH tags
> **Note:** The timeline template shows posts by default. Add the `#source-pages` tag to your timeline page to show pages instead.
#### Timeline minimal template
The minimal timeline template displays a compact list view showing only titles, dates, and brief excerpts. This creates a clean, scannable overview perfect for changelogs, resumes, or long lists of entries.
**Use cases for minimal timeline:**
- Changelog or version history
- Resume or CV (work history, education)
- Life events or personal milestones
- Publication archive
- Company news timeline
- Quick reference lists
###### Step-by-Step to Create Minimal Timeline Page:
1. Go to **Pages** in Ghost admin
2. Click **New page**
3. Add a title for your timeline (e.g., "Changelog" or "Work History")
4. (Optional) Add introductory content in the page editor
5. (Optional) Add a feature image
6. In the **Page settings** sidebar, find the **Template** dropdown
7. Select **Zpage Timeline Minimal** from the template options
8. In the **Twitter description** field, enter the tag slug for content you want to display
9. (Optional) Add the `#source-pages` tag to show pages instead of posts
10. Publish
---
## Custom settings
### Posts per page
By default, the homepage and other listing pages display a maximum of 12 posts per page, but you can change this number.
###### Step-by-Step to Change Posts Per Page
1. You'll need to open the theme's `package.json` file in your code editor and find the following:
```json
"config": {
...
"posts_per_page": 12
...
}
```
1. Change the value of `12` to your expected value.
2. Save your `package.json` file in the root folder.
3. Re-zip the theme and upload it to Ghost.
### Google analytics
To integrate Google Analytics, I recommend using the [Google Analytics](https://ghost.org/integrations/google/?ref=themex.studio) integration by Ghost.
This official integration allows you to:
- Add your Google Analytics tracking ID
- Track pageviews automatically
- Monitor user behavior
- No code editing required
### Syntax highlighting
You can add a fenced code block by placing triple backticks ```` ``` ```` before and after the code block.
#### Basic code block (no highlighting)
```
pre {
background-color: #f4f4f4;
max-width: 100%;
overflow: auto;
}
```
This will produce a gray code block without syntax highlighting.
#### Highlighted code block
To highlight a code block, add a language alias like `css` or `js` after the opening backticks. For example:
```
```css
pre {
background-color: #f4f4f4;
max-width: 100%;
overflow: auto;
}
```
```
This will produce a colored, syntax-highlighted code block.
#### Inline code
To add **inline code**, wrap the text between two backticks "\`".
For example: `const myVariable = 'value';`
#### Prism.js
The theme ships with [Prism.js](https://prismjs.com/?ref=themex.studio), a lightweight, robust, and elegant syntax highlighter.
The initial Prism package includes some languages, like *Markup*, *CSS*, *C-like*, and *JavaScript*.
You can add support for more languages by adding the Prism `autoloader` script, which will automatically load the languages you need.
###### Step-by-Step to Enable Autoloader:
1. Go to **Settings > Code injection**
2. Add the following script to the **Site Footer** section:
```html
```
1. Click **Save**.
Now Prism will automatically load syntax highlighting for any programming language you use in code blocks.
### Responsive tables
The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.
> By default, the table adapts to the window width. If you have a table that is too wide, it will display a horizontal scroll bar when needed.
###### Step-by-Step to Add Responsive Table
1. In your post or page editor, add a **Markdown card**.
2. Add the markdown to create a table. To generate a table, you can use the tool [Markdown Tables Generator](https://www.tablesgenerator.com/markdown%5Ftables?ref=themex.studio). Below is an example:
```
| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
```
1. Publish your post or page.
### Member comments
The theme comes with [Ghost Native Comments](https://ghost.org/changelog/native-comments/?ref=themex.studio) integration.
###### Step-by-Step to Enable Comments:
1. Go to **Settings > Membership > Access**
2. Click **Edit** next to your membership settings
3. Find the **Commenting** section
4. Choose who can comment:
- All members
- Paid members only
- Nobody (disable comments)
5. Click **Save**
Comments will appear at the bottom of post pages when enabled.
### Languages
The theme is fully translatable by enabling a publication language in the settings of the Ghost Admin. Before that, you must prepare your language file.
###### Step-by-Step to Add Translation
1. Inside the `../locales/` folder, add target language files for each translatable language used on your site. For example, `fr.json` is for French, and `pl.json` is for Polish. ISO 639-1 language code must be used.
2. Translate the sentences used in the theme inside your new language files. For example, in `en.json`:
```json
{
"Subscribe": "Subscribe",
"Sign in": "Sign in",
"Account": "Account",
"Browse": "Browse",
...
}
```
1. Edit to translate into your target language (French example for `fr.json`):
```json
{
"Subscribe": "S'abonner",
"Sign in": "Se connecter",
"Account": "Compte",
"Browse": "Parcourir",
...
}
```
1. Upload the theme with the new language file.
2. Go to the **General** settings in the Ghost Admin.
3. At the top of the page, you'll see the **Publication info** section.
4. Enter the correct language code into your **Publication language** settings menu.
5. Finally, click **Save** to activate.
> **Note:** If you edited the active language, you must restart Ghost to make the changes effective. Alternatively, enter another language code and click **Save** to activate, then switch back to your code.
---
## Advanced settings
### Editing a theme's code
You will encounter information about editing theme files in many places in this documentation.
To edit files, you will need to unzip the theme archive – at this point, you will have access to the necessary files indicated in the theme documentation.
#### Edit HTML/Handlebars files
###### Step-by-Step to Edit Theme Files
1. To edit your theme files, download a copy of the theme. For this purpose, go to the **Design** settings in the Ghost Admin and click **Change theme** in the bottom left corner.
2. Use the **Advanced** dropdown menu in the upper right corner to download your theme, then unzip the theme locally.
3. Once the theme is unzipped, the files can be edited using a code editor – make the changes indicated in the theme documentation.
> **Recommended Code Editors:** You can edit files using applications such as [Sublime Text](https://www.sublimetext.com/?ref=themex.studio), [Visual Studio Code](https://code.visualstudio.com/?ref=themex.studio), or [Brackets](https://brackets.io/?ref=themex.studio). Using native text editors like TextEdit on macOS may add formatting that may cause the theme to work incorrectly.
1. After changing the theme code, re-zip the theme directory to upload it back to Ghost.
> **Creating Zip Archives:** To create a zip archive on macOS, **right-click** on the theme folder to view the context menu, then click the **Compress** option. On Windows, **right-click** on the theme folder, select **Send to**, and then select **Compressed (zipped) folder**.
1. To upload the modified theme, go to the **Design** settings in the Ghost Admin and click **Change theme** in the bottom left corner.
2. Click the **Upload theme** button in the upper right corner.
3. Once uploaded, click **Activate** to activate the theme on your site.
#### Edit CSS
The best way to make minor CSS changes is to use Ghost's built-in Code injection. The change will be applied right after you save.
If you need more powerful CSS customization, you can edit CSS files in the theme directory. This requires a more technical setup.
Follow this guide: [How to apply CSS changes in your Ghost theme](https://themex.studio/guides/how-to-apply-css-changes-in-your-ghost-theme/)
> **Tip:** If you're only looking to make minor updates to a theme, code injection may be enough.
### Code injection
Code injection is a powerful feature for customization without editing theme files directly.
For a CSS example, you can use the code in the **Site Header** section to change colors and styling.
###### Example: Change title color and size
1. Go to **Settings > Code injection**
2. Add this code to the **Site Header** section:
```html
```
1. Click **Save**
Check out [How to use Code Injection](https://ghost.org/tutorials/use-code-injection-in-ghost/?ref=themex.studio) Ghost guide for more information.
### Theme deploy with GitHub Actions
Enjin comes integrated with the [Deploy Ghost Theme](https://github.com/marketplace/actions/deploy-ghost-theme?ref=themex.studio) GitHub action. The purpose of the GitHub action is to take the theme from the GitHub repo and send it to your website automatically.
This allows you to:
- Edit theme files locally
- Push changes to GitHub
- Automatically deploy to your Ghost site
- Version control your theme customizations
Follow this guide to set up GitHub Actions: [Streamline the deployment of your Ghost theme using GitHub Action](https://themex.studio/guides/streamline-the-deployment-of-your-ghost-theme-using-github-action/)
---
- **Set Meta Descriptions**: Always add custom excerpts to posts and pages for better search results
- **Use Descriptive Titles**: Write clear, descriptive titles that include relevant keywords
- **Add Alt Text**: Include descriptive alt text for all images
- **Internal Linking**: Link between related posts to improve site structure
---
Congratulations on setting up your Enjin theme! We hope this documentation has been helpful in getting you started with creating a beautiful and functional website.
Enjin is designed to be flexible and easy to customize, offering a wide range of options to make your site unique. With its customizable homepage sections, multiple post layouts, and extensive customization options, you have everything you need to create a professional online presence that showcases your content like it matters.
If you need additional support or have questions, please visit [Themex Studio](https://themex.studio/) or consult the [Ghost Help Center](https://ghost.org/help/?ref=themex.studio).