Table of Contents

Home-2-Documentation

This comprehensive guide will walk you through the installation, setup, and customization of your VoidcoreAI template, helping you build a sleek, professional, and engaging website for your AI or tech-focused business.

VoidcoreAI Pro Theme Documentation

Introduction

Thank you for choosing the VoidcoreAI Website Template. This template is designed to help you effortlessly build a modern, high-performance website for your AI or tech-driven business. Whether you’re launching a startup, showcasing AI solutions, or promoting a technology service, VoidcoreAI offers all the essential features to highlight your offerings and engage your audience.

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.
Here 3 header and 3 footer provide you can choose any one header if you wish and choose any one footer. we choose header 1(Default) edit the button and edit header if you added all items like header menu, social icon, logo etc…

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 create my account and login page than apply a custom style from the style option.

you can add newslatter form, timing, contact details, logo, 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 Section
  • About Section
  • Solution Section
  • Achievements
  • Technology Section
  • Review Section
  • Team Section
  • Contact Section
  • FAQ Section

Main Hero Section

Steps:

  • Add a Container (Full Width, Height: 100vh or fit content).
  • Inside the container:
    • Add a Heading: “AI-Powered Solutions for Tomorrow”
    • Add Text Editor: Subheading or short pitch.
    • Add a Button: CTA like “Get Started” or “See Demo”.
  • Optional: Add an image or Lottie animation on the side.

Style Tips:

  • Font: Bold, modern (40–50px).
  • Background: Gradient or animated background, and you can add video background here use video background
  • CTA Button: High contrast with hover effect.
Second Part
  • here use another title image box
  • add logo slider

About Section

Add a Container
  • In Elementor editor, click “+” and select Container.
  • Set Container Layout to Flexbox.
  • Set Direction to Horizontal (row) to display items side-by-side.
  • Set Content Width to Boxed or Full Width as per your design.
  • Optional: Set Width = 1600px, Min Height = as needed (e.g., 600px).
Add a Container with two columns:
  • Left: Image, illustration, or video.
  • Right:
    • Heading: “About Voidcore”
    • Text Editor: Describe your mission & values.
    • Button: “Learn More”
  • Style Tips:
    • Use light background.
    • Ensure proper spacing between elements.

Power Full Solution Section

Steps:
  • Add a new Container.
  • Heading: “Our AI Solutions”
  • Add multiple Icon Box widgets or Cards:
    • Icon: Use from library or upload SVG.
    • Title: e.g. “AI Automation”
    • Text: Short description.
Style Tips:
  • Icons in purple (#8A6DF1), bold titles, soft box shadows.
  • 3–4 columns on desktop, 1 on mobile.

Achievements Section

Add a Container
  • Drag a Container onto the page.
  • Set the Container Layout to Flexbox.
  • In the Layout settings:
    • Direction: Vertical (default).
    • Width: Adjust or keep responsive.
    • Align Items: Center or Stretch depending on the design.
    • Justify Content: Start.
Add Gradient Background and image background
  • Select the container.
  • Go to Style > Background > Background Type.
  • Select image:
    • choose image from upload 
    • set background size, repeat, position etc..

Technology Section

Add Heading & Label
  • Above the Grid Container, add a new Container.
  • Inside it:
    • Add a Text widget or Button for the label “Feature” with black background and white text.
      • Style: Padding, border-radius, small font.
    • Add a Heading widget for:
    • Use a modern, bold font and set color to dark navy.
    • Use responsive typography (e.g., 40–50px on desktop, smaller on mobile).
Use Icon Box, Image Carousel, or Cards:
  • Logos of tools (TensorFlow, Python, etc.)
  • Description or name under each.
Style Tips:
  • Use grayscale logos with hover color effects.

Review Section

Goal: Share testimonials from clients/users.

Steps:
  • Add a Container.
  • Heading: “What Our Clients Say”
  • Use Testimonial Carousel or Cards:
    • Name, Role, Image.
    • 5-star icon.
    • Quote.
Style Tips:
  • Soft background color.
  • Use rounded cards or slight box shadows.

Team Section

Add Heading & Label (Left Column)

Inside Left Column:

  • Use a Text Editor or Button widget.
  • Text:
  • Style:
    • Background: Black #000
    • Text Color: White #fff
    • Padding: 8px 20px
    • Border Radius: 20px
    • Font Size: 12–14px, Bold
  • Main Heading:
    • Text:
    • Font: Bold, Modern (e.g., Poppins, Montserrat)
    • Font Size: 40–48px (desktop), responsive sizes on tablet/mobile
    • Color: Dark Navy (#0A2C52 or similar)
  • Subtext:
    • Text:
    • Font: 16-18px, medium weight
Add Team Member Cards 
  • Image Box Widget
  • OR Create manually with Image + Name + Title + Overlay Icon + Label

For each Team Member:

  • Image: Upload photo
  • Add border radius: 12–16px
  • Overlay Label (Vertical Text):
  • Name (Heading):
    • Text: e.g., Dr. Amelia Chen
    • Font: Bold, Size: 18–20px, Color: Dark Blue
  • Position (Text):
    • Text: e.g., Chief AI Scientist
    • Color: Light Gray, Font Size: 14–16px
  • Overlay Icon:
    • Use Icon widget or a button (e.g., eye or share icon)
    • Style:
      • Shape: Circle
      • Background: White
      • Icon Color: Black
      • Size: 36–40px
      • Position: Absolute, bottom left (using Advanced > Positioning)

Repeat for Multiple Cards

  • Use a Grid layout or repeater (custom loop) to duplicate multiple cards
  • Ensure consistent spacing and alignment
  • Optional: Add hover effects (zoom image, show more info, etc.)

Contact Section

Section Structure

Left Side:

  • Image

Right Side:

  • Contact form (Name, Email, Message, Submit
  •  
Right Column – Contact Form
  • Form Fields:
    • Name (Text)
    • Email (Email)
    • Message (Textarea)
    • Submit Button
    • Styling:
      • Field Width: 100%
      • Padding: 12px
      • Border Radius: 8–12px
      • Text: White

FAQ Section

Section Structure

Left Side:

  • Image

Right Side:

  • Accordion orToggle widget
  •  
Goal: Answer common questions.

Steps:

  • Add a Container.
  • Heading: “Frequently Asked Questions”
  • Use Toggle or Accordion Widget.
    • Each item: Question + Answer.
Style Tips:
  • Use icons, spacing, and expand/collapse effects.
With a cutting-edge design, intuitive layout, and AI-focused theme, the website showcases Voidcore’s innovation, reliability, and expertise—making it the ideal choice for businesses looking to harness the power of artificial intelligence. 🤖✨