Bootstrap Layout Generator

The Bootstrap Layout Generator allows you to create the structural layout of your website using drag and drop. You define which sections appear on the page, the order in which they are displayed, and how they behave on different screen sizes. The actual content is managed separately within zCMS and is independent of the layout.

 

Generator Layout

The generator is divided into three main areas:

 

zCMS Components
On the left-hand side, you will find all available layout components, such as Navigation, Header, Content, Teaser, and Footer. Enable the required components or drag and drop them to the desired position.

 

Structure and Preview
The center area displays the current page structure. Here you can move containers and components, change their order, and switch between the structure view and the preview. The Desktop, Tablet, and Mobile views allow you to check how the layout is displayed on different screen sizes.

 

Properties
After selecting a container or component, its properties are displayed on the right-hand side. Here you can configure the Bootstrap grid, responsive visibility, as well as margins and padding. Changes are applied immediately within the generator.

 

Working with Containers and Components

A layout consists of containers, each of which can contain one or more components. By combining different containers and Bootstrap grid settings, you can create both simple and complex page layouts.

Components can be moved within a container or dragged into another container. The order of containers can also be changed. Components and containers that are not currently needed can be disabled and re-enabled at any time.

 

Bootstrap Grid

The Bootstrap grid defines the width of a container or component for different screen sizes. The integrated grid editor provides settings for the LG, MD, SM, and XS breakpoints.

For each screen size, you can define the column width and horizontal offset. Missing values are automatically inherited, so you do not need to work with the technical grid syntax.

 

Responsive Layout

Responsive visibility settings allow you to control whether a container or component is displayed or hidden on specific screen sizes.

Using the Desktop, Tablet, and Mobile preview modes, you can immediately verify how your layout behaves on different devices.

 

Spacing and Formatting

Margins and padding can be configured for both containers and components. Margins correspond to the CSS margin property, while padding corresponds to the CSS padding property.

Depending on the selected element, additional formatting and layout options may also be available.

 

AI Support

If an AI service has been configured for your zCMS installation, the "Create Layout with AI" function will be available.

Simply describe the desired page layout as precisely as possible. For example, specify which sections should be included, how they should be arranged, and whether individual sections should span the full browser width or be displayed within a fixed-width container.

The AI generates an initial layout draft based on your description and loads it into the Layout Generator. You can then modify and refine the result manually.

Your existing layout is replaced only within the generator. The changes are not permanently applied until you save them.

 

Undo and Redo

The Undo and Redo functions allow you to revert or reapply changes step by step. This also applies to layouts generated by the AI.

 

Preview

The preview displays how the current layout structure will appear on the website. It is intended to verify the page layout only. Actual text, images, and other editorial content continue to be managed through the corresponding zCMS content areas.

 

Saving

All changes are initially made only within the open Layout Generator. They become part of the selected template only after clicking the "Save" button. The "Reload Values" function restores the last saved version. Any unsaved changes will be lost.

AI Functions in zCMS

The AI functions in zCMS allow content to be created, improved, optimised for search engines and supplemented with structured data directly within the administration area. OpenAI or Google Gemini can currently be used as the AI provider.

The AI functions access only the content selected in the respective assistant or explicitly submitted for processing. Changes are not saved automatically. You can review the results before applying them and then transfer them specifically to the relevant fields.

 

Configuring the AI Provider

The AI provider is configured in the zCMS administration area using the AI provider settings. Three details are required for each provider:

• API Key: The personal access key for the respective AI provider.
• API URL: The complete address of the API endpoint being used.
• Model: The AI model to be used for requests.

OpenAI and Google Gemini can currently be used as providers. The selected provider applies to all AI assistants in zCMS. The individual assistants work independently of which provider is used.

After saving the access details, the connection can be checked using the test function. The test verifies whether the API can be reached, whether the API key is valid and whether the specified model can be used.

If the connection is successful, a corresponding confirmation is displayed. If an error occurs, you will receive a message, for example if the API key is invalid, the model is unavailable, the API URL is incorrect or a request limit has been exceeded.

