1. First Steps

The first point that we must talk about is 'how to install' any Wordpress Theme.

Package contents

1.1 Installing the theme

• Runing the installer

  Installing the theme using the Wordpress Theme Installer is really easy.

• Log into your WordPress Dashboard → Appearance → Themes

• Here notice the tab at the top side → Install Themes

  You must click on "Upload".

• Now you must choose the zip file you will find within the whole package that you downloaded from Themforest.

  01 - Theme folder → "airtifact.zip" file.

• The last step is clicking "Activate" once all the files are correctly uploaded.

1.1.2. Setting up the demo content

After activating the theme, you will be prompted to a screen which will guide you through setting up the demo content, so that you can start from a certain point in customizing your website, always you prefer to have some helpers when starting like having some dummy content as starting point. The one click installing process basically goes into these steps:

• Starting the setup process

  Just press "Start" and the step-by-step installer will start.

• Install Child Theme

  You can choose to install a child theme along the main one, just in case you will do modifications to the theme, to make sure that you will never edit the parent theme, being able to update at any later point. If you only plan to do changes via CSS, we recommend you to do not install the child theme and do all your modifications via Apperance > Customize > Additional CSS.

• Install Plugins

  The theme requires certain plugins to run, and it also recommends others. You should install all plugins in order for the rest of the setup process to work, and if at a later point you want to change a recommended plugin, you can definitely deactivate it.

• Import Content.

  This step will import the entire demo content with blurred images. Please note that there is a lot of content to be imported, so be patient and do not reload the page.

• All done! You can view your website and start editing.

2.1 Page Builder

Please watch this video to learn how to create a page from scratch using the theme's Page Builder

---

As you've already seen in the video, our page builder is a really simple application which allows you to easily create columns in any page that you wish. It's really lightweight and it doesn't bloat the content page with unuseful markup. It doesn't use shortcodes or meta for the output, it simply works with pure HTML, directly in your page content, thus being really SEO friendly and easy to manipulate. Also, and very important, our builder is not locking/jailing your contents as many other popular page builders out there.

In order to start creating content in this way, you need to click the "Show Columns Manager" button at the top left corner when editing a page.

---

---

After doing this, you'll see a pretty intuitive dashboard, where you just click "Add column" and you're taken to a popup from where you can add content the regular WordPress way that you're used to. You have the TinyMCE editor, with all it's bells and whistles there.

---

---

At the top you can choose column width and option top / bottom padding. You can also center a column from here. You also have options for several screen sizes if you want to further tweak the responsive design of your columns. Normally you don't have to change this, but you do have the option to either select a specific column size for each screen or even hide the column completely.

---

---

When you are done putting your content, you just have to hit the "Save" button, and the new column will appear in your page. You have further options of resizing columns from the app, moving them around, editing, cloning or deleting column elements.

It's that easy! If you've worked with complex page builders before you'll just love how easy and simple this is, and you'll be able to focus on your own content. If you've never used builders before, you'll find this incredibly easy to learn. Learning curves no more. And of course, if you miss those complex builder, you always can install some of them, just make sure that you disable the theme's one. But we know that if you already give a try to ours, you'll miss it so much that you would enable it one more time. We love easy, as you do too.

---

Details about the page builder

With the custom page builder you can drag and drop in a very easy way between columns, clone columns and modules, play with font sizes, colors and add special classes to get some transforms in order to help you to achieve really stunning layouts and designs. Bloated code never more.

---

---

Custom classes. In the field which is present in the top bar of any column, you can write one or many extra classes, in order to style them differently via CSS. We also have our own classes which can be used to further tweak the columns:

• full-width: makes a certain column extend beyond the horizontal limits of the layout, making it totally full width. If you embed a single image inside the column, it will take up all the space and be displayed proportionally.
• parallax-bg: adds all prerequisites for a "parallax background" image, either for a regular or (prefered) for a full width column. It works in conjunction with a separate class to define the background (see below).
  
