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.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 bluebird-theme.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.

 

NOTE: Images are not included in the demo import due to licensing restrictions. All images will be replaced with blue and dark gray image holders.

Bluebird demo import is easy and fast.

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

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

This chapter contains information about basic theme controls and their location so please read this chapter to avoid any confusion and get to know the theme better.

You can upload your logo image by going to Theme Options > Branding Site Logo

For best results your logo image should not be more than 60px high. BlueBird demo logo is 133×19 px

You can add your copyright information by going to Theme Options > Branding > Site Copyright

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

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. Give this page a name (ex., Portfolio) DO NOT write anything in the content area.
  3. On the right side of the screen locate “Page Attributes” and set the Template to Portfolio.
  4. Click the “Publish” button.

Choosing Portfolio Layout

Bluebird has 3 portfolio layout styles:

  • Horizontal strip
  • Masonry with 3 preview images
  • Masonry layout with hover (mouse-over animation)

You can assign a specific layout to your portfolio by going to Theme Options > Portfolio 

Check out both “Default Portfolio Layout” and “Default Single Portfolio Entry Layout” options.

  1. Go Portfolio > New Portfolio Entry.
  2. Give this gallery a name (Weddings, New York, People …) 
  3. Add a sub-title (optional) to your gallery in the Sub Title area. If you don’t want to use Sub Titles, go to Theme Options > Portfolio to disable them.
  4. 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.
  5. 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.

portfolio

 

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

Since Bluebird 1.3.1 you must upload a cover image for each of your videos. This cover image will show up in your portfolio with an elegant play button on top.

You can add Vimeo and Youtube videos to your portfolio entries.

To do that, follow these steps:

  1. Open a portfolio entry where you want to add a video
  2. Click on the blue “Add to gallery” button
  3. Choose an image that will serve as your video cover image.
  4. Now click on the image you just added to your gallery to reveal the Attachment Details fields and add your video URL.add video url
  5. Click on the “Update” button.
  6. Drag and drop the video placeholder image to rearrange it.

Check out how the video player works by clicking here.

You can add a description to each of your portfolio entries. This description will show up inside the gallery.

descr

The longer your description the more space it will need. To control the width of the description area, use the Description Width field.

The description itself is written in the main content area of each portfolio entry.

portfolio

Each of your portfolio entries can open up in either Horizontal layout or Masonry layout.

To set a specific layout to for a portfolio entry, open the portfolio entry and under the gallery meta box locate “Layout”.

set layout

By default, each entry will have the layout that is set in Theme Options > Portfolio > Default Single Portfolio Entry Layout. So if all of your entries should be “Horizontal”, just set the “Default Single Portfolio Entry Layout” to Horizontal and ignore the “Layout” option in Portfolio > New Portfolio Entry.

If you don’t want to display your whole portfolio page as a Front page, you can set a single, open entry to be your Front page.

To do that, follow these steps:

  1. Create your portfolio entry (Portfolio > New Portfolio Entry)
  2. Go to Pages > Add New
  3. Give this page a name – example, “Front Page Entry”.
  4. Set the Page Template to “Single Portfolio Entry
  5. A new dropdown will show up. Choose the entry that you created in step 1
  6. Click on the “Publish” button
  7. Go to Settings > Reading
  8. Set your Frontpage to “Front Page Entry” (the page you created in step 3)

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

Assign Specific Layout To Each Category

Let’s assume that you have 3 categories – Editorial, Nature and Personal. You want each of them in a separate page and each of these portfolio pages should have a separate layout:

  • Editorial should have a “Horizontal” layout,
  • Nature should have “Masonry with previews”,
  • Personal should have “Masonry with hover”.

In this case you would do the following:

  1. Assign each Portfolio entry to a category (Editorial, Nature and Personal)
  2. Go to Theme Options > Portfolio
  3. Locate Advanced Layout Options
  4. Click on the blue “Add Rule” button
  5. In the Label field write for example “Editorial galleries”
  6. Under “Portfolio Category” you choose “Editorial” (since that’s the category that has all of our Editorial galleries)
  7. And under “Category Layout” you choose “Horizontal” (since we want the Editorial page to be in a Horizontal layout)

Now we made the Editorial portfolio page layout.

Click on the “Add Rule” button again and create a new rule for Nature (step 5 – 7) but now you would choose “Nature” under “Portfolio Category” and “Masonry with previews” under “Category Layout”.

Do the same for “Personal” as well.

When done, click on the “Update” button.

Adding Categories To Menu

