Getting Started
In this first section of the Gymsick User Guide we will go through the essential steps required to start building your website with the Gymsick theme. We will explain how to install the theme, import the included demo content. At the end of this section you will also find a set of Frequently Asked Question related to troubleshooting the theme.
Installing WordPress
In order to install Gymsick WordPress Theme make sure you have installed the working version of WordPress. If you don't know how to install WordPress Please follow here is the Link of Official WordPress article How to install WordPress?
http://codex.wordpress.org/Installing_WordPressHow to Install WordPress Using different methods
http://www.wpbeginner.com/how-to-install-wordpress"In Order to Use Gymsick WordPress Theme You must be running WordPress 5.0 or higher version"
Theme Structure
Once You download the main Gymsick Package.zip file From Themeforest go head and unzip this theme package. After unzip the file you get these files and folders Below :
gymsick.zip: This is The main WordPress Theme file You can upload it directly to WordPress.
gymsick-child.zip: This is the Child Theme of Gymsick WordPress Theme.
Documentation: These are the Documentation folder of Gymsick WordPress Theme simply open this folder and click on index.html file.
Demo Data: This folder Contain Demo Content files ie content.xml, widgets.json, theme-settings.json, and Revolution slider .zip fiels
Theme Installation via WordPress
In Order to Install This theme via WordPress Admin please follow The Instructions Below :
1. Login to WordPress Admin
2. Go to Appearance > Themes
3. Click Add New Button and Click Upload Theme
4. Click Browse Button and Upload gymsick.zip file and Click Install Now
5. Once the Theme is Installed Click on the Activate Link and Activate the Theme
Theme Installation via FTP
Once You have download the theme and prefer to install it via FTP? Here is the Useful article how to do that. Please note that this method is only advisable to advance users due to the risk of deleting or modifying other files in your WordPress directory. If done incorrectly, it may bring your site offline.
https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/Child Theme Installation
If you want to modify the source code ie (php Files, js Files or style.css) of the main parent theme. We strongly recommend You to install this child theme and make such modifications inside this child theme in order to avoid any possible problems, issues and conflicts by installing updates of Gymsick Parent WordPress theme in the future. You can Install the child theme in the same way as You Install the parent theme please follow the description "Theme Installation via WordPress Section". You can find the child theme in the "Gymsick Package" folder called gymsick-child.zip once you download the theme from themeforest.net
Make Sure you have Installed the Parent Theme Before Installing the Child Theme
Installing Theme Plugins
Once You have Install and activate the theme successfully you will get the following message about installation of Required and Recommended Plugins. In Order to get Gymsick WordPress Theme properly Work make sure you install these plugins before importing Demo Content. Some of the Plugins are included in the theme and some will install from WordPress.org repository online.
1. Click on Begin installing plugins
2. Check all plugins and select Install and click on Apply Button.
Note:If you plan on building an online shop with Gymsick, you should install the WooCommerce plugin. As WooCommerce plugins does not include as a required plugin. For more information on how to install WooCommerce, please read the WooCommerce section of this User Guide.
Updating Gymsick Theme
You can update your theme by performing the following steps:
- Download the latest theme Gymsick Package.zip file from ThemeForest
- Extract it and locate gymsick.zip
- Extract gymsick.zip and locate the gymsick folder
- Copy/Replace the contents of the gymsick folder to the /wp-content/themes/gymsick folder of your web site.
Demo Importer
With the Gymsick theme, you have the option to either start creating your site from scratch, or choosing to import one of the included demo sites to use as a starting point, and then modifying it to suit your needs.
One Click Demo Importer
Note: Importing demo data (post, pages, images, theme settings, etc.) is the quickest and easiest way to set up your new theme. It allows you to simply edit everything instead of creating content and layouts from scratch.
This Gymsick WordPress Theme comes with one click Demo Importer which you can find in Appearance > Demo Importer. Once you are on Demo Importer Page click on Import Demo Data Button.
After clicking Import Demo Data Button. You will jump to a new page just click on Continue & Import Button. Now wait and don't refresh the page you will get notified once the demo data is imported.
Note: Don't check any of the plugins above they are recommended by the plugin not the theme.
Note: Please read the above given instructions carefully before importing demo data.
Troubleshooting FAQ
1. Why do I see a white screen when importing demo content?
If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 120 seconds. Possible ways of achieving this are:
- By Wp-config.php changes - set_time_limit(120)
- In htaccess - php_value max_execution_time 120
- In php.ini file - max_execution_time = 120
If you face any further issue please contact your Hosting provider for more assistance.
2. How do I optimize my site?
Please use this tool to investigate reasons for slow loading: https://gtmetrix.com/
The Ultimate Guide to Boost WordPress Speed & Performance https://www.wpbeginner.com/wordpress-performance-speed/
3. How i can make my website more secure?
Please refer to this article: https://www.wpbeginner.com/wp-tutorials/how-to-protect-your-wordpress-site-from-brute-force-attacks-step-by-step/
Pages
In this section of the User Guide we will discuss page creation in more detail, including Elementor and various page templates available in the theme, and all the page specific options.
Create New Page
In Order to Create a new page to your website and go to Pages > Add new in the WordPress Admin Screen.
1. Enter the Page Title
2. You can Enter Your Page Content in WordPress Gutenberg Editor by clicking on the Plus button on top left corner. Once you click it you will see a off-canvas sidebar where you can drag your desired widget and place it on the editor.
3. Click on Publish Button to Publish the Page
Note. If you don't want to use Gutenberg WordPress Editor Then you can use "Elementor Page Builder" to Build Page With Drag and Drop Layout. By using Elementor click on the Edit with Elementor Button. This will open Elementor Page where you can build your page by using drag and drop. If you don't know how to use Elementor I Recommend You to Read This Section Getting Started with Elementor
For Creating Page with Elementor click on the Edit with Elementor button on the very top.
Once you click on the "Edit with Elementor" Button. A new page will open with Elementor edit on the left side. Here you can drag and drop widgets to the page and start building you page.
Page Meta Options
Page meta options allows you to change the page behavior and its styling. Note: These settings will only apply on the current page you are editing. Any settings or styles choose form Admin panel will apply Globally.
Please note that any settings you save here will override the global settings you've set in Gymsick Theme Options. It is generally considered good practice to set up the look of your pages on a global level, and then override settings on a local level, if necessary. This will save you a lot of time, unlike if you were to set up every page locally.
Page Background :
In page background you can either choose the background color or upload background image. In Page Content padding you can add top and bottom padding to the page.
Page Layout :
Here you can select your desired page layout ie Right Sidebar, Left Sidebar or No Sidebar.
Page Header :
In Page Header Section you can hide topbar or you can select your desired header and its settings based on the header you choose.
Note: The header you choose here will only be applied on this page not globally.
Page Slider :
In page Slider section you can select Revolution Slider template if you want to display slider on your page.
Page Footer :
In Page Footer section you can hide the entire footer or an individual part of footer.
Note: Any footer or footer area you hide will only hidden on this page not globally.
Page Titlebar :
In page Titlebar section you can hide the Titlebar, select different Titlebar styles and configure its settings.
Titlebar Background :
In Page Titlebar background you can select Titlebar background color or upload background image. You can also set title, subtitle color and add Titlebar padding.
Page Template
Page templates are a specific type of template file that can be applied to a specific page or groups of pages. Page templates are used to change the look and feel of a page. Gymsick comes with a variety of page templates to choose from:
Page Fullwidth: Select this template if you would like to create a standard page with your content spanning across the full width of the page.
Page Blank: Choose this template to create a page with no header or footer.
Page Blog: Choose this template to create a specific blog page
Blog
In this section of the User Guide we will discuss the creation of blog posts and all the available options for each post, how to setup blog page template to display blog listings.
Create New Post
In Order to Create a new Post to your website and go to Posts > Add new in the WordPress admin screen.
1. Enter the Post Title
2. Select the Post Type
3. Choose Your Desired Post Category if you have not Create a Post Category Click on Categories and Enter New Category
4. Enter your Post tag.
5. Click on Set Featured Image Link it Will Pop-up a window where you can choose Blog Image or You can Upload Image Directory From Your Computer
6. Here You can Enter Post Content in the Default WordPress Editor
7. Click on Publish Button to Publish the Post
Note: If you don't want to use Gutenberg WordPress Editor for your post Then you can use "Elementor Page Builder" to Build post With Drag and Drop Layout. By using Elementor click on the Edit with Elementor Button. This will open Elementor Post where you can build your post by using drag and drop. If you don't know how to use Elementor I Recommend You to Read This Section Getting Started with Elementor
For Creating Post with Elementor click on the Edit with Elementor button on the very top.
Post Meta Options
For Post meta general options please refer to Page Meta Section.
Note: Please note that any settings you save here will override the global settings you've set in Gymsick Theme Options. It is generally considered good practice to set up the look of your pages on a global level, and then override settings on a local level, if necessary. This will save you a lot of time, unlike if you were to set up every page locally.
Post Types
While creating a new post you have to select which type of post you would like to create. when you select the post type a new Post meta will appear on the page depend on the post type you choose.
1. Video Post Type
When you select Video Post type. A new Video Post Format meta option will be visible on the page. Here you can enter the video embed code for video to display on post.
2. Audio Post Type
When you select Audio Post type. A new Audio Post Format meta option will be visible on the page. Here you can select the audio source weather you want to add self hosted audio link or upload your own audio to display on the post.
3. Gallery Post Type
When you select Gallery Post type. A new Gallery Post Format meta option will be visible on the page. Here you can upload multiple images to display gallery on the post.
4. Quote Post Type
When you select Quote Post type. A new Quote Post Format meta option will be visible on the page. Here you can enter the quote text to display on the post.
5. Link Post Type
When you select Link Post type. A new link Post Format meta option will be visible on the page. Here you can enter the post link to display on the post.
Theme Settings
This section of the User Guide provides a comprehensive overview of all the settings available in the Gymsick Theme Settings section of your WordPress admin panel. The settings found here are applied globally and will affect all pages on your website. However, note that many of these options can be overridden locally by applying settings on individual pages or on shortcode elements.
Overview
Theme Settings each and every field contain its own title and description which describe its purpose and how to use it.
General Options
1. Layout
In Layout Admin Panel Tab you can select overall theme layout, configure page and theme content settings and styling.
2. Preloader
In Preloader Admin panel Tab you can enable Preload on your site and select different pre-build preloaders.
3. Logo
In Logo Admin panel Tab you can upload Dark, Light and Mobile logo individually and even can set the logo size.
Header Options
1. Header Topbar
In Header Topbar Admin Panel Tab you can enable topbar on your site and select topbar content, add topbar contact information and style the topbar.
2. Header Layout
In Header Layout Admin Panel Tab you can choose your desired Header layout configure different header settings based on your selected header layout.
3. Header Styling
In Header Styling Admin Panel Tab you can style your desired header navigation as well as sub-navigation.
4. Mobile Header
In Mobile Header Admin Panel Tab you can configure different mobile header settings as well as style mobile header and navigation.
Titlebar Options
1. Titlebar Settings
In Titlebar Settings Admin Panel Tab you can configure different Titlebar settings and choose your desired Titlebar layout.
2. Titlebar Styling
In Titlebar Styling Admin Panel Tab you can upload Titlebar background, select title color as well as breadcrumb link and text color.
Pages Options
1. Global Pages
Here in Global Pages Admin Panel Tab you can choose Global page layout ie Left Sidebar, Right Sidebar or without Sidebar.
Note: This global page layout you choose will applied globally on all pages throughout the site.
2. Search Pages
Here in Search Pages Admin Panel Tab you can choose Search page layout ie Left Sidebar, Right Sidebar or without Sidebar.
3. Archive Pages
Here in Archive Pages Admin Panel Tab you can choose archive page layout ie Left Sidebar, Right Sidebar or without Sidebar.
Footer Options
1. Footer Layout
Here in Footer Layout Admin Panel Tab you can configure different footer settings. Display the footer top area as well as select your desired footer widgets columns.
2. Footer Styling
Here in Footer Styling Admin Panel Tab you can style complete footer and also individually style footer widgets area.
3. Footer Copyright
In Footer Copyright Admin Panel Tab you can select copyright content, copyright text and style footer copyright
Typography Options
1. Body Fonts
Here in Body Fonts Admin Panel Tab you can choose your desired body family fonts as well as Headings fonts and from h1 to h6 heading sizes.
2. Header Fonts
Here in Header Fonts Admin Panel Tab you can choose your desired Header, Navigation, Sub-navigation and Mobile Fonts.
3. Titlebar Fonts
Here in Titlebar Fonts Admin Panel Tab you can choose your desired Titlebar Title, Subtitle and Breadcrumb fonts.
Theme Styling Options
1. General Styling
Here in General Styling Admin Panel Tab you can choose your desired theme Primary, secondary, body font and heading color.
2. Form Styling
Here in Form Styling Admin Panel Tab you can style the look of the form which will apply globally on the comment form as well as third party form plugins.
Blog Options
Here in Blog & News Admin Panel Tab you can choose you desired Blog Style change different blog page settings as well as you can choose your Blog page Layout and switch different single post elements ie. Author, Social share and tags etc.
Sidebars Options
In Sidebar Admin Panel Tab here you can create as many sidebar as you want and you can assign these sidebars from each page and post settings.
Note: After creating Sidebar in Theme admin panel. Go to Appearance > Widgets. Here you will see the sidebar you just created. You can assign this sidebar from admin panel which will apply globally or from each individual page or post.
WooCommerce Options
In WooCommerce Admin Panel Tab here you can choose shop page layout, Number of products you want to display on shop page and you can change the layout on single product page and switch product elements on and off such as Category, Tags, Social share etc.
404 Error Options
In 404 Error Admin Panel Tab here you can edit the content on Error page. You can change title, subtitle and description and even style the error page according to your needs.
Social Media Options
Here in Social Media Admin Panel Tab you can add social profile links that will display on front-end of your site.
Import & Backup Options
In Import & Backup Admin Panel Tab you can Import and Export Admin Panel Settings by downloading file or copying it for future use.
Elementor
In this section of the User Guide we will discuss What is Elementor Page Builder? How you can use Elementor Widgets to create your website. We will also explore Elementor Widgets that comes with Gymsick WordPress Theme.
Elementor is a powerful drag-and-drop WordPress page builder plugin. It is a live page builder plugin which means you get to see your changes live as you edit them. Elementor comes with tons of widgets, including the most commonly used website elements. From basic image and text widgets to advanced accordions, sliders, testimonials, icons, social media, tabs, and more.
If you are not familiar with Elementor Page Builder, we Recommend You to take a look at Following Tutorials:
Getting Started with Elementor
https://elementor.com/academy/getting-started-with-elementor/Video Tutorial : Elementor Basic Overview
https://youtu.be/-TPpwuB6dnIElementor Basic Widgets
Elementor comes with pre-build basic widgets that allow you to create pages with drag and drop.
Elementor Theme Widgets
Gymsick WordPress themes also comes with its own Elementor Page Builder widgets to enhance the user experience and expand the Elementor Page Builder functionality. You can find Theme Widgets with the label "DROPLET WIDGETS"
1. Droplet Button
Buttons are a widely used element on the web and can be used for a variety of purposes. You can add multiple styles of buttons including solid, outline, round, rounded and as simple link.
2. Droplet Call to Action
Call to Action elements allow you to display bold messages on your page, inviting viewers to follow a link or take some manner of action.
3. Contact Form 7
Use Contact Form 7 Widget to add Form to the page with different styles and options to choose from.
4. Droplet Countdown
The countdown shortcode provides a great way to display a countdown timer on your page.
5. Droplet Flipbox
Filpbox is a unique widget which allows you to add content and Image in front when user hover over the cursor it flip and shows the back content. Its a unique way to showcase your services or projects.
6. Droplet Heading
Droplet heading is simple but yet mostly used shortcode in the theme. Heading widget can be used to add headings to the page. You can also change the heading tag its size and rotation etc.
7. Droplet Iconbox
Droplet Iconbox widget allows you to add icon with heading and description on the page..
8. Droplet Iconlist
With Droplet Iconlist you can add text list with icon in multiple columns.
9. Droplet Imagebox
Droplet Imagebox allows you to add Image with heading and description with horizontal and vertical positions.
10. Droplet Image Carousel
You can use Image Carousel shortcode to display images in carousel with multiple columns and space between them.
11. Droplet Image Gallery
You can use the Image Gallery shortcode to showcase you work in multiple grids and columns.
12. Droplet Image Marker
Droplet Image marker widget allows you to add marker to image specific areas to highlight its features or benefits.
13. Droplet Lightbox
With Lightbox widget you can show Image, Video, Google Map and Content in Popup Style.
14. Droplet Slider
Use Slider widget to create homepage banner, slider and showcase you work in Carousel style.
15. Droplet Posts
Posts Widget allows you to add latest or category specific posts to the page with much more customizable options.
16. Droplet Price List
Use Droplet Price List widget to showcase your service list or Food menus in unique style.
17. Droplet Price Table
Price Table widget allows you to add Price table with content on the page.
18. Droplet Testimonial Carousel
Use Testimonial Carousel widget to showcase you clients reviews and testimonials in Slider or Carousel style.
19. Droplet Testimonial
Use Testimonial widget to showcase you clients reviews and testimonials in block style.
WooCommece
In this section of the User Guide we will discuss how to setup the WooCommerce eCommerce plugin with Gymsick.
Gymsick comes with WooCommerce integration, which allows you to easily create an online shop. Gymsick WordPress theme is Fully integrated with WooCommerce plugin. We have not added WooCommerce plugin to our required plugin But if you want to use WooCommerce to sell your products then you have to install it first.
Make Sure you have installed the WooCommerce Plugin First before importing demo data. If you have not installed the WooCommerce plugin. Simply Go to Plugins > Add New and Search for WooCommerce Plugin and Install it.
Getting Started With WooCommerce
https://woocommerce.com/documentation/plugins/woocommerce/getting-started/Adding New Products in WooCommerce
https://docs.woocommerce.com/document/managing-products/Slider Revolution
In this section of the User Guide we will discuss how to setup the Slider Revolution Plugin.
Revolution Slider is one of the best slider plugin in the market right now. Its allows you to create fully functional Slider, Banner, Carousel and Galleries. If you are not familiar with Revolution Slider, we recommend you to take a look at official documentation and YouTube tutorials:
Revolution Slider Official Documentation
https://www.sliderrevolution.com/manual/Revolution Slider Complete Video Tutorial
https://www.sliderrevolution.com/video-tutorials/Contact Form 7
In this section of the User Guide we will discuss how to setup the Contact Form 7 plugin and how to add contact forms to your pages.
Contact Form 7 is one of the simple, best and free Contact Form Plugin. Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet Spam filtering and so on.
How to Add Contact Form to Post or Pages
There are two ways to add Contact form to the post of page
1. Using Shortcode:
You can add Contact Form 7 by copying the shortcode and paste into your desired page.
2. Using Elementor Widget:
You can use Elementor Contact Form 7 Widget to add form to the page. We recommend you to use Elementor Widget to add form. This widgets comes with a lots of options to choose from.
Contact Form 7 Official Documentation
https://contactform7.com/docs/Contact Form 7 Video Tutorial
https://www.youtube.com/watch?v=4-Zcbo1Bxx0Disclaimer
Gymsick was tested to work in different browsers and With WordPress versions. However we cannot guarantee, that Gymsick will function with all third party plugins and server hosting environments. We cannot provide support solving any conflicts and problems with third party codes and plugins.