API keys are not displayed in content, error messages or logs. Nevertheless, the access details should only be available to authorised administrators.

 

Available AI Assistants

Four AI assistants are currently available in zCMS:

• Create Text
• Improve Text
• Optimise SEO
• Create Structured Data

Create Text

The "Create Text" function can be used to generate new content based on your own description. You specify the topic to be covered, the target audience and the content requirements that should be taken into account.

The AI uses this information to create formatted HTML content, which is then displayed in a preview. The content can be reviewed and subsequently transferred to the selected text field.

If the page title is still empty, the AI can also create a suitable title. An existing title will not be overwritten.

For standard pages, the generated content is transferred to the designated main text field. For news items, you can choose whether only an introduction or an introduction together with the main text should be created.

For individual pages, the text editors available in the selected template are detected automatically. Before generating the content, you select the text field into which the new content should be transferred.

If the selected target field already contains text, a warning is displayed before applying the result to indicate that the existing content will be replaced.

 

Improve Text

The "Improve Text" function revises existing content. It can be used for language corrections, improved clarity, a more fluent writing style and a clearer structure.

Before submitting the request, you can select which existing text fields should be included. Empty fields are not offered. By default, all available fields containing content are selected.

The AI processes only the selected fields. Content that has not been selected remains unchanged and is not transmitted to the AI provider.

After processing, a comparison is displayed for each field:

• Before: The content currently stored in the field.
• After: The version revised by the AI.

The revised version can be applied individually for each field or collectively for all fields. The results can also be copied as HTML or as plain text.

The page title is not changed by this function.

 

Optimise SEO

The "Optimise SEO" function can be used to revise existing content for search engines. It considers aspects such as structure, readability, headings, search intent and the use of relevant terms.

As with text improvement, you can select which filled text fields should be optimised. Fields that have not been selected are neither transmitted nor changed.

The optimised content is also displayed in a before-and-after view. You can review and apply each result individually or apply all changes together.

Additional options allow you to specify which SEO aspects should receive particular attention. If the "Show SEO Notes" option is enabled, supplementary information is displayed above the content comparison.

These notes may cover points such as:

• missing or unsuitable headings
• improvements to readability
• possible internal links
• missing content aspects
• keyword usage and search intent

If no further significant SEO measures are recommended, a corresponding message is displayed.

The page title is not changed by the SEO function.

 

Create Structured Data

The "Structured Data" assistant analyses the current page and creates structured data in JSON-LD format. Structured data helps search engines understand the content and meaning of a page more effectively.

Depending on the page content, structured information can be generated for organisations, products, events, articles, contacts or frequently asked questions, for example.

The AI may only use information that is actually visible or verifiable on the existing page. Information that is not present must not be invented or added.

The result is checked and validated as JSON-LD before it can be transferred to the designated field.

Existing structured data is not overwritten without review. Before saving, the result should also be checked for factual accuracy, particularly with regard to prices, addresses, contact details, dates and legally relevant information.

 

Use on Standard Pages

On standard pages, the AI functions are available for the existing content fields. Depending on the structure of the page, several text areas can be selected, processed and applied individually.

When using "Create Text", a title can also be generated if no title has yet been entered. With "Improve Text" and "Optimise SEO", the title remains unchanged.

 

Use for News Items

For news items, the AI assistant also takes the introduction into account in addition to the standard text fields.

When creating text, you can choose whether only an introduction or an introduction together with the main text should be generated. A newly generated introduction begins with a short subheading.

With "Improve Text" and "Optimise SEO", the introduction can be selected and processed together with the other filled text fields.

 

Use on Individual Pages

Individual pages use different content fields depending on the template. zCMS therefore automatically detects all text fields defined as standard HTML editors in the template.

Technical fields, image selectors, number fields, colour selectors, switches, select fields and simple input fields are not transmitted to the AI.

With "Create Text", you select exactly one detected text field as the target. With "Improve Text" and "Optimise SEO", several filled text fields can be selected at the same time.