Now that the categories are created and layouts assigned (if needed), add your categories to your menu. To do that:

  1. Go to Appearance > Menus
  2. On the right side of your screen click the “Screen Options” button and activate “Portfolio Categories”add
  3. Toggle open “Portfolio Categories”, select the ones you want to use and add them to your menu.
  4. Click the “Save Menu” button

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.

This chapter explains how to create your blog in Bluebird.

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”), DO NOT write anything in the content area.
  2. Go to Settings > Reading and set the Posts page to your new blog page.settings-reading copy

You can set your blog to have Masonry, Regular or Classic layout style.

You can test and choose a layout for yourself by going to Theme Options > Blog.

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. If don’t like that, go to Theme Options > Blog and set “Crop blog post thumbnails” to OFF.

When you place an image inside a post, it is automatically scaled down to have the same width as your post content. (Assuming that you have placed a large centered image in your post).

By adding a simple CSS to your image you can force it to overflow the content boundaries and make your post visually more interesting.

overflow

To create this effect, follow these steps:

  1. Place an image in your blog post (click on the “Add Media” button)
  2. Click on the image and select “Edit” (pencil icon)edit
  3. Toggle open “Advanced Options”
  4. In the “Image CSS Class” field type in image-center-overflowadd-css
  5. Click the Update button

Since Bluebird version 1.5.5 you can create beautiful galleries inside your post. This is especially useful if you need no showcase a particular photo session (such as “Jane and John” wedding). See an example of this here.

Creating a simple gallery inside a post

  1. Open a post in which you need a gallery
  2. Click on the “Add Media” button
  3. Click on “Create gallery” linkcreate-gallery
  4. Select the images that should be in the gallery
  5. Click on the “Create a new gallery” button
  6. In the GALLERY SETTING area set the columns, set “Link to” None, and set the size to what’s appropriategallery-settings
  7. Click on the “Insert gallery” button

When creating a galley, all images will show up in 1; 2; 3; 4 …. or 9 columns. If you want your images to show up like in this example or similar, you will need to create multiple galleries – 1 for eash column. Keep reading “Creating a “masonry” gallery inside post” to find out how.

Creating a “masonry” gallery inside a post

To create a gallery where some of the images appear in 1 column, some in 2 or 3 columns, each column will need its own gallery.

To do that follow the steps 1- 7. that are described above, but:

  • If the first image (or a couple of the first ones) should be in one column, you select only these images and set the column count to 1.
  • If the next 2 images should be next to each other, create a new gallery under the first one, select these two images and set the column count to 2
  • continue in this way until you’re done.

To make sure that there are no large gaps between your galleries, switch to “Text view” and make the gallery shortcodeas appear one after the other in a long row.

text-view
Switch to Text view

 

row
delete all gaps by arranging the shortcodes in a row

You can access blog settings by going to Theme Options > Blog. There you can:

  • Choose your blog layout – Regular, Classic or Masonry
  • Enable/disable the blog sidebar
  • Enable the blog post slider (and set the number of posts to display in it)post slider
  • Activate or disable your blog meta data – Category, tags, comment count, post author, date

Since Bluebird 1.4 you can have a sidebar in your blog and post pages. This chapter will cover the creation of the 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 activate a sidebar area in a regular page (such as About or Contact) follow these steps:

  1. Go  to Pages and open the page that should have a sidebar
  2. Locate the “Sidebar” area on the right side of the screen, under “Page Attributes”
  3. Set Sidebar to “Enable Sidebar”
  4. Go to Appearance > Widgets and place any of the available widgets in the Sidebar area

about me

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 “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

Thumbnail image size

To make the post thumbnail images look nice, we suggest using the settings displayed in the image below:Screen Shot 2016-07-09 at 4.44.35 PM

Screen Shot 2016-07-09 at 4.46.12 PM

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

Widget width

To make the widget fit nicely in your sidebar, set it’s width to 322Screen Shot 2016-07-09 at 4.51.00 PM

“Welcome Page” is the fullscreen video (or a static image) with a logo image on top that you see when you visit BlueBird for the first time.

 

Video background rules:

  • Video backgrounds (autoplay videos) will only show up on desktop devices. Tablets and mobile devices will not show the video background, instead these devices will show a Background Image that you need to upload as well. If you are wondering why it works this way – you can read detailed explanations here and here.
  • The video background should be as short as possible (about 10 sec long) since the shorter the video the faster it will load
  • There should be no sound
  • Minimum size should be 852 x 480 but if possible you can use 1920×1080
  • You will need 2 file formats for the video background – MP4 and WebM

There are a lot of tools to convert videos to WebM format. Check out FireFogg (works ONLY in FireFox) or Miro Converter

