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, and basic Luka theme setup.
After purchasing this theme download your purchased theme file 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 Luka, 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 Luka Portfolio file (luka-portfolio.zip) that you will need to install onto your WordPress.
After you installed your theme and all required plugins, follow these steps:
Go to Appearance > Import Demo Data
Click on big “Import Demo Data” button and wait until the importing process is done.
After the import process is completed you get all pages, images, posts and portfolio items you saw in the ThemeForest demo before purchasing the theme. Now all you have to do is replace the demo images and sample content with your own.
This chapter contains information about basic theme controls and their location so please read this chapter to avoid any confusion and get to know your theme better.
You can upload your logo image by going to Theme Options > Branding
To make sure your logo image looks sharp on all devices, you will need 2 logo files (a smaller one and a bigger one).
The small one should be around 60px high (upload it under “Site Logo”)
The bigger one should be exactly 2x bigger. If your smaller logo was 150x60px then your bigger logo image should be 300x120px (upload it under “Site Logo @2x”)
You can add your copyright information by going to Theme Options > Branding. Scroll to the bottom of the Branding options panel and look for Footer: Copyright.
The “Call to action” banner, located just above the footer area was designed to help your prospect clients find a way to easily get to your contact (or any other) page.
To activate your Call to Action area, go to Theme Options > Branding and look for Footer: Call to action
When activated, your Call To Action banner will automatically show up in all vertical scroll pages.
By default when you create a new page (Pages >Add New) your page title will show up at the top of your page in a beautiful script font called Argentinian Nights by inkmethis.
And at this point you have 2 extra options to customize your page title area:
1. Turn OFF page title
If you do not want to have a page title in a page, set the page template to “Page Without Title”
2. Add a decorative element above title
To enhance your page layout, open the page and upload a graphic of your choice in the Featured Image area.
If you 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
Give this page a name (ex., Portfolio) This page will contain all of your galleries.
In the content area you can write a couple of words about this page. (This text will show up if you activate Archive Titles & Descriptions in Portfolio > Portfolio Settings)
Click the “Publish” button.
Now go to Portfolio > Portfolio Settings and under Main Portfolio Page select the page you just created and click on the SAVE button.
Here you can set the layout for your portfolio page as well. You can choose between Modern Masonry and Masonry with hover in the Portfolio Archive Layout.
You can display your main portfolio page in 3 ways:
1. Galleries only
To disable the page title and any descriptions and create a page like in the image above, go to Portfolio > Portfolio Settings and turn OFF Show Archive Titles & Descriptions.
2. Galleries & Title
To enable the page title, go to Portfolio > Portfolio Settings and turn NO Show Archive Titles & Descriptions. Leave the content area empty in your Portfolio page (Pages > All Pages > Portfolio)
2. Galleries, Title & Description
To enable the page title, go to Portfolio > Portfolio Settings and turn NO Show Archive Titles & Descriptions. Then go to Pages > All pages, open your Portfolio and write your text in the main content area.
Give this gallery a name (Anne & John, New York, People …)
Add a subtitle (optional) to your gallery in the Sub Title area.
All of the images that will appear inside this gallery need to be uploaded in the Gallery meta box by clicking on the “Add Images” button. You can “drag” the image thumbnails around to change the image order
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.
You can write something about this gallery in the description area if you need to.
If you don’t want to show the description and title box in the gallery, scroll down and set “Title & Description” to Disable Description.
If you split your portfolio into multiple portfolio pages using categories (read Multiple Portfolio Pages chapter), you can add a custom description for each of your category portfolio pages.
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
Go to 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
Step 2
Go to 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 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).
Select the images that should be in the gallery (for best results, these images should be the same height.)
Click on the “Create a new gallery” button
In the GALLERY SETTINGS area set the column count, set “Link to” None (if you don’t want them to be clickable) or “Link to” Media File (if you want them to open up in a fullscreen slider), and set the size to what’s appropriate
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 in a more complex layout, you will need to create multiple galleries – 1 for eash column. Keep reading to find out how.
Creating a mixed 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. See an example here.
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
“Welcome Page” is the fullscreen gallery, image or video with a logo image on top that you see when you visit Luka for the first time.
If you enable Welcome Page in Theme Options > Welcome Page, it will automatically show up when someone first visits your site. After clicking on it, the visitor will be directed to the page that you set up as your front page in Settings > Reading.
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 well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.
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)
Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.
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 well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.
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)
Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.
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
To get a large footer with widgets inside it, go to Appearance > Widgets and place any of the available widgets in the Footer area. Your Footer can hold 3 widgets.
To add your copyright information, go to Theme Options > Branding.
If you wish to use columns in any of your pages, go to the page that needs columns and click on the little brackets button located above the main content area.
Choose any column layout available there and click on it. (each column needs its own column shortcode)
You will see that you get a little shortcode in your content – for example [one_half][/one_half]
Place your 1st column text in between the shortcode.
1
2
3
[one_half]
your first column text goes here.
[/one_half]
The,n in a new line, click on the bracket button again, choose your second column to generate another shortcode and place your second column text in between that and so on!
If you need to place a button somewhere in the content, click on the Add Post Element located above the main content area, next to Add Media button and choose the Button element.
Here we answer some of the most frequently asked questions.
If you do not find the answer to your question here or in the rest of the documentation, please visit our support forum.