Goran

Goran: Front Page

Goran is a functional and responsive multi-purpose theme that is the perfect solution for your business’s online presence.


Responsive Design

Goran looks great on devices of all sizes, from desktop to mobile and everything in between. The theme adapts to any screen without sacrificing usability or design integrity.

Goran: Responsive Design


Custom Page Templates

Goran has four custom page templates that are particularly useful for business and corporate websites:

Front Page Template

This template is tailor-made for homepage that introduces your business to the world. Rich, powerful, and flexible, the Front Page Template includes three optional featured page areas and three optional widget areas. You can also add a full-width leading image with a call to action, as seen in the screenshot above.

When you first activate Goran, you’ll see your posts in a traditional blog format. If you’d like to use this template as the front page of your site, follow these instructions:

  1. Create or edit a page, and then assign it to the Front Page Template from the Page Attributes module.
  2. Add an introduction to your site. For best results, we recommend a few sentences.
  3. Set your front page image — behind the text — as a Featured Image.
  4. Go to Settings → Reading and set “Front page displays” to “A static page.”
  5. Select the page to which you just assigned the Front Page Template as “Front page,” and then choose another page as “Posts page” to display your blog posts.

Grid Page Template

The Grid Page Template displays all child pages of the page in a grid format. This template is perfect for highlighting case studies or services.

Goran: Grid Page Template

Full Width Page Template

The Full Width Page Template is great for embedding a large map, video, or contact form.

Goran: Full Width Page Template

Alternate Sidebar Page

One of Goran‘s Theme Options allows you to choose the sidebar’s default position — right or left. The Alternate Sidebar Page template will overrule this default on a given page, and that page’s sidebar will appear on the opposite side.

Goran: Alternate Sidebar Page Template

In the Theme Options, we selected right for the sidebar’s position. This page template is displaying the sidebar on the left.


Custom Menus

Goran allows you to have two Custom Menus: one in the theme’s header and one in the footer. To set up your menus, go to Appearance → Menus.

Don’t forget to tick “Primary Menu” in the Menu Settings if you want to display a menu in the header and/or “Footer Menu” if you want to display a menu in the footer.

Primary Menu

The Primary Menu will display next to your site title.

Goran: Primary Menu

Footer Menu

The Footer Menu will only show the first level of links.

Goran: Footer Menu


Social Icons

Goran displays links to your social media profiles as icons using a Custom Menu. Icons for Twitter, Facebook, LinkedIn and most other popular networks are included.

Goran: Social Icons

Set up the menu

To automatically apply icons to your links, simply create a new Custom Menu and give it a name that starts with “Social” (e.g. “Social Menu,” “Social Links”). This specific name is important – it must start with the word “Social” to work correctly.

Next, add each of your social links to this menu. Each menu item should be added as a custom link.

Once your menu is created and your social links are added, you can display it in your Footer Menu. You can also create a new Custom Menu Widget to display it in any of Goran‘s widget areas as seen on the demo site.

Goran will automatically display an icon for each service if it’s available.

Available icons

Linking to any of the following sites will automatically display its icon in your menu:

  • Codepen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Pocket
  • PollDaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Theme Options

Goran comes packed with multiple Theme Options available via the Customizer:

Goran: Theme Options

Goran‘s demo site theme options.

  • Sidebar Position: choose to display the sidebar on the left or right.
  • Top Area Content: display some content above the header — perfect for a phone number or an email address.
  • Thumbnail Aspect Ratio: choose the aspect ratio of the thumbnails used for the Grid Page Template or for the Featured Page Areas.
  • Pages: show breadcrumb navigation: display a breadcrumb navigation on pages.
  • Front Page: show title: display the Front Page Template’s title.
  • Front Page: Featured Page One: select a page to feature on the Front Page Template.*
  • Front Page: Featured Page Two: select a page to feature on the Front Page Template.*
  • Front Page: Featured Page Three: select a page to feature on the Front Page Template.*

*For any of the featured pages selected for the front page, keep in mind that if you choose your posts page, the front page will display excerpts and featured images of your latest blog posts.

Goran: Featured Pages Area

Featured Page Areas


Site Logo

Goran supports the Site Logo feature. To brand your site and include your business logo, navigate to Customize → Site Title and upload a logo image in the space provided.

Goran: Site Logo


Widget Areas

Goran offers seven widget areas, which can be configured in Appearance → Widgets:

  • An optional sidebar widget area, which appears on the right or left.
  • Three optional footer widget areas.
  • Three optional widget areas on the Front Page Template.
Goran: Footer Widget Area

Footer Widget Areas

Goran: Front Page Widget Area

Front Page Template Widget Areas


Custom Header Image

Pages without a Featured Image will display a Custom Header (if you’ve uploaded one). To set the Custom Header simply go to Appearance → Header and select your header image.

Page without a Featured Image and Custom Header not set

Page without a Featured Image and Custom Header not set

Page without a Featured Image but with Custom Header

Page without a Featured Image but with Custom Header


Extras

Goran comes with two special CSS styles, button and button-minimal. You can add these classes to your links in the Text Editor, to create “call to action” buttons:

Goran: Buttons

For example:

<a href="http://gorandemo.wordpress.com/" class="button">Button</a>

<a href="http://gorandemo.wordpress.com/" class="button-minimal">Button Minimal</a>

Quick Specs (all measurements in pixels)

  1. The main column width is 700 except in the full-width layout where it’s 1086.
  2. A widget is 314.
  3. Featured Images for posts are 772 wide by unlimited high.
  4. Featured Images for pages are 1230 wide by 1230 high.