WordPress Hosting
Joomla Hosting
Magento Hosting
Opencart Hosting
Prestashop Hosting
Drupal Hosting
Step-by-Step Guide to Building a Website with SitePad
Learn how to create a fully functional website using SitePad Website Builder with our comprehensive guide.
✨ Website Builder Features
- 🏗️ 775+ Pre-made Templates
- 🔧 100+ Widgets for Customization
- 📱 Responsive Designing
- 🚀 One-Click Publish
- 🛍️ E-Commerce Support (Beta)
- 📝 Integrated Blogging Features
- 📲 Social Media Integration
- 🛠️ Open Architecture for Customization
🔹 [Section A]: Logging into the SitePad Website Builder
SitePad is a powerful drag-and-drop website builder that allows you to create a fully functional website without coding. Follow these steps to log in and start building your website.
1️⃣ Click "Create New Site" to start.
- Log in to DirectAdmin and locate "SitePad Website Builder" under "Extra Features". - Click "Create New Site" to begin your website setup.
2️⃣ Click "Get Started".
- Click the "Get Started" button to start setting up your website. - This will take you to the template selection page.
3️⃣ Choose from 775+ pre-made templates.
- SitePad offers 775+ professionally designed templates. - Choose a template that fits your business, blog, or portfolio.
4️⃣ Preview the template before selecting one.
- Click on a template demo to preview how it looks. - Ensure it matches your style and branding before selecting.
5️⃣ Select the template and enter your site details.
- Once you've chosen a template, enter your website details. - You can use default settings and customize them later.
6️⃣ Enable Dev Mode
- Enable Dev Mode to restrict public access to your website while you're still designing it. - This allows you to edit the entire site privately before making it live. - Important: Once your website is complete, turn off Dev Mode in the SitePad settings to make your site accessible to visitors.
7️⃣ Upload Custom Images or Use Default
- Choose whether to use the default template images or upload your own custom images. - If you have a business or personal brand, it's recommended to upload high-quality images that align with your website’s theme. - You can replace images at any time through the SitePad image editor.
8️⃣ Click "Return to Sites"
- Once you've selected your images and completed initial setup, click "Return to Sites". - This will take you back to the SitePad dashboard, where you can start customizing your pages, text, and layout. - You're now ready to begin designing and building your website!
🔹 [Section B]: Access DirectAdmin, the Web Hosting Control Panel
SitePad requires proper file management to ensure smooth website operation. Follow these steps to access your DirectAdmin control panel and manage website files.
1️⃣ Open the DirectAdmin Control Panel
- Log in to DirectAdmin using your credentials. - Navigate to "File Manager" under the "Extra Features" section.
2️⃣ Open the File Manager
- Inside DirectAdmin, select the "File Manager" option to access your hosting files. - This is where all your website files, images, scripts, and templates are stored.
3️⃣ Open the public_html Folder
- Click on the "public_html" folder to access your website files. - This folder contains your index file, images, and other website assets.
4️⃣ Remove or Rename index.html
- If index.html exists, you need to remove or rename it. - Why? The .html file has priority over index.php, which SitePad generates. - SitePad will create an index.php file, which should be the default homepage.
5️⃣ Return to SitePad Website Builder
- After making the changes, close the File Manager. - Go back to SitePad Website Builder to continue editing your website.
🔹 [Section C]: Logging into the Site to Edit Your Website
After setting up your website, you can log in and edit your content easily using SitePad’s drag-and-drop builder. Follow these steps to access your site and make modifications.
1️⃣ Click 'Login to the Site'
- From the SitePad dashboard, click ‘Login to the Site’ to enter the visual editor. - This will open the drag-and-drop builder, where you can start editing your pages.
2️⃣ Open the 'Pages' Section
- Click on ‘Pages’ > ‘All Pages’ to view all your website pages.
- You can select any page to edit, add new content, or modify sections.
- Note: To edit the homepage banner, navigate to
3️⃣ Modify Page Settings
- Once you open a page, you will see the
4️⃣ Use 100+ Widgets to Customize Your Website
- SitePad offers 100+ drag-and-drop widgets for customizing your website. - You can add text, images, videos, buttons, forms, sliders, and more to your pages. - Simply drag a widget to the page section you want to modify and customize it as needed.
🔹 [Section D]: Add Google reCAPTCHA to Your Contact Form for Security
Google reCAPTCHA helps protect your website from spam bots and automated attacks by ensuring only real users can submit forms. Follow these simple steps to integrate Google reCAPTCHA into your contact form.
1️⃣ Sign in to Google reCAPTCHA
Visit the Google reCAPTCHA Admin Console. Log in with your Google account and start setting up reCAPTCHA for your website.
2️⃣ Create a New reCAPTCHA Site
- Enter your website domain name. - Select reCAPTCHA v2 or Invisible reCAPTCHA (recommended for seamless experience). - Agree to the terms and click Submit to generate your site key and secret key.
3️⃣ Copy the Site Key & Secret Key
After submitting the form, Google will generate a Site Key and a Secret Key. - Site Key: Public key used in your contact form. - Secret Key: Private key required for server-side verification.
4️⃣ Integrate reCAPTCHA into Your Contact Form
Add the Site Key to the `
✅ Google reCAPTCHA Successfully Added!
Once integrated, visitors will see the reCAPTCHA checkbox on your contact form. It helps prevent spam and ensures only real users can submit messages.
🔹 Additional Widgets & Features
SitePad comes with 100+ widgets that allow you to customize your website with powerful features. These widgets help you enhance your site with interactive elements, social media, and more.
🖱️ Drag & Drop Builder
Easily build your website by dragging elements like text, images, and buttons without coding.
📩 Contact Forms
Quickly add a contact form to your site and receive messages from visitors directly.
🖼️ Image Galleries
Showcase your photos with responsive image galleries and sliders.
📲 Social Media Integration
Easily connect your website with Facebook, Twitter, Instagram, and more.
🎬 Video Embedding
Embed YouTube & Vimeo videos to enhance your website content.
💻 Custom Code Support
Easily add HTML, CSS, or JavaScript for advanced customizations.