We recently published an article called “How to make a photography portfolio website”. It describes everything you need to think about while building your personal portfolio.
Check it out here.

This chapter covers theme download, installation, sample content import, menu and front page assigning and theme options import.

After purchasing this theme download the package from Themeforest. To do that, go to your themeforest.net profile move your mouse cursor over your login name in the right top corner and then click “Download”.

Here you will find all the items that you have purchased.

Locate BlueBird, click the “Download” button and choose “All files & documentation” and save the package on your computer.download

 

UNZIP the package you just downloaded.

Inside you will find a copy of this documentation, license, purchase code and a zipped BlueBird file (bluebird-theme.zip) that you will need to install onto your WordPress.

  1. Login into your WordPress Admin panel
  2. Go to Appearance > Themes
  3. Click on the “Add New Theme” > Upload Theme
  4. Choose file and select ashi.zip (this file is INSIDE the zipped file you’ve downloaded from Theme Forest)
  5. Hit “Install Now” and the theme will be uploaded and installed.
  6. Then click on the Activate link.activate

 

Installing Plugins

  • After successful theme installation you will be presented with a set of plugins which were used in the live theme preview.install-plugins
  • Clicking on ‘Begin installing plugins’ .
  • Then select all of the plugins in the plugin list and bulk install them.

 

Ashi demo import is easy and fast.

After you installed your theme and all required plugins, follow these steps:

  1. Go to Theme Options > Demo Importerdemo import lookpsd
  2. Click on the blue “Import Demo” button and wait until the importing process is done.

Theme Options panel is the main theme configuration area. You can find it in your WordPress dashboard, it is called Theme Options. 

Go there and get to know your theme better!

You can upload your custom logo image in Theme Options > Branding

You will see 2 logo areas – Site Logo and Site Logo @2x.logo

  • in Site Logo upload an image in the size that you would like to actually have on your site. (ashi demo logo is only 53x19px in size)
  • in Site Logo @2x upload a logo that is exactly 50% bigger than Site Logo. By doing this you will make sure that your logo looks crisp on retina displays. (ashi @2x logo is 106x37px in size)

For best results use .png image file type with a transparent background.

You can upload a background image for your site by going to Theme Options > Branding and upload your image under “Site Background Image”.

Image size

Here are some tips for your background image:

  1. your image should not exceed 1400px width
  2. blur out your image a bit (Photoshop can help with that)
    1. blurring will accent your main site content more
    2. the background image won’t look bad if viewed on large screens (1920x1080px and larger)
    3. image size (kB) will be smaller, therefore making your site load faster
  3. save your image as .jpg file
  4. compress your image before uploading to make the file size smaller. A good tool for that is JPEGmini.

Ashi theme is built with two menu layouts – offscreen and regular menu.

When offscreen menu is activated, a stylized hamburger icon appears in the top-right corner of the screen. You must click this icon to reveal the site menu.

When regular menu is activated, you will see all site menu links in the top-right corner of the screen.

To choose a menu layout style for your site, go to Theme Options > Branding. Look for “Menu layout”.

Each of your pages can have a page title, subtitle and description (excerpt).title, subtitle, excerpt

To add any of these to your page, open a Page trough your admin dashboard and fill out the Title, Subtitle and Excerpt fields.

Page without Title

If you don’t want to have a title in any of your regular pages, set the page Template to “Page Without Tile”Screen Shot 2016-08-18 at 3.43.10 PM

00-screenshot

Ashi theme is bundled with Cornerstone page builder. Cornerstone is an easy to use, intuitive page builder that lets you build your page layouts. In this section of documentation, we will explore Cornerstone page builder.

Cornerstone is an easy to use, intuitive page builder that lets you build complex page and post layouts with ease.

Cornerstone was developed by ThemeCo so the best way to get to know this page builder is by going straight to their documentation.

Where to find Cornerstone editor

  1. Click on a page or post you want to edit with Cornerstone in the WordPress admin area.
  2. Above the WordPress editor and to the right you will notice a tab named “Cornerstone” next to the “Visual” and “Text” tabs.
  3. Clicking the “Cornerstone” tab will reveal the “Edit with Cornerstone” button for you to click to take you to the editor.
  4. Once you have selected this “Cornerstone” tab, it will continue to be the option selected when available across your pages and posts.

Cornerstone Introduction Video

Here’s a video made by ThemeCo (authors of cornerstone) Go trough it, then try to build some pages by yourself, that is the best way to learn how to use Cornerstone!

You can also click here to watch the same introduction video posted above.

Cornerstone Documentation

Everything you need to know about the page builder can be found here.

Cornerstone Elements Videos

We found a couple of useful Cornerstone element videos here on Youtube that you might want to check out if you’re wondering how a specific element is used.

This chapter explains how to set up your portfolio and create galleries in ahsi theme.

