Table of Contents

View Demo
Buy Now

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
  • about section
  • service section
  • what we do section
  • how it work section
  • achievement section
  • team section
  • pricing plan section
  • testimonial section
  • book an appointment section
  • blog section
  • logo slider section
  • CTA Section

Main Hero Section

Add the Carousel Widget
  • In the new section, search for Slides or Carousel (Elementor Pro or Addon).
  • Drag the Slides Widget into the section.
Configure Carousel Content
  • Add Multiple Slides: (Slide #1, Slide #2, Slide #3)
  • For each slide, add:
  • Slide #1:
  • Heading 1:
  • Heading 2
  • Description:
  • Button Text: Get Started
  • Background Image: Upload an image (e.g., car interior/steering)
  • Button Settings:
  • Link: Set to appointment/contact page or section ID
  • Style: Yellow Background #f8b400, white text, bold
  • and right side different- different car image 
  • give it’s style 
    • image full with
    • alignitem center
Style the Slides
  • Content Styling:
  • Alignment: Left
  • Text Color: White
  • Heading Size: H2 (around 40–50px)
  • Description: 18–20px, line-height ~1.6
  • Button: Rounded corners, padding 15px 30px
Background Overlay:
  • Add dark overlay to improve text visibility:
  • Overlay Color: Black or Dark Gray
  • Opacity: 0.5–0.6
Customize Slider Settings
  • Slides on Display: 1
  • Slides to Scroll: 1
  • Navigation: Arrows or dots
  • Autoplay: Enable for auto-rotation
  • Speed: 5000ms is ideal
  • Pause on Hover: Optional

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
  • short description
  • counter Boxes :
  • Drag in an Inner Section into the right column → make it 50/50.
  • In each column, drop an counter Box widget for show year of experience:
  • and  another show taxt widget for content and button
  • Button: Drag in a Button widget labeled “Read More” Link it to your About page or contact form

Service Section

Add Inner Content to Each Column

Drag in an Image Widget:

  • Upload or choose your service image.
  • Go to the Style tab → Set **Border Radius** to 100% for all sides.
  • Set the image size to Medium or Custom as per design.

Drag in a Heading Widget (for count):

  • Write 1, 2, 3 for each column.
  • Go to Style tab → Change Typography, Size, Weight as needed.
  • Optional: Set Alignment to center.

Add Another Heading Widget (for title):

  • Write your Service Title (e.g., “Beginner Lessons”).
  • Style it (color, font size, alignment).

Drag in a Text Editor Widget (for description):

  • Write your Service Description
  • Style it in the Style tab.
Style Each Column
  • Select the Column → Go to Advanced tab.
  • Add Padding for spacing.
  • Optional: Add Background color or shadow.

what we do section

Setup the Left Column Content

Drag a Heading Widget into the left column.

  • Set the first title
    • Style → Change font, size, and color as needed.
  • Drag another Heading Widget below the first.
  • Set a subtitle or tagline
  • Style accordingly.
  • Add a Text Editor Widget for the description.
  • Drag a List Widget or use bullet points in a Text Editor:
    • Style bullets and spacing in Style > List.

Add Box Shadow to the Content Block:

  • Right-click the column → Click Edit Column.
  • Go to Style tab → Background: set color if needed.
  • Scroll to Box Shadow:
    • Set: Horizontal: 0, Vertical: 4, Blur: 20, Color: rgba(0,0,0,0.1).
  • (Optional) Add Padding inside the column:
  • Go to Advanced tab → Padding: 20–40px.
Setup the Right Column Content

Drag an Image Widget into the right column:

  • Upload a relevant image.
  • Style → Set Max Width to ~80% and Align Center.

Drag a Heading Widget below the image:

  • Drag a Button Widget below the heading:
  • Button Text: Start Learning
  • Set Alignment to Center
  • Style → Background Color: your theme color
  • Border Radius: 8–12px
  • Add Hover Effect if needed

how it work

Add a New Section
  • Open your page in Elementor.
  • Click the “+” icon to add a new section.
  • Select a 2-column layout.
Left Column Setup
  • Drag a Heading Widget to the left column:
  • Style it under the Style tab: Font size, weight, color.
  • Add another Heading Widget below
  • Style it as a smaller subheading.
  • Add a Text Editor Widget
  • Style with padding, font size, etc.
  • Add an Image Widget below the text:
  • Upload an image (e.g., car, student learning, etc.)
  • Style → Adjust width (e.g., 80%) and align center.
Right Column Setup (Steps with Number, Title, Description)
  • Drag an Inner Section into the right column:
  • Use this to create individual blocks for Step 1, Step 2, etc.
  • Inside the inner section:
  • Column 1: Add a Heading Widget (for number like “1”).
  • Style → Make it circular by:
  • Go to Advanced > Background > Background Color
  • Set Padding equally (e.g., 20px top/bottom and left/right)
  • Set Border Radius to 50%
  • Set width/height to 60px
  • Center the text
  • Column 2: Add:
  • A Heading Widget for step title
  • A Text Editor Widget for step description
  • Repeat this inner section for as many steps as needed (e.g., Step 1 to Step 4).
  • Use Spacing (margin or padding) between each step block.

achievement Section

Add Icon + Counter Widget in Each Column
  • Drag in an Icon Widget (or Image for SVG icons).
  • Drag in a Counter Widget below the icon.
  • Starting Number: 0
  • Ending Number: 5000
  • Number Suffix: +
  • Prefix: Leave blank
  • Animation Duration: 2000 (2 seconds)
Style Each Counter
  • Icon (or Image):
  • Size: 60–80px
  • Alignment: Center
  • Color: Black or #f8b400 (highlight yellow)
  • Counter:
  • Number: Bold, large font (30–40px)
  • Color: #f8b400 (or your brand highlight)
  • Label Text:
  • Font Size: 16–18px
  • Weight: Medium/Bold
  • Color: Black
Add Box Styling
  • Go to Style > Border:
  • Border Type: Solid
  • Color: Light grey or black
  • Width: 10px
  • Padding: 20px or more
  • Border Radius: 0px (optional)
  • Add Box Shadow for effect:
  • Shadow: Subtle gray, blur 10–15px

Add section background theme yellow color

Team Section

Insert Team Member Widgets
  • Use Image widget for the photo.
  • Use Heading widget for the name.
  • Use Text Editor widget for the designation.
  • and added its social account
Customize Each Column
  • Upload a professional photo of each instructor.
  • Add their name
  • Add their designation
  • add their social account link
  • Repeat for all four columns.
Style the Section
  • Go to the Style tab of each widget:
  • Set image size and border radius (e.g., circular profile).
  • Customize fonts and colors for name and designation.
  • Add spacing and alignment for a clean layout.

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 “Apply 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.

Testimonial Section

Left Column: Add Image
  • Drag an Image widget into the left column.
  • Upload a relevant image
  • Style it:
  • Set width to 100%.
  • Add border radius or shadow for visual appeal.
Right Column: Add Title, Subtitle, and Carousel
  • Heading widget → Add your main title
  • Text Editor widget → Add a subtitle
Configure the Carousel
  • Review Text:
  • Client Name
  • Position
  • Image
  • Quote Icon:
Style the Carousel
  • Style tab:
  • Set typography for review text and name.
  • Add spacing between elements.
  • Customize quote icon color and size.
  • Add box shadow or border around each review card.

book an appointments Section

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

logo slider Section

Insert the Image Carousel Widget
  • Drag the Image Carousel widget
  • Select all logos and click Create Gallery → then Insert Gallery.
Configure Carousel Settings
  • Image Size
  • Slides to Show:
  • Slides to Scroll
  • Navigation
  • link
  • Toggle Autoplay to “Yes”.
  • Set Autoplay Speed (e.g., 2000ms).

Enable Infinite Loop for continuous scrolling.

CTA Section

  • Insert Content Widgets
  • Heading → for the main title
  • Text Editor → for the subtitle
  • Text Editor → for the description
  • Button → for the CTA
Style the Section
  • Go to the Style tab of each widget:
  • Set font sizes, colors, and spacing.
  • Use bold colors for the button
  • Add padding around the section for breathing room.
Add Background or Image
  • Click on the section → Style tab → Background:
  • Choose a solid color, gradient, or image
  • Add a background overlay for better text readability.

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.