KI-Webdesign: Tutorial Videos Step-by-Step

1. Website Tutorial – Introduction & Overview

Before building, a detailed client form must be used to define the style and content for the professional WordPress site using Elementor.

  • Initial Requirement: Always gather comprehensive client details and design preferences using a structured intake form.

  • Project Focus: Build a minimalistic, five-page website using an AI-assisted content strategy and simple accent colors.

  • Methodology: Use a clean, synchronized Elementor template (Template 1) for efficient design consistency across all pages.

2. Website Tutorial – Content Creation for the Website

The video outlines a complete workflow for creating website content: gathering all available client information, generating keyword lists, researching user questions, and producing structured page texts using AI. It also explains how to organize all assets in folders, follow a predefined template, and systematically create every subpage.

  • Step-by-step process: collect data → generate keywords → research questions → create content
  • Use AI tools (Gemini, Ubersuggest, AnswerThePublic) for SEO-driven content creation
  • Follow a consistent template to build all pages and subpages
  • Organize all output (docs, keywords, exports) in a clear folder structure

3. Website Tutorial – Blog Content Creation

The video explains a structured workflow for generating blog articles by using AI prompts together with keyword lists and user-question data. It shows how to input keywords, create articles one by one, manage formatting rules, and organize all blog content into a dedicated folder.

  • Use AI prompts to turn each keyword or question into a complete blog article
  • Maintain formatting rules (e.g., simple tables, no intro/outro comments)
  • Pull topics from essential keyword lists and AnswerThePublic question exports
  • Save every generated article into a clean, organized blog-article folder

4. Website Tutorial – WordPress + Template Setup 

The video explains how to set up a new WordPress staging website by creating a temporary environment, installing WordPress, and preparing it for development. It also outlines the process of importing a prebuilt template, configuring essential plugins, handling hosting/SSL behavior, and ensuring the site backend is fully ready for customization.

  • Create a staging environment and install WordPress for safe website development
  • Remove default plugins and install required tools (e.g., migration, Elementor, SEO, caching)
  • Import the full website template using a migration plugin
  • Verify SSL, activate licenses, and ensure the site loads correctly before building the final pages

5. Website Tutorial – Startseite + Image Edits + Text

The video covers the assembly of a website homepage using Elementor, starting with the meticulous preparation of visual assets. This involved an extensive demonstration of editing and optimizing the main hero image using AI tools to perfect its framing and quality. The remaining time was spent efficiently populating the entire page by transferring pre-written text and selecting and resizing supplementary service and location images to complete the aesthetic and functional design.

  • Platform: The entire homepage was constructed using the Elementor site builder.

  • Hero Visuals: The primary hero image was meticulously edited and AI-enhanced for perfect visual placement and quality.

  • Content: All pre-written textual content was rapidly copied and inserted across various sections of the page.

  • Aesthetics: Supplementary service and location images were resized and standardized to maintain a uniform aesthetic.

6. Website Tutorial – Basic Elementor + WordPress Settings

The video explains how to configure essential WordPress and Elementor settings, including titles, logos, global colors, and typography, to establish consistent branding and structure across a website. It also shows how to adjust design elements directly within Elementor, ensuring that global styles like buttons, fonts, and images apply uniformly throughout all pages.

  • Set core WordPress details such as site title, logo, language, and permalink structure
  • Configure global design settings in Elementor (colors, typography, button styles)
  • Upload and optimize logos and images for consistent branding
  • Apply global styling so new pages automatically inherit the correct design system

7. Website Tutorial –  Subpages Setup + Menu

The text explains how to build and structure sub-pages in a WordPress/Elementor website by reusing templates, inserting AI-generated content, adjusting layouts, and adding optimized images. It also covers how to organize pages into a clean menu structure so the website navigation reflects the final page hierarchy.

  • Create each sub-page by inserting AI-generated text and relevant images
  • Reuse Elementor templates (via “Save as Template”) to keep consistent layouts
  • Optimize, rename, and compress all images before uploading
  • Build and organize the navigation menu once all page drafts exist
  • Follow the same workflow for every service page to maintain uniform design and structure

8. Website Tutorial – Header and Footer Setup

The video explains how to build and structure sub-pages in a WordPress/Elementor website by reusing templates, inserting AI-generated content, adjusting layouts, and adding optimized images. It also covers how to organize pages into a clean menu structure so the website navigation reflects the final page hierarchy.

  • Create each sub-page by inserting AI-generated text and relevant images
  • Reuse Elementor templates (via “Save as Template”) to keep consistent layouts
  • Optimize, rename, and compress all images before uploading
  • Build and organize the navigation menu once all page drafts exist
  • Follow the same workflow for every service page to maintain uniform design and structure

9. Website Tutorial – GDPR Pages (Impressum / Datenschutz / Cookies)

The video explains how to make a website legally compliant by completing the required legal pages through an AI-assisted workflow, while preserving the correct HTML structure. It also shows how to verify that the preconfigured cookie consent system is functioning correctly for new visitors.

  • Copy the existing HTML structure and use AI to fill in the legal content
  • Replace all placeholders carefully while keeping heading tags and formatting intact
  • Insert the staging domain so it can be auto-replaced later during migration
  • Leave the preconfigured cookie banner as-is and test it in an incognito browser
  • Ensure both the legal notice and privacy policy are saved and visible on the site

