Kopage user interface and editor explained

After launching the Kopage website builder, you will enter the user interface where you build and edit your website.

The Kopage editor is designed so that you can make many changes directly and visually. Instead of editing your website's HTML code, you work with pages, content areas, texts, images, design settings, and additional modules.

In this guide, we show you the most important areas of the classic Kopage website builder and explain what you need them for.

Briefly explained: In the Kopage Editor, you manage the visible content and design of your website. Technical hosting tasks such as email accounts, databases, or general hosting settings continue to be managed via cPanel.

How do I open the Kopage editor? #

In CURIAWEB, you start Kopage directly via cPanel.

There you will find the Kopage Website Builder at the very top as the first icon.

If you haven't started Kopage yet, you can find the complete instructions at Launch Kopage Website Builder via cPanel.

Understanding the user interface #

For working with Kopage, you should first distinguish between a few basic areas.

In the website builder, you mainly work with:

• your pages and the navigation,
• the actual page content,
• Content Blocks,
• Design and Theme,
• images and files,
• apps or modules,
• as well as settings and other website features.

These areas interlock, but fulfill different tasks.

The website itself is the focus #

Kopage is a visual website builder. That is why you do not work exclusively in abstract settings pages, but rather edit the structure and content of your website using the editor functions provided for that purpose.

For example, if you want to change some text, you edit the corresponding content. If, on the other hand, you want to change the fundamental appearance of the entire website, you use the design or theme functions.

Practical Tip: Before making a change, briefly consider whether it affects only a single piece of content or the overall design of the website. This will help you find the right area in the editor much faster.

Pages and subpages #

One of the most important tasks in the Kopage Editor is managing your pages.

For example, a typical corporate website might consist of the following pages:

Home
About us
Services
References
Contact

Additionally, you can organize content hierarchically and use subpages.

For example:

Services
├── Consulting
├── Planning
└── Implementation

Kopage makes it possible to create subpages and arrange them via drag and drop, or to build submenus from them.

We cover the complete page and navigation management under Managing pages, navigation, and submenus in Kopage.

What are content blocks? #

Content blocks are a central component when building a Kopage website.

Instead of having to code every content structure from scratch yourself, you can use pre-made content blocks and then customize them with your own texts and images.

Depending on the desired structure, such blocks can contain, for example, different combinations of texts, images, and other elements.

This allows you to build a page step by step from individual content areas.

Briefly explained: A page is the parent area – content blocks form the individual content sections within this page.

Add content to a page #

When adding new content, Kopage provides various types of elements or content areas.

These include, among other things, prepared content blocks as well as apps and modules for special functions.

This allows you, for example, to treat a normal text/image section differently than a photo gallery or a contact form.

We explain in detail how to select, insert, and subsequently edit content blocks at Create content with Kopage: editing content blocks, texts, and images.

Move content blocks #

A page often consists of several content blocks.

For example:

Header / Introduction
        ↓
Services
        ↓
About the Company
        ↓
References
        ↓
Contact

The order of such content areas can be adjusted within the editor.

This allows you to change the structure of a page without having to recreate all the content.

Edit text #

Texts are among the most common contents of a website.

In the Kopage editor, you can replace existing texts with your own content and style them accordingly.

When editing, you should not only pay attention to the appearance, but also to a meaningful structure of headings and regular text paragraphs.

Avoid in particular designing entire pages with different font sizes just to make text look visually like a heading. Use the intended heading structures for this purpose.

Edit and replace images #

Existing images within a design or content block can be replaced with your own images.

Kopage also features tools for managing files and images.

This saves you from having to re-upload an image from your computer every time you use it.

We cover detailed image management, galleries, and sliders under Creating images, photo galleries, and sliders in Kopage.

What is the Files Manager? #

The Files Manager is used to manage files that you use within your website.

This applies in particular to images, but can also include other files required for your website.

A central file area is especially practical if you want to use the same media in multiple places on your website.

For files that visitors are supposed to download, we will handle the setup separately later at Manage files and offer downloads with Kopage.

Design and content are two different things #

This distinction is particularly helpful when working with Kopage.

Contents are for example:

