Getting Started

Learn how to install, configure, and use the theme.

Theme Installation

You can install the theme automatically or manually. It’s better to install TheSaaS X on a fresh WordPress installation.

 

Auto Installation (recommended)

The easiest way to install (and later update) your theme is to use the Envato Market plugin. Just download the plugin and follow the installation guide from Envato.

 

Manual Installation

Extract the zipped package downloaded from Themeforest to your desktop. In the extracted package you will find thesaasx.zip which is the WordPress theme file.

You can install the theme one of two ways:

 

Activation

After uploading the theme, you must activate it. For this purpose, navigate to Appearance > Themes and fine TheSaaS X theme. Move your mouse on the theme to see “Activate” button. Pressing this button activates the theme.

 

Plugin Installation

After the theme’s activation you’ll see a banner above all the content notifying you to install the theme’s recommended plugins. The only plugin you need to install is TheSaaS X; an exclusive plugin for our theme which is responsible to manage all the blocks, custom posts, and customization options. To install TheSaaS X plugin:

  1. Click on Begin installing plugin.
  2. In the new page, click install link below the name of TheSaaS X.

  3. The final step is to activate the plugin. Open Plugins > Installed Plugins, find “TheSaaS X” and click Activate link.

 

Installing Starter Content

Since TheSaaS X includes starter content, you should visit the customization page before creating any content. So navigate to Appearance > Customize and press “Publish” button in top-right side of customization panel. After this step, the theme create few pages, set some of the customization options, and create several navbar, header, and footer for getting started.

 

Congratulations! You successfully installed and configured your theme. If you want to learn more about the theme, we highly suggest to read the rest of content.

 

 

 

Customization

All of the following configurations are inside the Customizer. You can open Customizer by clicking on Appearance > Customize menu. We overview some of the available options.

 

Site Identity

Change site title, tagline and site icon from here.

 

Site Configuration

 

Style

Here’s the place we put most of the design customization options. Currently, you can only change the website fonts and primary color, but we’ll add more options regularly.

 

Layout

This is the place to set your overall website layout such as navbar, header, and footer. Each option has a complete description to let you know where the layout content would displays.

If you followed the theme installation correctly, we’ve already created several layout content (navbar, header, footer) and assign them in this section. Otherwise, you need to create them on your own. For this purpose, from your dashboard, mouse over the “Layout” menu and click any of the layout types available to see the list of items or create new one.

 

Blog

We have several options to change the design of your blog archive pages or posts. You can set the default blog layout to Grid, Classic, or List as well as show or hide the sidebar. Please take your time to see the options.

 

Homepage Settings

If you correctly followed the theme installation and activation, TheSaaS X has automatically set this values. By default, it create two pages:

To make sure this pages has created, click on Static Front Page. Make sure the inputs has following values:

  1. Front page displays: A static page.
  2. Front page: Home. If it’s not, click “Add New Page” and create a page with this name.
  3. Posts page: Blog. If it’s not, click “Add New Page” and create a page with this name.

 

Additional CSS

A css code to be added to all of your pages. Very useful to customize the design of your website in case we don’t have a customization option for.

 

Additional Javascript

You can write a javascript code to be run on every pages. Please note that we’ll put this code inside a <script> tag and wrap it by “jQuery(function($) { YOUR_CODE });”. This makes sure that your code will execute after the document is ready.

 

 

 

Developing Your Pages

TheSaaS X completely rewritten on top of WordPress 5 and Gutenberg page builder. It’s so important to learn about the new page builder if you have not used it before. So we highly recommend to take a look at Gutenberg and learn about the interface.

We developed hundreds of blocks on top of the Gutenberg page builder with a lot of customization options. Our blocks are categorized in several categories such as Cover, Header, Blog, etc. and all of them start with a “The” keyword, so they won’t be confused with the default blocks or blocks from the other plugins. Also, our blocks has a different UI in the block inserter which has an image preview.

Once you insert any of our blocks, you’ll have bunch of block options to customize the section. All the other customization options for the components inside the section such as buttons and images, you can click on the component to reveal the component toolbar. The toolbar has all the required customization options to make your changes in place.

Document Options

Apart from block sections, we add few options to the document options tab in case you need them.

Extra Options

We have a subtitle option below “Extra Options” which is basically an input to write a subtitle for the page. Most of our header blocks have a place for subtitle text. So if you provide a subtitle for your page, we’re able to display it in the page header.

Layout

While you can set the layout content from Appearance > Customize > Layout section, we know that sometimes you need a customized layout option for a specific page; for example using another navbar or even completely remove the navbar. You can customize these options from the select inputs in the Layout section.