Welcome!
Welcome to the Business FSE Pro theme’s documentation page!
This documentation talks about how you can install the theme on your WordPress site, how to customize the theme to suit your needs and a couple of other things that you’ll need to know to get going.
Recommended Server Requirements
Although having WordPress installed on your server is enough to install the theme, we recommend that your server meets the following versions:
- PHP version 7.4 or greater.
- MySQL version 5.7 or greater OR MariaDB version 10.3 or greater.
- WordPress 6.1 or higher
- HTTPS support
Installing The Theme
Installing the theme is quite straightforward.
Once you purchase the theme, you will receive a ZIP file containing all the theme files. Download and save the ZIP file. We’ll be using it later on.
Step 1. Go to your WordPress dashboard and head over to Appearance > Themes.
Step 2. Inside Themes, click on Add New (plus icon).
Step 3. Click on Upload Theme located near the top right.
Step 4. It will then ask you to choose the ZIP file for the theme. Navigate to and select the ZIP file for the Business FSE Pro theme that you downloaded earlier. Once done, click on Install Now.
Step 5. Click on the Activate button after the theme installation finishes.
That’s pretty much it! Reload your website to see the gorgeous theme in action!
Configuring The Theme
Now that you have the theme successfully installed, it’s time to tweak the site editor settings to make it your own!
As with all the other themes from GLThemes, the Business FSE Pro theme comes with tons of customization features to truly give you full control over the look of your website.
We’ll be exploring various customization options available in the theme’s customizer in this section.
How To Edit Site?
As you are here, we think you have successfully installed the Business FSE Pro theme and activated it. Now, you might be wondering how to edit the site and customize it for your business.
This theme is different from the traditional customizer-based theme. All the customizer options are placed in one place and that is the “Site Editor” that can be accessed using the “Edit Site” option available in the theme.
How To Open Site Editor?
To open the site editor you’ll get two options: one is from the dashboard and another is from the homepage of your site.
Option 1: Through Dashboard
Navigate to the WordPress dashboard and move to Appearance and then you’ll get the Editor Option.
Option 2: Through the homepage of your website
On the homepage of your website, you’ll get the WP admin panel. In the WP admin panel, you’ll get the Edit Site option there. Choose the edit site option.
Then you’ll be redirected to the site editor to customize the site.
Click anywhere on the homepage and start editing the site.
How to remove blocks?
Step 1: Click the hamburger button on the top left corner of the website. A side panel containing all your blocks in the “list view” will appear.
Step 2: Select the desired block and click the three arrows. Then you’ll get the delete option as shown in the below screenshot. Also, you can use a shortcut key Shift + Alt + z to delete the selected block.
Or directly select the specific part by left-clicking the mouse button. Here we’ll take an example of a site logo. Left-click the site logo, and a horizontal box with various options will appear. Then click the three dots as shown in the below screenshot.
Then you will get the vertical box with numerous options, select the “Delete” options as shown in the below screenshot. You’re selected block is removed from the website.
You can follow the above steps for removing all the blocks to your website.
How to add a block?
To add a block you can either select the “add before” or “add after” option. If you want the new block before the selected block then click “add before” otherwise press “add after”.
Or directly add the block from the desired section. Again, here we’ll take the example of adding a “site tagline”. Click the site logo and press enter. A “Plus” icon will appear. Click the plus icon, you will get the option to select various blocks. You can either search the block name or directly browse all the blocks.
By following the above instructions, you can easily add other options like site images, lists, and more directly from the editor.
How to customize other settings like background color, typography, padding, and more?
As this is the Full site editing block theme, you can customize each section. To do so, click on the “Settings” button from the top right upper corner of the editor.
Then select the desire section and you will get various options on the right side as shown in the below screenshot.
The setting button is used to change the layout and style of the block.
The position option lets you set the position of the block like sticky.
The advanced option lets you choose the type of HTML element for the selected block. Also, you can give the custom class name to the block. To add the custom class name, write the class name in the ADDITIONAL CSS CLASS (ES) section.
For more CSS options, you need to press the style button aside from the setting button. You’ll find various CSS options like color, background color, typography, margin, padding, and more. You can navigate to various options to customize each block and section of the website.
Also, we have provided numerous block variations in the pro theme. Here we’ll take an example of a button.
Select the button and navigate to the settings options. Then click the “style” option. You’ll get numerous design variations for the button as shown in the below screenshot. Click any one variation you want to use for the selected block.
You can customize other options by scrolling down. To explore more options, click the three dots of each section.
In the theme, we have used a dropdown block in the header and the navigation. Click the dropdown items and then click the + icon to add the items to the list.
Here, we’ll take an example of the navigation dropdown menu. Click on the Pages options of the navigation menu. Then click on the plus icon. If you can’t see the “+” icon then select the last items in the dropdown i.e. Style Guide and then press enter or now you can see the “+” icon.
How to change the images?
There are lots of images used in the theme like the site logo, service images, team images, and more. To change the images, click on the image and then click on replace and select the image.
Here we’ll take an example of a site logo. Select the site logo by clicking the left key of the mouse. Then you’ll get the various options for the images. Click on the “replace” button and you’ll get three options.
Open Media Library: If you already have an image in your database, then select this option
Upload: If you want to upload the image from your PC, then select this one.
Reset: If you want the default theme logo, then select this one.
Sliders
We have used the “Owl Carousel” JS library for the sliders in our theme. Here we’ll take an example of a banner section for how to edit, add, and update items in the slider.
Click the top left corner’s hamburger to open the list view of each section. Then select the banner’s group i.e. the first group and unfold it. Unfold the inner groups too until you get the columns block.
Either group or column is the main outer container for the slider and inner columns are the items of the slider. Here 2 columns, represent two items of the slider. You can add more items to the slider in the banner by duplicating the columns section.
Click on the three dots and you’ll get the duplicate option.
Similarly, you can remove the existing slider items by clicking on the three dots and removing the column.
You can also choose another design for the banner section. These alternative designs are called patterns in the block theme.
We have provided lots of pattern options for each section. Later in this section, we will teach you how to add the patterns.
How to add new items to the slider?
Select the outer group of the slider. Then unwrap it and select the last column and view the options by clicking the 3 vertical dots. Click the “add after” or “add before” button to add new items to the slider.
Finally, you are ready to add new items to the slider. Either add a pattern or create your own design using blocks. In the upcoming section, you’ll get to know how to add the pattern.
For other sections like a team, testimonial, case studies, and testimonial, you can follow the same above steps.
How To Add Patterns to Your Website?
Step 1: Select the previous block where you want to add the pattern. Left-click the block and you’ll get the three vertical dot buttons.
Step 2: Press the button, and you’ll get various options. Then select the “Add after” option to add the pattern after that block. If you want to add the pattern before that block then select the “Add before” option.
Step 3: Then you’ll get the empty input box with the placeholder “Type / to choose a block”. Click the “+” button on the right side of the input box or at the top of the page.
Step 4: Click the “Browse all” button and you’ll get the list of patterns to add to your website.
Then select the desired pattern, and it will get inserted into your website.
Also, you can add the pattern from the WordPress inserter.
Follow the Step 1 and Step 2 from above. Now, instead of clicking the “+” symbol from the block, click the “+” symbol in the top left corner next to the WordPress sign.
You’ll get the list view of all the available for each section. We have provided lots of alternative designs for each section. You can choose any of them from here.
You can similarly add different blocks to your website. To add a block, press the block button available on the right side of the “patterns” option. Click the block that you want to add, the block will be added to your website.
How to add or remove a rating in a Testimonial?
Step 1: Open the site editor and go to the testimonial section.
Step 2: Select a star rating of the testimonial where you want to add or remove the rating.
Step 3: After you select the rating, you’ll get the three dots. Click it to view the block’s options.
Step 4: Select the delete option to remove a start. Or if you want to add more star rating, select the duplicate option. If you want only one start then select other stars and delete it. Follow the same steps for two, three, and four stars.
How To View Different Site Variations?
Step 1: Go to the site editor and navigate to the “styles” options from the top right corner of the editor.
Step 2: Click on the “Browse Styles” option to get the list of all the style variations.
Step 3: You can see the list of all the available style variations and select the desired variation that represents your brand.
Step 4: Here we’ll select the “Night Black” style option for the demo.
Below is the “night black” version of the website.
With just one click, you can easily change the style of the whole website. You can select any variation that represents your brand.
Setting Up Pages
Business FSE Pro ships with various templates for pages to help you easily create beautiful pages with no design and coding required. Despite the pages being pre-made templates, you can customize everything about the page through the site editor.
The theme comes with the templates for the following Pages:
- Home Layout 2
- Contact Page
- About Us Page
- Team Page
- Pricing Page
- Career Page
- Service Page
We shall learn how to set up each page and configure them for your website in this section.
How To Create A Page
Creating pages in WordPress is a simple process. Pages can be fully custom or you can create a page with premade templates.
Follow the steps below to create a simple new page for your website:
Step 1. Log in to your WordPress Admin Panel. Go to the Pages option located in the left sidebar.
Step 2. Click on Add New at the top. You should have a screen that looks like this:
You can add titles, paragraphs, and many other blocks through the editor. For now, let’s create a basic page titled “My First Page” and a dummy text for the paragraph.
Step 3. Click on Publish button located on the right-hand sidebar.
That’s pretty much it. We’ve created a page titled “My First Page”.
Here’s what the page looks like:
You can add different blocks, headings, and media files via the + button in the editor.
Set Up and Configure HomePage 2nd Layout
Let’s create a second homepage layout for your website from a ready-made template that comes with a Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the right-hand side, and choose home layout two.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the theme!
Step 4. Go to the home layout 2 page and head over to Site Editor using the edit site option to begin customizing your newly created homepage 2nd layout.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the page by publishing the changes and refreshing the page.
Set Up and Configure Contact Page
Let’s create a Contact page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the right-hand side, and choose Contact.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the theme!
Step 4. Go to the contact page and head over to Site Editor using the edit site option to begin customizing your newly created Contact page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the Contact Us page by publishing the changes and refreshing the page.
Google Map Section
To add a new embed for your location, go to Google Maps and enter your location. For this demo, we’ll input the following address: Empire State Building, West 34th Street, New York, NY, USA
Click on the Share button.
And on the Share page, go to Embed a Map tab. Copy the link shown.
Go back to your Contact Page site editor, and then select the map section. Then click on the HTML option.
Then enter the embed code you just copied in the Embedded Google Map field.
Set the width to 100% if you want the full default view width of the map. You can set the height accordingly but we recommend to keep it 600.
Refresh the page to see the changes.
Contact Form Section
Contact forms are essential components of a Contact page. You can add a contact form to your page by creating and configuring a form in Contact Form 7, which is a plugin we’ll use. If you don’t have the plugin installed, please install the contact form 7 plugin.
You can change the form title in the Contact Form Title field. For this demo, we’ll keep it as it is.
To get a shortcode for a form configured in Contact Form 7, follow the steps below:
Note: You must have the Contact Form 7 plugin installed.
Step 1. Go to your WordPress dashboard and go to the Contact page from the sidebar.
Step 2. Click on Add New to add a new contact form. Enter your form title in the given field.
Step 3. You can configure the form as you please, but for now we’ll use the default template.
Step 4. Configure the Mail settings to make sure the contact form is fully functional and sends mail to the right email address.
You can configure other settings for the form as well. For now, this will do for us. Hit the Save button.
Step 5. Copy the shortcode shown on the top.
Go back to the Contact Us Page site editor, and paste the code in the Contact Form Shortcode field as shown below.
Hit Publish and refresh the Contact Us page to see the changes in action.
Set Up and Configure About Us Page
Let’s create an About Us page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the right-hand side, and choose the about page.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the page!
Step 4. Go to the about page and head over to Site Editor using the edit site option to begin customizing your newly created About page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the about page by publishing the changes and refreshing the page.
Recommended Image Size
- About Us Section: 583*650px
- Our Team Section: 368*350px
- Why should you choose us Section: 583*556px
- FAQ Section: 578*719px
- Client Section: 215*81px
Set Up and Configure My Team Page
Let’s create a My Team page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Teams page.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Time to configure the page!
Step 4. Go to the team page and head over to Site Editor using the edit site option to begin customizing your newly created team page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the Team page by publishing the changes and refreshing the page.
Recommended Image Size
- Our Team Section: 392*372 px
- What We Do Section: 392*260px
Set Up and Configure Pricing Page
Let’s create a Pricing page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Pricing page.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Let’s configure the Pricing page.
Step 4. Go to the pricing page and head over to Site Editor using the edit site option to begin customizing your newly created pricing page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the pricing page by publishing the changes and refreshing the page.
Set Up and Configure the Career Page
Let’s create a Career page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Career Page.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Let’s configure the Career page.
Step 4. Go to the career page and head over to Site Editor using the edit site option to begin customizing your newly created career page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
Ensure that the changes are reflected on the Career page by publishing the changes and refreshing the page.
Set Up and Configure the Service Page
Let’s create a Service page for your website from a ready-made template that comes with Business FSE Pro theme.
Step 1. Create a new page by following the steps described above.
Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Service Page.
Step 3. You can configure other settings such as adding a feature image and allowing comments for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:
Let’s configure the Service page.
Step 4. Go to the service page and head over to Site Editor using the edit site option to begin customizing your newly created service page.
Customization Options:
Since this is the block theme you can customize every section. Just take your cursor to the desired section and then press the left button of the mouse and start changing the content.
For the Contact Form Section, you can refer to the above contact section where you’ll find how to add the contact form 7 in the section.
Ensure that the changes are reflected on the service page by publishing the changes and refreshing the page.
Recommended Image Size
- Service Section: 392*260 px
- Our Processing: 576*579 px
You can easily manage the menu of the Business FSE Pro theme very quickly. Menus can contain items such as Pages, Posts and Categories.
For this demo, let’s create a Secondary menu for the footer that links to About Us, Contact, My Team and Career Pages that we created in the above sections of the documentation.
Step 1. Go to the Homepage and click on the edit site option to open the site editor.
Step 2. Open the Navigation by clicking the WordPress sign in the top left corner of the editor.
Step 3. Double-click the back button until you see the Design option.
Step 4. Click on the Navigation Option.
Step 5: Click on the three vertical dots button aside from the Navigation. Then click on the duplicate.
Step 6: Finally, you’ll get a copy of the navigation. Click on the three dots menu to rename or delete it. Now, let’s edit the navigation menu by clicking the pen icon.
Step 6: Click on the hamburger menu to open the list view of all the blocks.
Step 6: Unfold the Navigation by clicking the side arrow. Select all the menus and delete them.
Step 7: Click on the plus button to add items to the menu. We’ll add About Us, Contact, My Team and Career Pages opinions in the navigation.
You can rearrange the menu items by dragging the block around through the list view. Here we have added our required pages. You can even add Posts or Custom Links if you prefer.
Hit Save. And that’s it. We can find the newly created menu on our header.
Go to the place where you need to add the secondary menu.
Add the navigation block by writing “/navigation”.
Now, in the right-hand side’s sidebar, click the three vertical dots to see the list of navigation menus created earlier.
Select the required navigation menu from the given menu list. You can also create the navigation menu from here directly by clicking the “Create new menu” option.
To add the navigation on the footer section, you need to change the orientation of the navigation menu. To change the orientation, click on the setting icons and then click the down arrow. Also, don’t forget to turn off the overplay menu by clicking on the “off” button.
You can edit the footer section by opening the site editor as shown earlier. Then click the list hamburger to open the list view of the blocks.
Click on the Footer and then select the “Edit” option to cus
Now, you can customize each section by clicking on the particular block. We already discussed how to add, remove, or change the content of the block. You can follow the page same process here.
Recommended Image Sizes
Image sizes can impact the performance of your website, which is why we suggest you use the following sizes for images on the website (in pixels):
- Banner Section: 325*420px and 260*338px (for full images we recommend 1920*1080px)
- What We Do Section: 392*260px
- About Us Section: 583*650px
- Case Studies Section: 398* 304px
- Team Section: 390*370px
- FAQ Section: 578*720px
How To Add Google Fonts?
Adding Google font is quite easy with the Business FSE Pro theme. We have added a feature for your ease named “GL Settings”. Through GL Settings, you can use any of the Google fonts. Follow the below steps to use GL Settings:
Step 1: Navigate to the WordPress dashboard and you’ll see the GL Settings tab in the left sidebar.
Step 2: Click the “Add New” button to add the font.
Step 3: Select the font from the given font dropdown. You can also choose color, size, and variant i.e. bold, normal, or italic for the particular font. In the CSS Selector box, give a particular selector name for which you want to change the font. You can add multiple selectors by separating them with a comma.
Step 4: Finally click the save button to save the particular font setting.
Refresh your page to see the changes.
Here we will take an example of how to add the font. I will select the “Alumni Sans” font and choose its variant as normal. The font size will be 32 px and the color will be default Then I will use h1 and p CSS selector separating them with a comma. It’s always better to use the class instead of the tag directly.
Finally, refresh the page and you will see the change in heading 1 and paragraph.
Further Support
If you have any issues regarding theme installation and setup, please submit an inquiry ticket at the Support page. You can also directly mail us at [email protected]
Theme Installation Service
If the theme installation process is a little too technical for you, we offer theme installation services at an extremely affordable price. Check out our Theme Installation service page for more info.
Theme Customization Service
If you want professionals to customize the theme for you, or make internal changes to the theme’s core elements to better suit your liking, our Theme Customization service might just be the right service for you.