Build a Website Online for Free Without Coding

The way modern websites are built is changing from the ground up. The days when only programmers with a knowledge of code and complex systems could create a professional website are over.

New tools are arriving that simplify the whole process and turn it into a clear environment where almost anyone can build a website. Linelabox is exactly that kind of tool: an advanced visual editor of Joomla templates that puts everything you need to build a website into your hands, without knowing a single line of code.

The present: simple website building in real time

Linelabox is an online editor in which you can build websites and immediately see what they will look like. Its main advantage is simple, clear controls that remove the technical obstacles. That lets you focus only on what matters: the look and functionality of your website.

How does working in the editor go?

The whole process is designed to be as simple and fast as possible:

1. Choosing a template You start by simply logging in to your account. You can either pick one of the ready-made templates for a quick start, or give yourself complete creative freedom and start with a blank page (Blank). You can also clone your own templates. Linelabox also supports a community of users. You can easily share your own templates with others and, in turn, take inspiration from their work if they offer a template for sharing.
2. Launching the online editor Once you have chosen a template, just click "Load Template". If the template suits you, click the "Customize Template" button to start building. You find yourself in the editor itself, which is divided into several levels for detailed control.

Rows and columns: the basics of website structure

Imagine you want to hang pictures on a wall. First you think about where everything should go so that it looks good. A web page works in a similar way. You need a system that helps you arrange text, images and other content so that everything is clear and pleasant to look at.

That is exactly what rows and columns are for, and they are the basis of the so-called grid system. If you use Joomla (which is a kind of building kit for websites) together with Linelabox, built on the Bootstrap framework (a set of ready-made tools and rules that make your work easier), it is actually very simple.

What are "rows" in web design?

Think of a row as a horizontal line or band that you add to the page. It is like a line in an exercise book. Each such row is ready for you to put some content into it. You can have up to 20 rows on a page, one below the other, so that the content unfolds gradually downwards.

And what are "columns" in web design?

Now imagine you want to divide your horizontal row into smaller, vertical parts. Those are columns. You can then put something different in each column, for example text in one, an image in the second and a video in the third.

Bootstrap's main rule for layout

Bootstrap works with a simple rule: the width of every row is divided into 12 imaginary units. It is as if you had a ruler divided into 12 equal parts. When you add columns to a row, you have to decide how many of those units each column takes up.

• Want one big column that takes up the full width? Give it a width of 12 units.
• Want two columns side by side that are equally wide? Each of them will be 6 units wide (6 + 6 = 12).
• Want three equally wide columns? Each will be 4 units wide (4 + 4 + 4 = 12).
• Or perhaps one wide and two narrow? You can have a column 6 units wide and next to it two columns 3 units wide (6 + 3 + 3 = 12).

This 12-unit rule is great because it gives you enormous freedom in how you lay out and arrange the content on the page. At the same time it ensures that everything fits together nicely and nothing spills "outside".

What can you do with rows and columns in the editor?

You can intuitively set a "6,6" split for desktop, "6,6" for tablet and "12" for mobile, and Linelabox automatically takes care of the correct adaptation. It is like a jigsaw. You see the page taking shape straight away.

• Splitting into columns: You can divide each row exactly as you need, into one column, two, three or even more, and the editor takes care of the correct layout.
• Dragging content: You then simply drag whatever you want into the prepared columns with your mouse. These are so-called modules, ready-made blocks that extend the functionality of the website, such as a menu, a page footer, a login form or an image gallery. The Custom HTML module also has snippets (smaller, frequently repeated pieces of content, such as buttons or icons).
• Custom look (styling): You can adjust every row and column so that it looks exactly as you imagine. You can give it a different background colour, add a border, set the spacing around the content (this is called padding) or adjust the alignment of the text inside. Everything that affects the appearance is called styling.

A page for every device: responsive design

We live in a world where people view websites on a great many different devices: on large computer monitors, on medium-sized tablets and above all on the small screens of mobile phones. And you want your page to look great on all of them.

This magic is called responsive design. And Bootstrap helps you a great deal with it. Every row you create has its own settings for the different types of display, which you adjust by clicking the icons at the top of the editor:

• For mobiles: How will the row and its content behave when someone opens it on a mobile?
• For tablets: What will it look like on a tablet?
• For computers: And how will it look on a large computer monitor?

The online editor has handy toggle buttons that let you "switch the view". One click shows you how your row will appear on a mobile, another click on a tablet, and another on a computer. And the great thing is that you can adjust the pages differently for each device.