If you imported the demo content, you already have a pre-made portfolio page and you do not need to create a new one.

  1. Go to Pages > Add New
  2. On the right side of the screen locate “Page Attributes” and set the Template to Portfolio.
  3. Fill out the page title field and if needed – subtitle and description fields.portfolio page
  4. Click the “Publish” button.

Choosing Your Portfolio Layout

Ashi theme has 2 portfolio layout styles and an option to choose the number of columns. You can assign a specific layout to your portfolio by going to Theme Options > Portfolio portfolio

  1. Go Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Jone&Jane, New York, People …) 
  3. All of the images that will appear inside this gallery need to be uploaded in the Gallery meta box by clicking on the blue “Add to Gallery” button.
  4. The cover image of each gallery is the Featured Image, so upload your cover image in the Featured Image area on the right side of your screen.
  5. Gallery description (optional) can be written in the main content area
  6. Assing a category to your gallery of neededportfolio entry

 

You can “drag” the image thumbnails around to change the image order.

 Choosing a gallery layout

You can choose between three gallery layouts for each of your portfolio entries – Masonry, Cropped (Grid) or Slider.

To choose a layout for your gallery, look for “Layout” dropdown under the gallery.layout

Let’s say you have 4 portfolio entries – Weddings, Children, Portraits, Couples. You want to change the order to – Couples, Weddings, Portraits, Children.

 

Here’s what you do:

Step 1

  1. Go to Settings > Intuitive CPO (if you don’t see this option in Settings, install a plugin called “Intuitive Custom Post Order”)
  2. Under “Sortable Post Types” choose what you would like to reorderIntuitive CPO
  3. Click the “Update” button

Step 2

  1. Go to Portfolio > All Entries
  2. Place your mouse cursor over the entry that you would like to move until you see the “move arrow” icon showed in the image belowarrow-move
  3. Drag and drop the entries in your preferred order.

title & subtitle

You can add custom title and subtitle for your main portfolio page. To do that go to Theme Options > Portfoliotitle,subtitle

To create multiple portfolio pages with different galleries in each portfolio page follow these steps:

  1. Go to Portfolio > Categories
  2. Create your portfolio categories (for example, Editorial, Personal, Nature etc.)
  3. Go to Portfolio > All Entries,
  4. Open an entry and on the right side of the screen locate ”Portfolio Categories” and assign it to a specific category/categoriesassign

Creating a new portfolio page

Now that the categories are created and portfolio entries are assigned to the specific category, you need to create a new portfolio page. To do that:

  1. Go to Pages > Add new
  2. Give this page a new (for example, Model Photography)
  3. Set the page template of this page to “Portfolio”
  4. in the “Portfolio Category” area, choose wich portfolio category should appear in this portfolio page.portf.
  5. If another portfolio page is needed, follow the previous steps again.

Adding your new portfolio to menu

After you created your new portfolio page/-s, go to Appearance > Menus and add them to your menu.

This chapter explains how to create your blog in ashi.

If you imported the demo content, you already have a pre-made blog page and you do not need to create a new one.

  1. Create a new page Pages > Add New and give the blog a name (for example “Journal” or “Blog”), DO NOT write anything in the content area.
  2. On the right-hand side of your screen locate “Page Attributes” and set the page “Template” to Blog.
  3. Now go to Settings > Reading and set the Posts page to your new blog page.settings-reading copy

After you have assigned your Posts page you can start creating posts for your blog and they will automatically show up in your blog page.

To create a post:

  1. Go to Posts > Add New
  2. Give your post a name
  3. The main text goes into the main content area.
  4. Upload a cover image for your post inside the Featured Image metabox. (just like in your portfolio)

The cover image will be automatically cropped. All of your cover images should be 1380px wide to make sure they cover the whole cover image area.

 

You can add custom title and subtitle for your main blog page. To do that go to Theme Options > Blog

Ashi comes with two blog layout styles – Classic and List.

You can test and choose a layout for your blog by going to Theme Options > Blog. Look for “Blog Layout”, under “Layout” section.

This chapter covers the creation of sidebar and its widgets.

To activate a sidebar in your blog, follow these steps:

  1. Go to Theme options > Blog
  2. Set “Sidebar” to Enable in Blog or Enable in Blog and Posts
    1. Enable in Blog will enable a sidebar only in your Blog page
    2. Enable in Blog and Post will make the sidebar show up not only in your blog page but also in a single post page.
  3. Now go to Appearance > Widgets and place any of the available widgets in the Sidebar area
  4. Now you will see a sidebar in your Blog page.

