Using the library, you can insert a ready-made content foundation into the template and customize it for your website.
What you will learn
- Add a Snippet to a position.
- Open the correct snippet library.
- Select a system or custom block.
- Replace sample content and review the result.
Prepare the correct module
A snippet is not inserted directly into a row or componentbox, but into a position (column).
Step-by-step workflow
- Select the position where the content belongs, and drag the selected snippet into it.
- Browse the provided system blocks or switch to My snippets. Use search and category filters if the list is long.
- Choose a block based on its layout structure, not sample text or placeholder photos. You will replace the sample content anyway.
- After inserting, rewrite the headings and body text. For supported system snippets, you can use visual tools directly on the canvas.
- Select images via the Image Bank and verify across desktop, tablet, and mobile views.
- Wait for automatic saving and finally open a clean Preview.
How to choose a suitable foundation
For beginners, the simplest approach is to select a block whose layout matches your goal: a single bold heading with a call-to-action button, several cards for feature benefits, or an image alongside text to present a service. Color schemes do not need to match immediately, as you can align them later using global design tokens and custom CSS.
Insertion may overwrite existing content
Before inserting a different snippet, check whether the module contains text you wish to keep. A new content foundation replaces the module's structure. To experiment safely, clone the module first.
What to customize first
Start with content meaning: the main heading, body paragraph, and button text. Next, configure the link target and image alternative description if the block uses one. Fine-tune sizes and spacing only after actual text is in place. Sample placeholder copy is often shorter than final localized text, which could lead you to design an overly cramped layout.
In clean preview mode, verify that the button looks like an interactive control element, the heading uses a logical hierarchy level, and the copy remains readable even without images loaded. Preview links do not provide full navigation testing, so test true link destinations on the live site after deployment. If the snippet includes a stock photo, prepare to replace it after installation, as exports do not bundle stock assets.
If too many elements appear after insertion, remove them carefully. For system snippets, use their supported visual editing mode; for custom blocks, edit safe HTML code in small increments while checking the preview periodically.