10. Website Tutorial – SEO-Settings with Rank Math Plugin

The video explains how to optimize website pages for search engines by using an SEO plugin directly inside the page editor to set focus keywords, titles, descriptions, and image data. It also shows how to improve internal linking through manual links and automated rules to strengthen page connections and rankings.

  • Use an SEO plugin to define a main keyword and supporting keywords for each page
  • Generate optimized page titles and meta descriptions with AI assistance
  • Add alt text to images to improve accessibility and search visibility
  • Insert internal links between related pages to boost structure and relevance
  • Use auto-linking to connect keywords across the entire website automatically
  • Aim for a “green” SEO score before moving on to the next page

11. Website Tutorial – Hosting Provider + Domain Management

The video explains how to choose and work with hosting providers, including what hosting actually is, how domains are connected to web space, and which type of package is typically recommended. It also shows how to access the hosting dashboard to manage WordPress installations, domains, email accounts, and SSL certificates.

  • Hosting = paid web storage connected to a domain, similar to cloud storage for websites
  • Choose standard WordPress hosting (not managed) for most projects
  • Check included features such as domain, storage, email inbox, and SSL certificate
  • Use the hosting dashboard to install WordPress, manage domains, and view storage usage
  • Create professional email addresses using the connected domain
  • Activate an SSL certificate for security and legal compliance
  • All major providers follow a similar structure and process in their backends

12. Website Tutorial – Customer Feedback + Revision Round

The video documents a real customer feedback and revision round, showing how client voice memos, documents, and visual references are translated into direct website changes.

  • The video explains that this is a real client project where feedback, notes, and a logo idea are received and systematically implemented on the site
  • It shows how customer-provided text is organized, rewritten if needed, and integrated into homepage sections using AI support and structured editing in Elementor
  • The video demonstrates duplicating and restructuring sections to highlight core services such as internal medicine, prevention, diabetes, and obesity
  • The video explains transforming a client’s logo concept into a usable, polished website logo and uploading it into the header
  • Finally, it shows a practical system for tracking completed revision tasks by marking them and validating progress before moving on

13. Website Tutorial – Final Check (Checklist) + Go-Live Preparation, including Blog Preperation

The video walks through a structured final check of a real client’s WordPress/Elementor website before go-live, using a detailed two-part checklist to ensure quality and consistency. It shows how to systematically verify content, SEO, responsiveness, links, and blog setup so the site is ready for migration to the client’s own hosting environment.

  • The video uses a two-part checklist that is duplicated per project and followed step-by-step as a double-check system
  • It verifies that all customer inputs, documents, and revision notes are fully implemented across all pages
  • It checks WordPress settings like title, logo, Elementor license, and correct contact-form email routing
  • It cleans up page names and templates, removing unnecessary “Template” pages and keeping only the blog template
  • It reviews header and footer for correct logo, contact data, descriptions, menus, and legal links
  • It performs a full responsive check on desktop, tablet, and mobile and fixes spacing, images, and typography
  • It ensures all content pages achieve a green Rank Math SEO score while excluding legal/system pages
  • It tests all internal and external links, including menu, buttons, service boxes, Google Maps, phone/mail, and booking links
  • It confirms that all placeholder text and dummy content have been removed
  • It creates a first blog article using the template, adds images, adjusts headings, assigns featured images, and prepares the blog for future posts

14. Website Tutorial – Migration and Go-Live of the final Website

The video demonstrates how to migrate a finished WordPress site from the staging environment to the client’s real hosting account using All-in-One Migration, including plugin setup, export, import, troubleshooting, and final activation. It also shows how to place the site in “under construction” mode for a soft launch until the client approves the go-live.

  • The video logs into the client’s hosting provider, opens the correct webspace, and installs a fresh WordPress instance for migration
  • It explains uninstalling all default plugins and adding only the two required All-in-One Migration plugins (core + pro)
  • It walks through exporting the full staging website and importing it into the client’s new domain environment
  • The video shows how to resolve plugin update or extension issues that can block export/import functions
  • It demonstrates re-logging into the migrated site, verifying successful transfer, and enabling the “under construction” mode
  • It explains that this soft launch keeps the site hidden until the client reviews the final result and approves the public go-live

14.5 – BONUS: Customer Presentation Video

Customer Presentation Video

15. Website Tutorial – Final Touches + Website Maintenance with MainWP

The video shows the final revision round based on customer feedback and then prepares the website for ongoing maintenance. It applies last content fixes, adjusts mobile layout, sets up automated backups, and connects the site to the central monitoring system.

  • The video processes the client’s voice memo and document, removing incorrect medical content (e.g., insulin pumps) and updating text sections exactly as requested
  • It fixes mobile layout issues by adjusting overlays, splitting sections, and shortening the homepage for a cleaner mobile experience
  • Elementor Pro is reactivated after migration to restore full functionality
  • Monthly automated backups are configured via All-in-One WP Migration using Peak Cloud with six retained versions
  • The MainWP Child plugin is installed and linked to the agency’s central dashboard for future monitoring and maintenance
  • The video concludes by summarizing the full tutorial series and directing viewers to the main tutorial hub for rewatching any step