logo

Getting Started

  1. Requirements and Files Included in Classea Package
  2. Install Theme -> Install Child Theme -> Install Plugin -> Import Demo Content OR Import Select Pages
  3. After Import Enable the responsive breakpoints in elementor ( Must )
  4. After Import Troubleshoot Elementor
  5. Set Frontpage & BlogTeam
  6. Template usage for Page , Post
  7. How To Add Widgets and set layout
Back

# Theme Requirements

To use Classea, please make sure you are running WordPress 6 or higher, PHP 7.4 or higher, and MySQL 5.6 or higher. We have tested it with Mac, Windows. Besides, please check the recommended server configuration for proper theme functioning: Our Recommended Version above wordpress 5.5 and php 7.4.

Minimum server configuration

  1. PHP version - 7.4 and higher (Tested Up to 8.4)
  2. MySQL version - 5.6 or higher
  3. PHP Post Max Size => 256M or 512M
  4. Max Upload Size => 256M or 512M
  5. PHP Time Limit – 1000
  6. max_input_time – 300
  7. PHP Max Input Vars – 4000 and above

Or Check your server Configuration on your Wordpress Dashboard -==> Go to Classea -==> About Classea

img

# Files Included in Classea Package

Files Included in Packages

  1. Classea.zip , Classea-child.zip This is the Theme You want To use to build site.
  2. Documentation : This Folder Contains Docmentation Link
  3. Demo-content : This Folder contains demo data files For Impot Dummy Content
  4. Licensing : This folder contains coygen theme License.
  5. Theme-core-plugin : This folder contains coygen Core pluign.
  6. Classea Icons : This folder contains Classea icons We used in our theme.

# To Install Theme , Pluign Installation and Import Demo Content

There are two ways to upload the theme. Please follow the steps below.

1. Via WordPress Dashboard

  1. Navigate to Appearance → Themes in your WordPress admin dashboard.
  2. Click the Add New button at the top of the page, then select the Upload Theme option.
  3. Choose the theme file: Theme Files / Classea.zip from the downloaded package and click Install Now.
  4. Once the installation is complete, click Activate. This will redirect you to the theme setup wizard.
  5. Follow the steps in the setup wizard to:
    • Install the child theme.
    • Install required plugins.
    • Import demo content.
  6. After the demo import is complete, click View Your Website to see the setup in action.

Note: If the setup wizard does not appear automatically after activation, go to Classea → Theme Setup / Import Demo in the admin panel to launch the setup wizard manually.

Screenshots:

Theme Upload Step 1 Theme Upload Step 3 Theme Upload Step 4

Video Guide:

2. Via FTP (Recommended)

  1. Extract the downloaded theme package: Classea-main-package.zip.
  2. Open the extracted folder and locate the theme files.
  3. Use an FTP client such as FileZilla to connect to your server.
  4. Navigate to the WordPress themes directory: /wp-content/themes/
  5. Upload the Classea folder from the extracted theme files.
  6. Once the upload is complete, go to Appearance → Themes in your WordPress admin dashboard.
  7. Click Activate to enable the theme.
  8. Proceed to install the required plugins and import demo content as needed.

Following these steps will ensure a smooth installation of your WordPress theme and demo content setup.

# After Import Enable the responsive breakpoints in elementor ( Must )

Follow below video to enable responsive breakpoints in elementor

Add and customize breakpoints

By default, the Elementor Editor creates pages for three types of devices – PCs, portrait tablets and portrait mobiles, with breakpoints of 1024px for tablets and 767px for mobiles.  Some creators want the option of creating their own breakpoints or adding additional devices for greater design flexibility. Such tablets can include widescreen PCs, landscape tablets and mobiles and more. 

Using the Elementor Editor site settings, you can edit the breakpoints of the default devices and add additional devices with their breakpoints.

Access breakpoints

Breakpoints are accessed through the Site Settings.

  1. On the toolbar, click the icon to select Site Settings.
  2. From the menu, under Settings, select Layout.
    image 65 Responsive editing for mobile and tablets 45
  3. In the panel, scroll down to Breakpoints and expand it.

    You can now edit the breakpoints.

Add a breakpoint

For creators who want to accommodate a greater range of devices and uses, you can add additional breakpoints.

  1. Access the breakpoint menu as detailed above.
  2. In the Active Breakpoints section, click the plus icon
  3. From the dropdown menu, select all breakpoint options and click save changes button.

# Troubleshoot Options for Elementor

CSS changes do not appear immediately after adding them to websites.

Solution

Following are the suggested solutions.

Regenerate CSS

Follow the below steps:

  1. Go to Elementor > Tools > General.
  2. Click Regenerate Files & Data.
  3. Click Save Changes.