Text
Images
Pages
Forms
Galleries
Blog posts

To Design on the other hand, include, for example:

Theme
Colors
Fonts
Header
Menu design
General appearance

For example, if you want to change the text „Welcome to our website“, you are editing content.

If, on the other hand, you want to change the website's basic font or color scheme, you are in the design section.

Theme and Design #

Kopage provides themes and templates as a starting point for the appearance of a website.

The design can be adjusted afterwards. This includes, among other things, various layout, menu, color, and font options.

This means you don't have to program the basic design of your website yourself using HTML and CSS.

We will cover the design in detail in the next article under Customizing Kopage template and design: Colors, fonts, header, and footer.

Important: Do not hastily change the entire theme if you only want to adjust a single text, an image, or a content block. Content and global design should be considered separately.

Apps and modules #

Not every function of a website consists only of text and images.

For additional features, Kopage offers apps or modules.

Depending on the function, this includes, for example:

• Blog,
• Photo gallery and slider,
• Forms,
• Newsletter,
• FAQ,
• Event calendar,
• Google Maps,
• Shop,
• and further extensions.

These modules add features to your website that go beyond a normal content block.

You can find an overview of the additional features later under Using apps and modules in the Kopage website builder.

What is the difference between a content block and an app? #

A content block serves primarily to structure and display page content.

An app or a module, on the other hand, provides a specific function.

Simplified:

Content Block
→ Content and layout of a page

App / Module
→ Additional website function

A text-image combination, for example, is typical page content. A contact form or a photo gallery, on the other hand, requires its own functionality.

Navigation and Menu #

Über die Navigation gelangen Besucher zu den verschiedenen Bereichen deiner Website.

Kopage unterstützt auch komplexere Seitenstrukturen mit Unterseiten und mehreren Menüebenen.

Seiten lassen sich entsprechend organisieren und in Menüs einordnen.

Eine klare Navigation ist besonders wichtig, damit Besucher schnell verstehen, welche Inhalte deine Website anbietet und wie sie diese erreichen.

Drag & Drop richtig verstehen #

Kopage verwendet Drag & Drop an verschiedenen Stellen zur Organisation von Elementen.

Damit kannst du beispielsweise Seiten beziehungsweise Unterseiten neu anordnen oder Inhalte innerhalb der vorgesehenen Strukturen organisieren.

Drag & Drop bedeutet, dass du ein Element mit der Maus aufnimmst, an die gewünschte Position bewegst und dort wieder ablegst.

Practical Tip: Verschiebe bei einer bestehenden Website zunächst nur ein Element und kontrolliere anschließend das Ergebnis. Besonders bei Seiten und Untermenüs kann eine Änderung der Position gleichzeitig die Navigation beeinflussen.

Responsive Darstellung #

Kopage erstellt responsive Websites. Das bedeutet, dass sich das Layout an unterschiedliche Bildschirmgrößen anpassen kann.

Trotzdem solltest du deine Website nach größeren Änderungen auf verschiedenen Bildschirmgrößen kontrollieren.

Ein Inhaltsbereich, der auf einem großen Desktop-Monitor gut aussieht, kann auf einem Smartphone beispielsweise durch sehr lange Überschriften, ungeeignete Bilder oder eine ungünstige Inhaltsmenge weniger übersichtlich wirken.

Darauf gehen wir ausführlich unter Responsive Design: Optimizing Kopage website for smartphones and tablets one.

Website-Einstellungen und SEO #

Neben den sichtbaren Inhalten besitzt eine Website Einstellungen, die für Besucher nicht immer unmittelbar sichtbar sind.

Dazu gehören beispielsweise Angaben für Suchmaschinen und weitere technische beziehungsweise organisatorische Einstellungen.

Kopage bietet unter anderem Möglichkeiten für individuelle Meta-Angaben auf Seiten sowie weitere SEO-Funktionen.

Die Suchmaschinenoptimierung behandeln wir separat unter SEO with Kopage: Page titles, metadata, URLs, and search engine optimization.

Statistiken und weitere Funktionen #

Kopage bietet neben dem eigentlichen Editor auch Funktionen zur Auswertung beziehungsweise Einbindung von Website-Statistiken.