To upload a video background, follow these steps:

  1. Go to Theme Options > Welcome Page
  2. Upload both WebM and MP4 video file formats in their designated places.upload videos
  3. Upload a Background Image under “Background Image”. (more info on how to do that here)
  4. Click on the “Save Changes” button.
  5. Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

for-video

To upload a Background Image:

  1. Go to Theme Options > Welcome Page
  2. Upload an image under Background image

Since the image will be covering the whose screen, it should be landscape oriented and around 1920x1080px big. To ensure speedy loading the image should be under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

  1. Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

for-video

If you don’t want to a background video, you can upload only the background image to serve as your Welcome Page.

  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!!
  4. Click the “Save” button at the top of the page
  5. Copy the shortcode generated for you at the top of the pagecontact form shortcode
  6. Paste this shortcode in the page where you want your contact form to show up.

There are a couple of strict steps you need to follow in order to create a services page, so please read carefully.

  1. Go to Pages > Add New
  2. Give your page a name (ex., Services)

Creating the first service block

  1. Click on the “Add Media” button and choose an image for your 1st service
  2. After the image is placed in the main content area, click on it and click on the pencil iconedit
  3. Make sure your image alignment is set to “None” and it links to “None”
  4. Click on “Advanced Options
  5. In the Image CSS Class field type in village-split-left (for image on the left side text on the right) or village-split-right (for image on the right side, text on the left). Then click the Update button.image CSS class
  6. Write your Service description UNDER the image.description
  7. IMPORTANT – After your text is written, click on the “Horizontal line” button to mark your service end.horizontal line

Now your 1st service is created.

To add another service, follow the same steps again (step 1-7). It’s important that your layout would always be – Image; Text; Horizontal lineImage; Text; Horizontal line – …

Your client area is located in your admin dashboard > Client Area.

If you don’t see it there, go to Plugins > Add New and search and install “Village Client Area”.

  1. Go to Pages > Add New
  2. Give this page a name (ex., Client Area)
  3. In the content area you can write a few lines of text for your users (optional)
  4. Publish this page
  5. Go to Client Area > Settings > General and in the Client area archive locate your new page. 
  6. Click the “Save Changes” button
  1. Go to Client Area > Add New
  2. Give your gallery a name (example, Jane & John )
  3. Click on the blue “Add a gallery” button to add images
  4. In the “Featured Image” area (on the right side of the screen) add an image that will serve as a cover image for this gallery.
  5. If needed, write a description or a message to your client in the main content area. (just like in portfolio entries)
  6. Click on the “Publish” button.
  1. Choose the gallery that needs to be password protected (Client Area > All Galleries)
  2. Click on the Edit link next to “Visibility” and choose Password Protectedpassword
  3. Type your chosen password in the password field and click OK
  4. Click the Update (or Publish) button

Go to Appearance > Menus, locate your “Client Area” page in the Pages area and add it to your menu.

smart-tags

Smart tags are assigned to your images automatically. They can be used to show your client (or your client can show you) which image they are talking about. So instead of saying “them image with the girl and roses”, you would just write “#114” and when you put your mouse cursor over the number tag, the image shows up.

You can turn on smart tags by going to Client Area > Settings.

To comment with a smart tag simply write # and the number of the image. For example, #90

To disable the option to comment in your client gallery, go to Client Area > Settings and turn OFF “Enable Comments”.

Carousel Slider (called Flickity) is a sliding image strip that you can place in your pages and blog posts.

slider

This slider is “activated” by combining a simple shortcode with WordPress default gallery option.

  1. Go to Page or Post where you want to place a carousel slider
  2. In the main content area type in this shortcode: 
  3. You will place your gallery in between the 2 shortcode parts
  4. To create gallery click on the “Add Media” buttonclick add media
  5. Choose “Create Gallery” and select all of the images you’d like to usecreate-a-gallery
  6. Click on “Create a new gallery” button
  7. In the “Gallery Settings” area set the Link to None and Size to large, medium or full size (depending on how big the slider should be). Ignore the rest of the settings.gallery settings
  8. Depending on what size you choose, you need to add a size value in the shortcode itself (   [village_carousel size=“x”]   )

Your shortcode should look something like this in the end:

carousel-slider-shortcode

 

Carousel Slider Sizes

There are three slider sizes you can choose from:

  • size=“large”(750px height) ;
  • size=“medium”(300px height) ;
  • size=“small” (150px height)

The rule is that the gallery size (step 7) has to be equal or bigger than the short-code size (step 8). Otherwise your images will be blurry.

Controlling gap size between slider images

