The YouTube tutorial from Digital Sculler explores how to rapidly create or clone websites using 10Web’s AI Builder 2.0. The video details the process of inputting business information, selecting website styles, and generating a WordPress-based site structure.
The presenter demonstrates editing options, including customizing layouts, content, and design elements. The video also shows how to clone existing webpages or entire WordPress sites to 10Web’s platform.
It covers 10Web’s pricing plans and how to manage and further customize the created websites within the 10Web and WordPress environments.
Creating Websites with AI: An Overview
With 10Web’s AI Builder 2.0, creating or cloning websites becomes fast and easy. The process involves inputting the details of the desired site, and the AI generates a fast-loading website built on WordPress in seconds. This eliminates the need for developers or coding, saving time and money.
To begin, select the type of website, enter your business name, and provide a description. The AI then provides a website structure that can be edited. Choose a style and font, and the website is ready.
Step-by-Step Website Creation
To start, click the first link in the description to land on the 10Web page. Click the button to begin building. You can choose between an informational website or an e-commerce website. For demonstration purposes, the video selects the informational website option.
Select the industry your business belongs to from hundreds of options. For a design agency, search and select the appropriate option. Add your business name and description on the next page. If it’s a personal website, you can use your own name.
Click on “enhance with AI” to improve the prompt. If you have a domain name, click yes; otherwise, click no. Enter your desired domain name, which can also be added later. The AI will then create your website structure in a visual layout.
Customizing the Website Structure
The AI generates a website roadmap or sitemap, providing the foundation of your website. Zoom in and out using your mouse. Hold the space bar and left-click to drag and move around. Use the buttons to zoom and fit content onto the screen.
For a design agency website, you might need more blocks on the homepage. Zoom in and click the plus icon to add new sections. There are over 15 options, and you can also create a custom one. Add a logo section to display past clients.
The AI will generate the section and the prompt used to create the page. Edit the title and prompt to fit your needs. Enhance the prompt with AI. Drag blocks to reorder them as desired.
Prompt Editing and Enhancements
Check all the prompts and edit them if needed to get the best results. In the hero section, the AI suggests a photo or video background with a header and tagline. If you don’t want that, replace it with another prompt.
For example, place the hero text on the left and a picture on the right, showing an office with designers working on a project. Enhance it with AI. For the about section, you can add information such as being listed among the top 100 graphic design agencies in the US. Enhance it with AI to add this information to the finished website.
For the blog section, ask it to add articles relating to website building and enhance it with AI. The FAQ section is set to be an accordion style for easier navigation. You can drag the pages anywhere and reorder the sections.
Adding New Pages and Customizing Content
To add a new page, click the blue button and name it. For example, create a pricing page. The AI will generate a pricing page related to the services you render. You can remove any sections you don’t need.
Edit the prompts for each section, such as the packages. For the packages, the AI suggests a layout of three packages with brief descriptions. Change it to bullet points and explain the pricing tiers (starter, standard, and premium). Provide the price of each package and the features.
Note the details to see if the AI gets it right on the finished website. For instance, ensure all starter features are on the starter tier and all standard features are on the premium tier. You can add more pages and customize them later. As of now, you can add five pages on the road map.
Choosing Look and Feel
Choose the look and feel of your website, including the color and Google fonts. Select a style that reflects the vibe of the site. Then, click “generate”. If you are new to 10Web, sign up for free with a Google account or your email.
10Web will build different parts of the website, which may take a few minutes. Once done, click the button to preview and edit the website. The website includes a custom logo on the header and other pages, as well as buttons to get a quote and contact the business.
The hero section includes an office with designers working on a project on the right and a headline and description on the left. A signup form is added for collecting email addresses and leads. The logo section displays past clients and is made scrollable.
Reviewing and Editing the Generated Website
The about page includes the information provided in the prompt, such as the mission and being listed among the top 100 design agencies. The services section features buttons and images in a beautiful style. The portfolio showcases past work with clients and includes mouse effects. Note that these are AI-generated works and should be replaced with actual work.
The testimonials look authentic with the design style. The blog section features articles related to design and website building. The FAQ section is in accordion style as specified in the prompt. The contact form and footer complete the page.
The structure of the homepage adheres to the prompts. If you’re not satisfied, click “regenerate” to get another design. The links are clickable, and you can navigate to the pricing page.
Accuracy and Attention to Detail
The pricing page accurately reflects the prompt, with pricing tiers from starter to premium and the prices as specified. It added a short description and the features in bullet points. All starter features are on the standard tier, and standard features are on the premium tier as requested.
The tool demonstrates attention to detail. The blog page is functional, and you can click on the articles to read them. They are short and AI-generated, so you can edit them and add more content. To edit, you’ll need to start a free 7-day trial, which requires adding card details.
Pricing Plans
10Web’s pricing has three phases tailored to building a single website, e-commerce website, and multiple websites. All plans come with a free domain. For a single website, choose one of the business plans, which starts as low as $10 per month.
The main difference in the three tiers is the monthly visitors and storage sizes. Choose a higher tier if you have a lot of traffic. If you want to create an online store, choose the e-commerce plan, which starts at $11 per month.
For building websites for clients or needing more than two websites, go for the agency plans. It has all the features on the starter and e-commerce plans, with more features for working with clients.
Finalizing and Editing the Website
After choosing a plan and starting a free trial, edit the website title and choose a temporary subdomain. Choose where your website will be hosted. Finalize the setup and wait for the site to be installed.
Click the button to start editing, which loads an Elementor site builder built on WordPress. If prompted, log in. The 10Web logo at the top left shows all your websites. The “I” icon shows how the site looks to visitors, and the “W” icon edits it on WordPress.
Click “manage” to return to the 10Web dashboard. The website is locked, so input the login details if asked. The site is automatically unlocked when you point a domain to it. To connect a domain, click the domain connection option.
Modifying the Website
To edit your site, click the pen icon. The structure panel shows the sections of the website and helps navigate between them. Close it when editing and click the button to display it again. The site settings allow you to change global colors and fonts.
Double-click any box to edit directly on the canvas or go to the sidebar for more options. Tweak the rotating text and change the style to highlight it. Change the color and size of the text. The description can be modified with options above it to change font sizes and write with AI.
Modify the form, configure buttons, and set actions to perform tasks when collecting leads. Delete unwanted blocks using the trash icon. Add a new block by searching for a widget on the left or dragging it to the canvas. Configure the color and text on the left. Use the undo button to revert to the previous step.
Adding and Customizing Sections
Edit logos on the left and change them to real clients you’ve worked with. Modify the color and style on the slider option. Add a new section with AI by clicking the plus icon on any container. The AI generator on the left bar allows you to add more sections.
You can also add pre-made sections. Try adding a pricing table with AI content. This uses your website information to build the pricing page, including tiers, pricing, and features. Drag any block to the desired position using the structure panel.
Change the start and end number to make it count from 0 to 20 years for a year countdown. For pictures, generate AI images, but for a company’s about section, use real photos. Upload photos for authenticity. The same applies to the testimonial section.
Editing Header, Footer, and Inner Pages
Edit the footer or header by clicking the pen icon and saving your previous work. Edit the menu and logo. Click the tablet icon to modify the tablet version and the mobile version. Most settings from the desktop version are automatically applied to the mobile version.
Preview the changes by clicking the “I” icon. Edit other pages by clicking the dropdown and going to Inner Pages. Drag and drop widgets and edit elements as desired. Use different icons on the left to replace check marks.
Return to the dashboard and go to the AI Builder to see the pages you’ve created. Add new pages and click on any page to view it. Click the pen icon to edit it. The dashboard also includes tabs for WordPress themes and plugins.
Activating Store Features and Managing Products
To activate store features, go to the e-commerce Tab and enable it. Choose your business location from the dropdown. Add products to your store with prices and discounts. Add a title for the product and ask the AI to write short and long descriptions.
The overview shows how your business is doing in terms of orders and revenue. Add payment methods on the payment tab. They have a payment gateway called 10 web payments, powered by Stripe, which accepts many cards. You can also activate other payment methods, including cash on delivery.
To access the WordPress dashboard, click on the “W” icon. This loads the native WordPress, where you can work as you would on any website. The post section shows the blog posts created by the AI, which can be edited. You can also add a new post and create your content.
Creating New Websites
To add a new website, go back to the homepage and click on AI at the top. Add the website name and choose a subdomain. Add a username and password for the site. Click on Create and the website will be installed. Click on let start and on the top right of the AI Builder click on generate with AI proceed by clicking the blue button.
Choose the info website and search for a category. Add the business name and description, including necessary details such as the services you render, the time you operate, and your years of experience. Add a domain name below it and click on next. The same road map appears, which you can quickly edit.
For the hero section, ask it to add a background picture relating to plumbing with bold text overlaid on it for the header. Enhance it with AI. Add a team section on the homepage. Try the custom section prompt to add the areas you cover in a specific location, such as London.
Website Cloning Options
If you want to clone a website on 10 web, you have three options. The first is to clone a website you already have on 10 web right from the dashboard. Do so by clicking on the three dots and choosing the Clone website option. Follow the steps on the popup, and it will install an exact copy of it.
The second option is to clone a web page you found on the internet. Create a new website from the dashboard and input a site name. Add a username and password to it. Then click on generate after a few moments. Click on the let start button then on the AI Builder click on ADD page.
The third way to clone a website on 10 web is to copy the entire website. This will only work if the site is a WordPress site and you have access to the backend. To do this, you will need to download and install the migration plugin on your website.