BENTECH

Building and Publishing a Website with IONOS AI Website Builder

This course provides a comprehensive walkthrough on creating, customizing, and publishing a website using the IONOS AI Website Builder. The tutorial covers selecting the right…

This course provides a comprehensive walkthrough on creating, customizing, and publishing a website using the IONOS AI Website Builder. The tutorial covers selecting the right plan, configuring subscription add-ons to avoid unexpected charges, and completing checkout. Viewers learn how to initiate the onboarding wizard by feeding business details, categories, descriptions, and desired brand tone into the AI engine. The lesson explores deep customization within the visual editor, including styling fonts, color palettes, responsive device previews (desktop, tablet, and mobile), and managing website settings such as custom head scripts, multi-language translation widgets, and privacy notices. Finally, the tutorial demonstrates section management (headers, footers, articles, and grids), asset replacement, publishing the site live, and attaching a custom registered domain.

Section 1: Introduction and Navigating to Website Builder

Introduction and Navigating to Website Builder • Selecting a Plan and Managing Add-Ons • Completing Checkout and Product Setup

Lesson 1.1: Introduction and Navigating to Website Builder

  • Log into IONOS account dashboard.
  • Navigate to 'Websites & Stores'.
  • Select 'Create new website or store' followed by 'Create a Website'.

The instructor introduces IONOS Web Builder with AI and signs into the IONOS dashboard to initiate a new website project under the Websites & Stores section.

Practical work

  1. Reproduce the demonstrated step for: Log into IONOS account dashboard. and verify the result yourself.

Lesson 1.2: Selecting a Plan and Managing Add-Ons

  • Select between 'Website without store' or 'Website with store'.
  • Review promotional introductory rates versus renewal prices.
  • Uncheck optional paid add-ons to avoid extra monthly charges.

Reviewing available plans (Starter, Plus, Pro) and selecting 'Plus' without a store. The instructor shows how to uncheck pre-selected monthly add-ons (SEO, Email Marketing, Mail Business) to minimize upfront costs.

Practical work

  1. Reproduce the demonstrated step for: Select between 'Website without store' or 'Website with store'. and verify the result yourself.

Lesson 1.3: Completing Checkout and Product Setup

  • Confirm payment details and review refund/cancellation window policies.
  • Allow IONOS to provision the MyWebsite Now Plus instance.

Processing payment via PayPal or credit card and waiting for the automated site provisioning process to complete.

Practical work

  1. Reproduce the demonstrated step for: Confirm payment details and review refund/cancellation window policies. and verify the result yourself.

Section 2: AI Builder vs. Template Selection

AI Builder vs. Template Selection • Configuring Business Information and AI Prompts • Setting Fonts, Colors, and Contact Details

Lesson 2.1: AI Builder vs. Template Selection

  • Pre-designed templates provide static foundations.
  • AI generator builds customized site structure from business prompts.

A comparison between starting from a pre-made static website template and leveraging the AI website generation onboarding flow.

Practical work

  1. Reproduce the demonstrated step for: Pre-designed templates provide static foundations. and verify the result yourself.

Lesson 2.2: Configuring Business Information and AI Prompts

  • Input business name and up to 10 industry categories.
  • Generate or paste a concise business overview.
  • Select an appropriate copy tone: Professional, Playful, Inspirational, or Persuasive.

Inputting company name (BENTECH), adding industry categories, selecting a brand tone (persuasive), and generating professional business descriptions using ChatGPT.

Practical work

  1. Reproduce the demonstrated step for: Input business name and up to 10 industry categories. and verify the result yourself.

Lesson 2.3: Setting Fonts, Colors, and Contact Details

  • Choose typography matching the brand vibe.
  • Select an accent color palette.
  • Provide telephone, contact email, and office address.

Selecting font pairings (Modern, Playful, Decorative), brand color palettes (Tech Blue), and populating optional business contact details.

Practical work

  1. Reproduce the demonstrated step for: Choose typography matching the brand vibe. and verify the result yourself.

Section 3: Reviewing AI Designs and Responsive Preview

Reviewing AI Designs and Responsive Preview • Site Settings, Custom Code, and Global Tools • Customizing Header, Navigation, and Styles

Lesson 3.1: Reviewing AI Designs and Responsive Preview

  • Cycle through generated designs using the carousel controls.
  • Preview layouts in full-screen across mobile, tablet, and desktop views.

Reviewing generated website variations, selecting a primary design to edit, and verifying appearance across desktop, tablet, and mobile viewport modes.

Practical work

  1. Reproduce the demonstrated step for: Cycle through generated designs using the carousel controls. and verify the result yourself.

Lesson 3.2: Site Settings, Custom Code, and Global Tools

  • Upload website logo and favicon.
  • Insert custom tracking scripts or HTML in Head Code.
  • Configure cookie privacy banner and language translation widgets.

Exploring the left navigation panel to configure global styles, page structure/SEO, business profiles, custom head HTML/JavaScript code, and multi-language translator widgets.

Practical work

  1. Reproduce the demonstrated step for: Upload website logo and favicon. and verify the result yourself.

Lesson 3.3: Customizing Header, Navigation, and Styles

  • Toggle visibility of logo, site description, navigation, and social links.
  • Adjust section background color, darkness levels, and section layout shapes.
  • Double-click navigation items to adjust font colors and styling.

Editing header elements, toggling navigation visibility, adjusting social icon links, modifying background colors, and styling navigation typography.

Practical work

  1. Reproduce the demonstrated step for: Toggle visibility of logo, site description, navigation, and social links. and verify the result yourself.

Section 4: Managing Sections, Text, and Media

Managing Sections, Text, and Media • Publishing the Website and Connecting a Domain • Pricing Transparency and Renewal Considerations

Lesson 4.1: Managing Sections, Text, and Media

  • Add sections between header and footer via 'Add Section'.
  • Double-click text or media blocks to invoke the inline editor toolbar.
  • Replace images using upload or IONOS stock library.

Adding pre-built content sections (Articles, Services Grids), cropping or replacing imagery using the stock library, and updating body copy.

Practical work

  1. Reproduce the demonstrated step for: Add sections between header and footer via 'Add Section'. and verify the result yourself.

Lesson 4.2: Publishing the Website and Connecting a Domain

  • Click 'Publish' to make the website publicly accessible.
  • Access 'Connect a domain' under project settings.
  • Select your primary apex domain from the available list.

Publishing the website to a live preview URL, accessing the project settings, and linking an existing IONOS domain to replace the temporary subdomain.

Practical work

  1. Reproduce the demonstrated step for: Click 'Publish' to make the website publicly accessible. and verify the result yourself.

Lesson 4.3: Pricing Transparency and Renewal Considerations

  • Initial promotional period offers low pricing ($1/month).
  • Hosting renewing at regular market prices must be factored into ongoing budget plans.

Important advisory on renewal hosting costs after the initial promotional period, ensuring realistic budget expectations.

Practical work

  1. Reproduce the demonstrated step for: Initial promotional period offers low pricing ($1/month). and verify the result yourself.