To create an “about me” widget, first make sure your sidebar is activated, the follow these steps:

  1. Go to Plugins > Add New
  2. Search for a plugin called “Simple Image Widget”Screen Shot 2016-07-09 at 4.21.37 PM
  3. Activate this plugin
  4. Go to Appearance > Widgets
  5. Place the “Image” widget inside the “Sidebar” area and toggle it open
  6. Add in the info and click the “Save” buttonadd text

To create a “Facebook page” widget, first make sure your sidebar is activated, the follow these steps:

  1. Go to Plugins > Add New
  2. Search for a plugin called “Facebook Widget”Screen Shot 2016-07-09 at 4.47.48 PM
  3. Activate this plugin
  4. Go to Appearance > Widgets
  5. Place the “Facebook page like widget” widget inside the “Sidebar” area and toggle it open
  6. Add in the info and click the “Save” button

To create a “recent posts” widget, first make sure your sidebar is activated, the follow these steps:

  1. Go to Plugins > Add New
  2. Search for a plugin called “Recent Posts Widget With Thumbnails”
  3. Activate this plugin
  4. Go to Appearance > Widgets
  5. Place the “Recent Posts with Thumbnails” widget inside the “Sidebar” area and toggle it openScreen Shot 2016-07-09 at 4.40.46 PM
  6. Add in the info you want to show and click the “Save” button

A footer is an area at the bottom of the page that contains certain information.

Ashi footer is designed to contain a bit of text (for example copyright, slogan, important links), social network icons and a footer menu.footer

To create a footer menu, follow these steps:

  1. Go to Appearance > Menus
  2. Click on “Create a new menu.” link
  3. Give your menu a name (Footer menu) and click on the “Create Menu” buttoncreate new menu
  4. Now place all the links in your footer menu. (You can place Pages, create Custom Links, Portfolio or Blog Categories in your menu)
  5. Save your menu but DO NOT assign any Menu Settings to your footer menusave menu
  6. Go to Appearance > Widgets
  7. Place “Custom Menu” widget in the Footer area
  8. Toggle open Custom Menu widget and select your footer menuselect footer menu
  9. Save!

To place your social network icons in your footer, follow these steps:

  1. Go to Appearance > Widgets
  2. Locate “Simple Social Icons” in the available widgets area and place it in the Footer area
  3. Toggle open “Simple Social Icons” and fill in all the necessary information
  4. Save!

If you do not have “Simple Social Icons” in the widget area, make sure the plugin is installed by going to Appearance > Install plugins.

Round social network icons

If you want your social network icons to be round like in the demo, set the border radius to 15px. (see image below)round icons

Any textual information that you want to write in your footer needs to be written in Theme Options > Branding, look for Site Copyright.

Stylizing your text

You can use simple HTML  to stylize your text. (see image below)text

Text in new line

To make your text appear in a new line, place a break tag <br> at the end of the first text line.

Horizontal divider line

To create a divider line, type <hr> in a new text row.

To add a link, use the code below:

 

Copyright © symbol

To create an © symbol, type &copy;

Automatic current year

Automatically generate the current year by using %Y ( for “2016” ) or %y ( for “16” ).

 

To create a new contact form, follow these steps:

  1. Go to Contact > Add New
  2. Delete the code that you see in the Form area and in its place paste in this:
  3. Fill in your email information in the “Mail” tab otherwise you won’t receive emails!!mail
  4. Click the “Save” button at the top of the page

 

Adding custom fields to your contact form

You want to add a custom field to your contact form, check out the Contact Form 7 documentation here. Look for “List of Form-tags types”.

 

Placing contact form in a page

There are 2 ways you can place your contact form inside a page

1. Using the Page Builder

  • Go to the page that needs a contact form
  • Enter Cornerstone page builder mode
  • Use the Contact Form 7 element to make your contact form show up in the page (for more info on how to use Cornerstone, see chapter Page Builder)contact form
  • A dropdown will show up where you will be able to select the form you just created.

2. Manually place it in page

If you want to place your contact form in a page that is not built with the page builder, follow these steps:

  • Go to Contact and open up the contact form you created
  • Copy the shortcodeshortcode
  • Go to the page that needs a contact form (Pages > All Pages)
  • Paste the shortcode in the content area, and your contact form will show up in the live site.

Map

map

The map in Ashi demo is placed in the page by using Cornerstone page builder.

To create an identical map to the one showed in demo follow these steps:

  1. Go to the page that should have a map trough your Admin Dashboard.
  2. Click on the Cornerstone tad, located in the text editor, next to “Visual” and “Text” tabs.
  3. Enter Cornerstone mode.
  4. Place a Section in your canvas and then place Google Map element inside the section
  5. Fill in all the necessary fields. Set the hight to 400px

To make the map fill the whole content area, from one side to the other:

  1. Without exiting Cornerstone, click on the map to activate it
  2. Click on the Section link showed in the screenshot belowsection
  3. Scroll down and in the CLASS field type in fullwidth-sectionclass