Shapely Theme Documentation

What you will learn:

1. Install Shapely theme
2. Import Shapely demo content and widget content.
3. Set up front/home page
4. Set up Portfolio Section
5. Parallax sections and aligned image sections
6. Testimonials
7. Client/partner logo slider
8. Call For Action
9. Social Icons
10. Navigation Menu Set up
11. How to Set up and Use Post & Page Templates

1. Install Shapely theme

You can download the Shapely theme from the 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 the video below.

2. Import Shapely demo content and widget content.

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

Download Shapely demo content.
Unzip it and you should see two files shapely-demo.xml and shapely-widgets.wie.
Import regular Shapely demo content by going to WordPress dashboard -> Tools -> Import -> WordPress. You should there upload file shapely-demo.xml
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).
Now you are ready to import widget content. For that you need to search for a plugin called “Widget Importer & Exporter”. You can find and install it via the WordPress dashboard -> Plugins -> Add New.
Once you have the 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 the 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 of how everything works and not to create an exact clone.

3. Set up 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.

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”.
Now you need to change the Template for this page. You can do that via “Page Attributes” that you can see on the right side of the post editor screen. From Template downtown choose Home Page. Now click the Update page to save these changes.
Once you have this page ready you have to set it as the 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 the demo content we described in the 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. Set up Portfolio Section

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

Install and activate Jetpack if you haven’t already.
Go to Jetpack -> Settings and enable Custom Content Types.
Enable Custom Content Types by clicking on “Configure”.
Now you can start adding portfolio items via WordPress dashboard -> Portfolio -> Add New.
Afterward, you should select the 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 the 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:

Go to WordPress dashboard -> Plugins -> Add New and search for Jetpack.
Now you can enable Custom Content Types via WordPress dashboard -> Jetpack -> Settings.
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.
Now you can go ahead and add new testimonials via WordPress dashboard -> Testimonials – Add New.
Featured images for testimonials are used for testimonial author images that does below testimonials.