The existing storage and output logic of the individual page remains unchanged. The AI assistant only adds or changes the selected content.

 

Reviewing and Applying Results

AI-generated results are never saved automatically. After each request, you can first review the suggested content.

Depending on the assistant, the following functions are available:

• apply an individual result
• apply all results together
• copy HTML content
• copy plain text
• discard suggestions

Applied content is inserted into the relevant editor and the associated form field. It is only saved when you save the page or news item in the usual way.

 

Usage Notes

AI-generated content should always be reviewed for factual and technical accuracy before publication. This is particularly important for:

• prices and product information
• legal statements
• medical or technical information
• dates and event information
• addresses and contact details
• translations and foreign-language content

The more precise the task description, the better the AI can create the desired content. Wherever possible, specify the topic, target audience, desired tone, length and important terms.

For very extensive pages, it is advisable to select only the fields that are actually required. This reduces processing time and API costs.

Final responsibility for published content remains with the respective author or administrator.

Canonical tags in zCMS

Canonical tags are used to tell search engines which version of a page should be considered the authoritative main version. As a result, duplicate content is correctly merged and ranking signals are focussed on the correct URL.

 

In zCMS, canonical settings can be defined per content and per language.
This means that each language version of a page may require its own canonical.

 

When do I need a canonical?

A canonical is always set if the content of this page is not the "original version".

 

Typical examples:

• A page has been copied or reused for several areas.
• The same text appears again elsewhere.
• There are external references to an identical page.
• A page should deliberately refer to another URL (e.g. archive or campaign pages).

If the page is the original content, no canonical needs to be entered. In this case, the zCMS automatically generates a self-referential canonical.

 

Where can I find the canonical settings?

The settings can be found in the page editor under

"More options for this content" → "Canonical" section

 

The following fields are available there:

 

"Is this page duplicate content?"

Here you can specify whether the current page is a copy or variant of other content.

 

• No
  The page is the original.
  The zCMS automatically creates a self-referential canonical.
  
  
• Yes
  The page is a duplicate and should refer to another page.
  In this case, an ID or URL must be entered in the next field.

"Object ID Canonical"

Here you specify which page is the original. There are two possibilities:

 

A) Canonical to an internal page

Enter the object ID of the original page.

 

Example:

1234

The zCMS automatically converts the ID into the appropriate full URL.

 

B) Canonical to an external page

If the original page does not exist in zCMS, enter the full URL.

 

Example:

https://www.externedomain.com/beispielseite/

This URL is used unchanged as the canonical.

 

 

How the zCMS processes the canonicals

The system automatically generates the correct HTML entry in:

 

If no duplicate:

The page shows a canonical to itself:

<link rel="canonical" href="URL-of-the-current-page" />

 

If "duplicate content = Yes" and an ID has been entered:

The canonical refers to the original URL loaded by ID:

<link rel="canonical" href="URL-of-original-page" />

 

If a complete external URL was entered:

<link rel="canonical" href="https://www.externedomain.com/..." />

 

 

Important notes

• Canonicals are language-dependent.
  Each language version can have its own canonical settings.
• A canonical does not replace a redirect.
  If a page is no longer used, a 301 redirect should also be set.
• Avoid cross-domain canonicals.
  DE pages should refer to DE, EN to EN, etc.
• Only fill in if there really is a copy.
  Incorrectly set canonicals can displace content from the index.

PopUp module

1. Overview
   The pop-up module allows you to configure and control up to five independent pop-ups within your website. The pop-ups can be displayed on individual pages, in entire folders (including subpages) or throughout the entire website. Each of the five configurations is managed in its own tab within the module.
   
   
2. Prerequisites
   Create pop-up content
   First create the object that is to be displayed later as a pop-up (for example, a page in zCMS with text, images or forms). This object requires a unique object ID, which is entered later in the module configuration.
   
   
3. Access to the configuration
   In the zCMS administration, navigate to Modules → PopUp. There you will find five tabs (PopUp 1 to PopUp 5), each of which contains a separate configuration.
   
   
   
   