By default you have a space between your slider images. You can make this space bigger, smaller or remove it completely. To do that you need to add one of the following pieces of code to your carousel shortcode:

  • space=“tiny” (to make the gap smaller)
  • space=“huge” (to make the gap bigger)
  • space=“none” (to remove the gap)

Your slider shortcode should look like this now:

Instead of Y you write one of the size names.

 

Enabling slider autoplay

If you want to enable the autoplay option, you need to add the following code to your shortcode:

  • autoplay=“on”

Your slider shortcode should look like this now:

 

Enable slider image snapping

If you want your images to snap (each image centers itself on the screen when browsing) add this to your shortcode:

  • snap=“yes”

Your carousel shortcode should look like this now:

 

You can use all options described above in one shortcode. For example:

 

This chapter explains how to add Social Icons in the header and Instagram in the footer.

 

social-icons

To place your Social Network Icons above the navigation area like shown in the demo, follow these steps:

  1. Go to Appearance > Widgets
  2. Locate “Simple Social Icons”
  3. Place them inside “Social Icon Header”
  4. Toggle open “Simple Social Icons” tab, scroll down and add your social network links
  5. Click on the “Save” button

If you want your Social Networks to open in a new tab, activate “Open links in new window”

open in new tab

Changing Icon Color

By default “Simple Social Icons” show up in default theme colors. If you just want to change the hover color (by default blue), go to Theme Options > Branding > Colors and look for “Miscellaneous” colors.

 

If you want to change the size, corner radius and ALL of the colors as well, you need to go to Theme Options > Advanced and turn OFF “Force Social icon Styles”.

Then go back to Appearance > Widgets, open the Simple Social Icons panel and use color pickers to color your social icons.

Since WordPress 4.4.2 we recommend using “Wp Instagram Widget” plugin instead of “Instagram Slider”. So if you have “Instagram Slider Widget”, go to Plugins and deactivate and delete it then continue reading this chapter.

insta

Follow these steps to create the Instagram footer demonstrated in the demo:

  1. Go to Plugins > Add New
  2. Search for and install “WP Instagram Widget” by Scott Evansistagram widget
  3. Go to Appearance > Widgets
  4. Locate “Instagram” in the Available Widgets area
  5. Place it in the “Instagram Footer” area
  6. Toggle open “Instagram” widget and fill out the fields as shown in the image belowinsta settings

We recommend that you set “Number of photos” to 8, “Photo size” to Large and” Open links in” new window, but these settings can be changed to personal preference!

When done, click the “Save” button.

To create a pricing table you will have to use a special shortcode.

The pricing table shortcode may look quite long and confusing, so the best way to work with it is just to copy the following pricing table shortcode, paste it in your Page (in the Text mode, not Visual mode) and then just modify the places that you need to change.

Here is the shortcode:

Let’s go through each section:

  1. [village_wrapper] and [/village_wrapper] this is your container/box/div inside which you put the pricing tables, so that they would align nicely with each other
  2. [village_column] and [/village_column] this indicates that this specific pricing table will be inside a column and not spread out trough the whole page.
  3. [village_pricing] and [/village_pricing] this shows the start and end of 1 pricing table
  4. [village_pricing_title]...[/village_pricing_title] write your pricing table title between these
  5. [village_pricing_price]...[/village_pricing_price] write the price between these. You can leave take it out it you don’t need it.
  6. [village_pricing_content]...[/village_pricing_content] here you list the content of your table. Be sure to add /// after each entry.
  7. [village_button link="YourLinkHere"]...[/village_button] this is optional. If you don’t need a button simply delete this portion of the shortcode.

Multiple pricing tables in one row

If you want, for example, 4 pricing tables, first you would divide your page into 4 columns using the grid plugin. Then you need to copy and paste the pricing table shortcode (the one above) in each column.

By default, the button is aligned to the left side. If you want to center it, select the button shortcode ( [village_button link="YourLinkHere"] Click here [/village_button] ) and click on the “Align center” icon located in your text editor.align center

Just make sure that only the button shortcode part centers. It should look like this:center button

A shortcode is a WordPress-specific bit of code that lets you do nifty things with very little effort. Shortcodes can create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

If you wish to use columns in any of your pages, go to the page that needs columns and click on the little “Add Row” button located above the main content area.

If you do not see the “Add Row” button, go to Plugins > Add New and search for and install a plugin callded “Gridable“.

You can change the column width by dragging the box borders to the left and right.

This applies only to 2 columns layouts. You can see and example in the image below.

sep lines

 

