Table of Contents

This comprehensive guide will help you install, set up, and customize your DrivePro Car Driving School Website Template to build a professional, modern, and learner-friendly website for your driving school or training services.

drivora Pro Theme Documentation

Introduction

This template kit is designed to help you create a sleek, professional, and user-friendly website for your driving school. Whether you offer beginner lessons, advanced driving courses, or road test preparation, the DrivePro template includes all the essential features to showcase your services and attract new learners with confidence.

Customizing Your Website

Global Settings

To set global styles:

  • Go to Elementor > Site Settings.
  • Adjust typography, colors, and layout settings.

Header & Footer Setup

  • Use Elementor Theme Builder to edit the header and footer.
  • Customize the navigation menu, logo, and contact details.

You can drag and drop the elementor widget’s menu first. If you’d like, you can add items or simply drag each one, after which you can add a icon list from the widget and  apply a custom style from the style option.

you can add newslatter form, timing, contact details, logo, gallery,  menu and if you wish in footer, and create you best design.

Home Page Setup

Using Pre-Built Layouts

Navigate to Setting >> Reading

Choose the Static Page option.

Choose an existing homepage or create a new one.

Add The Section in home page using elementor

Add components such as these using the Drag & Drop Builder:

  • Hero Slider Section
  • icon box section
  • about section
  • service section
  • icon section
  • offer section
  • review section
  • pricing plan
  • CTA section
  • book an appointment
  • blog section

Main Hero Section

Set Background Image (Hero Banner)
  • Under Background, set:
    • Background Type: Classic
    • Image: Upload your banner image
    • Position: Center Center
    • Attachment: Scroll or Fixed
    • Repeat: No-Repeat
    • Size: Cover
    • Content Width: Full Width
    • Min Height: e.g. 600px
    • Vertical Align: Middle
Add Content (Heading, Text, Button, Video Link)
  • Drag a “Heading” widget – Add:
    • Set HTML Tag to H1
    • Align: Center or Left
    • Use inline text styling for highlighted text.
  • Add another “Heading” or Text Editor for tagline:
  • Add “Text Editor” widget for description:
  • Add a “Button” widget:
    • Style: Background color #f8b400 (yellow), text white
    • Add an arrow icon if needed
    • Add another Button for “Watch Video” (optional):
    • Use an icon: ▶ or use YouTube Play icon
    • Style it with transparent background or white border

Icon Section

1. Create a New Section
  • Click the ➕ icon to add a new section.
  • Choose the 4-column layout.
2. Add Icon Boxes to Each Column
  • In each column, drag the Icon Box widget from the Elementor panel.
  • This widget includes an icon, title, and description by default.
3. Customize Each Icon Box
  • Icon: Choose a relevant icon
  • Title: Add your service name
  • Description: Write a short service description.
  • Repeat for all four boxes.
4. Style the Boxes
  • Change icon color, size, and spacing.
  • Customize title font, color, and alignment.
  • Edit description typography and spacing.
5. Add Hover Effects
  • go to the Hover section:
  • Change background color on hover.
  • Add box shadow or scale effect to make it pop.
  • For advanced hover animation:
  • Use Motion Effects tab → add entrance animations

About Section

Add a New Section
  • Click the ➕ icon → select a two-column layout (50/50).
  • Set Content Width to Full Width for a clean, wide layout.
2. Left Column — Insert Image
  • Drag and drop the Image widget.
  • Upload or choose your photo.
  • Align it (e.g., center or full height) under the Style tab.
  • For full vertical stretch: Section settings → Height: Min Height, e.g., 600px Image → Advanced → set Vertical Align: Middle
3. Right Column — Add Text and Content
  • Subtitle: Drag a Text Editor or Heading widget Set it as smaller text 
  • Title: Add a Heading widget Use a strong headline
  • bullet point for describe sort point of company
  • Icon Boxes :
  • Drag in an Inner Section into the right column → make it 50/50.
  • In each column, drop an Icon Box widget for call us and founder info:
  • Button: Drag in a Button widget labeled “Read More” Link it to your About page or contact form

Service Section

Add Section Title
  • Add an Icon + Heading for the section title:
  • Icon: Car or Service icon
  • Heading: Our Services
  • Second Heading:
Add Inner Containers (1 for Each Service Card)
  • Set width to 33.33%
  • Design Each Service Card
  • Image
    • Drag an Image Widget.
    • Upload a relevant image
    • Set image size: Medium or Custom
  • Icon Box
    • Use an Icon Box widget or a simple Icon + Heading combo.
    • Customize icon background: Yellow
    • Set icon alignment: Left or center
    • Below icon, add Service Title
  • Explore More Button
  • Add a Button Widget.
    • Style: White text, black background
  • Service Number
    • Add a Heading widget with:
    • Font: Use bold and large size
    • Position it bottom-right with padding or use custom CSS
Style the Cards
  • Add Border: 1px solid #000 or light gray
  • Box Shadow: Optional for modern feel
  • Padding: Around 20px
  • Border Radius: 8px (optional)
  • Use Hover Effects if desired:
  • Slight scale or shadow on hover

Icon Section

1. Create a New Section
  • Click the ➕ icon to add a new section.
  • Choose the 4-column layout.
2. Add Icon Boxes to Each Column
  • In each column, drag the Icon Box widget from the Elementor panel.
  • This widget includes an icon, title, and description by default.
  • and  last one is not icon box add its image and added clip path for batter design
3. Customize Each Icon Box
  • Icon: Choose a relevant icon
  • Title: Add your service name
  • Description: Write a short service description.
  • Repeat for all four boxes.
