Envato Corporate Campaign – 40% off selected items. Find out more

1. Install Shapely theme

You can download shapely theme from theme landing page which you can find here or by using this download link.

Once you have shapely.zip downloaded you can go to your WordPress dashboard -> Appearance-> Themes-> Add New ->Upload Theme and upload previously downloaded file. Once installed you can click “Activate Theme”. For more information please watch video below.

2. Import Shapely demo content and widget content.

Shapely theme depends on WordPress widgets and regular WordPress Importer doesn’t support widget content. Therefore it makes theme demo content import slighly different but luckily we have got you covered.

  1. Download Shapely demo content.
  2. Unzip it and you should see two files shapely-demo.xml and shapely-widgets.wie. 
  3. Import regular Shapely demo content by going to WordPress dashboard -> Tools -> Import -> WordPress. You should there upload file shapely-demo.xml
  4. Afterwards you should change your website from blog layout to static website by going to WordPress dashboard -> Settings -> Reading -> Front page displays -> A static page (select below).
  5. Now you are ready to import widget content. For that you need to search for plugin called “Widget Importer & Exporter”. You can find and install it via WordPress dashboard -> Plugins -> Add New.
  6. Once you have above mentioned plugin installed you can go to WordPress dashboard -> Tools ->Widget Importer & Exporter and there you should import shapely-widgets.wie which you downloaded earlier.

You are now all set with demo content and your website should look exactly like theme demo. But don’t worry if something looks different as you are not cloning our theme demo but learning to create your own website with Shapely. Demo content is there to give you an idea how everything works and not to create an exact clone.

3. Setup front/home page

Further steps assume that you haven’t watched video above regarding demo content import and want to create a website on your own without it. 

  1. Create a new page by going to WordPress Dashboard -> Pages -> Add New. You can use any title for this page but in our example we call it “Front Page”.
  2. Now you need to change Template for this page. You can do that via “Page Attributes” that you can see on the right side of post editor screen. From Template downtown choose Home Page. Now click Update page to save these changes.
  3. Once you have this page ready you have to set it as homepage for your website. You can achieve it by going to WordPress dashboard -> Settings -> Reading -> Front page displays -> A static page (select below) and there select your newly created page.

Please note! If you didn’t import demo content we described in previous step you will get a black page instead of content. No need to import demo content if you don’t want it as further steps will explain how to do everything without demo content. 

4. Setup Portfolio Section

We assume that you watched 1st video on this description and you have Jetpack plugin already installed. If not you can install it by going to WordPress Dashboard -> Plugins -> Add New and search for “Jetpack”

  1. Instal and activate Jetpack if you haven’t already.
  2. Go to Jetpack -> Settings and enable Custom Content Types.
  3. Enable Custom Content Types by clicking on “Configure”.
  4. Now you can start adding portfolio items via WordPress dashboard -> Portfolio -> Add New.
  5. Afterwards you should select Portfolio widget to be displayed on front page. You can do that by going to Appearance -> Customize -> Widgets -> Homepage and there select [Shapely] Portfolio for Home Widget.

Above described steps are also visible on video below:

5. Parallax sections and aligned image sections

This theme comes with parallax options and there are two kind of parallax sections – small(Background Small) and full screen(Background Full). These two options can be used via Customize -> Widgets – Homepage and there you should add “Parallax Widget”. From there you can play around widget options to see how they work.

On top of parallax sections there are 4 other options for image alignment – left, right, top and bottom. They are enabled via the same “Parallax Widget” by simply changing “Image Position” for particular widget settings.

Please watch a video below to see how these options work. They are very easy to use as all changes you make you can see on the live preview before you even save your options.

6. Testimonials

If you have followed documentation you already have Jetpack and its Custom Content Types module enabled. If not you should follow these steps:

  1. Go to WordPress dashboard -> Plugins -> Add New and search for Jetpack. 
  2. Now you can enable Custom Content Types via WordPress dashboard -> Jetpack -> Settings.
  3. Not click “Configure” right next to Custom Content Types and on that screen enable Testimonials that you will see at the very end of the page.
  4. Now you can go ahead and add new testimonials via WordPress dashboard -> Testimonials – Add New.
  5. Featured images for testimonials are used for testimonial author images that does below testimonials.

7. Client/partner logo slider

8. Call For Action

9. Social Icons

10. Navigation Menu Setup

11. How to Setup and Use Post & Page Templates