• Hide something only on mobile: For example, you have a large image on the desktop version, but on a mobile it would take up too much space. You can set that image simply not to show on mobile.
• Change column widths for tablet: What is ideal on a computer may be too wide on a tablet, or the other way round. You can set different column widths for tablet so that the content fits better.
• Adjust text or its alignment: On a mobile you might want the text centred and in a larger font, on a computer left-aligned and smaller. No problem, you can set this separately for each device.

Thanks to these settings you can be sure that your website will always look professional and be comfortable to read and use, whatever device a visitor opens it on. And that is absolutely essential for a good website.

Modules: the building blocks of your website

When building websites, we often need to place various recurring pieces of content or functions on a page. This might be the main navigation, contact details, an overview of the latest articles or an image gallery. In Joomla!, the system Linelabox is built on, these self-contained, reusable blocks are called modules.

You can think of modules as smart "mini-applications" that perform a specific task. They are not whole pages but flexible blocks that you can add to predefined positions within your website template. Each column has a name, for example "CBOX2", and the position in the template is then named the same way.

Linelabox offers you a wide range of basic and advanced modules ready to use. The most frequently used include, for example:

• Custom HTML/Snippet: A universal module into which you can insert any custom HTML code, text, images or other content.
• Menu: Modules for displaying the main navigation of your website.
• Login: Lets users log in to your website.
• Breadcrumbs: Displays the navigation path (breadcrumb trail) so users can easily find their way around the site.
• Articles. Category, Latest, Most Read, Newsflash: Various modules for dynamically displaying Joomla articles, whether from specific categories, the latest, the most read or in the form of short news items.
• Footer: A module intended for content in the page footer, such as contact details, copyright or links.
• Search: Provides a search box for searching the content of your website.
• Tags. Popular: Displays the most popular tags used on your website.

In addition to these basic modules, Linelabox also supports third-party modules such as Phoca Cart Modules (e-commerce modules), AcyMailing Modules or Virtuemart Modules (e-commerce modules), which gives you great scope for extending the functionality of your website.

The main advantage of modules is their flexibility and reusability. You can place one module on several different pages without having to configure it again each time. Linelabox also lets you easily change their position, appearance and behaviour, giving you full control over the final design and functionality of your website.

Modules in the Linelabox editor: simple controls

Working with modules in the Linelabox editor is really simple. Once you have your rows and columns ready, you simply pick a module and drag it with your mouse into the column where you want it. And that is it! It appears where it should. You can choose from ready-made styles (skins), or create your own customised looks and save them to the library for use on other parts of the website.

Module visibility settings: where a module shows and where it does not

Sometimes you do not want a module to appear on every page.

You can set each module to display only:

• On the home page only: Ideal for a special welcome, an advert or a current offer.
• By menu: You can specify that the module is shown only when the user clicks a particular menu item (such as "Our services").

This gives you full control over how your page behaves and what is displayed where, which is great for clarity and user-friendliness. All modules can be cloned.

Custom modules and the "snippet" library: quick building blocks

In addition to the basic modules that Joomla! offers, the Linelabox editor also gives you a special Custom HTML module. This is where you find something called snippets.

Think of snippets as ready-made, finished building blocks that are already nicely designed and assembled. They are "templates in miniature" for specific parts of a website. Their main magic is that they speed up website building enormously. Instead of building something from scratch, you simply take a finished piece and just tweak it a little.

The most commonly used snippets include:

• CTA (Call to Action): Blocks that prompt the user to do something, such as "Buy now!", "Download the free e-book!" or "Contact us!". They usually contain a prominent button.
• Accordion (collapsible sections): "Concertinas": you click a heading and the text unfolds beneath it, another click hides the text again. Ideal for frequently asked questions.
• Countdown / Counter (timers and counters): A countdown to the end of a sale or a counter of products sold.
• Hero section (visually striking page intros): A large, eye-catching introduction at the top of the page, often with a background image or video, a heading and a button to grab immediate attention.
• Others: Progress bar, Tabs, Testimonials, Team, Icons, Tables and many more.

Detailed module styling: how to give a module the right look

You can adjust the appearance of every module you place on the page. Websites are built on code called CSS (Cascading Style Sheets). This code tells the browser how everything should look: what colour the text is, how big the image is, where the spacing goes and so on.

The structure of a module looks roughly like this:

• section.cbox, the largest "wrapper box" for the module area.
• #cbox, the row into which the module is inserted.
• #cbox2, the column, the specific position of the module.
• #cbox2 .style_box, the wrapper directly around the module content.
• Modules Header and Modules Content, the header (title) and body (content) of the module.

Thanks to this structure, you can use CSS rules to style any part separately: the heading, background, text, spacing and more.

Direct CSS code editing: for those who want full control

If you are more experienced and understand CSS, the Linelabox editor gives you the option of editing the CSS code directly.

