With content blocks, you build the individual content areas of your Kopage website. Instead of having to design or program a complete page from scratch yourself, you can use pre-made content structures and fill them with your own texts, images, and other elements.<\/p>\n\n\n\n
Content blocks are therefore among the most important tools in the classic Kopage Website Builder. With them, you can build a page section by section and change existing content at any time later.<\/p>\n\n\n\n
In this guide, we will show you how content blocks work in general, how to edit texts and images, and what you should pay attention to when building a well-structured website.<\/p>\n\n\n\n
\nBriefly explained:<\/strong> A Copage page consists of individual content areas. Content blocks provide you with prepared structures for this purpose, which you can select, arrange, and design with your own content.<\/p>\n<\/blockquote>\n\n\n\n
What is a content block?<\/h2>\n\n\n\n
A content block is a prepared content area within a page.<\/p>\n\n\n\n
Such a block can, for example, provide space for a heading, a text, and an image. Other content blocks can contain multiple columns, larger image areas, or different arrangements of content.<\/p>\n\n\n\n
This saves you from having to code the layout of a section yourself using HTML and CSS.<\/p>\n\n\n\n
For example, a simple page could consist of the following sections:<\/p>\n\n\n\n
Introduction\n \u2193\nServices\n \u2193\nImage and Description\n \u2193\nBenefits\n \u2193\nContact<\/code><\/pre>\n\n\n\nEach of these areas can be implemented with a suitable content block.<\/p>\n\n\n\n
What is the difference between a page and a content block?<\/h2>\n\n\n\n
A page is the main section of your website. Examples of this include the homepage, an about us page, or a contact page.<\/p>\n\n\n\n
Within this page are the actual content sections.<\/p>\n\n\n\n
Put simply:<\/p>\n\n\n\n
Website\n\u2514\u2500\u2500 Page\n \u251c\u2500\u2500 Content Block\n \u251c\u2500\u2500 Content Block\n \u251c\u2500\u2500 Content Block\n \u2514\u2500\u2500 Content Block<\/code><\/pre>\n\n\n\nSo, if you need a new subpage for a service, you first create the corresponding page. Then, you build its content using suitable content blocks.<\/p>\n\n\n\n
We cover creating and organizing pages separately under Managing pages, navigation, and submenus in Kopage<\/a>.<\/p>\n\n\n\n
Add content block to a page<\/h2>\n\n\n\n
First, open the page you want to edit in the Kopage Editor.<\/p>\n\n\n\n
You can then use the add content function to select a suitable content area.<\/p>\n\n\n\n
Kopage provides pre-prepared content blocks with various layouts. Do not simply choose the most visually striking block, but rather a structure that fits your actual content.<\/p>\n\n\n\n
If you want to display a short text next to an image, for example, a corresponding text-image layout makes more sense than a complex block with many elements that you won't even need afterwards.<\/p>\n\n\n\n
\nPractical Tip:<\/strong> Choose a content block based on the structure of your content \u2013 not based on the example texts or example images it contains. You will replace these with your own content anyway.<\/p>\n<\/blockquote>\n\n\n\n
Pre-made content is only a starting point<\/h2>\n\n\n\n
Depending on the selected block, sample texts, images, or other placeholders may already be present.<\/p>\n\n\n\n
These contents are primarily intended to show you the intended structure.<\/p>\n\n\n\n
Do not copy such sample content unverified to your finished website. Replace it with your own texts, suitable images, and information that actually belongs to your company, club, or project.<\/p>\n\n\n\n
Check before publication, in particular, whether there are any sample texts or unneeded placeholders left anywhere.<\/p>\n\n\n\n
Edit text in Kopage<\/h2>\n\n\n\n
You can replace existing text within a content area with your own content using the editor's editing features.<\/p>\n\n\n\n
When writing, you should make sure that texts not only look good visually, but are also easy to understand and clearly structured.<\/p>\n\n\n\n
Long walls of text are tiring to read, especially on smartphones. Therefore, divide more extensive content sensibly into paragraphs and subheadings.<\/p>\n\n\n\n
Using headings correctly<\/h2>\n\n\n\n
Headings are not just for design. They structure the content of a page.<\/p>\n\n\n\n
The main heading describes the central topic of the page. Below it, further headings can structure individual subject areas.<\/p>\n\n\n\n
A meaningful structure could look like this, for example:<\/p>\n\n\n\n
Main topic of the page\n\u2502\n\u251c\u2500\u2500 Service 1\n\u2502\n\u251c\u2500\u2500 Service 2\n\u2502\n\u2514\u2500\u2500 Contact and further information<\/code><\/pre>\n\n\n\nTherefore, use the designated heading formats for this and do not simply use a normal paragraph with very large or bold font to mimic a heading.<\/p>\n\n\n\n
\nImportant:<\/strong> A clear heading structure improves your website's readability and also makes it easier for search engines to understand the page content.<\/p>\n<\/blockquote>\n\n\n\n
Format text<\/h2>\n\n\n\n
Within texts, you can highlight important information using the available formatting functions.<\/p>\n\n\n\n
Use highlights sparingly, however. If almost every second sentence is bolded, large, or otherwise highlighted, the highlighting loses its effect.<\/p>\n\n\n\n
For normal content, readability should be the priority.<\/p>\n\n\n\n
Especially with longer texts, short paragraphs are usually more pleasant than a single very long block of text.<\/p>\n\n\n\n
Using links in texts<\/h2>\n\n\n\n
Links connect content to another page or an external destination.<\/p>\n\n\n\n
A link should describe as clearly as possible to the visitor where it leads.<\/p>\n\n\n\n
For example, instead of just:<\/p>\n\n\n\n
Click here<\/code><\/p>\n\n\n\nis a descriptive link text like:<\/p>\n\n\n\n
View our services<\/code><\/p>\n\n\n\nmostly more helpful.<\/p>\n\n\n\n
After inserting a link, check whether the destination opens correctly and whether internal links actually lead to the desired page of your website.<\/p>\n\n\n\n
Replace images in a content block<\/h2>\n\n\n\n
If a content block already contains a sample image, you can replace it with your own image.<\/p>\n\n\n\n
Choose an image that matches the content of the respective section. An image should support the text and not be used simply because an image happens to be provided at this point in the template.<\/p>\n\n\n\n
If an image offers no added value, a simpler content block without an image can be the better choice.<\/p>\n\n\n\n
Pay attention to the image quality<\/h2>\n\n\n\n
Images should be sufficiently sharp, but not have unnecessarily large file sizes.<\/p>\n\n\n\n
Very small images can appear blurry when displayed larger. Conversely, original files uploaded directly from a camera or smartphone often cause unnecessarily large file sizes.<\/p>\n\n\n\n
For a website, you should therefore prepare images to suit their actual intended use.<\/p>\n\n\n\n
\nPractical Tip:<\/strong> An image that is only displayed at a width of about 800 pixels on your website usually does not need to be embedded as an original file that is several thousand pixels wide.<\/p>\n<\/blockquote>\n\n\n\n
Consider image format and crop<\/h2>\n\n\n\n
Not every image is suitable for every content block.<\/p>\n\n\n\n
For example, a wide landscape photo works differently than a portrait-format photograph or a square product image.<\/p>\n\n\n\n
If a content block is designed for a specific aspect ratio, an unsuitable source image may be cropped awkwardly.<\/p>\n\n\n\n
Therefore, after inserting, check not only the desktop view, but also how the image appears on smaller screen sizes.<\/p>\n\n\n\n
Reuse images and files<\/h2>\n\n\n\n
Kopage features functions for managing uploaded files and images.<\/p>\n\n\n\n
This allows existing media to be reused instead of uploading the same file multiple times.<\/p>\n\n\n\n
This is useful, for example, for logos, team photos, or images that are needed in multiple places on your website.<\/p>\n\n\n\n
We cover more detailed image management as well as photo galleries and sliders under Creating images, photo galleries, and sliders in Kopage<\/a>.<\/p>\n\n\n\n
Arrange Content Blocks<\/h2>\n\n\n\n
The order of the content areas significantly determines how visitors perceive a page.<\/p>\n\n\n\n
A good page guides the visitor logically through the content.<\/p>\n\n\n\n
On a service page, the order could look like this, for example:<\/p>\n\n\n\n
What do we offer?\n \u2193\nWho is the service intended for?\n \u2193\nWhat are the benefits?\n \u2193\nHow does the collaboration work?\n \u2193\nHow can I get in touch?<\/code><\/pre>\n\n\n\nIf you find that a section works better somewhere else, you can change the arrangement of the content areas accordingly.<\/p>\n\n\n\n
Do not use too many content blocks<\/h2>\n\n\n\n
The possibility of using many different content blocks does not mean that you should use as many of them as possible.<\/p>\n\n\n\n
Each section should have a clear purpose.<\/p>\n\n\n\n
When several consecutive blocks repeat the same statement, the page becomes longer without becoming more helpful to visitors.<\/p>\n\n\n\n
By the way, we use the exact same principle in this knowledge base: content should be complete, but not artificially inflated.<\/p>\n\n\n\n
Uniform design of the content areas<\/h2>\n\n\n\n
Even if different content blocks are used, the website as a whole should feel cohesive.<\/p>\n\n\n\n
Therefore, pay attention to a consistent use of colors, fonts, spacing, and image styles.<\/p>\n\n\n\n
If every content area is designed completely differently, even a technically well-structured website can feel chaotic.<\/p>\n\n\n\n
We cover global design settings under Customizing Kopage template and design: Colors, fonts, header, and footer<\/a>.<\/p>\n\n\n\n
Spacing between contents<\/h2>\n\n\n\n
Sufficient breathing room is an important component of good design.<\/p>\n\n\n\n
Text, headings, images, and buttons should not be placed so close to each other that the individual content elements are hard to distinguish.<\/p>\n\n\n\n
Conversely, excessively large gaps can cause related content to appear visually separated.<\/p>\n\n\n\n
Always evaluate a content block in the context of the sections before and after it.<\/p>\n\n\n\n
Buttons and Calls to Action<\/h2>\n\n\n\n
Content blocks can also contain elements that guide visitors to a specific action.<\/p>\n\n\n\n
A button should describe as clearly as possible what happens after it is clicked.<\/p>\n\n\n\n
Suitable labels depend on the respective goal, for example:<\/p>\n\n\n\n
Contact Us\nLearn More\nBook an Appointment\nView Offer\nGo to Contact Form<\/code><\/pre>\n\n\n\nAvoid multiple differently labeled buttons that all lead to the same destination unless there is a valid reason to do so.<\/p>\n\n\n\n
When do I need an app or a module instead of a content block?<\/h2>\n\n\n\n
A content block is primarily suited for the creation and display of normal page content.<\/p>\n\n\n\n
If, on the other hand, you need a special function, an app or a module is used depending on the use case.<\/p>\n\n\n\n
A simple example:<\/p>\n\n\n\n
Heading + text + image\n\u2192 Content block\n\nContact form\n\u2192 Form function\n\nMultiple images as a gallery\n\u2192 Gallery function\n\nBlog posts\n\u2192 Blog function<\/code><\/pre>\n\n\n\nWe cover the various additional features collectively under Using apps and modules in the Kopage website builder<\/a>.<\/p>\n\n\n\n
Content block or new page?<\/h2>\n\n\n\n
Not every new piece of content needs its own page.<\/p>\n\n\n\n
When a topic belongs directly to the existing page content and only requires an additional section, another content block can make sense.<\/p>\n\n\n\n
If, on the other hand, it is an independent topic with more extensive information, a separate page may be clearer.<\/p>\n\n\n\n
For example, three short services can be displayed on a shared page. If each service needs to be explained in detail, separate subpages may make more sense.<\/p>\n\n\n\n
Content blocks on the homepage<\/h2>\n\n\n\n
On the homepage, you should not try to completely accommodate all the information from your entire website.<\/p>\n\n\n\n
The home page should first convey to visitors what your website is about, what important offers or information are available, and how they can get to the relevant subpages.<\/p>\n\n\n\n
Content blocks are well suited to structure this information into clearly separated sections.<\/p>\n\n\n\n
Detailed information can subsequently be found on the respective subpages.<\/p>\n\n\n\n
Check content for smartphones<\/h2>\n\n\n\n
Content blocks are designed for responsive websites. Nevertheless, after major changes, you should always check how your content is displayed on a smartphone.<\/p>\n\n\n\n
Particularly long headlines, large amounts of text, specific image sections, or many consecutive elements can appear different on a small display than on a desktop monitor.<\/p>\n\n\n\n
We discuss mobile control in more detail under Responsive Design: Optimizing Kopage website for smartphones and tablets<\/a>.<\/p>\n\n\n\n
Structuring content for search engines<\/h2>\n\n\n\n
Content blocks are primarily a tool for building your page. For search engines, however, what matters is the content you publish within them and how it is structured.<\/p>\n\n\n\n
Use meaningful headings, clear texts, and sensible internal links. Write content for your visitors and answer the questions they actually have about your topic.<\/p>\n\n\n\n