• no-right-margin: pretty straightforwards, it removes the right margin of the column.
• no-bottom-margin: same as above, only for bottom.
• no-list-style: In columns with lists inside, this class removes bullets or list styling.
• list-compressed: This class changes line-height for lists with an smaller one.
• circled-img: When you want to transform some image into a circle, just add this class to the img element.

.bg-1 { background-image: url(http://yoursite.com/path_to_image.jpg); }

---

2.2 Page options

Please watch this video that explores all the paage & header options

---

Page Style

Each page can have a unique style. The general color scheme will be applied everywhere in the website (via Appearance > Customize > Color Scheme), but if you want a certain page to have a red background with yellow text, for example, this is the area to edit. You can even add a custom image logo for each page.

---

---

Hero Header

The hero header is used in conjunction with the page style, because it is a static header which fades out, being replaced by the page's content and background color, allowing you to creative amazing layouts!

You can have one or more images for the header, a video, and also put a custom tagline over everything.

---

---

You have different options for your hero element:

• Single Images
• Slideshows
• Background Videos (self-hosted files)

---

---

Custom Tagline

The custom hero option is one of the mosts interesting features. As you'll see, with the core editor integrated in this option, you'll be able to play with your custom page titltes and taglines in a very easy way. You can assign different fonts to your needs, different positions, sizes, colors... Everything you could need to write and as you could need to write it. Just playing with the simple tools provided you are able to create unlimited results.

---

---

---

2.3 Adding Pages

The process of adding pages is quite straightforward:

• Go to Pages → Add New
• Enter a title.
• Setup the page style (optional - info previously explained).
• Setup the hero header (optional - info previously explained).
• Insert all of your remaining content in the content area. You can use the columns manager for this purpose.
• Select a page template or leave the default one
• Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
• Hit "Publish" and you're all done.

---

Page Templates

As you might already noticed, there are a few Page Templates available for you to use. Each template will configure your page to look and act in a different way.

---

---

• Default Template — This is the default template and it outputs exactly the content of the page, without any modifications.
• Portfolio — This is a highly configurable page which outputs all the portfolio projects that you have on your site.
• Contact — This templates introduce your latest project or featured works in a beautifully animated full page.
• Cover — This template creates a contact map, based on Google Maps API, which can be triggered and shown inside your page.

---

---

2.3.1 Shortcodes

The theme has a few shortcodes embedded in the shortcodes plugin, which give you additional tools in adding content to your website.

These need to be written manually, since they are only a few and with basic options. To add a shortcode, simply write it like a regular paragraph inside the text editor (wheter this is done with the theme's Page Builder or within regular content).

---

Twitter slider

[artifact_twitter_slider username="envato" no="3"]

This is the twitter slider, which allows you to share a number of your latest tweets inside a text carouel. Just put your username and the no (number) of tweets that you wish to be displayed.

---

---

---

Content slider

[artifact_content_slider]

  [artifact_content_slide]
    Artifact has transformed a complex project into a simple and smooth process.
  [/artifact_content_slide]

  [artifact_content_slide]
    Artifact has transformed a complex project into a simple and smooth process. 
  [/artifact_content_slide]

[/artifact_content_slider]
                

This is the content slider. It allows you to create a basic text carousel, with unlimited slides..

---

---

---

Latest projects

[artifact_portfolio page_id="234" no="5" cat="art-direction"]

This is an easy shortcode which allows you to put portfolio items anywhere you wish. It's really simple, having only three properties:

• page_id - this is the most important! It refers to the original portfolio page, which contains all the style settings (thumbnails, grid, captions, colors, etc. - all portfolio properties are taken from this page).
• no - an optional parameter, it specifies how many items from the portfolio you want include.
• cat - another optional parameter, it allows you to define custom categories to be used instead of all categories from a given portfolio.

---

Latest posts

[artifact_blog style="minimal" posts_per_page="6"]

This is another easy shortcode which allows you to put blog posts items anywhere you wish. There are three style options:

• style - it can either be "minimal" or "grid", and it just clones the two already available blog page styles.
• posts_per_page - defines the number of posts that will appear (pagination is disabled obviously).
• el_class - (optional) custom class for further styling.

Then, you have 6 options which allow you to create a really complex query:

• category - write one or more category slugs, separated by commas (ex: "category1,category2")
• tag - same as above, but with tags (ex: "tag1,tag2")
• author - same as above, but with authors (ex: "author1,author2")
• include - if you want to include individual posts, you can use this to specify custom post id's (ex: "100,200")
• orderby - ordering method, it defaults to "date". Other options are "author", "title", "name" (post slug), "rand" (random order).
• order - ordering type, can be "ASC" (ascending) or "DESC" (descending)

All these query parameters are optional, case in which you'll have a shortcode showing your latest posts.

---

WordPress galleries

[gallery columns="5" link="none" size="full" ids="651,652,653" orderby="rand"]

A bit more complex shortcode, this is the gallery shortcode. Initially, it can be created using the Add Media button, and then Create Gallery. Select your desired images, add captions, order them as you wish, choose a certain columns number, then insert the gallery into the page.

---

---

After the gallery is inserted, you can edit it in a few ways. For this, turn on the Text tab, so you can see the text shortcode. You will probably see something like this:

[gallery columns="5" ids="651,652,653,654,655,656"]

There are some parameters which you can add in order to change the gallerie's appearance (just like in the above example):

• size - it refers to the size of the thumbnail, not the size of the lightbox item. It should be manually set to "large" or "full", depending on your image's size and the number of columns that you want.
• link - it can either be "file" (in this case the ligthbox opens the bigger version of the uploaded image) or "none" (in this case the gallery is plain, without any actions available).
• type - if present and set to "slider", it turns the grid gallery into an image carousel.
• css_class - you can add custom classes to the gallery object in order to further style it via css. There are also two classes available which have effect on the slider type. One is "arrows", which navigation arrows to the slider, and the other one is "single", which turns the carousel slider into a regular slider.

Here's an example of the above:

[gallery type="slider" css_class="arrows single" ids="651,655,656"]

---

2.3.2 Lightbox

Related to the gallery, there is also one other feature available, which needs to be explained here. It's the ligthbox.. By default, any image wrapped in a link can become a lightbox engine. However, you can also use lightboxes in other ways - for example, you can add video iframes as links to images. Just add a link to an image, and make it point to a custom URL, which should be the iframe src. At the end, give the link the classes: fancybox fancybox-iframe.

---

Please watch this video that explains how to add an iframe content into the lightbox engine

---

2.3.3 Forms

Airtifact doesn't have any dedicated form builder, because it offers you styling to use your own form plugins. We recommend Contact Form 7, as it's free & easy to use.

There are a few elements which you can use in order to style the form.. Below you have an example on how we built the contact form in our demo:

<div class="form-columns artiform grid">
   <div class="grid__item one-half">
      [text* your-name placeholder "Name"]
   </div>
   <div class="grid__item one-half">
      [text* your-name placeholder "Second Name"]
   </div>
   <div class="grid__item one-half">
      [email* your-email placeholder "Email"]
   </div>
   <div class="grid__item one-half">
      [select* menu-731 id:arti-select "Topic" "Budget" "General" "Heylo" "Project Enquire" "Work Progress"]
      <span class="select-underline"></span>
   </div>
   <div class="grid__item last one-whole">
      [textarea* textarea placeholder "Message"]
   </div>
   <div class="grid__item one-whole">
      <span class="arti-send-btn">[submit "Send"]</span>
   </div>
</div>

As you can see, we've wrapped all the fields inside a div with some classes, then each field has it's very own container, again, with a class specifying that it's a grid item, and one class specifying the actual width.

The last example is about MailChimp integration. For this purpose, you need an extra plugin, called Contact Form 7 MailChimp Extension.

After installing this plugin you will see a new tab when creating forms.. In that tab you need to insert MailChimp details, such as your API key & subscription list id. Here's an example MailChimp form:

<div class="cf-7 mailchimp">
  <div>
    <small class="news-form-footer">No Spam — Period</small>[email* email placeholder "Your mail here"][submit "Send →"]
  </div>
  [acceptance acceptance-188 id:check-notice] I agree with the general terms [/acceptance]
</div>

3. The Portfolio

3.1 Adding new projects

The process of adding new portfolio projects is easy:

• Go to Portfolio → Add New
• Enter a title
• Select a post category.
• Choose a featured image. If you don´t add any, it could break the grid.
• Choose a secondary featured image (optional, of course). It will appear in the grid, when hovering the thumbnail. Should have same size as featured image.
• Setup the hero header for the current post (optional, of course).
• Insert all of your remaining content in the content area. You can use the columns manager for this purpose.
• Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
• Click "Publish" and you're all done.

3.2 Setting up the portfolio page

As you've already seen in the video, there are lots of options to display the portfolio. You can have a fixed masonry grid, a flexible one, or even thumbnails resized all the same, based on a certain aspect ratio.

The fixed masonry and regular grids are pretty easy to understand. In this case, just upload really large images (2560px wide images should be good) and let the theme do all the hard resizing. You will also be able to easily play with the available options.

The flexible grid is the most interesting one, and it works just like a regular masonry grid, the only difference being that you can "break it" with thumbnails that are larger than the regular columns number.

First of all, you need to choose the number of columns you want to work with. The highest the number, the greater the effects that you can achieve. So let's start with 4 for example. If you view your portfolio page, you'll see a basic 6 columns grid.

Now, for the fun part, choose a project, and edit it. Inside, you'll see field called Unique Project Settings. There you can choose a multiplier for your column. If you choose 3 for example, this project will have the size of 3 columns instead of 4..

This is the basic idea and it's awesome to play with it. You have to remember that images keep their ratios, so for a perfect grid you'll need perfectly resized images. The easiest way is to upload perfect ratios, like 1:1, 2:1, 3:2, etc.. Below you have an example grid.

The minimum width for a thumbnail is 640px (this is for large 4K monitors), but in the example we've used 750px, for an easier understanding. Resizing your thumbnails this way will give you the sharpest grid. Please note that even the slightest mistake, like 750 x 751px, will give you bad results in the grid.

3.2.1 Unlimited portfolios

The latest notable feature is the unlimited portfolios one. This allows you to create unlimited portfolio pages, each with it's own projects, settings, navigation, categories, etc..

1. First of all, create two separate portfolio pages, we'll call them A & B.
2. Create four projects under two separate categories, let's say projects a & b under category 1, and c & d under category 2.
3. Under each individual project you have the "Unique portfolio page" setting. There you can choose a parent page for each project - so simply assign projects a & b to page A, and c & d to page B.
4. Then inside each portfolio, choose the categories which include the projects that you've assigned to that portfolio page - assign category 1 to page A and category 2 to page B.
5. That's it! If you've done everything right, you should have two totally separate portfolio pages, each with it's own settings, color scheme, layout, projects & navigation between projects.

4. The Blog

4.1 Adding new posts

These are the default steps that you need to do in order to add a blog post:

• Go to Posts → Add New
• Enter a title.
• Select a post category.
• Add some relevant tags.
• Choose a featured image.
• Insert all of your remaining content in the content area. You can use the columns manager for this purpose or simply use the normal WordPress text editor. But the page builder will help you to achieve more interesting layouts!
• Write a few words excerpt (it is good for search results and SEO to have an excerpt, no matter what kind of content do you have in your post).
• Click "Publish" and you're all done.

4.2 Setting up the blog page

As you've already seen in the video, there are lots of options to display the blog. Whenever you set a blank page as the blog page from the Reading Settings, it will have a certain set of options.

You can choose between the journal and magazine layouts, add a carousel for featured posts, and enable or disable the sidebar.

5. Features & Tips

This short chapter covers some tips & tricks that you can do in order to make the site look and run better.

5.1. Child Theme

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child theme allows you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

This theme already comes with a child theme (airtifact-child-theme), which you can use directly if you want to replace PHP functions from the theme or have lots of css code that you want to paste in.

You can read more about child themes here.

5.2. Font Manager

When we released v1.0.6 a new Font Manager was added to the theme. As you could do before, you can choose from Google Fonts and now from system and custom fonts with one single UI. Below you can see more in detail how this new feature you will find within Appearance > Theme Fonts looks like:

5.3. Make your site faster

5.3.1. Get a good hosting

You may think that this is not an important aspect of your website, but if you want your site to run really fast, you need to get good hosting. This is the first step in having a fast site, which also translates into more visits, which also translates into a better SEO, which finally translates into more sales.

There are a few hosting companies which we recommend:

• Cloudways (our recommendation) → After a decade of working with users from all over the globe and trying all kinds of hosting providers, we have found a company providing the best value in terms of performance and pricing. Starting just at $10 (it includes a free SSL certificate) you will have a highly performant service that will bring your website to a different level in speed terms, security, and fully supported. This is the company we use for all of our operative needs. We are recommending it because we found a high value and we want to share this with you as well. We know how frustrating to deal with hosting companies is, just
  start a hassle-free WordPress installation now.
• Kinsta → A very good and high quality option for your website. One of the best options in the market.
• Flywheel → Fully specialized on hosting optimized for WordPress websites.
• Media Temple → If you want a premium WordPress hosting which is easy to manage and works pretty well, this is a good choice to host your website on.
• SiteGround → During many years, this was one of the best choices and it still is. Even the smaller plans are working nicely for small projects.

5.3.2. Optimize images

Always optimize/compress your jpeg images before uploading them to the server. Large images should be compressed at around 90% image quality and you should also try to limit the use of lossless image files (uncompressed pngs). An app you'll love and will help you to save lots of bandwidth in your site is ImageOptim, with app for Mac and web service to compress all your image files.

5.3.3. Use a caching plugin

We can’t recommend enough the necessity to good caching. If you use a managed hosting such as WPEngine you don’t need this, or maybe SiteGround, where they include their own cache plugin for WordPress. But if you are using MediaTemple or any other hosting you need to cache your content. For this purpose, we recommend W3 Total Cache. It’s a great and easy to use plugin, and with only a bit of work you can double your site’s speed.

• Enable page caching
• Enable database caching (it might be a bit unstable but you need to check it out at least)
• Don't enable object caching (the theme doesn't use that, so it's useless)
• Don't minify anything! CSS / HTML minification usually breaks themes, and the JS files are already compiled into a single minified one.

5.4 SEO Advices

The theme is built in a way to be SEO friendly, by emphasizing titles with heading tags, having the content before anything else, stripping out useless content, fast loading, setting titles in the header for better crawling, etc... All these help... But you have to remember that Content is King! So you shouldn’t blame the theme because your website doesn’t appear in search engines. You should always focus on providing good content and in this way, your website will definitely look great in search engines.

Also, you should always install a popular SEO plugin which will make the most of keywords and descriptions.

We suggest using Yoast for SEO, which will help for sure to optimize your site in terms of search indexability.

5.5 Translating the theme

This theme is localized, which means it can easily be translated in your own language. There are various methods to do a simple translate or create a website in multiple languages, so just use the one which works best for you.

5.5.1. Simple translate

The theme offers a .pot file which contains all the used strings (backend & frontend included). You can use this file in order to create your own translation or even change english words/literals you would like to read different. For example, you may want to change the literal 'Next' by 'Next Project', for this propose you could even use this methodology. However, the most easy way is to use a third party plugin. We recommend Loco Translate. It's an amazing piece of software, which allows you to do translations with ease.

5.5.2. Multilanguage

If you're looking for having your website in two or more languages, there is a powerful plugin which you can use. Because of the module builder, you need a plugin which handles meta fields. This plugin is WPML!

Credits

A special big 'THANK YOU!' for those talented artists and creatives that provided us with some of their amazing pieces to illustrate Airtifact Portfolio Creative WordPress Theme.

• Brian Liu
• Amateur
• Laura Benhini
• Horacio Lorente
• Stephanie Falaschetti
• David Romero
• Alexandra de Assunçao
• Perry Rowe
• Afroditi Constantinou
• Florencia Torres
• Yuschav Arly
• David Mboussou