4. Configuration of a pop-up
   1. Activation
      Option: Activate pop-up
      Switches the pop-up on or off. If this option is deactivated, the configuration is ignored.
   2. Select pop-up content
      Field: Object ID of the pop-up content
      Enter the object ID of the previously created content object (e.g. 123).
   3. Define display areas
      Field: Object IDs for the display
      Specifies the pages on which the pop-up should appear.
      • Multiple IDs: separate with a semicolon, e.g. 45;78;123.
      • All pages: enter 0.
      • If the ID is a folder, the pop-up appears on all subpages of the specified folder.
   4. Set waiting time
      Field: Waiting time in seconds
      Delay between page call-up and pop-up display (e.g. 5 for 5 seconds).
   5. Determine display frequency
      Field: How often should the visitor see the pop-up?
      • Always: The pop-up appears every time the page is called up.
      • Limited display: A cookie prevents the pop-up from being displayed again for the selected duration.
   6. Time-controlled display
      Fields: From / To
      Time window in which the pop-up is displayed.
      Format: YYYY-MM-DD SS:MM (e.g. 2026-06-15 15:00).
      Note: If both fields remain empty, the pop-up appears at all times. If it is to be displayed time-controlled, both fields must be filled correctly.
   7. PopUp size
      Fields: Width and height (pixels)
      Defines the size of the pop-up. The actual size depends on the content and the available space.
      
      
      
      
      
5. Functionality
   • Page-related display: The delivery of the pop-up is controlled based on the entered object IDs.
   • Cookie control: If the display frequency is limited, a cookie is set to prevent repetitions.
   • Inheritance for folders: If a folder ID is specified, pop-ups also appear automatically on all subpages.
     
     
6. Application examples
   • Announcement of a special offer on all pages (0 as ID).
   • Customised pop-up only on a specific product page.
   • Folder-based display for an entire content area.
   • Time-controlled promotions for events or seasonal campaigns.
     
     
7. Tips
   • Use the waiting time so that the pop-up does not appear immediately when the page is loaded.
   • Use pop-ups sparingly so as not to impair the user experience.
   • Test all settings on a less frequented page before you switch the pop-up live everywhere.

Optimisation settings for performance and display

The optimisation settings include the following functions:

 

1. Cache
   The cache and logging are controlled by this setting. In live mode, the cache should be activated for optimum performance, but deactivated in development mode to make changes visible immediately.
   
   
2. WEBP compression for images
   If this option is activated, all PNG and JPG images are automatically converted to WEBP format. This applies in particular to images that are delivered via show_bild.php and index.php - i.e. around 90 % of all images on the page.
   
   
3. Automatic image compression
   Previously, JPG images were processed by default with a compression rate of 90 % via show_bild.php. Now the compression level can be set directly in the admin interface. The function includes all JPG and WEBP images, including those delivered via index.php. The default value is now set to 80 %.
   
   
4. Maximum image size
   The maximum pixel size for the delivery of images can be set here. The default value is 1,500 pixels. If larger images are to be used for content or e.g. headers, this value must be adjusted accordingly. If an image is inserted that exceeds the maximum size, the server automatically scales it to the specified maximum width or height during delivery. The original image remains unchanged in the system; only the delivered version is scaled down. Smaller images (under 1,500 pixels) remain unaffected unless the image size is explicitly specified, e.g. in the Tiny tool.
   
   
5. Delete image cache
   This function is still available under "Administration -> zCMS" and is offered here again for completeness. Images are processed in zCMS the first time they are called up and saved in a cache directory. If an image has already been converted once, it is loaded directly from this directory without being processed again. After changes to the above parameters, the image cache must be emptied to ensure that the updated settings are applied to all images and that outdated cache versions are not used.

 

Cookie Consent (Free Cookie Consent)

If you add content to zCMS that needs to work with our Cookie Consent Tool, please note the following:

 

