GC.CMS — content management

GC.CMS lets you manage your website content in a natural way, using a visual HTML editor. This guide covers the main menu, the editor and its toolbar, editing system articles (carousel, footer and information bar), and restoring data from backups.

CMS main menu overview

The CMS main menu.
  1. Go to Articles list.
  2. Clear site cache — makes changes visible immediately on the website. It applies mostly to System articles (marked as System resource on the article list), which are normally cached on the website, as well as other cached data such as storehouses and custom metadata for SEO.
  3. CMS config editor — edit site configuration. It lets you manage some site configuration elements (requires a basic understanding of JSON file structure).
  4. Article list — choose an article to edit.
  5. News categories for blogs and latest news.

Shared resources — this section contains another Articles list that can be used across multiple websites of the same customer (articles not related to one website only).

Visual HTML article editor

The visual editor lets you manage website content in a natural way. You can use the toolbar options to manage headers (visual styles), predefined fonts and colours.

WYSIWYG view.
Code view.

Images can be uploaded with a drag & drop operation or by using the dedicated file manager icon in the toolbar.

If you wish to upload and link any file inside an edited article, watch the tutorial below. This lets you insert not only images but also embed files such as PDFs or other data you want to link and offer for download from your website — terms & conditions, forms and so on.

Brief description of editor options

The editor toolbar.

In order, the toolbar buttons are:

  1. Insert link (alternative to drag & drop)
  2. Insert image (alternative to drag & drop)
  3. Insert video (paste a link from YouTube — embeds the video on the website)
  4. Upload file — also lets you create a download link to the freshly uploaded file
  5. History — displays the change history of the edited article and lets you restore a previous version from backup. Backups are created automatically on save.
  6. Detailed mode — an HTML editor helper that displays nested HTML objects and elements such as <div>, <span> and <a>, to help keep an appropriate document structure. It is mostly used when editing System resource articles, such as the carousel editor (LandingPageSliders), where it is highly recommended to use detailed mode and to have at least basic HTML knowledge.
  7. Translations — lets you insert a predefined translation. The translation list is limited but may be helpful. An inserted key visible in the editor is automatically replaced with the correct translation on the website. This option is helpful when editing system resources such as the footer.
  8. Toggle fullscreen.
  9. Code view — an important option that lets you edit the generated HTML directly. It is mostly used when editing system articles, to correct code or add specific style sheets.
  10. Editor shortcuts help list.

Editing system articles — overview

Warning

To edit system articles you must have some HTML knowledge (at least basic) and know how to use the editor's Code View option. You cannot leave any empty or unclosed tags inside a carousel article template — otherwise the homepage will not display correctly, or the whole website will not render as expected.

Making changes visible on the website. All changes made to any system article become visible on the website automatically when the cache expires (maximum 24 h, or less depending on when the current cache was created). If you want changes to be visible immediately, save them, click the Back to CMS button and press Make changes visible now — it will refresh the cached data.

The Make changes visible now button.

To add or remove slides from the carousel:

  1. Open the carousel article on the CMS articles list and choose the appropriate language.
  2. Click Edit; note the displayed warnings.
  3. Turn on Detailed mode using its toolbar icon.
  4. Edit according to the rules described below.

a) Removing a carousel banner. The first banner in the edited article is always shown on the homepage (as the first in the carousel). The rest are randomly selected (3, max 4 are displayed).

Removing a carousel banner in detailed mode.

b) Adding a new banner. Click the Add Slide icon and follow the AddSlide wizard. The new banner is added to the end of the banner list. Order does not matter, as banners are randomly selected (except the first one, which is always visible).

After making changes, check the code accuracy by entering Code view. Correct code should look like this:

<div>
    <div>
        <img src="/images/getFromCms/carousel/LTSHOP1.jpg" alt="">
    </div>
    <div>
        <img src="/images/getFromCms/carousel/LTSHOPlogistics.jpg" alt="">
    </div>
    <div>
        <img src="/images/getFromCms/carousel/LTSHOPprice.jpg" alt="">
    </div>
</div>

Every opening tag must have its closing tag. There should be no empty elements, such as:

    <div>
    </div>

Please watch the video tutorial before editing footer content.

Editing the information bar

The information bar is used to display any required information on the homepage, such as info about working hours during holidays.

The information bar.

Default information bar template:

<div><p><b>Information</b></p></div>

Restoring data from backup

To restore data from a backup, press the History icon on the editor toolbar. Choose the required version (usually the last one), press Restore and save. If you are restoring a system article, refresh the website cache to see the changes.

Important

All photos in articles should be in .webp format. You can use squoosh.app to change a file's extension.