5/10 Build websites with no-code & AI in the editor

You can work entirely without code, have your website created by AI, or combine both approaches.
​

You can easily create your website using our editor
​
There are various ways to do this: you can either start with a ready-made page template, use individual section templates, or build your sections entirely on your own.

When you create a new project or a new page, you can first select one of the available templates.
​
There are also templates for various industries and use cases, so you can choose a suitable basis for a restaurant, an agency, real estate or another type of business, for example.
​
Once you have decided on a template, you enter your project name or page name and the template is loaded.
​

After that, you can customize the entire page in the editor to suit your ideas, for example:

In addition to the home page, you can also create further internal pages for your project, for example "About us", "Services", "Contact", etc. You can also design these pages individually and adapt them to your needs.
​

All elements can be edited and customized directly in the editor.
​

Alternatively, you can select "Start from the scratch" and enter a project or page name.
​
You can then gradually add individual sections to your page via "+ Add section". Various section templates are available for this, which you can then also edit individually.

This way you can build your page step by step, exactly as you envision it.
​

You can also build a section completely on your own. This is particularly useful if you need a specific arrangement or want to implement elements such as a slider, a bento layout or a marquee.
​

When you add a new section, switch to the "Blueprints" tab to do this. There you can, for example, select a template with the desired number and arrangement of columns.
​

You then insert the elements you want into the individual columns yourself, thereby determining how your section is structured.
​

For example, you can create a section with several columns and then place images, texts, buttons or other elements exactly where you want them.
​

You can find more information and guides on this in our Help Center:

With Vibe Coding, you can have individual sections, elements or even complete pages created in Onepage simply by entering text. You describe to the AI what you have in mind, for example a hero area, an interactive pricing overview or a complete landing page. The AI then creates the corresponding section or your page.

You can have your entire website created all at once or build it up step by step, section by section. To get started, we recommend creating the individual sections one after the other.

When you create a new project, you can build your home page directly with AI. To do so, click the blue "Create project" button in the project overview.
​

and then on "Create site with AI". Enter a project name and describe in the AI chat that opens next how your home page should be structured and what it should look like.
​

Alternatively, you can build your home page up step by step, section by section. To do this, select "Start from the scratch" when creating the new project. You can then create your first section via "+ Add section" → "Vibe section - Create with AI".
​

In the AI chat that opens, describe which section you need, what content it should contain and how you envision the design. As soon as the section has been created, you can add more sections and build your home page step by step.
​

For example, you can first create a hero area, then your services, benefits, testimonials and finally a CTA or contact area.

Once everything has been created, you can ask the AI for changes at any time. Simply describe what should be adjusted, for example, and the AI will implement the change you want.

But you are not limited to the AI alone: you can also adjust many properties directly via the controls in the editor. This means you can fine-tune the design, spacing or other settings yourself.

The more specific your details about content, structure, design, colors or features are, the better the AI can implement your ideas. Screenshots or other visual references can also serve as a guide.

Your prompt does not have to be perfect right from the start. Start by creating a first draft and then refine it with specific change requests.

Detailed guide: Vibe Coding in Onepage

Tips for better prompts: Vibe Coding: How to write effective prompts for better results

You do not have to choose one of the two options. Combining AI with the classic editor is often the fastest way to an individual website.

For example, you can start with a ready-made page template, adjust individual areas via the editor and use Vibe Coding for particularly individual sections.

For example, you can:

Especially for special designs or features, Vibe Coding can be a good addition to the existing building-block elements.

Inspiration: Sample projects using Vibe Coding
​

In addition to Vibe Coding, the AI Writer is also available in the editor. It supports you directly with creating and editing the texts for your website.

You can use it to create new texts and headings or to improve, shorten, lengthen, rephrase or translate existing content, for example.

The AI Writer is particularly useful when the layout of your page is already in place and you want to quickly create or optimize individual texts.
​

Detailed guide: AI Writer for your content
​

To get started, you can follow this simple workflow:

This way you can flexibly combine AI and no-code and build your website step by step, exactly as you envision it.
​

💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