1. JavaScript content that is added in the zCMS plug-in fields "Analytics Code" and "Marketing Code" belongs to the category "Targeting" and "Tracking". This content should only be displayed if the visitor agrees to the "Targeting and advertising cookies" and the "Tracking and performance cookies". Please note the information on Google Consent Mode V2 below so that your Google Tag Manager and Analytics tags are stored correctly. You must tag all other scripts yourself. Please follow the instructions below.
2. JavaScript content that you add elsewhere (e.g. metatags or "Appearance => Custom JavaScript code" will NOT be converted automatically. You must adapt these scripts yourself. Please follow the instructions below.
3. If you want to use iFrames such as YouTube or Google Maps with the Cookie Consent Tool, change the attribute "src" to "data-src" in the source code of the iFrame. As soon as the visitor agrees to the cookies, "data-src" is automatically converted back to "src" and the iFrame is loaded.

From 03/2024, according to Google, your script for Adwords, etc. must comply with "Google Consent Mode V2". Please also refer to the instructions below.

 

Display of Cookie Consent Tool

The colours of the button in the Cookie Consent Tool are influenced under "Appearance => Configuration Template => Colours". The Cookie Consent Tool uses the primary colours here. The Cookie Consent Tool is subsequently called up via a "cookie symbol" at the bottom left of the website. Its colours are controlled by the "Top button". You can change these colours under "Appearance => Configuration Template => General".

 

If you have any questions or need help, please contact the support team at the e-mail address provided. We will be happy to assist you at any time.

 

INSTRUCTIONS

HOW TO LABEL YOUR JAVASCRIPT SCRIPTS
https://www.cookieconsent.com/#how_to_tag_your_javascript_scripts

 

HOW TO INTEGRATE GOOGLE CONSENT MODE V2

First, please add the following script so that all services are rejected first

 

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalisation': 'denied',
'analytics_storage': 'denied'
});
</script>

 

Then add your Google code (e.g. Google Tag Manager or Google Analytics). Google then automatically controls the visibility based on the selection in the Cookie Consent Tool:

 

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','YOUR-GOOGLE-TAG-ID');</script>

 

You can find more information at this URL. Please note steps 1 and 2. Step 3 is already integrated in our Cookie Consent Tool and works automatically.

https://www.cookieconsent.com/#how_to_integrate_google_consent_mode_v2

 

COOKIE CONSENS FAQ

https://www.cookieconsent.com/#cookie_consent_faqs

Use DeepL integration

From version 8.12.0, zCMS has a translation interface to DeepL. With the help of the interface, pages, news, appointments, folders and individual pages can be automatically translated into over 20 languages with a single click.

 

Activating DeepL

To use the DeepL interface, you need at least a free DeepL API account and an authentication key for the DeepL API. You can find this in your DeepL API account at deepl.com/pro-api.

 

 

Go to "Administration => Settings => General" and then scroll to "DeepL Translations".

 

Activate the DeepL interface there, select the type of your DeepL API account (a normal DeepL account is not sufficient!) and then enter the authentication key, which you will find in your DeepL API account.

 

 

Using DeepL in the zCMS wizard

