To import AI Kits into WDesignKit, follow these simple steps:
Navigate to the Templates section and explore the variety of available AI Website Kits. You can filter by Page Builder (Elementor or Gutenberg) and by Free/Pro options to find the kit that best suits your needs.
Once the required plugins are installed and activated, you can proceed to the next step and continue setting up your website using the AI Kit.
Step 1: Browse and Select a Website Kit
- Open your WDesignKit Dashboard.
- Go to Templates → Browse Templates.
- You can search for a Kit name from the search bar.
- Use the available filters to narrow down your choices:
- AI Compatible (ensure you’re selecting AI-powered templates)
- Page Builder (e.g., Elementor, Gutenberg)
- Free/Pro (choose between free or paid templates)
- Template Type (select from options like Page Kits, Full Pages, or Sections).
- AI Compatible (ensure you’re selecting AI-powered templates)
5. Below the Page Kits section, check the box next to the type of template kit you want to use. Options include:
- Agency: Templates designed for agencies.
- WooCommerce: Templates tailored for eCommerce websites.
- Creative kit: For creative portfolios or businesses.
- Portfolio: Perfect for showcasing work or services.
- Entertainment: Suitable for entertainment or media websites.
- And more (e.g., Blog, Corporate, Educational, etc.).
6. Scroll to the Plugins section and select the plugins you need for your template. The recommended plugins include:
- Elementor: A popular drag-and-drop page builder.
- Elementor Pro: The pro version with additional features.
- The Plus Addons for Elementor: Enhances Elementor with advanced widgets and tools.
- The Plus Addons for Elementor Pro: The pro version with more powerful options.
- Newtork Blocks: A plugin for creating custom blocks in Nexter.
- Nexter Blocks Pro: Adds powerful and customizable blocks to enhance your Nexter page-building experience.
- WooCommerce: Essential for creating an online store and managing eCommerce features.
- Contact Form 7: A popular plugin for adding and managing forms on your website.
- Sticky Header Effects for Elementor: Allows you to create sticky headers with dynamic effects for your Elementor-built pages.
This is the starting point where you can explore all available website kits.
Step 2: Enter Business Details and Site Information
After selecting a kit, you will be asked to enter your site details:
- Enter the following business details:
- Business Name
- Business Tagline
- Logo (recommended size: 512 × 512 px, PNG)
- Business Name
- Click Add Additional Content if necessary, to input more details like:
- Address
- Email
- Phone Number
- Social Media Links
- Address
- After entering all details, click Next to proceed. This will personalize your website automatically using the AI.
This information helps complete your website’s contact and footer sections.
Step 3: Select Fonts and Color Palette
Now, customize your site’s design:
- Choose a Font Pair (for headings and body text).
- Select a Color Palette for your website.
- You can also add a custom font family and colors if needed.
- Click Next to proceed.
These settings define your website’s visual identity.
Step 4: Choose What Your Site Needs
On this screen, enable the features you need for your website:
- Dynamic Content: Advanced Custom Fields
- Performance Optimization: WP-Optimize – Clean, Compress, Cache
- Security Tools: All-In-One Security (AIOS)
- Extras (Forms, Popups, etc.): Rank Math SEO
- Nexter Theme (recommended for better compatibility)
- Ensure you check the backup notice and the checkbox indicating you’ve read it.
- Click Next to proceed.
Steps:
- Enable the required toggles.
- Read the backup notice.
- Check, I’ve read this and want to continue.
- Click Next.
These options help configure your website functionality.
Step 5: Content & Media Setup (Import Options)
Here, you can choose how your content will be imported.
Available Options:
At this point, you will configure how you want content to be imported into your site. Options include:
- Import Dummy Content:
- This imports sample pages and media, matching the selected demo preview.
- This imports sample pages and media, matching the selected demo preview.
- Smart AI Content (Beta):
- This generates AI-powered website copy using the business details you’ve entered.
- You can also choose additional options such as:
- Generate AI Blog Posts – This option automatically creates AI-powered blog content based on your website. You don’t need to create the posts manually.
- Import as Wireframe – This option imports only the structure and layout of the website. The content and layout will be updated, but images will not be imported. Instead, placeholder images will be displayed.
- Generate AI Blog Posts – This option automatically creates AI-powered blog content based on your website. You don’t need to create the posts manually.
- This generates AI-powered website copy using the business details you’ve entered.
- Choose your preferred option, then click Next to proceed.
Step 2.1: Tell Us About Your Website
Fill in the following details:
- About Website: Enter your website or business name.
- Language: Choose your preferred language.
- Industry Type: Select the category that best fits your business. Options include:
- Kitchen Staff
- Collection
- Tech Professionals
- Educators
- Coaches
- Doctors
- And more (e.g., Social Workers, Hospitality, Agriculture, Industrial Workers, Musicians, etc.).
- Kitchen Staff
- Website Description: Write the description manually, or click “Write Using AI” to generate it automatically.
Step 2.2: Choose Your Images & Proceed
- After filling in all details, click Next.
- You’ll be taken to the Image Selection Screen (only if the “Import as Wireframe” switch is disabled).
Note: If Import as Wireframe is enabled, this step will be skipped, and no images will be required.
- The system will use this information to prepare your website content.
Image Selection Options
You’ll see the following tabs:
Use the search bar to find images (e.g., chef, startup, fitness) and apply filters like All, Landscape, or Portrait.
- Stock Images – Browse from a built-in image library
- Lummi Images – Explore curated AI images
- Upload Your Images – Add your own files (PNG, JPEG, WebP, AVIF up to 20 MB)
- Selected Images – View and manage chosen images
Selecting Images
- Click on any image to select it
- You can select multiple images
- Selected images will appear under the “Selected Images” tab
Note: If you click Import without selecting any images, you’ll see this error: Oops! No Images Selected. It seems you haven’t selected any image yet!
To proceed, select at least one image.
Once you’ve selected your images, optionally review them in Selected Images and click Import to proceed.
Step 6: Plugin Installation and Import Process
After you start the import process:
- WDesignKit will automatically:
- Install required plugins, such as Elementor, The Plus Addons for Elementor, Nexter Blocks, WooCommerce, Contact Form 7, Sticky Header Effects for Elementor, etc.
- Activate any previously installed plugins that were inactive.
- WDesignKit will begin importing:
- Global Settings: All global properties should be applied according to the selected style.
- Theme Settings: The theme layout is automatically arranged based on the website layout.
- Plugin Settings: The required plugins will be automatically set up and ready for the site.
- Page Layouts (Home, About, Services, Gallery, Contact, Blog, Membership, Footer/Header).
- Global Settings: All global properties should be applied according to the selected style.
- Once the process is complete, you will see a success message.
You can also download plugins individually if needed.
If plugins are already installed but inactive, WDesignKit will activate them automatically.
Step 7: Finalizing and Previewing Your Website
Once the import is completed:
- You will see success! Your Website is Ready message.
- Click Preview Site to view your live website.
- You can now start customizing your website using the page builder of your choice.
Your website is now fully set up and ready to use.