Solche Funktionen gehören nicht zum eigentlichen Seitenaufbau, können aber später hilfreich sein, um die Nutzung deiner Website besser zu verstehen.

Google-Dienste, Sitemap und Statistikfunktionen behandeln wir gesammelt unter Google, Sitemap, Analytics and website statistics in Kopage.

Die integrierte Hilfe #

Kopage verfügt über integrierte Hilfefunktionen. Wenn du innerhalb des Editors bei einer Funktion nicht weiterkommst, lohnt sich deshalb auch ein Blick in den dort verfügbaren Hilfebereich.

Die integrierte Hilfe ergänzt unsere CURIAWEB Knowledgebase: Während wir hier insbesondere den Einsatz von Kopage innerhalb der CURIAWEB Hosting-Umgebung erklären, können die direkt im Builder verfügbaren Hilfen zusätzliche Hinweise zur jeweiligen Funktion geben.

Was sollte ich als Anfänger zuerst lernen? #

Du musst nicht jede Funktion des Kopage Website Builders kennen, bevor du deine erste Website erstellst.

Für den Einstieg reichen zunächst fünf Bereiche:

Seiten
   ↓
Navigation
   ↓
Content Blocks
   ↓
Texte und Bilder
   ↓
Design

Wenn diese Grundlagen sitzen, kannst du zusätzliche Funktionen wie Formulare, Blog, Galerie, Mehrsprachigkeit oder Shop ergänzen.

Was sollte ich nicht im Kopage Editor suchen? #

Kopage ist für deine Website zuständig, aber nicht für sämtliche Funktionen deines Webhostings.

Wenn du beispielsweise ein E-Mail-Konto erstellen, eine Datenbank verwalten oder bestimmte serverseitige Hosting-Einstellungen ändern möchtest, verwendest du dafür cPanel und nicht den Kopage Editor.

Die Trennung ist grundsätzlich:

cPanel
→ Hosting verwalten

Kopage
→ Website erstellen und bearbeiten

Wie gehe ich beim Bearbeiten einer bestehenden Website vor? #

Wenn deine Website bereits online ist, solltest du Änderungen kontrolliert durchführen.

Bearbeite zunächst den gewünschten Bereich und kontrolliere anschließend, ob sich die Änderung nur dort ausgewirkt hat, wo du sie erwartet hast.

Bei globalen Designänderungen solltest du zusätzlich mehrere Seiten prüfen, da solche Einstellungen das Erscheinungsbild der gesamten Website beeinflussen können.

Important: Eine Änderung an einem einzelnen Content Block und eine Änderung am globalen Theme können völlig unterschiedliche Auswirkungen haben. Prüfe deshalb vor größeren Anpassungen, in welchem Bereich des Editors du arbeitest.

Wie geht es nach der Benutzeroberfläche weiter? #

Wenn du die grundlegenden Bereiche des Editors kennst, solltest du als Nächstes das Erscheinungsbild deiner Website verstehen.

Dabei geht es um Template beziehungsweise Theme, Farben, Schriftarten, Header, Navigation und weitere globale Gestaltungselemente.

Therefore, we continue with Customizing Kopage template and design: Colors, fonts, header, and footer.

Summary #

Der Kopage Editor ist die zentrale Arbeitsoberfläche für deine Website. Dort verwaltest du Seiten, Inhalte, Content Blocks, Bilder, Design und zusätzliche Apps beziehungsweise Module.

Seiten bilden die grundlegende Struktur deiner Website. Content Blocks strukturieren die Inhalte innerhalb einer Seite, während Apps und Module zusätzliche Funktionen wie Formulare, Blog oder Galerien bereitstellen.

Design-Einstellungen beeinflussen dagegen das übergeordnete Erscheinungsbild deiner Website und sollten von der Bearbeitung einzelner Inhalte unterschieden werden.

Technische Hosting-Aufgaben bleiben weiterhin Aufgabe von cPanel.

Wenn du diese grundlegende Trennung zwischen Seiten, Content Blocks, Apps und Design verstanden hast, wird die weitere Arbeit mit Kopage wesentlich übersichtlicher.