> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Hub Editor

> Get up to speed on all aspects of the Hub Editor so you can build killer promotions in no time.

### Contents

* [What is it?](#what-is-it)
* [Watch it come to life](#what-is-it)
* [How do I use it?](#what-is-it)

### What is it?

The Hub Editor gives you the ability to create Cards on pages, customise the overall look and feel and edit page-specific settings.

### How do I use it?

* [Styling](#how-do-i-use-it)
* [Cards](#step-2-add-a-background)
* [Page Settings](#how-do-i-use-it)

### Styling

* [Step1: Open Styling](#how-do-i-use-it)
* [Step 2: Add a Background](#what-is-it)
* [Step 3: Edit the Header](#watch-it-come-to-life)
* [Step 4: Upload a Cover image](#what-is-it)
* [Step 5: Set up your Footer settings](#how-do-i-use-it)
* [Step 6: Set your Button colours](#watch-it-come-to-life)

### Step 1: Open Styling

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-1-open-styling-step-5.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=dcd0884a24133e96e2b328ac91d3fa4a" alt="Hub Editor: step 5 — Step 1: Open Styling" width="2940" height="1912" data-path="images/hub-editor-step-1-open-styling-step-5.webp" />

* **(1)** Within Editor, click on the **Styling** tab.

### Step 2: Add a Background

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-2-add-a-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=9a484ce936bbb2abe59992d563c9a65d" alt="Hub Editor: step 2 — Step 2: Add a Background" width="2940" height="1912" data-path="images/hub-editor-step-2-add-a-step-2.webp" />

* **(1)** You can have a **solid colour** as your background.
* **(2)** Upload a background **image** here.
* **(3)** Here you can add a colour **overlay** to your background image.

  > **Note:** The background will update as below.<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-2-add-a-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=ea418486f6a621e96f8fc6ab7fa582b6" alt="Hub Editor: step 3 — Step 2: Add a Background" width="2940" height="1912" data-path="images/hub-editor-step-2-add-a-step-3.webp" />

### Step 3: Edit the Header

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-3-edit-the-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=0ab0a7fa200bc82f41d268205bda3aad" alt="Hub Editor: step 3 — Step 3: Edit the Header" width="2940" height="1912" data-path="images/hub-editor-step-3-edit-the-step-3.webp" />

* **(1)** You can upload your **logo** to sit on the header bar or toggle this option off.
* **(2)** Alter the header bar **colours** here.
* **(3)** If you prefer not to have the header bar visible, you can **toggle off** this feature here.

  > **Note:** The header will update as below.<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-3-edit-the-step-4.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=5005bbf5413d6c06832e671f2f0884c8" alt="Hub Editor: step 4 — Step 3: Edit the Header" width="2940" height="1912" data-path="images/hub-editor-step-3-edit-the-step-4.webp" />

### Step 4: Upload a Cover image

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-4-upload-a-step-4.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=91e28762320b185aca49d061c14d1aa1" alt="Hub Editor: step 4 — Step 4: Upload a Cover image" width="2940" height="1912" data-path="images/hub-editor-step-4-upload-a-step-4.webp" />

* **(1)** Here you can **upload** an image that will sit at the top of the Hub.
* **(2)** You have the option to **toggle off** this feature here.

  > **Tip:** You can upload a transparent PNG image to create a 'floating' effect.

  **Note:** The cover image will update as below.

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-4-upload-a-step-5.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=b209b9444cec4bc6d3cfb142cd411811" alt="Hub Editor: step 5 — Step 4: Upload a Cover image" width="2940" height="1912" data-path="images/hub-editor-step-4-upload-a-step-5.webp" />

### Step 5: Set up your Footer settings

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-5-set-up-step-5.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=16391e2cc3adaaf5f7cdee44c98d9459" alt="Hub Editor: step 5 — Step 5: Set up your Footer settings" width="2940" height="1912" data-path="images/hub-editor-step-5-set-up-step-5.webp" />

* **(1)** Upload your **logo** here or **(2)** you can **disable** the logo here.
* **(3)** Change the footer **background** colour and **text** colour.
* **(4)** Here is where you'll input a brief **description** of the hub or your company.
* **(5)** Clicking on the edit icon, you can paste all your **social links**; or
* **(6)** turn this option **off** here.

  > **Note:** The footer will update as below.<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-5-set-up-step-6.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=d40bb35f50cd98c787691f14e848b634" alt="Hub Editor: step 6 — Step 5: Set up your Footer settings" width="2940" height="1912" data-path="images/hub-editor-step-5-set-up-step-6.webp" />

### Step 6: Set your Button colours

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-6-set-your-step-6.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=83b9e2504e7c99ed0871a75c95a0c047" alt="Hub Editor: step 6 — Step 6: Set your Button colours" width="2940" height="1912" data-path="images/hub-editor-step-6-set-your-step-6.webp" />

* **(1)** Here is where you can alter the colour of the **call-to-action bar.**

  > **Tip:** We recommend setting this up prior to creating your cards as once this is changed, all content added to the Hub will have these settings. You will also be able to change the call-to-action bar colours at the card level.

  > **Note:** The button colours will update as below.
  >
  > <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-6-set-your-step-1.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=b8f6e856a0566322bd5193962414d636" alt="Hub Editor: step 1 — Step 6: Set your Button colours" width="2940" height="1912" data-path="images/hub-editor-step-6-set-your-step-1.webp" />

##### Cards

* [Step 1: Open Cards](#styling-step-1-open-styling)
* [Step 2: Add Cards](#styling-step-1-open-styling)
* [Step 3: Reorder Cards](#styling-step-1-open-styling)

### Step 1: Open Cards

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-1-open-cards-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=ee77a7e2f8ac28fe24ac3e007b1b62f2" alt="Hub Editor: step 2 — Step 1: Open Cards" width="2940" height="1912" data-path="images/hub-editor-step-1-open-cards-step-2.webp" />

* **(1)** Within Editor, click on the **Cards** tab.

### Step 2: Add Cards

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-2-add-cards-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=df49d5130c4ef9202a71dca521504a3d" alt="Hub Editor: step 2 — Step 2: Add Cards" width="2940" height="1912" data-path="images/hub-editor-step-2-add-cards-step-2.webp" />

* Add cards by selecting **(1)** + Add card, **(2)** +, or **(3)** + (only displays after the first card is created).

  <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-2-add-cards-option-a.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=5c7cdc27e65b2cdc58b0ced668313081" alt="Hub Editor: option a — Step 2: Add Cards" width="2940" height="1912" data-path="images/hub-editor-step-2-add-cards-option-a.webp" />

* **(A)** Here, you can access a range of cards that can be created **From Scratch.** As the name suggests, this involves manually working through various steps to set up your card.

* **(B) From Existing** allows you to import previously created cards from the Content Card repository into this page. This saves set up time and allows you to create a card once and reuse across multiple pages.

* **(C) From Templates** allows you to import Card templates that can then be tweaked to your various needs.

* **(D)** Here you can search the name of the Card you're looking to import.

* **(E)** Here, you can scroll through all available Cards, including **Games, Media, and Embeds** and select the option you wish to create.

**Notes:** For comprehensive instructions on the creation of all available Cards, please access the detailed articles in the Content section of this knowledge base.

### Step 3: Reorder Cards

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-3-reorder-cards-option-d.gif?s=baa06f38e7430679c095783807da379d" alt="Hub Editor: option d — Step 3: Reorder Cards" width="800" height="520" data-path="images/hub-editor-step-3-reorder-cards-option-d.gif" />

* Reorder cards as you wish by hovering your mouse over the left-hand side of the Card tab, clicking the 6 dots and then dragging to the desired position.
* You will now notice that the Card order on the page has been updated.

### Page Settings

* [Step1: Open Page settings](#how-do-i-use-it)
* [Step 2: Set Page details](#how-do-i-use-it)
* [Step 3: Edit SEO settings](#watch-it-come-to-life)
* [Step 4: Update Search and Sharing settings](#how-do-i-use-it)

### Step 1: Open Page settings

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-1-open-page-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=59d646aa7812386106413b70ba8ca05e" alt="Hub Editor: step 3 — Step 1: Open Page settings" width="2940" height="1912" data-path="images/hub-editor-step-1-open-page-step-3.webp" />

* **(1)** Within Editor, select the **Page settings** tab.

### Step 2: Set Page details

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-2-set-page-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=3020706f70e00a6c31d1b1cc4e637600" alt="Hub Editor: step 2 — Step 2: Set Page details" width="2940" height="1912" data-path="images/hub-editor-step-2-set-page-step-2.webp" />

* **(1)** Here you can edit your Page Name if desired.

### Step 3: Edit SEO settings

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-3-edit-seo-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=584b8a7aa63def5d4a95a66afdc1ef56" alt="Hub Editor: step 3 — Step 3: Edit SEO settings" width="2940" height="1912" data-path="images/hub-editor-step-3-edit-seo-step-3.webp" />

* **(1)** Here you can view and edit all SEO details for your page.

* **(2)** If you wish to change any details, click **Edit.**

  <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-3-edit-seo-option-a.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=e0659394dc523ea469575ece14bf0cb9" alt="Hub Editor: option a — Step 3: Edit SEO settings" width="2940" height="1912" data-path="images/hub-editor-step-3-edit-seo-option-a.webp" />

* **(A)** Here you can edit your **Title** so that it is an optimal length for SEO purposes.

* **(B)** Edit the page **Description** to provide a brief outline of the page for viewing in search engines.

* **(C)** Upload a **Favicon** that will be displayed alongside the page listing in search engines. This is usually your brand logo or icon.

* **(D)** Be sure to **Preview** your SEO settings to ensure you're satisfied with how they will appear publically.

* **(E)** Click **Update** to confirm the settings.

* **(3)** Select whether you would like **Indexing** enabled or not. Indexing determines whether the page is visible within search engines.

### Step 4: Update Search and Sharing settings

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/hub-editor-step-4-update-search-step-4.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=3b63be06de34a97578e1124b443df973" alt="Hub Editor: step 4 — Step 4: Update Search and Sharing settings" width="2940" height="1912" data-path="images/hub-editor-step-4-update-search-step-4.webp" />

* **(1)** Here you verify page ownership in Google Search Console by pasting in the Verification HTML tag content.
* **(2)** You can upload a Sharing Image which is the image that will be displayed when sharing the page on social media platforms.
