IndusPress - GretaThemes

Thank you for choosing IndusPress for your business website. In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

#Installation

We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

After installing the theme, go to the Dashboard → Plugins → Add New, and install Jetpack plugin. After that, click Activate button to activate the plugin.

After installing Jetpack, you need to connect to WordPress.com to start using it. Simply click the green button on the top right that says Connect to WordPress.com. Login with your WordPress.com account (or create one) and click Authorize Jetpack.

Finally, go to Jetpack → Setting . Then click active module Contact Form.

#Import demo content

This step is optional. You should be able to customize the whole theme by following our documentation. In case you want a quick setup for the look just like our demo, please follow these steps:

Download the IndusPress Demo Import plugin
Go to Plugins → Add New in the dashboard, then click Upload Plugin. Choose the .zip file you downloaded and click Install Now. Then click Activate link to activate it.
Go to Tools → Import Demo and click Import Demo Content.

It takes a couple of minutes to process all the content. After done, go to the frontend and enjoy the theme.

#Setup

#Header

Top bar

Top bar has 2 parts: the top bar left and top bar right. Each of them is a custom sidebar where you can add content easily via widgets.

To start adding widgets to the Top bar sidebars, go to the Customize → Widgets → Topbar left (right), and add your widgets. In our demo, we simply use a text widget for the top bar left and a custom menu widget for the top bar right.

Custom Logo:

You can add a custom logo by going to Customize → Theme Options → Header and uploading your own logo image.

Header top

The header top is the section on the right of the header where you can add a custom content such as languages or contact phone number. In our demo, we display 2 languages: English and German.

Go to Customize → Theme Options → Header and enter text or HTML in the box.

Header right widget area

We offer a widget area in the header right where you can add custom text (contact number, hotline, a button, etc.) or a menu. We also created a widget specifically for this sidebar called IndusPress: Contact info.

Go to Customize → Widgets → Header, click + Add a widget button and select IndusPress: Contact info from the widget list:

Adding contact info widget

This widget has following options:

Icon: The widget icon, simply select from available icons as listed
Title: The title text
Subtitle: The subtitle text

#Front page

When you first activate IndusPress, your front page will display posts in a traditional blog format. To set up your homepage, follow these steps:

Create a page.
Go to the Customize’s Static Front Page panel and set Front page displays to A static page.
Select the page you created in step one as the Front page, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

Front page sections

IndusPress Homepage

Slider

Each slide in the homepage slider is a child page of the homepage, where:

Slide image is the page featured image
Slide text (content) is the page content

You can create as many slides as you want by creating more child pages for the homepage. If you want the homepage has a static hero area, just create only 1 child page for the homepage.

In order to display the content in the slider beautifully, we recommend using headings and some custom CSS classes as follow:

Subheading: h2 tag with subheading class
Heading: h1 tag
To center the content: use center class
White background block (heading or content), use block class
Primary button, use a tag with button class
Minimal (outline) button, use a tag with button-minimal class

We also add animation CSS classes to make the content appear more attractive:

fadeInLeft: Fade in from left
fadeInRight: Fade in from right
fadeInTop: Fade in from top
fadeInBottom: Fade in from bottom

You can also put shortcode into the page content to show it in the slide. In our demo, we use Jetpack Contact Form module to create a shortcode for the contact form. We recommend using Jetpack but you can use any contact form plugin to output the shortcode (Contact Form 7, GravityForms, etc.)

To make it easier for you to edit the slider, here is the content of slide 1, slide 2, slide 3 from our demo.

Call to action

The call to action section is displayed at the bottom of the slider. It is actually the content of the homepage.

To make the content appear exactly like in the demo, we recommend using:

h3 tag for the main content
a tag with button class for the primary button
a tag with button-minimal class for the minimal (outline) button

Front page sections

Each section below on the front page is a widget for the Homepage sidebar. You can add as many sections as you want and/or reorder them just by drag-and-drop as normal widgets.

Go to Customize → Widgets → Homepage, and add these widgets:

IndusPress: Services
IndusPress: Welcome
IndusPress: Products
IndusPress: Call to action
IndusPress: News
IndusPress: Projects
IndusPress: Clients

Each widget has its own inputs for you to enter the content. You can enter HTML for any inputs of these widgets. In order to make it easier to style the content, we already created some CSS classes for styling:

Buddon: use a link with button-minimal class
Highlighted text: use number class

To select an image for widgets, click the Select button to choose an image from the Media Library or upload your own one. You can also use external image by just entering its URL in the input box.

Button and highlight text

#Layout

Using IndusPress, you are able to change the layout for the blog section, single page and single post to make them display nicely and fit your business style.

Go to Customize → Theme Options → Layout. and you will see the options for:

The layout style for blog and archive page
The sidebar layout for blog and archive page
The sidebar layout for the single page
The sidebar layout for the single post

Layout style

The layout style option allows you to choose how the posts are organized in the blog page or archive page (such as category, author, year archive page, etc.).

There are 2 styles for the layout:

The list style: where posts are displayed one after one with a big thumbnail. This style is suitable if you often write blog posts with large featured image.
The thumbnail - text style: where posts are displayed one after one with a thumbnail on the left and text on the right. This is the classic style and suitable for business websites. You can see the demo of this style here.

Sidebar layout

The next 3 options of the layout are the sidebar layout where you can choose the location of the sidebar: left, right or no sidebar at all. The sidebar left or right are suitable if you want to display some additional info such as advertisement banners, social links, tag cloud, etc. No sidebar is often chosen for the single page where you want users to focus on the content of the page.

#Footer

IndusPress has 4 footer widget areas, each is a column, and the footer copyright text.

To add content to footer widget area, go to Customize → Widgets → Footer and add the widgets.

Social links

IndusPress uses FontEntypo to display the social media icons in the footer. Here is the HTML code of full list of social links which you can just copy and paste into your text widget (remove the social networks that you don't use):

<ul class="social-links">
<li><a href="http://facebook.com"><span>Facebook</span></a></li>
<li><a href="http://twitter.com"><span>Twitter</span></a></li>
<li><a href="http://plus.google.com"><span>Google+</span></a></li>
<li><a href="http://linkedin.com"><span>LinkedIn</span></a></li>
<li><a href="http://youtube.com"><span>Youtube</span></a></li>
<li><a href="http://pinterest.com"><span>Pinterest</span></a></li>
<li><a href="http://vimeo.com"><span>Vimeo</span></a></li>
<li><a href="http://skype.com"><span>Skype</span></a></li>
</ul>

Product gallery

Product gallery is added by adding gallery shortcode to the text widget. This is supported by WordPress so you don't have to install any additional plugin. IndusPress also supports lightbox for WordPress gallery that you can see in action in the demo. For more info about gallery shortcode, please read this documentation.

Copyright text

Just go to Customize → Theme Options → Footer and enter your copyright text. You can use HTML and shortcodes.

#Widgets

IndusPress works with default WordPress widgets. We also create 3 custom widgets that you can use to display beautiful content in the sidebar like our demo:

Dribbble widget
Flickr widget
Posts widget

IndusPress Documentation