4. Style the Boxes
  • Change icon color, size, and spacing.
  • Customize title font, color, and alignment.
  • Edit description typography and spacing.
5. Add Hover Effects
  • go to the Hover section:
  • Change background color on hover.
  • Add box shadow or scale effect to make it pop.
  • For advanced hover animation:
  • Use Motion Effects tab → add entrance animations

Offer Section

Set Up the Left Column
  • Use “Image Box” Widgets:
    • In the left column, drag 4 “Image Box” widgets
    • Choose Image: Upload an icon (helmet, shield, car, user).
  • Title:
  • Description: (optional – leave empty for a clean layout)
  • Under Style:
    • Alignment: Center
    • Spacing: Add margin-bottom (e.g., 20px)
    • Box background: Light gray (#f4f4f4)
    • Add border-radius and shadow if desired
Set Up the Right Column
  • Icon + Heading Widget
  • Heading Widget:
  • Text:
    • Style: Bold, use yellow color #f8b400
  • Text Editor Widget:
  • Icon List Widget (for benefits list):
Style the Section
  • Add Padding: 60px top/bottom
  • Set Background: White or light color

Testimonial Section

Add Section Title
  • Text:
    • Font Weight: Bold
    • Font Size: 36–42px
    • Color: #f8b400
Add the Testimonial Carousel
  • You’ll use the Slides/Carousel widget
  • Set Slides on Display to 2
Add Testimonial Content for Each Slide
  • Profile:
  • Image: Upload learner image
  • Name:
  • Designation:
  • Style the Carousel
Box Styling:
  • Background: White (#fff)
  • Padding: 30px
  • Border Radius: 10px
  • Box Shadow: Add light shadow for elevation
  • Spacing Between Slides: Around 20–30px
  • Typography:
  • Name Font Size: 18–20px (Bold)
  • Designation Font Size: 14px (Italic)
  • Testimonial Text: 16px, regular
  • Quote Icon:
  • Star Ratings:
  • Use yellow color #f8b400
  • Spacing between stars: small (4–6px)
Add Background & Overlay
  • Select the main Section.
  • Go to the Style tab.
  • Background Image: Add car interior image
  • Add Overlay:
    • Color: Black or dark gray
    • Opacity: 0.4–0.6 (for better readability)

Pricing Plan Section

3-Column Pricing Table in Elementor
  • Insert Pricing Table Widgets
  • If you’re using Elementor Pro, drag the Price Table widget into each column.
  • If you’re using Elementor Free, use Icon Box, Heading, Text Editor, and Button widgets to manually build each pricing box.
3. Customize Each Pricing Box
  • Package Name: Use a Heading widget or the Price Table’s title field.
  • Price: Add the price in the designated field
  • Divider: Use a Divider widget or enable the divider in the Price Table style settings.
  • Bullet Points: Use Icon List or Feature section to list services
  • Button: Add a Button widget with text like “Enroll Now” or “Book Package”.
4. Style the Pricing Boxes
  • Go to the Style tab:
  • Set background color, border radius, and padding.
  • Customize fonts and colors for headings, price, and features.
  • Add hover effects like box-shadow or scale animation.

CTA Section

Add a New Section
  • Click the ➕ icon in Elementor → choose 1 column layout.
  • Set Content Width to Boxed or Full Width depending on your site style.
2. Set Background (Optional but Recommended)
  • Go to Section Settings → Style tab.
  • Under Background Type, select a color or image that fits your brand.
  • Use a light overlay if your background image needs better contrast with the text.
3. Insert and Style the Content
  • Subtitle: Drag a Text Editor or Heading widget, style it smaller.
  • Title: Drag a Heading widget below the subtitle, use a bold engaging message.
  • added for for subscribe
    • input and button text subscribe now and go to style tab and added style for input and button

Book An Appointment

Add Left Column Content (Contact Info & Heading)
  • Heading Widget
    • Text:
  • Below that, add another heading:
  • Icon List or Inner Section
    • Use Icon List widget or inner section with multiple text + icon combos:
Icon List or Inner Section
  • Use Icon List widget or inner section with multiple text + icon combos:
Add Right Column Content
  • Drag the Form Widget
  • In the right column, drag a Form widget.
  • Under Form Fields, add the following:
Label Type
  • First Name, Last Name, Email, Phone Number, Select Course, Date and submit button
Form Layout Styling
  • Under the Style tab:
  • Set spacing between fields
  • Input background: White
  • Input text: Dark Gray or Black
  • Border: Light gray, 1px
  • Padding: 10–15px
  • Border Radius: 4–8px
  • Button Background: #f8b400 (yellow)
  • Button text: Bold white

Blog Section

Add Posts Widget
  • (Choose method based on Elementor version)
  • Elementor Pro (Posts Widget)
  • Drag the “Posts” widget into the section.
  • Posts will automatically show your latest blog posts.
  • Customize:
    • Layout: Grid / Carousel / Masonry
  • Columns: 2 or 3 recommended
  • Show/Hide: Title, Excerpt, Author, Date, etc.
  • Image Size: Thumbnail, Medium, Custom
Style the Blog Section
  • Use the Style tab to customize:
  • Title typography and color
  • Card background or shadow
  • Read More button style
  • Image border radius
Optional Features
  • Add Filter by Category (Pro only)
  • Add Load More or Pagination
  • Add Animations or Hover Effects

Start your driving journey with confidence and control. At DriveMaster Academy, we provide reliable, results-focused driving programs customized to your needs. Whether you’re a first-time learner or looking to sharpen your road skills, our professional instructors are committed to guiding you every step of the way. Choose expertise, choose safety—get in the driver’s seat today and let’s hit the road together.