Give your readers visual rhythm and harmony with Melody. With just a few simple clicks, you’ll have this light and minimal look for your site. Below are the steps on how to get you set up.
Important info
- The post width is 660.
- The sidebar width is 330.
- Featured Images are 1400 wide by 740 high.
- Don’t forget to install Jetpack. Melody was designed to work flawlessly with the following Jetpack features:
Featured Post
This feature requires Jetpack be installed. Here are instructions on how to install and set that up (you’ll need a WordPress.com account. If you don’t already have one you can sign up for free here.)
Melody lets you highlight three of your best posts. Here’s how to set things up:
- Go to Appearance > Customize
- From the Featured Content section set a tag name for your Featured posts.
- Add the featured content tag to the posts you wish to highlight.
And you’re done!
Grid Layout
- Go to Appearance > Customize
- From the Theme Options section pick the number of posts you’d like to show on each row for your blog.
Site Introduction Text & Sidebar Position
These options are available in both Simple Melody and Melody. They can easily be found in the Appearance > Customize menu under Theme Options.
Drop Caps
From the Text Editor of your WordPress dashboard, wrap your first paragraph with a <p>
tag and add class="drop-cap"
to it. The first letter will automatically get transformed into a drop cap.
Here’s a visual example:
<p class="drop-cap">Your awesome paragraph</p>
And the result will be:
Sub Headings
From the Text/HTML Editor of your post dashboard, wrap your first paragraph with the <p>
tag and add “sub-heading”
class to it. Here’s what it’ll look like:
<p class="sub-heading">Your awesome introduction paragraph</p>
Overhanging Images
Also from the Text Editor of your post screen, simply add “extra-wide-image”
class to your <img alt="" />
tag. Here’s what that will look like:
<img class="extra-wide-image size-full wp-image-83" alt="" />
And the result will be:
Site Logo
This feature requires Jetpack be installed. Here are instructions on how to install and set that up (you’ll need a WordPress.com account. If you don’t already have one you can sign up for free here.)
When you download and activate JetPack, Melody lets you upload a Site Logo. There is no size restriction so be sure to upload the perfect size for your site.
Here’s how to set your logo:
- Go to Appearance > Customize
- Next click on Site Title, Tagline, and Logo
- Click the Add Logo button and set your logo.
Social Media Menu
- To set up your Social Media menu, start by creating a regular menu. I like to call mine Social Media.
- Next add A Custom Link. This will be the url of your social media account.
- Add the newly created link to your menu.
- Next go to Appearance > Widget
- Add your menu to one of the three Footer Widget areas by using the Custom Menu widget.
Melody has 21 different icons for you to choose from. They include:
Content Options
This feature requires Jetpack be installed. Here are instructions on how to install and set that up (you’ll need a WordPress.com account. If you don’t already have one you can sign up for free here.)
Melody now allows you to hide certain meta information from your blog posts such as author name, author bio, date, category and tags. Here’s how to do it:
- Once Jetpack has been activated, go to Appearance → Customize.
- Click on the Content Options menu.
- On the next screen, simply uncheck the information you wish to hide. Then hit Save & Publish.
Melody Content Options – Checked
About Me Widget
Another new feature in Melody is the About Me Widget which easily allows you to add an image, short bio and a link to any page to any widget area.
Here’s a step-by-step on how to set it up:
- From your dashboard go to Appearance → Widgets.
- Add the Melody About Me Widget to either of your widget areas.
- Add a title. For example, About Me.
- Add an image url. For this, head over to:
- Media → Add New if you are using a new image or
- Media → Library if you are using one from your library.
Make sure your image is at least 135px by 135px.
- Once uploaded, click on the image to get to the Edit Media page.
Melody About Me Media Library - Double click or highlight the File url. Right click and copy.
Melody About Me URL - Go back to your Widgets and paste the url into the Image URL field.
- Select the image shape. Add in a short text.
- Optionally, you can link to a page with more bio info. Your image, if you have one, will automatically link to the url you set in the field.
- Hit Save. And you’re done!