Port is a beautiful and stylish portfolio theme with a responsive layout and a focus on clean typography. Whether you are building a site for a creative agency, a startup, or a freelance designer, this theme is all about creating a stunning presentation for your content.
Port is a responsive theme with a layout that adjusts to the screen size, ensuring it looks great no matter the device.
Port has built-in support for Portfolios. Creating and managing your projects has never been easier. The portfolio page template displays your projects by category with smooth animation effects.
This theme makes use of Testimonials, allowing you to easily display all the good things your customers and clients have to say. You can display your testimonials on the home page, or use the Testimonials widget to display them in a sidebar or footer.
Quick Specs (all measurements in pixels
- The main column width is
- The sidebar width is
- The footer widget area widths are
- Featured Images are
680 wide by unlimited height on
post archive pages, and
239 for projects and posts on the home page.
Upload Your Own Logo
You can upload your own logo image by opening up the Customizer under Appearance → Customize. Then click the Site Title & Tagline tab. There you will find the “Logo” image upload field.
Setting Up the Homepage
Port comes with a versatile homepage template that is designed to highlight your important content. To set up the homepage, first create a new page and name it something like “Home”. As you’re creating this page, select the “Home” page template in the Page Attributes box found in the right column. After you publish your page, go to Settings → Reading. For “Front page displays”, choose a static page and select your newly created “Home” page, then save your settings.
The content of the homepage template is broken into sections. Below is an explanation of how you can customize each section.
Banner: This area displays text and a background image that you set under Appearance → Customize → Homepage. This section is full screen, so the background image needs to be large. The recommended image size is:
1100px. These are not exact image size requirements, so feel free to experiment with different dimensions.
Recent Projects: Here you can show off your recent portfolio projects. You can change the heading of this section under Appearance → Customize → Homepage. Creating portfolio projects is explained below.
Featured Content: The featured content section of the homepage is a great place to highlight your services. You can set a background image for this section under Appearance → Customize → Homepage. Setting your featured content is explained below.
Recent Posts: This section highlights your latest blog posts. You can change the heading of this section under Appearance → Customize → Homepage.
Static Content: Here the static content of the homepage will be displayed. You can set a background image for this section under Appearance → Customize → Homepage.
Testimonials: Here is where your Testimonials will be displayed. You can set a background image for this section under Appearance → Customize → Homepage. Creating testimonials is explained below.
Setting Up Your Portfolio
- Create a new page, give it a title, select the “Portfolio” page template, and then click Publish. This page will display all of your projects.
- Add a new project by selecting Add New under Portfolio in the left hand menu.
- Use the main content editor on the Project edit page to insert text, images, or videos. Ideal image width is 1000px.
- Assign categories to your project using the Project Categories box in the right hand column. The categories that you create will appear at the top of the Portfolio page as a filtering menu.
Repeat steps 2-4 for each project you want to show on your portfolio page. Your recent projects will be displayed on the homepage in the “Recent Projects” section.
Be sure that the page that is using the “Portfolio” page template is not set as the Posts page under Settings -> Reading, or the portfolio will not display your portfolio projects.
Setting Featured Content
As mentioned above, there is a section in the homepage template where you can display featured content. You can feature any page or post here by giving it the tag featured, or you can specify your own tag under Appearance → Customize → Featured Content. You should upload a featured image, and enter an excerpt for each page or post you choose to feature.
To create a new testimonial, go to Testimonials → Add New. Testimonials are composed of a Featured Image, title (the person’s name), and their quote, which is added to the content editor. Recent testimonials will be displayed on the homepage in the “Testimonials” section.
Setting Up The Blog Page
You can easily do this by creating a new page and giving it a name like “Blog”, “News”, or whatever you’d like to call it. After you publish your page, go to Settings → Reading. Under Front page displays, set Posts page to your newly created “Blog” page. Save your settings.
Port comes with three widget areas:
- Slide Menu – Appears under the main menu in the slide out panel.
- Sidebar – Appears on the right side of posts and pages not using the Home or Full Width page template.
- Footer – Appears at the bottom of every page and post.
You can easily create social links by adding a couple of special classes to an HTML a tag. Here’s an example of a Twitter link:
<a href="your-url-goes-here" class="fa fa-twitter"></a>
Create multiple links like this:
<a href="your-url-goes-here" class="fa fa-twitter"></a>
<a href="your-url-goes-here" class="fa fa-dribbble"></a>
<a href="your-url-goes-here" class="fa fa-instagram"></a>
An ideal place to add social links is in a text widget or in the Right Footer Area, which can be edited under Appearance → Customize → Footer.
Adding buttons to your content is easy. First, add a link. Then switch over to the Text tab so you can edit the HTML. To turn your link into a button, simply add the button class like this:
<a href="your-url-goes-here" class="button">This is a Button</a>
You can even set the color of your button with some inline CSS like this:
class="button" style="background:#46adb1;">This is a Button</a>