Content

Content and structure

A flexible page-building system where ordinary texts are assembled conveniently through X-MD, important sections are built with design blocks, and links, translations, and the visual structure remain clear so the business can update the site faster, add new pages, and keep growing its content

In our system, content can be designed flexibly and conveniently, from simple text materials to complex visual sections. This is not an accidental choice, but our own solution, built on extensive experience with website content, translations, and multilingual projects.

We understand very well that one of the main problems of ordinary websites is not only creating pages, but also updating them later, translating them, and expanding them. This is especially noticeable in multilingual projects, where content often has to be duplicated, broken into tiny pieces, and manually assembled again for each language.

That is why our content system is built to stay convenient to work with, both at the start of the project and after launch.

For articles, service descriptions, instructions, and informational pages, it is convenient to use the X-MD block. It turns ordinary MD text into neatly designed website content.

And for important parts of a page such as the hero section, advantages, work stages, cards, galleries, forms, or presentation sections, ready-made design blocks can be used.

This approach means the project is not limited to one format. In some places, clean text with good typography is enough. In others, the information is better presented visually through a banner, cards, a list of benefits, a visual comparison, or a separate interactive element.

Because of that, every page can stay simple to prepare while still looking professional, cohesive, and modern.

Text through X-MD

For ordinary textual content, we use a special X-MD block. It takes simple MD format and turns it into beautifully styled content on the site, with headings, paragraphs, lists, links, and images.

This is especially convenient because ChatGPT and other AI tools understand MD format very well. Text can be prepared quickly, improved, translated, or structured with AI, and then inserted into the X-MD block without complex manual markup.

As a result, content is created faster, edited more easily, and displayed neatly on the page. This becomes especially important when working with multiple languages: instead of translating disconnected short phrases, we can translate complete semantic blocks, while preserving page structure, writing style, and the internal logic of the content.

For example, we can write content like this:

<x-md>

# Large page heading
## Section heading
### Smaller subheading

An ordinary text paragraph that can be used to describe a service, article, instruction, or explanation for the client.

**An important idea can be highlighted in bold**, so it attracts attention immediately.

*An additional emphasis can be styled in italics*, when a softer accent is needed.

- First list item
- Second list item
- Third list item

> A short quote or key thought that should be visually separated from normal text.

</x-md>

On the site, this is shown not as raw text, but as a well-structured content section with images,media embeds, attractive headings, lists, highlights, quotes, and readable structure.

Links inside the text

Inside the X-MD block, links are written in the normal MD format:

For internal pages of the site, the link should always start with /. That way, the link does not depend on the page where it is placed.

For example:

[Link text](/page-path)

[Images](/features/images)

Link to the homepage: [Home](/)

Links can be used not only as separate lines, but directly inside paragraphs as well.
For example, you can write: [Link text](/page-path), and the link will work directly inside the paragraph.

External links also work, for example here is a link to [Google](https://google.com). External links open in a new tab and do not interfere with navigation inside the site.

The system automatically adds the current language to internal links. That means when you are on the English version of the site, the link /technologies opens /en/technologies, while on the main version of the site the same link opens /technologies.

Beautiful design blocks

If the page needs more than plain text and calls for an expressive section, we create ready-made visual blocks.

For example, a small element inside page content can turn into a strong banner on the homepage:

<x-design.hero_particles
title="Website development, Telegram bots, and AI tools"
subtitle="We create projects that can grow: from a simple page to a system with requests, orders, an admin panel,
Telegram mini-app, and automation."
badge="SiteLab Studio"
/>

For the client, this looks like a full visual banner with a large heading, description, atmospheric background, and clean presentation.

At the same time, there is no need to create a new design every time. We simply change the text, while the appearance of the block stays unified and professional.

Easy to translate

This structure is very convenient for multilingual work. The technical structure of the page does not need to be translated, only the semantic content: headings, descriptions, captions, button texts, and the main blocks: headings, descriptions, captions, button texts, and the main blocks.

For example, the same banner for the Ukrainian version can look like this:

<x-design.hero_particles
title="Розробка сайтів, Telegram-ботів та AI-інструментів"
subtitle="Ми створюємо проєкти, які можуть розвиватися: від простої сторінки до системи із заявками, замовленнями, адмін-панеллю, мінізастосунком Telegram та автоматизацією."
badge="SiteLab Studio"
/>

The block structure stays the same, only the text changes. That is why language versions of the site can be created much faster and more neatly.

The same design blocks can be reused across different pages of the site. A block can serve the homepage, a service page, a technologies section, or any other page. There is no need to rebuild the design every time. It is enough to change the heading, description, captions, buttons, or list of elements. Because of that, the site grows faster, keeps a unified visual style, and does not turn into a set of random disconnected pages.

Flexibility for any task

If a project needs a separate block, for example a benefits section, work stages, service cards, a gallery, reviews, a form, a comparison block, or a technologies section, we create it once and then it can be inserted easily anywhere on the page with any text.

As a result, simple materials are convenient to format through X-MD, while important sections are built through attractive design block components. This keeps the site flexible, neat, and convenient for working with content and for future growth.