Home / Documentation

Documentation

📅 Last updated: November 19, 2025 ⏱️ 15 min read

Welcome to the TruckCraft Studio documentation. This guide will help you create, customize, and publish professional VTC websites with ease.

Introduction

TruckCraft Studio is a powerful website builder designed specifically for Virtual Trucking Companies (VTCs). Whether you're starting a new VTC or upgrading your existing website, our platform provides all the tools you need to create a professional online presence.

💡 New to TruckCraft Studio? Start with our Quick Start Guide to get up and running in minutes.

Key Features

  • Professional Templates: Choose from 6 free templates or 9 premium designs
  • No Coding Required: Visual editor makes customization easy
  • Fully Responsive: Your website looks great on all devices
  • Fast Loading: Optimized for performance and SEO
  • Custom Code Support: Advanced users can edit HTML/CSS directly

Quick Start Guide

Get your VTC website up and running in just a few minutes:

Step 1: Choose Your Template

  1. Navigate to the Templates page
  2. Browse through our collection of templates
  3. Click "Get Code" on your preferred template
  4. Copy the HTML code or download the file

Step 2: Customize Your Content

Once you have your template, you can customize it to match your VTC:

  • Replace placeholder text with your VTC name and information
  • Update images with your company logo and photos
  • Modify colors to match your brand
  • Add or remove sections as needed

✅ Pro Tip: Save your work frequently and preview changes in a browser before publishing.

Step 3: Preview and Test

Before publishing, make sure to:

  • Test on different devices (desktop, tablet, mobile)
  • Check all links are working correctly
  • Verify contact forms function properly
  • Ensure images load quickly

Step 4: Publish Your Website

When you're ready to go live, you have several options:

  • Free Hosting: Use our built-in hosting (coming soon)
  • Custom Domain: Connect your own domain name
  • Self-Hosting: Download files and host on your own server

System Requirements

TruckCraft Studio works on any modern web browser. For the best experience, we recommend:

  • Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
  • Screen Resolution: Minimum 1280x720 (1920x1080 recommended)
  • Internet Connection: Stable broadband connection

Choosing a Template

Selecting the right template is crucial for your VTC's online presence. Here's what to consider:

Free Templates

Our 6 free templates include:

  • Hero + CTA: Perfect for landing pages with clear call-to-action
  • Cards Grid: Showcase services in an organized grid layout
  • Features List: Highlight your VTC's key features
  • Pricing Page: Display membership tiers and packages
  • Contact Form: Professional contact page with validation
  • Blog List: Share news and updates with your community

Pro Templates

Premium templates offer advanced features and designs. Check out our Pro Templates for more information.

Template Structure

All templates follow a consistent structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your VTC Name</title>
  <style>
    /* Embedded CSS styles */
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav>...</nav>
  
  <!-- Main Content -->
  <main>...</main>
  
  <!-- Footer -->
  <footer>...</footer>
  
  <script>
    /* JavaScript for interactivity */
  </script>
</body>
</html>

Customizing Templates

Templates are fully customizable. Here's how to make them your own:

Basic Editing

  1. Open the HTML file in a text editor
  2. Find the text you want to change
  3. Replace with your content
  4. Save and preview in a browser

⚠️ Important: Always keep a backup copy of the original template before making changes.

Colors & Fonts

To customize colors and fonts, edit the CSS variables in the <style> section:

:root {
  --primary-color: #7c3aed;
  --secondary-color: #ec4899;
  --text-color: #1e293b;
  --background-color: #ffffff;
  --font-family: 'Inter', sans-serif;
}

Layouts & Sections

Add, remove, or rearrange sections by editing the HTML structure. Each section is clearly commented for easy identification.

Images & Media

To replace images:

  1. Upload your images to an image hosting service or your server
  2. Find the <img> tags in the HTML
  3. Replace the src attribute with your image URL
  4. Update the alt text for accessibility

Custom Code

Advanced users can add custom HTML, CSS, and JavaScript. We recommend:

  • Adding custom CSS in the existing <style> section
  • Placing custom JavaScript before the closing </body> tag
  • Following web standards and best practices

Preview & Test

Before publishing, thoroughly test your website:

  • Open in multiple browsers
  • Test responsive design on different screen sizes
  • Validate HTML and CSS
  • Check for broken links
  • Test form submissions

Export & Download

Your template code is ready to use immediately. Simply:

  1. Click "Get Code" on any template
  2. Copy the HTML code or download the file
  3. Save with a .html extension
  4. Open in a browser or upload to your host

Hosting Options

You can host your website using several methods:

GitHub Pages (Free)

  1. Create a GitHub repository
  2. Upload your HTML file
  3. Enable GitHub Pages in settings
  4. Your site will be live at username.github.io/repo-name

Netlify (Free)

  1. Sign up at netlify.com
  2. Drag and drop your HTML file
  3. Your site is instantly deployed

Custom Hosting

Upload to any web hosting service that supports static HTML files.

API Reference

For developers integrating with TruckCraft Studio, API documentation is coming soon.

Integrations

TruckCraft Studio templates work with popular tools:

  • TrucksBook: Display your company stats
  • Discord: Embed your community server
  • Google Analytics: Track visitor statistics
  • Contact Forms: FormSpree, Netlify Forms, or custom solutions

Best Practices

Follow these guidelines for the best results:

Performance

  • Optimize images (use WebP format when possible)
  • Minimize CSS and JavaScript
  • Use CDN for external resources
  • Enable browser caching

SEO

  • Use descriptive page titles and meta descriptions
  • Include alt text for all images
  • Use proper heading hierarchy (H1, H2, H3)
  • Create descriptive URLs

Accessibility

  • Ensure sufficient color contrast
  • Make all interactive elements keyboard accessible
  • Provide text alternatives for images
  • Use semantic HTML elements

Need more help? Visit our Help Center or contact support.