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.
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.
Ashi demo import is easy and fast.
installed your theme and all required plugins, follow these steps:
Theme Options > Demo Importer 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.
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:
your image should not exceed 1400px width
blur out your image a bit (Photoshop can help with that)
blurring will accent your main site content more
the background image won’t look bad if viewed on large screens (1920x1080px and larger)
image size (kB) will be smaller, therefore making your site load faster
save your image as .jpg file
compress your image before uploading to make the file size smaller. A good tool for that is
Each of your pages can have a page title, subtitle and description (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”
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
Click on a page or post you want to edit with Cornerstone in the WordPress admin area.
Above the WordPress editor and to the right you will notice a tab named “
Cornerstone” next to the “ Visual” and “ Text” tabs. Clicking the “Cornerstone” tab will reveal the “Edit with Cornerstone” button for you to click to take you to the editor.
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.
imported the demo content, you already have a pre-made portfolio page and you do not need to create a new one.
Go to Pages > Add New
On the right side of the screen locate “Page Attributes” and set the Template to Portfolio. Fill out the page title field and if needed – subtitle and description fields.
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
Go Portfolio > New Portfolio Entry.
Give this gallery a name (Jone&Jane, New York, People …)
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.
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. Gallery description (optional) can be written in the main content area
Assing a category to your gallery of needed
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.
Settings > Reading and set your portfolio page as your Front page.
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:
Settings > Intuitive CPO (if you don’t see this option in Settings, install a plugin called “Intuitive Custom Post Order”) Under “Sortable Post Types” choose what you would like to reorder
Click the “Update” button
Portfolio > All Entries Place your mouse cursor over the entry that you would like to move until you see the “move arrow” icon showed in the image below
Drag and drop the entries in your preferred order.
You can add custom title and subtitle for your main portfolio page. To do that go to
Theme Options > Portfolio
To create multiple portfolio pages with different galleries in each portfolio page follow these steps:
Portfolio > Categories Create your portfolio categories (for example, Editorial, Personal, Nature etc.)
Portfolio > All Entries, Open an entry and on the right side of the screen locate ”Portfolio Categories” and assign it to a specific category/categories
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:
Pages > Add new Give this page a new (for example, Model Photography)
Set the page template of this page to “Portfolio”
in the “Portfolio Category” area, choose wich portfolio category should appear in this portfolio page.
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.
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:
Posts > Add New Give your post a name
The main text goes into the main content area.
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.
To create a new contact form, follow these steps:
Go to Contact > Add New
Delete the code that you see in the Form area and in its place paste in this:
< div class = "village-form" > < p > [ text* your - name placeholder "Your Name" ] < span class = "required" > * < / span > < / p > < p > [ email* your - email placeholder "Email" ] < span class = "required" > * < / span > < / p > < p > [ text your - subject placeholder "Subject" ] < / p > < p > [ text your - date - location placeholder "Date + Location" ] < / p > [ textarea your - message 40x6 placeholder "Your Message" ] [ submit "Send" ] < / div >
Fill in your email information in the “Mail” tab otherwise you won’t receive emails!!
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
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) 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 shortcode 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.
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:
Go to the page that should have a map trough your Admin Dashboard.
Click on the Cornerstone tad, located in the text editor, next to “Visual” and “Text” tabs.
Enter Cornerstone mode.
Place a Section in your canvas and then place
Google Map element inside the section 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:
Without exiting Cornerstone, click on the map to activate it
Click on the Section link showed in the screenshot below
Scroll down and in the CLASS field type in
Ashi pricing tables are created by using the cornerstone page builder. Please go to
Cornerstone section of this documentation to learn how to use the page builder.
Pre-made pricing tables can be found in the Cornerstone templates.
Ashi services page was created by using the cornerstone page builder. Please go to
Cornerstone section of this documentation to learn how to use the page builder.
Pre-made Services page can be found in the Cornerstone templates.