Open a special window and write your own CSS rules exactly as you need. That way you can create a unique look that would be hard to achieve by clicking alone.

Helpers are included too, such as the INSERT IMAGE button, which makes it easier to insert background images without having to write complex code. This button is directly connected to the Pixabay stock photo library, which means you can search for images by keyword, filter them by category (such as nature, technology, people…) and insert the chosen image straight away as a background for a section, row, position or module.

Imagine you have a house and you want everything to match: the colours of the walls, the type of furniture, the size of the windows. On websites, all of this is determined by a special language called CSS.

CSS tells the web browser how everything should look: what colour the text is, what font it is written in, how far apart the images are, whether an element has a border or how big an element is.

The "Custom CSS" section is the place where you can write your own special rules that influence the overall look of your template (the overall plan of the website).

What can you do with custom CSS?

• Change colours: For example the background colour of the whole page, the text colour or the colour of buttons.
• Adjust fonts (typography): You can choose which font the text is written in, how bold it is, how big the heading is.
• Set spacing: Decide how far apart the different parts of the page are so that they are not stuck together.
• Borders: Add borders around images or blocks of text.

Why is custom CSS great?

Because you can tailor the website exactly to yourself and your ideas. You can play with the details that make your website unique.

Detailed page editing (Edit Page)

This section is your main workspace. Here you do not work with code but directly with what you see. When you click a module on the page, or its parent element, a menu with editing options opens.

What can you do in the Edit Page section?

• Linelabox lets you upload and apply predefined module styles (so-called skins) or save your own customised looks to the library for future use.
• Edit content: Change the text in a module, upload a different image and so on.
• Add custom styles: You can give a specific module or its wrapper a special colour, border or other styling that applies to it alone.

You simply click everything together and see the result in real time.

Undo and redo

Everyone makes a mistake now and then. You delete something by accident or move something where it does not belong. But in the Linelabox editor there is nothing to fear. You have the excellent "Undo" and "Redo" functions at your disposal.

• Undo: When you do something and do not like it, or you have made a mistake, simply click the "Undo" button (it is an arrow pointing left) and the last change is reversed. It is as if nothing had happened. You can go back several steps this way.
• Redo: If you have undone something and then decide that the previous change was actually good, click the "Redo" button (the arrow pointing right) and you return to the change you had just cancelled.

Why are the Undo/Redo functions so important?

• Safe experimentation: You can play with the layout, try different styles or change content without worrying that you will break something or lose your work. You can always go back.
• Rescue from mistakes: Deleted a whole module by accident? No problem, just click "Undo".
• It works everywhere: You will find these handy arrows at the top of the editor, and they work reliably even after major changes and across different parts of your template.

Quick preview and full page preview

When you build a website, you naturally want to see what it looks like. The Linelabox editor offers you two ways to look at your work.

Quick Preview

• What it does: Immediately shows you all the changes you have just made.
• How it works: You do not leave the editor environment, so you can carry on working. It is a small window or view directly in your workspace.
• When to use it: Ideal for a quick check of whether the text alignment worked, whether the image appeared where it should or whether the button has the right colour. Simply for small, instant checks.

Full Page Preview

It is like looking at the finished house from outside, without the scaffolding and building-site fences.

• What it does: Shows you the page exactly as your visitors will see it.
• How it works: All the distracting elements of the editor disappear: no grids, no side panels, no tools. You see only the clean, finished page.
• When to use it: Perfect for presenting to a client, checking the overall impression and fine-tuning details.

You will find both options easily at the top of the editor and can switch between them simply, depending on what you need to check at the moment.

Colour palettes, fonts and styling: your personal web designer

This part is about giving your website the right "look & feel", that is how it looks and comes across. The Linelabox editor acts here as your personal designer, letting you control the appearance without having to understand complex code. You have full control over the colours, fonts (typography) and the overall look of every part of the website.

• Predefined colour palettes and custom colours
• Ready-made sets: Instead of inventing colours from scratch, the editor offers you several prepared colour palettes. These are sets of colours that go well together. You can apply them to the whole website and immediately see how the colours of the text, background, buttons and so on change.
• Your own creation: If you have a clear idea, you can also create your own colour palette. You choose the main colour, complementary colours, and colours for backgrounds and text.
• Overview: The editor also shows you all the colours you are currently using on the website. This is great because you can see straight away whether a colour that does not belong has crept in by mistake, and it helps you keep the website's colours consistent. The editor also recognises very similar colours and offers to unify them, for example by keeping only one of them and automatically replacing the other colours on the website with it.

Choosing and managing fonts

Fonts matter a great deal on a website; they affect readability and the overall impression. The Linelabox online editor gives you plenty of tools to play with fonts, simply, clearly and without writing code.

