Sonnet Wordpress Theme

One Page Parallax Multipurpose Portfolio


Thank you

The whole theme is very well structured and properly organized in different folders. Main theme is splitted into small templates and placed in the "section-templates"section. Common folders like "css","js","img" are also available in the root directory of the theme.

Installing sonnet is easy and straight forward, works same way as you install other WordPress themes. However, here is  quick tutorial.

Please remember to to enable and activate the essential plugins from the theme appearance after you'd activated this theme. They will be prompted in a big yellow box at the top. These plugins are essential for Sonnet to work properly

After activating the theme and enabling the plugin. You should perform the following two steps

1. Create a new page from your wordpress admin pages section, with title "Home" and set the page template as "Home Template" from the right side 
2. Create another new page with the title "Blog" and set it as "Blog Template" from the right side.

Now go to Settings->Reading section in your wordpress admin panel and set the Homepage as "Static" page and pick "Home" from the drop down. Also select the "Blog" from the posts dropdown

Sections are very important in Sonnet. You can control the visual details of each of these sections as well as control their order of appearance. All the sections have these important fields

Hide in Menubar: If you check this box, this section will show in the page but it will never appear in the top or side menu. That's important when you are putting many sections but want to keep your top menu uncluttered and not messed up. 

Section Order: You should put a numerical vale in it to indicate it's order of appearance. The order 1 means that it will display as first section after the top banner area. The section with order 2 will follow the section with order 1 and so on

Section Type: This is one of the most important settings for section. Based on your selection, this section will render accordingly and you will be given additional settings immediately after this box which are more releavant to that type. For example, skill bar settings will be shown if the section type was set to "About Us" and so on

Section Menu Title: This is helpful when the section headline is large, but you don't want that headline to appear exactly as is in your menu to prevent it from messing up. By default, section headlines are shown in menu. But if you want to modify it, this is your textbox to do that

Section Tagline: This text will appear in the top of the section immediately after the headline

Background image, color and other color settings: The rest of the settings in the screenshot above are pretty self explaining and they will control the visual appearance of this particular section

Changing the order of the sections at once

If you have many sections (which you obviously have), changing order of the section taking each at a time might be tiring. That's why we kept this feature to edit the order of your sections from one central place, "All Sections". Just edit there and they will be instantly saved. 

 

Here's a video tutorial on Section Management

Here is how  a story section will display if properly set up.

 

To Setup a Story Section

1. Create a new section and set it's "Type" to "Stories". Add the title and tagline, and play with other color and visual settings as you want

2. Now click on "Story->New Story" from the left side menu in the wordpress admin panel

3. Now fill up the Title and other contents in the following screenshot

The important settings are icon, Icon background color and Animation style. Stories will appear in the same order that you specify in order box above. 

Create three stories like this and you are done!

 

Enabling the Message section in Stories

When you created the section with section type set to stories, you will find an additional meta box like the one shown below asking whether you want to display the message with button

If you wnable it and fill up the content, the button will appear under the Stories section like this

Here is how  a portfolio section will display if properly set up.

 

To Setup a Portfolio Section

1. Create a new section and set it's "Type" to "Portfolio". Add the title and tagline, and play with other color and visual settings as you want

2. Now you will see an additional settings box below the section box in the wordpress admin panel, with an "Attach Images" button. Click on that button and as many images as you like. Remember that tags in each of these attached image is very important. Provide all the tags for each of these images separated by commas. See the screenshot below

3. Now Save and you will see a beautiful portfolio section. 

 

Enabling the Message section in Portfolio

When you created the section with section type set to portfolio, you will find an additional meta box like the one shown below asking whether you want to display the message with button

If you wnable it and fill up the content, the button will appear under the Portfolio section like this

About Us section will look like this, if properly configured

 

To Setup a About Us Section

1. Create a new section and set it's "Type" to "About Us". Add the title and tagline, and play with other color and visual settings as you want

2. You will see an additional settings box like the one below once you set the section type to "About Us". From there you can change the content (Left and Right Paragraph Block) and the skill bars below. You can also turn off the skillbars if you want

3. Set the skill name and percentage from the screen below and save

If properly configured then this section look like this

 

To set it up, please watch this tutorial video

 

Services section will look like this, if properly configured

 

Lets see how can we setup the services section

1. Create a new section and set the section type to Services

2. Now go to "Services->New Service" in the Wordpress Admin panel. You will see the panels like this. Fill 

3. Fill up the details, choose icon and save. You are done! Create a max of 3 services. 

News Section will look like this

 

To create a news section, follow these steps

1. Create a new section and set it's type to "News". You will see an additional settings panel from where you can change News title color, text color and background color

2. Now go to "News -> New News" from the wordpress admin panel and add title and content. To set a thumbnail for the news, upload an image from the "Featured Image" box in the right side. 

3. Save and you are done. 

The Email subscription section will look like this

To setup one section like this, you need to create a new section and set the section type = Subscription. Now you will get access to the following settings. This form takes two very important argument to integrate this form with any popular email subscription system like Mailchimp out there. 

Email Field ID is the internal "id" and "name" attribute for the textbox in this form. The form will be submitted to the Form Submit Url

A Testimonial section will look like this 

 

To create one section like this

1. Create a new section and set it's type to "Testimonial"

2. Now from "Testimonials - New Testimonial" menu in wordpress admin panel. Now fill up the content in the editing panel shown one like below. Upload the image of the endorser as well

A Feature  section will look like this 

 

To create one section like this

1. Create a new section and set it's type to "Features"

2. Now from "Features - New Feature" menu in wordpress admin panel. Now fill up the content in the editing panel shown one like below. 

3. Upload the feature image from the featured image section in the right side

 

Feature  section will look like this 

 

To create one section like this

1. Create a new section and set it's type to "Pricing Table"

2. Now from "Pricing Tables - New Pricing Table" menu in wordpress admin panel. Now fill up the content in the editing panel shown one like below. Add each pricing table row in new line. If you want to make one table as featured, just check the "Featured" checkbox

 

 

 

Client section will look like this

 

To create a section like this, set the section type = "Clients", you will instanly see a settings panel like the one shown below. From this panel, add as many client logos as you want and set their URL

Contact section will look like this when properly designed and configured

 

For this, create a new section and set it's section type = "Contact Us". We also suggest that you will cange the contact settings from "Sonnet Admin -> Contact Settings". You will see a settings screen like this

The popup message will be displayed when someone will send a message to you. The email will be delivered to "Contact Mail Receiver"

A DIY section is a blank section where you can visually design it's content using Visual Composer. For now

1. First create a page from "Pages" menu in wordpress admin panel and design it using visual composer. You can see the blue visual compposer button in the editing area

 

2. Now create a new section and set it's section type = "Blank". In the section editor, connect the page you designed in Step 1 from the "Connected Pages" panel in the bottom right side. Just click on create connection and select the page. 

3. This page will now appear in the blank section :)

 

Sonnet comes with a slick admin panel which you can access by going to "Sonnet Admin" in the left side of your wordpress admin panel. 

 

You can set social icons (global), banner, footer texts and turn off the sidebar in the left side (from the extra settings). You will also be able to insert custom css and google analytics code from the Extra Settings section. 

Here is a tutorial on preparing the banner content for the theme