Lungo Instructions

Instructions for getting started with the WordPress theme Lungo. Head over to the support forums if you need some further help or if the world has fallen on its head.

Installing and Activating the Theme

Login into your WordPress admin area, look under the Appearance tab, and select Themes.

Click on the Install Themes tab at the top of the page and click Upload.

Browse to the download location of the Lungo.zip file and select the and press the Install Now button.

After you have chosen and uploaded the zip file, you will have three options to choose – click Activate to enable the theme on your website.

Built in Theme Options

Built in Theme Options

In your WordPress admin area, look under the Appearance tab, and select Theme Options. These simple theme options allow you to quickly update the site with your details. Example below:

Lungo Theme Options

Front Page

Disable Homepage Banner Message: Turn on/off homepage template header message/image.

Homepage Banner Message: The message on the homepage template.

Homepage Banner: Full width background image. Ideal width 1500px.

Homepage Banner Height Limit: Set the maximum height of the featured image. (Pixels)

Homepage Banner External URL: Link the featured work banner to a custom URL. (Prefix with: http://)

Homepage Banner Background Color: Change the background color, behind the fullwidth banner. Useful if you a low opacity image in use.

Homepage Banner In Content Overlay: This is the content displayed on the homepage template fullwidth banner message, it sits below the main text. The content cab be any media of your choice, in the Lungo demo I use a simple image.

Homepage Features Title: Displayed above the features section.

Enable Homepage Projects: Turn on/off homepage project view.

Homepage Projects Title: Displayed above the projects section.

Homepage – Gallery – Limit: Set how many gallery items to display. Leave blank to list all.

Homepage Projects Background Color: Set the background color of the homepage project section.

Homepage CTA Message: Displayed above the homepage template footer.

Homepage CTA Message Background Image: Full width image. Ideal width 1500px.

Homepage CTA Message Background Color: Change the background color of this section.

Styling

The style options allow you to change the basic front-end styling of the site.

Enable Plain Text Logo: Tick the box of you do not wish to use the default logo or if you wish to use your own uploaded logo.

Upload Your Custom Logo: Upload your own logo, be sure your logo is on a transparent background and saved as either a .png or .gif.

Upload Your Favicon: Here you can upload your own favicon, this will overwrite the default favicon. Files should be saved as a ..png and be 16×16 pixels.

Upload An iPhone/iPad Icon: When you view the site on an iPad or iPhone and select Add to Home Screen on your device a default icon will appear for the site. To add your own icon, use the upload feature and ensure your icon is to the dimensions of 234 x 240 pixels.

Upload A Custom Login Logo: When you login into your site [yoursite.com/wp-admin] you can set a custom logo to be displayed on the login screen, this will overwrite the default ThemeJug login logo.

Header Background Color: You can quickly change the color of the header area.

Footer Background Color: You can quickly change the color of the footer widget area.

Footer Site Copyright Background Color: You can quickly change the color of the footer credit area.

Link Color: You can quickly change the color of the hyperlinks by using the color selector.

Link ‘Hover’ Color: You can quickly change the color of the hyperlinks ‘hover’ color by using the color selector.

Heading Color: Change the heading text color.

Body Text Color: Change the body text color.

Secondary Body Text Color: Change the meta text color.

Menu Link Color: Change the menu link color.

Menu Link “Hover” Color: Change the menu link hover color.

Widget Title Color: Change the widget title color

Widget Text Color: Change the widget text color

Widget Link Color: Change the widget link color

Widget Link Hover Color: Change the widget link hover color

Background Color: Change the body background color.

Gallery Hover Background Color: Change the hover color on gallery thumbnails.

Gallery Hover Text Color: Change the hover color on gallery text title and tags.

Line Accent Color: Change the line/input outline/seperator colors.

Pagination/Filter Button Color: Change the background color of pagination/filter buttons.

Pagination/Filter Button Hover Color: Change the background color of pagination/filter buttons hover states.

Custom CSS: If you wish to add small amounts of custom CSS to the site, it is best to do it here, this way you avoid altering the themes core CSS files. If you wish to make large theme changes/additions please use a child theme, or use a plugin: Child theme plugin.

General Options

Footer Text: You can overwrite the footer text area with your own custom text.

Footer Copyright Text: You can overwrite the footer copyright text with your own custom text.

Feedburner URL: This setting allows you to add your Feedburner URL, allowing people to subscribe to your blog posts. Example feed format: http://feeds.feedburner.com/mysitename

Portfolio Settings

Disable Portfolio Banner Message: Turn on/off portfolio template header message/image.

Portfolio Banner Message: The message on the Portfolio template.

Portfolio Banner: Full width background image. Ideal width 1500px.

Portfolio Banner Height Limit: Set the maximum height of the featured image. (Pixels)

Portfolio Banner External URL: Link the featured work banner to a custom URL. (Prefix with: http://)

Portfolio Banner Background Color: Change the background color, behind the fullwidth banner. Useful if you a low opacity image in use.

Gallery Template – Limit: Set how many gallery items to display on the a portfolio template page.

Gallery – Order By: Alter the order of gallery items.

Gallery – Order: Change to ascending or descending order.

Single Gallery – Link to work page. This enables the link back button to appear between the gallery pagination buttons. Select which page to link to.

Single Gallery – Client Heading: Change the prefix text.

Single Gallery – Client Date: Change the prefix text.

Single Gallery – Enable “More” Galleries: Enable more galleries to show in the footer of a single project.

Single Gallery – “More” Galleries – Order By: Alter the order of gallery items.

Single Gallery – “More” Galleries – Order: Change to ascending or descending order.

Single Gallery – “More” Galleries – Limit: Limit the galleries to show in the footer of a single project.

Single Gallery – Exclude Featured Image: Exclude the featured image from being included in the main gallery images/slideshows.

Single Gallery – Featured Image jQuery Stretch: Use jQuery to enlarge your portfolio featured image to full width.

Contact Page

Your Email Address: Used in the contact form.

Disable Contact Banner Message: Turn on/off contact template header message/image.

Contact Banner Message: The message on the Contact template.

Contact Banner: Full width background image. Ideal width 1500px.

Contact Banner Height Limit: Set the maximum height of the featured image. (Pixels)

Contact Banner External URL: Link the featured work banner to a custom URL. (Prefix with: http://)

Contact Banner Background Color: Change the background color, behind the fullwidth banner. Useful if you a low opacity image in use.

Creating Menus

Creating Menus

In the WordPress admin area click Menus. This is located under the Appearance tab in the left sidebar.  (Appearance -> Menus). To create a new menu, enter a Menu Name and click the blue button ‘Create Menu’, located top left.

Once the new menu is created you can add pages, categories, and custom links from the panels on the left.

You can then drag and drop the menu blocks if you wish to re-order them, you can create submenus by dragging the menu items under each other.

When you’re finished, click the Save Menu button.

In the Theme Locations box, under Primary Menu select your menu name from the drop down box and click Save.

Lungo Menu Setup

Adding Widgets

Adding Widgets

All themes at ThemeJug come with custom widgets; you can find these labeled with the prefix [ThemeJug – Widget Name] in the Widget admin area. (Appearance -> Widgets).

You can add these widgets to areas in the blog sidebar and footer widget areas by simply dragging them over and customising each widget option.

Custom Widget Reference:

ThemeJug – Homepage Services Widget

This widget is used to add your offered services on the homepage template. You should drag & drop this into the widget area labelled ‘Homepage Services’. You can specify an icon image URL, this is placed next to the service text. You can upload images to your site under Dashboard => Media => Add new.

ThemeJug – Video

This widget is used to allow you to embed a responsive video from Vimeo or YouTube into the sidebar area.

ThemeJug – Flickr

This widget is used to pull a specified user group or a specified user photo feed. To get your Flickr ID use http://idgettr.com/

Example Widget Setup:

Lungo Widget Setup

Building A Portfolio

Building A Portfolio

This theme uses WordPress a custom post type called ‘Gallery‘ to build your portfolio. To start first you will need to create a new Page. In the Dashboard left column, find and click Pages -> Add New.

Give your page a title, for example Portfolio and in the right column of the page editor find the box named Page Attributes.

In Page Attributes you will see a drop-down box under the heading Templates, here you need to select the page template called Page – Portfolio.

Creating Gallery Items

To start filling the portfolio pages, Click Galleries -> Add New in your dashboard.

There are three different portfolio types supported, you need to select one to use:

Image: All gallery images uploaded are displayed on the page one item at a time.

Slideshow: Automatically create a slideshow that loops through all images you upload. Simply upload your images and close the WordPress image uploader. Do not insert the images into the post content, WordPress gets the images automatically.

Video: Embed a video from Vimeo or YouTube or you can upload a self-hosted video.

Example Gallery Item Setup:

Lungo Single Gallery Setup

Setting A Thumbnail:

You will need to assign each gallery item a Featured Image this is used as the gallery thumbnail.

The theme will crop your uploaded images to the correct dimensions; you just need to select a ‘Featured Image’.

In the Add New Gallery screen, find the Featured Image box and click Set Featured Image. Either upload or select a previously uploaded image to use and click the Use as featured image link.

Ordering Galleries:

You can drag and drop to re-order your galleries. To do this go: Galleries -> Sort Galleries. Then in the theme option panel in the ‘Front Page’ tab find ‘Gallery – Order By’ and select ‘Menu Order’.

Ordering Uploaded Images:

You can re-order your upload images within a gallery. Simple click the ‘Add Media’ button in a gallery or blog post, in the drop down menu select ‘Uploaded to this post’ and simply drag and re-arrange your images.

Image Note: You must upload your images to each gallery item you create to use the custom built in image/slideshow display. Simply upload and then close the upload box. Do not insert, or click ‘create a gallery’. The theme grabs your images automatically after you have uploaded the images inside that gallery item.

Building A Homepage

Building A Homepage

By default WordPress usually sets your homepage to display your blog posts. To set up a homepage like the theme demo, create a new page: Pages -> Add New.

Give your page a title, for example Home and in the right column of the page editor find the box named Page Attributes.

In Page Attributes you will see a dropdown box under the heading labelled ‘Templates’, here you need to select the page template called Page – Home.

Click “Publish” to finish.

Important:

Next you need to set your homepage as a static page, in this case, the page you just created. Head over to Settings -> Reading.

Find the Front page displays heading and tick the box labeled A static page (select below). In the Front Page select box locate and select your newly created page, in this case Home.

Click “Save Changes” to complete.

Adding Content To The Homepage

The Lungo Homepage is built up from four sections.

Section 1: Full width banner, background color, background image , message. This is controlled in Dashboard => Theme Options => Front PageSee screenshot example.

Section 2: Services offered. This is controlled in Dashboard => Appearance => Widgets. Drag & drop the widget labelled ‘ThemeJug – Homepage Services Widget‘ into the widget area labelled ‘Homepage Services‘.

The Title of Section 2 is edited in Dashboard => Theme Options => Front Page => ‘Homepage Features Title’. See screenshot example.

Section 3: Homepage Work. Dashboard => Theme Options => Front Page => ‘Enable Homepage Projects’. See screenshot example.

Section 4: Call To Action Text: Dashboard => Theme Options => Front Page => ‘Homepage CTA Message’. See screenshot example.

Building A Blog

Building A Blog

This theme supports multiple post formats – this means you post your own videos, images, galleries, links, quotes and of course the normal standard posts.

Create a blog post: To create a new blog post, in the left sidebar click Posts -> Add New’. In the right sidebar you can choose which post format you wish to use.

There are seven different post types supported, you need to select one to use:

Standard: A standard post full of anything you wish!

Gallery: A slider containing your images is automatically created from all the pictures you upload.

Video: Embed a video from YouTube or Vimeo.

Creating A Separate Blog Page

Creating A Separate Blog Page

Though not necessary, should you wish to display something other than your blog posts on your homepage, such as a homepage template like in the demo, you can set up another page to display your blog posts on.

To set it up, simply create a new page Pages -> Add New.

Give your page a title, for example Blog and click Publish to save and finish.

Next you need to set your blog homepage as a static page, in this case, the page you just created. Head over to Settings -> Reading.

Find the Front page displays heading and tick the box labeled A static page (select below). In the Posts Page select box locate and select your newly created page, in this case Blog.

Click “Save Changes” to complete.

Creating A Contact Form

Creating a Contact Form

This theme comes packed with a built in contact form, to set it up, simply create a new page Pages -> Add New.

Give your page a title, for example Contact and in the right column of the page editor find the box named Page Attributes.

In Page Attributes you will see a dropdown box under the heading Templates, here you need to select the page template called Page – Contact.

You set the email address, your map address and header information for the contact form in the theme options panel Appearance => Theme Options => ‘Contact Page’, if one is not supplied it will grab the email associated to the WordPress install.

Click Publish to save and finish.

Lungo Contact Setup


October 3, 2013 by: ThemeJug Support

We are no longer accepting orders! Please do not try to make a purchase
Hello. Add your message here.