Hello and welcome to the Shella user guide. This guide covers all the needed information for building an amazing website, as well as some helpful tips and tricks that will make your experience working with the Shella theme easier and more enjoyable. If you need any additional assistance while using our theme, you can always contact us via email and our support team will be glad to help you out.
In this first section we will go through the essential steps required to start building your website with the Shella theme. We will explain how to install the theme, import the included demo content, as well as how to update the theme.
After downloading the Shella installation file from ThemeForest, extract it and in the extracted folder locate the shellas.zip file. You can then install the Shella theme using one of the two following installation methods:
Once the installation is complete, just activate it and the theme is ready to use.
You should see a notification at the top of the screen that required plugins need to be installed. Please install and activate all of those plugins, since they are necessary for the theme to function properly.
With the Shella theme, you have an option to either start creating your website from scratch, or choose to import the included demo content to use as a starting point, and then modify it according to your needs. In this section we will explain how to do this.
Shella comes with a one-click import plugin. To import the demo content please follow these steps:
From the Import Type section, choose what type of content you'd like to import:
Please note, if the above screenshot looks different at your side, you should check http or https settings of your WordPress instance to match your website's URL:
Final step is to import Revolution Slider's demo content:
Automatic updates will help you update your theme within one single click. To activate this awesome option you should insert your Item Purchase Code into the respective field here (in case you've not inserted it earlier before running the demo importing tool ):
Having this done, the automatic updates will be activated and you will be notified when a new theme update is available:
You can update your theme manually as well by performing the following steps:
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:
Ask your hosting provider to take care of this for you.
Please use this tool to investigate reasons for slow loading: https://developers.google.com/speed/pagespeed/insights/?hl=en
GoDaddy has a nice article about this: http://bit.ly/2cYs9Tc
You can use the LocoTranslate plugin (http://poedit.net/wordpress) to translate/rename all the theme's labels.
Once Shella is installed, you can start building your website. This section will explain how you can set up your header, upload your logo, create your menu, set up your footer area, customize the general look and feel of your website, and create your first pages.
One of the first things you might want to do after you have installed and activated your Shella theme is to set up your header area. The header contains the logo, menu, search bar and other optional widgets.
We recommend using Customizer, which is fully supported by our themes. To set up your header, navigate to Appearance > Customize from your WordPress Dashboard. Settings you define here will be default settings for all pages of your website.
Some options, such as the font color, opacity, spacings and background color, can be overridden on a page to page basis from a specific page’s backend. For more information on how local page settings work, please refer to the Pages section of this guide.
Header customizaion might be separated into two parts: for beginners and for experienced users which require more header variations. If you like the current theme design and would like to keep the same header in your site, Customizer is the only option you might need. It will let you set your own logo, change fonts and colors, add some specific page settings etc.
Customizer will let you slightly customize the design you're currenlty having. The tools are pretty intuitive and don't require any additional description. As an example to add your own logo to the webiste, navigate to Appearance -> Customize -> Header -> Logo from your WordPress Dashboard and click the Logo field. After you upload your logo image and save settings, you should have a visible logo in your header area.
The Header section of the Customizer will help you setup these sections:
If the Customizer is not enough for you and you'd like to create your own header with no limits, Header Builder is the tool which will help you do that. Navigate to CWS Templates -> Add Header and build your own header using WPBackery Page Builder without any limits.
When the new header is ready, you should assign it either to all pages with Customizer or use it on a certain pages only.
To apply the new header to all of your pages using Customizer please navigate to Appearance -> Customize -> Header -> Custom Header and select the created header:
If you wish to assign the newly created header to a certain page only, please edit that page and select the new header bellow the page:
Please note, in case of applying a Custom Header Template, all the Header settings which were set with Customizer will be ignored.
To create a new menu, navigate to Appearance -> Menus from your WordPress Dashboard and click on Add a Menu. Enter a name for your new menu and then click Create Menu.
Every page that you have created will be listed in the section on the right. Simply click the pages that you would like to add to your menu and they will be added. Once you have added pages to your menu, you can click and drag the menu items to rearrange them, or nest them one underneath the other.
In the Menu Locations section (which is located underneath the Menu Structure section), check the checkbox next to Navigation Menu. This will activate the menu you have just created, and you should now see a functional menu in your header.
Footer customizaion might be separated into two parts: for beginners and for experienced users which require more footer variations. If you just need to have a footer copyrights notice, Customizer is the only option you might need. It will let you set your own textings, colors etc.
Customizer will let you slightly customize the design you're currenlty having. The tools are pretty intuitive and don't require any additional description. As an example to add your own logo to the footer, navigate to Appearance -> Customize -> Footer -> Footer Appearance from your WordPress Dashboard and click the Logo field. After you upload your logo image and save settings, you should have a visible logo in your footer area.
If the Customizer is not enough for you and you'd like to create your own footers with no limits, Footer Builder is the tool which will help you do that. Navigate to CWS Templates -> Add Footer and build your own footer using WPBackery Page Builder without any limits.
When the new footer is ready, you should assign it either to all pages with Customizer or use it on a certain pages only.
To apply the new footer to all of your pages using Customizer please navigate to Appearance -> Customize -> Footer -> Footer Appearance -> Custom Footer Template section and select the created footer:
If you wish to assign the newly created footer to a certain page only, please edit that page and select the new footer bellow the page:
Please note, in case of applying a Custom Footer Template, all the Footer settings which were set with Customizer will be ignored.
Now let’s set up the general look and feel of your site. If you've imported the demo content and would like to keep its general look and feel, then you do not need to do anything. Otherwise, go to Appearance -> Customize -> General and set the needed colors, fonts, sizes etc..
Having set up the basic elements for your site, you’re ready to start building your pages.
To create a new page, navigate to Pages > Add New using your WordPress Dashboard. In the text field near the top of the screen enter a title for your page. After you have added a title, choose the layout type from the section on the bottom named Sidebar Position. This will allow you to add sidebars to your page.
In the right section of your screen you will find the page settings. Any settings that you define here will override the global settings set in Customizer.
To start adding elements to your page, first make sure that you are in the backend or frontend editor view. If the blue button near the top left of the page says WPBackery Page Builder, click on it to enable the WPBackery Page Builder view. Once you’re in the WPBackery Page Builder view, the blue button will say CLASSIC MODE. You can now click on the Add Element button to start adding elements to your page.
Finally, click the Publish button in the upper right section of the page. (If you made some changes on an already published page, you will see an Update button instead).
When creating a new page, one of the first things you would probably want to do is to choose an appropriate layout of your page. To achieve this, visit your page from the backend (or create a new page by going to Pages > Add new), and locate the Sidebar Position option on the righthand side of the page content. This option lets you apply a sidebar to your page.
CWS Template Options will help you apply a custom header, footer or sticky menu to your selected page. To read more about this please refer to the Getting Started section of the documentaion.
In this section we will describe the creation of blog posts and all the available options for each post, setting up pages to display blog listings, as well as how to change the date format for your posts.
To create a new blog post, go to Posts > Add New from your WordPress Dashboard. First, you need to enter a title for your blog post in the text field near the top of the screen. Then choose a format for your blog post in the Format section on the right side of the screen.
Now let's create a blog page where all of the posts will be populated. To create a blog list, you first need to create a new page and add the CWS Blog module. Customize the output with the following options:Layout:
By choosing one of the above options you will have set this page to automatically show a list of your blog posts in a needed format. All you need to do now is publish the page.
If you wish to change the date format on blog posts, navigate to Settings > General > Date Format from your WordPress admin, and select your format of choice.
In order to activate the WPBakery Page Builder, visual content editor, just click the Backend Editor button, which is located bellow your page title.
All our custom modules are located at the By CWS tab:
With the help of the visual tools you can build your content. Just click the plus symbol and add any module you wish. As a result your page will look like this page section:
For basic WPBakery Page Builder usage please refer to the developer's help sections Getting Started
In this section we will describe widgets and widget areas available in this theme.
Widgets are easy to manage and can be incredibly useful to have on your site.
We have developed custom widgets and widget areas in order to provide you with even more functionality.
In this section we will describe how to install and set up the WooCommerce plugin with Shella.
Shella comes with WooCommerce integration, which allows you to easily create an online shop. For more information on installing and configuring WooCommerce, please visit this page:
In order to set up WooCommerce with the Shella theme, follow these steps:
Shella supports WishList plugin, however some plugin settings should be tunned up a bit. Marked sections on the screenshots bellow display the needed settings which differ from the plugins' defaults:
In this section we will describe how to install the CWS FlatIcon plugin and how to add your own icons to your pages.
Shella supports CWS FlatIcon plugin, making it possible to colorize your website with the help of your own specific icons. In order to setup it, please perform the following steps:
A video tutorial can help you much. It is available here