Upload Your Own Logo
You can upload your own logo image through the Customizer, in the the Site Identity section.
Setting Up the Homepage
Mellow comes with a sleek homepage template that is designed to highlight your important content. To set up the homepage, create a new page and name it “Home”, and assign it to the Home page template. After publishing 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. You can learn more about setting up a static front page here.
The content of the homepage template is broken into three sections:
Home Content: The top of the homepage is a great place to put a call to action, welcome message, or any other content you want the user to see when they land on your page. This is the content of the Home page itself — that is, the page you selected in the step above.
Recent Projects: Here you can show off your recent portfolio projects. You can change the number of projects displayed in this section (up to a total of 15) under Appearance → Customize → Homepage. Mellow allows you to feature some of your projects by making the project tile twice the height of a normal tile. To do this, you will use Featured Content, explained below.
Recent Posts: This section highlights your latest blog posts. You can change the number of posts to display here under Appearance → Customize → Homepage. Each post will display its featured image in the background when a visitor hovers over the image.
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 1000 pixels.
- Assign categories to your project using the Project Types box in the right hand column. The categories that you create will appear at the top of the Portfolio page as a filtering menu. Please note: Mellow requires a minimum of two Project Types before the categories will display as a filtering menu on the Portfolio page.
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. Add a featured image to each page or post you choose to feature.
Choosing Your Navigation
Mellow offers two types of navigation menu: Slide-out and overlay.
The slide-out menu has a more compact design, allowing you to add widgets alongside your main navigation menu (see Widget Areas below). In addition, the slide-out menu offers you the option of using a background image to add a little atmosphere to your navigation.
The overlay menu, on the other hand, was designed for a minimal, clean look and feel, with larger fonts and no widgets.
Setting Up The Blog Page
You can easily do this by creating a new page and giving it a name like “Blog” or “News”. 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.
Mellow comes with three widget areas:
- Slide-Out Menu — Appears under the main menu in the slide-out panel.
- Post 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 (anchor) 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/HTML 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:
<a href="your-url-goes-here" class="button" style="background:#46adb1;">This is a Button</a>