Omni-Site

Omni-Site is a quick way for you to get a responsive SPA site up and running.
API components are pulled from the API which represent different parts of the site.
 

Omni-Site diagram


Each Omni-Site deployed is backed by server-side rendering for better performance and SEO.
Check out our showcase to see some examples of Omni-Sites.


Page composition

 Pre-defined component types will help you build most of what you need for a website. They will make more sense when you start to edit them using the Omni-Admin panel.

Click on the following types to read about them:

Use components of type page to represent a webpage which you can navigate to by specifying the component's key in the URL path (e.g. https://<your-domain>/<component-key>).

Page components used on Omni-Site can render not only the page's own content, but also certain child components including blocks, html and folders.

The easiest way for you to visualize this is by checking out the Omni-Site Page Example.

Components of type block are an important type in Omni-Site. Blocks can be nested and its rich text can contain all sorts of things such as tables, images, HTML and more.

The Omni-Admin panel makes it easy to adjust a block's width and visuals. You have the option to make blocks collapsed, meaning viewers must click the block title to expand it in order to read the content.

Use a component of type html to put in any HTML you want. This could from creating your custom HTML layouts to embedding a YouTube video.

Components of type menu represent either the top navigation menu of the site or one of the submenus inside it.

You can add child components of type:

  • Page  - automatically links to the page
  • URL  - internal or external link
  • Menu - dropdown submenu
  • Title - submenu divider

Components of type title are currently only used as dividers within a menu component.

To add titles to a page, use either a block or html component which provide good flexibility.

Components of type url are used to represent a link.

This is mainly used inside menu components where you can have a link to:

  • An external site (e.g. https://www.example.com)
  • Internal site page (e.g. /my-page)
  • The ID of a particular component on the current page (e.g. #component-key-example if “example” was the component's key)

In addition to menus, URL components can also be rendered from inside a folder component.

Components of type folder are a great way to organize your components. You can put any type of components in a folder.

In addition, folders can also be rendered as a child component of a page. The folder will render links to file, page and URL components. Similarly to block components, you can set the frame color of the folder as well as making it collapsed.

Components of type file are a representation of an actual file you can upload. The component itself contains a link the actual resource URL as well as metadata about the file.

There are 4 useful component types which you can directly edit via the Omni-Admin code editor and immediately start using anywhere.

  • txt - text file
  • css - CSS stylesheet
  • js - JavaScript
  • xml - XML markup (useful for things like the sitemap)

These component types come with a direct URL in which you can use to consume directly.

Reserved Keys

Websites made with Omni-Site have several fixed keys it looks for in a space. You can have multiple spaces for multiple websites.

Here is a list of the keys which should exist in your space:

  • site-config - A JSON component for the purposes of configuring your site.
  • home - A page component which represents your homepage.
  • css - A CSS component which you can use to define custom styling.
  • js - A JS component which you can use to script custom JavaScript.
  • sitemap - An XML component which will be read by search engine bots.
Site Config

The site config allows you to configure your site. Here are the available options which are all optional:

  • siteName - Name of your website.
  • themeColor- Theme color for mobile.
  • order - An object specifying how a particular page's child components should be ordered.
  • blogs - An array of pages that are blog.
  • summaryLength - How many characters to show in blog page blocks and search results before there is a “read more” button. This value defaults to 300.
  • logoKey - Key of a file component which represents the site's logo.
  • mainMenuKey - Key of the site's main menu component.
  • rightMenuKey - Key of the site's right menu component.
  • footerKey - Key of a block or HTML component which is shown as a footer on every page.
  • googleTagManager - The container ID of your Google Tag Manager account. There is limited support for this but you can use it to add analytics and other marketing scripts.

{
     "siteName""Omni-CMS",
     "themeColor""#000000",
     "order": {
          "announcements": { "by""date", "direction""desc" }
     },
     "blogs": ["my-blog"],
     "summaryLength"300,
     "logoKey""logo",
     "mainMenuKey""main-menu",
     "rightMenuKey""right-menu",
     "footerKey""footer",
     "googleTagManager": "GTM-XXXXXXX"
}

Mobile responsive

Sites powered by Omni-Site are all mobile responsive.

Omni-CMS mobile responsive
Ordering

By default, components in a page are ordered by the component's sequence. Configure the ordering for different pages by using the site config.

When a page is a blog, it's child components will automatically be sorted by date descending.

Visibility

Only components marked as both published and visible can be seen by public users. However, users who are logged in to Omni-Admin are also able to see unpublished + visible components.

Tags

Tags on Omni-Site are seen at the bottom of blog entries. The tags appear as links to a page showing other components with the same tag. The search page is used to do this by adding tags as a query parameter (e.g. https://www.omni-cms.com/search?tags=sample).

SEO

One of the problems with SPA websites is the inability for search engines to crawl the site properly. Omni-Site overcomes this by providing server-side rending while still giving visitors the good experience of an SPA site. This along with the metadata configurable for each page component provides your site with better SEO optimization.

HTTPS

All Omni-Sites are secured with HTTPS. You have the option of providing us your own certificate.