• Google Fonts library: You have access to the huge Google Fonts database directly from the editor. That means hundreds of different fonts you can use.
• Filtering and searching: You can search for fonts by name or filter them by various criteria:
  • By type:
    • Serif: Classic fonts with "feet". Suited to a serious, traditional look.
    • Sans-Serif: Modern, clean fonts without serifs. They look simple and readable.
    • Monospace: Technical fonts in which every letter has the same width.
    • Google Fonts: The whole database.
  • By popularity: The most popular fonts.
  • By "subsets": Whether the font contains Czech characters, Greek letters and so on.
• Instant preview: The editor immediately shows you how the text will look in the given font, so you do not have to search and try things out laboriously.

Text styles and details

You can also set:

• Font size,
• Line height,
• Font weight (for example bold, normal, light),
• Text colour,
• Spacing between paragraphs and letters (letter spacing, margin, padding),
• Styles for headings, subheadings and paragraphs.

This feature lets you design the look of specific subpages of your website directly in the editor. These are the pages that Joomla! (your "building system" for the website) automatically generates for different types of content.

What are "Component Pages"?

In Joomla!, the different types of content (for example your articles, products in an online shop, blog posts or even the shopping basket) are displayed to you through so-called components. A component is essentially a "specialist" in a certain type of content. For instance, one component takes care of how individual articles are displayed, another of the online shop.

Each such component has its own "output", that is what you see on the screen. And it is the appearance of these outputs that you can design and polish precisely in Linelabox.

In the editor you will find a special "Component Pages" section, which offers you ready-made "templates" for displaying these components. This means you can prepare in advance what the layout will look like, which colours, fonts (typography) or background images will be used for these specific types of page. You can even decide where modules (such as a side menu, adverts or forms) will be placed on these pages.

Which components can you design in the editor?

Basic Joomla! components (the so-called "core components")

• Category Blog (list of articles in blog layout): What the page that displays the list of your blog articles (with previews, images, dates and so on) will look like.
• Featured Articles (list of featured articles): The look of the page that displays only specially selected, "recommended" articles.
• Category List (list of articles in a given category): What the page that lists all the articles in one specific category will look like.
• Single Article (template for displaying one article): What the detail will look like when someone clicks through to one specific article. (Where the image goes, where the title, where the text, where the author and so on.)

Phoca Cart (e-commerce system)

• Categories View (overview of categories): What the pages with the list of product categories will look like.
• Category View (list of products in a category): What the pages look like when a user opens one category and sees the list of products in it.
• Product View (product detail): And, importantly for an online shop, what the detail of one specific item, the product, looks like (with images, description, price, "Add to basket" button and so on).

Virtuemart (another popular e-commerce system)

This functionality is Premium (that is, available only in the paid version of the editor), but it lets you do the same as with Phoca Cart, just for the Virtuemart e-commerce system:

• Categories View
• Category View
• Product View

Why is this so important and useful?

Most people who build website templates run into one problem. The home page looks amazing, but as soon as you click through to an inner page (say an article detail or a product in the online shop), it suddenly looks as if someone else had made it. The look is inconsistent or visually "unfinished", and that spoils the overall impression of the website.

Thanks to the "Component Pages" feature in Linelabox, you solve this problem in advance and directly in the editor, without having to do any programming.

• You see what you get: You immediately see what, for example, the list of your blog articles or the detail of a specific product in the online shop will look like.
• Visual fine-tuning: You can add your own background images, change the look of buttons, adjust text and fonts so that everything matches the overall look of your website.
• Module customisation: For each type of Component Page you can set where the modules (the small blocks such as a menu or search) will be displayed, so that it makes sense for that type of page.
• A unified look: Your whole website will look professional and consistent, from the home page to the individual subpages.

How do you work with it?

1. In the top menu of the editor, simply choose the "Component Pages" option.
2. A list of page types appears (see the ones we described above). Choose the one you want to edit (for example "Single Article" for the article detail or "Product View, Phoca Cart" for the product detail in the online shop).
3. The editor immediately displays a visual representation of the chosen page type. It is as if you had a live preview.
4. All your changes are saved automatically and reflected when you export the template and use it on your website.

The Component Pages feature in Linelabox is like having a designer and a programmer in one. It gives you a huge advantage because you can design every subpage of the website separately, as if you were building a complete, finished website.

No more frustrating switching back and forth, wrestling with code or visual "gaps" in the look of your website. With Linelabox you have everything under control in a visual interface. And, crucially, the resulting template will look consistent, professional and uniform across the whole website. And that is exactly what you want for your visitors.

Frequently asked questions