How to create a website

On this page, you will learn how to create a website using systeme.io.

You can use either the blog or sales funnel feature to create your website.  We recommend using the blog feature if you intend to publish content regularly and have a large number of pages on your site.

If you want to create a simple website with a couple of pages, we suggest using the funnel feature instead.

1. How to create a website using the blog feature

What you'll need:

Step 1: Add new pages to your blog

Click on the Sites tab, then on the Blogs (1), then enter your blog by clicking on its title (2).

Then click on the Pages tab (3), then on Create (4).

Note: When you create a blog, it automatically includes 4 default pages (Home page, About page, Posts page, and Contact page). You can edit these pages or add new ones to your blog.

Enter the name of the blog page and its URL path in the pop-up window that appears, then click Create a blog page (5) to validate the new blog page creation.

You will find more detailed instructions on how to add new pages to your blog on this help page.

Step 2: Set your blog homepage as the homepage of your website

When you create your blog, make sure to set your blog’s homepage as your website’s main homepage (i.e., the main URL without any additional paths). This way, your blog homepage will appear when visitors open your website.

Click on the 3 dots (6) of your chosen blog, then on Settings (7).

Delete the URL feed, then click on Save (8). This way, your blog's homepage will become your website’s homepage.

Step 3: Add the 'Menu' element to your homepage

After setting your blog’s homepage as your website’s main homepage, you’ll need to set up the default Menu element that appears on this page.
To configure the menu of your blog, you must first click on Blog layout (9).

When the blog layout editor opens, click the Menu element (10) on your page to edit the default menu items, delete them, or add new ones (the blog layout allows you to define the elements that will appear by default on all your blog pages).

New menu items can be blog pages, blog posts, or custom URLs. We recommend adding the same number of menu items as your blog pages to ensure visitors can easily access all pages of your site from the homepage.

You can add and customize your menu items using the following options:

  • Title (11): Enter the name of your menu item (e.g., Home).
  • Type of link (12): Choose between Blog link or Custom URL.
  • Menu item link (13):
    • If you select the Blog link, choose an existing blog page from the dropdown list.
    • If you select Custom URL, type the URL directly in the field.
  • Open in a new window (14): Tick this box if you want the link to open in a new tab/window.
  • Delete (15): Removes the menu item from both the settings and the page.
  • Has submenu (16): A toggle that lets you enable or disable a submenu for this item.
  • Open (17): Displays the submenu items while in the editor, so you can preview and edit how they look.
  • Submenu settings (18): Submenu items use the same options as main menu items.
  • Add submenu item (19): Use this to add new submenu items.
  • Add menu item (20): Click this button to create a new main menu item.
  • Move menu item (21): Use the arrows to change the position of a menu item.
    • Clicking the up arrow swaps the item with the one above it.
    • Clicking the down arrow swaps the item with the one below it.

You can also make your menu sticky (visible across the entire page). To do that:

  • Click on the section containing the Menu element, then scroll down the editor on the left side of the screen until you reach the Sticky section (22).
  • Tick the Do you want this to always be visible (sticky)? box, then choose whether you want the section to stick to the top or bottom of the page.
  • You can also adjust how far the sticky menu is positioned from the edge using the Indent option.

Note: your website menu will appear on all your blog pages.

To remove the menu from one of your pages, click on the Don't use blog layout (23).

For more detailed instructions on setting up a blog menu, check out our help page: How to create a blog menu.

Step 4: Design your homepage and the rest of your website pages

You can design your website pages according to your preferences.

To do so, open the editor of the page you want to design by clicking on Edit (24) or by clicking directly on the page's name.

Once you’ve opened your homepage in the editor, you can delete any elements you don’t want to keep, or you can keep the existing elements and adjust them to fit your needs.

Click on the element you want to modify to open its settings, then use the editor on the left side of the screen to customize it.

In our example, we will modify the Text element:

Once you select the element you want to edit, use the editor on the left to make your changes. You can modify the typography, color, size, and position.

In addition to editing existing elements, you can add new elements to your pages, such as the Image element, the Audio element, or the Video element.

Click on the desired element, drag it onto your page, and drop it in an appropriate location.

Here, you can see how to add the Video element to your page as an example.

Note: We recommend searching our knowledge base, where you’ll find help pages explaining how to use the different elements in your page editor.

2. How to create a website using the sales funnels feature

What you'll need:

Once you have created your funnel, add new funnel pages (or steps) to it; these pages will act as your website pages. We recommend adding up to five pages to your funnel.

Step 1: Create new website pages

Open your funnel, then click Add step (1).

Write down your page's title and choose the type, then click Save (2).

Select the template of your choice by clicking on Select (3), and design the page according to your preferences.

Follow this process to create all your website pages (funnel pages).

Step 2: Define a page from your funnel as the homepage of your website

Open your funnel, click on the page you want to set as your homepage, and delete the URL path (4).

Result:

Note: Only one page can be set as the homepage, either one of your blog pages (as explained earlier) or a funnel page.

Step 3: Add the "Menu" element to your website homepage

After setting your funnel’s homepage as your website’s main homepage, set up the default Menu element on this page. Add the same number of menu items as your website pages (funnel steps). This ensures that visitors can access every page of your website from the homepage.

Open the editor of your homepage, drag the Menu (3) element, and drop it onto your page.

Note: You need to edit the chosen template by removing unwanted elements or customizing them to match your preferences.

You can add new menu items and connect each item with a page from your funnel.

To do it, go back to your funnel, click on the page you want to connect to the menu item, and copy its URL (4).

In this example, we created another funnel step (About us) to connect it with our menu item About us.

Go back to your homepage editor, click on the Menu element to open its settings, and then click on Add menu item (5).

Write down the title of the menu item (6) and paste the page URL you have copied (7).

Use the same method to create menu items for all your website pages.

You can delete menu items by clicking on the Trash can icon (8) and rearrange them by clicking on the arrows (9).

If you want the menu to display on every website page, you can save it as a master block and insert it into the rest of your website pages (How to create a master block).

RELATED ARTICLES:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.