To create such columns, instead of the regular column plugin you need to use a div tag. The rule here is that in one div tag you write both the left side column text and the right side column text. If you want another row of text beneath the first one, you create a new div tag and again write both column content in this div tag.

To make it easier for you, copy the code below and paste it in your page to see how it works.

To avoid any mistakes, paste this code in the Text mode, not the Visual mode.

text tab

To bring attention to some part of your content you can style it as a “Callout text”. Such text will appear in a slightly larger type size.

To achieve, write the paragraph that should be larger, select it, click on “Formats” and choose “Callout Text”.

 

To add a button somewhere in your content, follow these steps:

  1. Simply type what your button should say (for example, Book a Session)
  2. Select this text and add the link to it just like you normally would (click on the “Insert Link” icon). This link should lead to where the button should lead – like your contact page.
  3. Now select your text with link again and click on the “Formats” area.
  4. Coolse button and the link text will automatically become a button.

A drop cap is the first letter of a paragraph that’s of a much bigger size than the rest that follow. The letter formatting is such that the letter “˜drops down’ to cover the few lines following the first one.

drop cap

To add a drop cap to a paragraph:

  1. Click anywhere in the paragraph that should have a drop-cap in the front.
  2. Click on “Formats” and choose Dropcap.

FAQ

Here we answer some of the most frequently asked questions regarding Bluebird.
If you do not find the answer to your question here or in the rest of the documentation, please visit our support forum – http://help.themevillage.net/

An external link is a website link that you add to your menu and when a user clicks on it, he goes to a different site outside your Bluebird theme.

You have 2 options when adding an external link. You can make this link open in a new browser tab (we suggest using this option) or you can make it open in the same browser tab, therefore leading the user away from your site.

External link that opens in a new browser tab.

  1. Go Appearance > Menus
  2. Toggle open “Custom Links” tab and write your custom link URL and link text.
  3. Click the “Add to Menu” button
  4. Find your new link in the menu list and toggle it open
  5. Click the “open link in new window/tab” checkboxnew tab checkbox
  6. Save your menu

External link that opens in the same browser tab.

  1. Go Appearance > Menus
  2. Toggle open “Custom Links” tab and write your custom link URL and link text.
  3. Click the “Add to Menu” button
  4. Find your new link in the menu list and toggle it open
  5. In the “CSS Classes” field type in no-pjaxno pjax
  6. Save your menu

If you don’t see a CSS Classes field, click on “Screen Options” tab that is located in the right top corner of your screen and activate “CSS Classes”

If you installed a custom plugin that did not come bundled with Bluebird and if this plugin is inserting custom CSS or is JavaScript based, you might need to disable themes Ajax in the page that holds your custom plugin.

A good way to find out if you need to disable AJAX in order for you plugin to work properly is by following these steps:

  1. Go to your site
  2. Open a random page (one that does not have the custom plugin)
  3. Now open the page that has your custom plugin. Does the page layout look broken?
  4. Refresh this page (Cmd+R, Cntrl + R). Does the layout look ok now?

If refreshing the page fixed the layout, continue to read this article and disable Ajax.

If refreshing did not fix the layout, then the plugin you are using is not compatible with Bluebird and you might need to use another one or modify the theme to make it work. We do not support custom theme modification, so if you want to do that, you will have to do it yourself.

How to disable AJAX in a page?

  1. Go Appearance > Menus
  2. Locate the page that has your custom plugin, for example “About” page
  3. Toggle it open
  4. In the “CSS Classes” field type in no-pjaxdisable ajax
  5. Save your menu

If you don’t see a CSS Classes field, click on “Screen Options” tab that is located in the right top corner of your screen and activate “CSS Classes”

Disabling the shutter effect

If you do not want to have the “Shutter effect” page transition when navigation from page to page, go to Theme Options > Advanced and set “Page Transition Style” to Disable.

Some users clame that the shutter effect “slows down” the page loading, but that is not true. It’s called “Performance Perception”, an optical illusion. The shutter effect is as fast as the page load time. Disabling it will not make your site load faster, it will just disable the effect.

Disabling AJAX may however increase custom plugin compatability.

Change the animation

If you decide to leave the animation active, you can now change it from a “Shutter” to “Fade” by going to Theme Options > Advanced and  look for “Page Transition Style”.

Prevent people from stealing your work. They do that by right-clicking on your images and choosing the “Save Image As…” option.

We created a plugin specially for this, it works great with all our themes and its free!

Follow these steps:

  1. Go to Plugins > Add New
  2. Search and install “Photection” by Colormelonphotection
  3. After you installed it, go to Settings > Photection and add a custom message that shows up when someone Right-clicks on an image! photection