# To Set up the Homepage & BlogTeam


If you imported the demo content, your homepage should already be set. However, if you want to use a custom page as your homepage, follow these steps:
  1. Go to Settings > Reading in your WordPress dashboard.
  2. Under Your homepage displays, select A static page.
  3. Choose your desired page for the Homepage and another page for the Posts page (blog).
  4. Click Save Changes to apply the settings.
img

# To Know about tempalte usage for Page , Post/h1>


How to Find and Select Templates in WordPress

  1. Go to your WordPress Dashboard
  2. Navigate to any of these sections:
    • Pages
    • Posts
  3. Edit or create a new item
  4. On the right sidebar of the editor, look for:
    • The "Page Attributes" section
    • Or the "Template" section (depending on your WordPress version)
  5. Click the dropdown menu labeled "Template"
  6. You'll see these options:

Default Template

  • Includes a sidebar for navigation
  • Perfect for blog posts and regular pages
  • Use when you need:
    • Category listings
    • Recent posts widget
    • Search functionality
    • Archive access
    • Related content display

Classea Boxed

  • Includes page title and breadcrumb
  • Has 60px padding and light background
  • Best for:
    • Contact pages
    • About us sections
    • Professional content that needs structure

Classea Fullwidth

  • Includes page title and breadcrumb
  • No sidebars, full-width content
  • Ideal for:
    • Fleet showcase pages
    • Photo galleries
    • Portfolio displays
    • Wide-format content
    • Pages with large images

Classea Home Fullwidth

  • No page title or breadcrumb
  • Clean, empty canvas
  • Perfect for:
    • Homepage design
    • Landing pages
    • Custom layouts
    • Special promotional pages
    • Full-width banners and sliders

Step 7

Select your desired template and update/publish the page.

Pro Tip

Preview your page after selecting a template to ensure it matches your content needs. You can always change the template later if needed.

# To change Page title and breadcrumb settings

Page Header Settings

Basic Settings

  • Enable/Disable Page Header: Customize → Classea Page Header Settings
  • Alignment Options: Left, Center, Right
  • Header Styles:
    • Default (Page Title + Breadcrumb)
    • Style1 (Breadcrumb Only)

Background Settings

  • Background Image: Upload options for regular and blog page headers
  • Background Properties:
    • Cover Type: Cover, Contain, Auto
    • Position: Various alignment options
    • Repeat Options: No Repeat, Repeat, Horizontal, Vertical
    • Attachment: Scroll, Fixed

Color Settings

  • Background Color with opacity control
  • Title Color with opacity control
  • Breadcrumb Settings: Text, Background, Border Colors

Overview

The Page Header Settings allow you to customize the header for individual pages, posts.

Where to Find Page Header Settings

  • Go to WordPress Dashboard
  • Navigate to Pages, Posts
  • Click Edit for the specific item
  • Scroll down to Page Header Settings

Settings Options

1. Disable Page Header

Toggle ON/OFF: Hide or show the page header.

2. Page Header Image

Upload Image: Set a custom header image.

3. Mobile Page Header Image

Upload Mobile Image: Set a separate mobile header image.

4. Page Header Overlay Color

Select Color: Choose an overlay color.

5. Page Header Overlay Opacity

Enter a value (0-100): Adjust transparency.

6. Custom Page Title for Desktop

Enter text: Set a custom title for desktop.

7. Custom Page Title for Mobile

Enter text: Set a custom title for mobile.

8. Custom Breadcrumb Title

Enter text: Customize the breadcrumb title.

Final Notes

  • These settings apply to each page individually.
  • If left blank, the theme’s default settings are used.
  • Click Save Changes after making updates.

# Widget and Layout

Layout and Widget Management Guide

1. Widget Management

Adding Widgets

  1. Navigate to WordPress Dashboard → Appearance → Widgets
  2. Available widget areas:
    • Directorist - Listing Right Sidebar
    • Blog Sidebar
    • Page Sidebar
    • Shop Sidebar
    • Shop Single Sidebar
  3. To add a widget:
    1. Click the + button at the top of the Widgets screen
    2. Select a widget
    3. Choose a sidebar
    4. Configure widget settings
    5. Click Update to save changes

Managing Widget Areas

  • Each sidebar can contain multiple widgets
  • Drag and drop to reorder widgets
  • Click the dropdown arrow to access settings
  • Use "Inactive widgets" for temporary storage

2. Layout Settings

Global Layout Configuration

  1. Go to WordPress Dashboard → Appearance → Customize
  2. Navigate to "Classea Layout Settings"
  3. Configure options like:
    • Default Layout
    • Page Layout
    • Shop Layout
    • Shop Single Layout
  4. Layout options: No Sidebar, Left Sidebar, Right Sidebar