Open a page, message, appointment, individual page or folder and switch to the new language. Add the text there in the original language. The best way to do this is to use the copy function ("Copy the content of the default language to the language version ...) at the top of the page.

After you have added the original content, you will find a note about the DeepL interface before the meta information:

 

 

In the screenshot, you are in the Danish language version of the page and can click on "Yes" to automatically translate the content into Danish. After you have clicked on "Yes" and all translations have been carried out in the background, you will receive a success message:

 

 

All text fields and HTML editors on the page have been automatically replaced with the new Danish texts. Now all you have to do is save the page!

Activate multi-language wizard

You can set the file wizard in zCMS so that you can create or edit all language versions in one wizard. To do this, go to "Administration -> Settings -> General" under "File wizard", select the "Multi-language" entry and save the new settings. The new wizard will then be available to you when editing.

 

ZIP version

The "Multi-language" file wizard also gives you the option of uploading a ZIP file with several files for the different languages at once. To do this, the individual files must be named according to the following scheme:

 

File name structure
LANGUAGE_FILENAME.EXTENSION

 

Example with German and English file:
001_header.jpg
002_header.jpg

 

 

ZIP version with JSON _meta.json file

If you add a "_meta.json" file to the ZIP file, you can also upload all data for each language version directly. The JSON file has the following structure:

 

{

"001" : {

"file" : "DATEINAME",

"title" : "TITLE*",

"desc" : "DESCRIPTION",

"html" : "HTML DESCRIPTION",

"hyperlink" : "HYPERLINK",

"date" : "DATE",

"docType" : "DOCUMENT TYPE",

"languages" : ["de", "en", "nl"]

},

"002" : {

"file" : "FILENAME",

"title" : "TITLE*",

"desc" : "DESCRIPTION",

"html" : "HTML DESCRIPTION",

"hyperlink" : "HYPERLINK",

"date" : "DATE",

"docType" : "DOCUMENT TYPE",

"languages" : ["de", "en", "nl"]

},

...

}

 

This data is used to automatically save the fields "Title", "Description", etc. with the values of the JSON file.

You can define a "speaking URL" for each page in the zCMS. Normally, the zCMS automatically creates URL addresses according to the following scheme:

 

DOMAIN/LANGUAGE/ID/TITLE.htm

 

Here is an example:

If we create a page with the title "Contact" on the domain www.newcms.de in "English" and this page has the object ID "34", the automatic URL would look like this:

 

https://www.newcms.de/en/34/contact.htm

 

There is nothing wrong with this URL. However, it would be prettier if the ID "134" did not exist. This is where the "speaking URLs" come into play. For each folder or page, you can create your own URL in the "SPEAKING URL" field in the object's edit mode. However, you only have access to the area after the "DOMAIN" and the "LANGUAGE". Please also note the rules and restrictions of this feature, which are listed at the bottom of this article.

 

 

If you enter "contact.htm" in the field "SPEAKING URL" in our example, then the URL for the page is now:

 

https://www.newcms.de/en/contact.htm

 

Please also note that the "/en" in our examples is only available if you have activated the option "Activate prefix for languages" under "Administration -> Settings -> General". This is not necessary for single-language sites. But it is mandatory for multilingual websites!

 

Folder structure starts with v8.5

Since version 8.5, folder structures can also be created with the "speaking URLs". Let's show the possibilities with an example:

 

You have a product folder with several products and would like to create URLs like https://www.newcms.de/en/products/pocketwatch.htm and https://www.newcms.de/en/products/writstwatch.htm. To do this, enter "products/pocketwatch.htm" and "products/wristwatch.htm" under "SPEAKING URL". The part "products" can be different everywhere and has nothing to do with the an existing folder "products". Each "speaking URL" is completely independent. This gives you complete freedom in naming your " speaking URLs".

 

Update for folder structure from 8.20

No postfix (e.g. .htm) needs to be added to a directory structure. This makes it possible to use "products/product1". IMPORTANT: "products/product1/" does not work. The URL must not be ended with a /.

 

products/watches.htm => CORRECT
products/watches/ => ERROR
products/watches => CORRECT

 

 

Important notes

There are strict rules for " speaking URLs". Only in this case they work. Furthermore, if you do not follow the rules, it is possible that parts or the entire website will no longer be accessible. Therefore, please take great care to comply with these rules:

 

1. Each "speaking URL" must be unique. The same "speaking URL" may not be used again. Not even in another language version.
2. A "talking URL" is not allowed to start with "/".
3. No special characters or umlauts may/should be used in a talking URL.
4. It is not allowed to have a sequence of numbers between two "/"s and at the beginning
   123/products/watches.htm => ERROR
products/123/watches.htm => ERROR
products/watches123.htm => CORRECT
5. No spaces are allowed in a "speaking URL
   products/mans watches.htm => ERROR
products/mans-watches.htm => CORRECT
6. Each " speaking URL " must have a file extension. We recommend .htm or .html
products/watches.htm => ERROR
products/watches.htm => CORRECT
7. Please be careful with upper and lower case letters. We recommend to write the entire "speaking URL" in lower case