Shapely

A responsive, one page WordPress theme, with ample flexibility for individual blog posts.

starstarstarstarstar_border
  • folder One Page
  • attach_money Free
  • account_box Colorlib
Shapely One Page WordPress Theme

Shapely One Page WordPress Theme Review

Let’s take a look at the popular, free WordPress theme, Shapely, built by the folks at Colorlib. We’ll highlight the main features of the theme, discuss what types of websites it will work best for, and talk about possible downsides.

This review was paid for by the theme author, but it remains 100% objective.

Who is Shapely For?

While Shapely will also support a full-featured blog, it was really designed as a one page WordPress theme for businesses. It comes with several widgets that are specifically designed to add sections to your homepage, and allow a visitor to scroll from section to section.

With Shapely, on your homepage, you can…

  • highlight your company’s features
  • add parallax sections to grab your visitor’s attention
  • include a call-to-action section
  • display client logos
  • insert a video
  • include a contact form

I’ll talk more about how to add each of these sections in a minute.

Getting Started with Shapely

The first thing you’ll notice upon activating Shapely is a message that directs you to their setup page. While the message is rather large, and it does persist until you forcibly close it, their setup page does provide very helpful info for beginners.

Shapely theme setup message

Their getting started page walks you through a recommended setup process, which includes installing a few plugins, reading their documentation, and a link to the Customizer to begin customizing the theme.

Shapely getting started page

NOTE: Shapely did some extra optimization to account for popular plugins like Contact Form 7 and Jetpack, so if you have them installed, they’ll work seamlessly with this theme.

Shapely’s Header & Navigation

Site Logo & Title

You can choose to either display a text-based site title, or your company’s logo. The logo can be easily uploaded via the Customizer.

Main Navigation

Shapely’s main navigation supports dropdown menus. The navigation also works really well on mobile devices.

Shapely WordPress theme mobile navigation
Shapely’s navigation on mobile devices

In terms of design, the font is a little small and the letter spacing a little tight for my liking, but that is largely personal preference.

The logo & navigation remain stuck to the top of the page (aka: sticky header). However, there is no way to turn this on of off. Having that option would be a nice feature to add.

Search

A search icon is present at the far-right of the main navigation. Hovering over it opens up a search box. While this could be useful for sites with many blog posts, smaller businesses might not need or want a search feature.

Unfortunately, there is no way to easily disable this (without editing code).

Shapely theme search in header
Search is mandatory in the header

Homepage Settings

This is where you’ll likely spend most of your time. Because Shapely is designed as a one page WordPress theme, the homepage is where most of your site’s content will live (with the exception of any blog posts you publish).

It is worth noting that Shapely provides an option to import demo content. Doing so will set your theme up exactly as the demo on their website. Many users will find this feature helpful, however, for this review, I did not use the importer.

Shapely comes packaged with a bunch of additional WordPress widgets to help you out. I’m going to highlight the specific widgets that come with Shapely, but you can actually add ANY WordPress widget to your homepage.

Parallax Section

You can add a parallax section anywhere on your homepage. You have the option to customize the following:

  • image to use
  • title
  • a short description, display under the title
  • 2 buttons, displayed side-by-side under the description

Shapely's parallax section

Features Section

This homepage widget lets you provide up to 3 features that your company provides. It will display them in a 3-column layout anywhere you want to place them on your homepage. You can control the following:

  • Section title
  • Section description
  • Feature title
  • Feature description
  • Feature icon

Shapely theme homepage features

One downside I saw here is that if you only choose 2 features, they are not centered. You’re left with extra space on the right. But if you have 3 features, they’ll all be displayed beautifully.

Also, you can add links/buttons to the feature description, but you will need to know a little HTML.

Call-to-Action Section

You can provide a call-to-action anywhere on the homepage. It will stretch across the entire screen, and have a light grey background. You can add:

  • some short text
  • a button (text + link)

Clients Section

You can add a list of your clients, and have their logos displayed in an automatic slider.

Shapely clients slider

For each client, you can…

  • upload an image
  • add a custom link

The logos are initially displayed with a lower opacity, and then brought to 100% opacity on hover.

One downside is that the logos slide even if there are fewer than 4. I tried it with 2 logos, and the logos just moved from the left side of the screen to the right.

Contact Section

The contact section in Shapely lets you display the following:

  • An optional background image
  • Section title
  • Section description
  • Phone number
  • Email address
  • Physical address
  • Social media icons
  • A contact form (if you have Contact Form 7 installed)

Other Widgets & Sections

If you’d like to add testimonials and/or a portfolio of your featured projects, install Jetpack, and use their custom content feature.

Like I mentioned before, you can add ANY widget to your homepage. Just keep in mind, you might have to do some custom styling if it’s not one of the official widgets supported by Shapely.

Shapely Theme Options

Colors

Colors available in Shapely
List of color choices available in the Shapely theme

Shapely provides 7 customizable color options:

  • Background – Background color of the main content area
  • Header Text – Color of the page title
  • Links (regular & hover)
  • Buttons (regular & hover)
  • Social Icons – These are optional, but displayed in the footer if you provide your social media channels

This is OK in terms of color options, but there are a few more that I’d like to see:

  • Body Text – Personally, I think the light grey body text is too hard to read. I would make the default color darker, but also give the user an option to change it.
  • Footer Colors – If you use the footer callout section, there are essentially 2 footer areas, neither of which you can control background or text colors.
  • Page Title Background – You can change the color of the page title text, but not the background.
  • Header – It’d be nice to be able to chance the background & text color in the header, as well.

I’m all for keeping theme options to a minimum, but I think these are very reasonable options to add for a little more customization.

Footer Call-to-Action

The Shapely theme adds a simple call-to-action area at the bottom of your content, just above the main footer. You can…

  • Insert a custom message
  • Customize the call-to-action button text & link
Shapely's footer call-to-action
The call-to-action area, located in the footer

Blog Settings & Options

There are quite a few options when it comes to displaying your blog posts. Choose between 3 layouts:

  • Grid only: Displays all posts, with equal weight, in a 2-column grid
  • Large image & grid: Displays your most recent post with a larger image at the top, then the rest in a 2-column grid
  • Large images: Displays all posts in a single column with a large, horizontal image

The main blog page also supports a custom page title at the top, as well as an optional background image that stretches the length of the screen. This is a really nice touch that is missing in many other themes.

Author Bio

If you run a multi-author blog, you’ll be happy to know that Shapely adds an author bio box to the end of each post. It includes the author’s image, a short bio and some social media links.

Shapely's author bio box

You can turn this off if you don’t want it displayed.

Blog Sidebar

You can also choose between 4 options for your blog’s sidebar:

  • Left Sidebar
  • Right Sidebar
  • No Sidebar
  • Full Width Page (with no sidebar)

The same options apply to static pages, as well.

Shapely WordPress theme blog settings

Individual Blog Posts

You have a long list of options when it comes to individual blog posts. You can see all of them listed below. This provides a great deal of flexibility when it comes to your post’s layout.

  • Show/hide the author, category, date & post tags
  • Use a a dropcap for the first letter
  • Show/hide the title at the top of the page
  • Show/hide related posts at the bottom
  • Show/hide the author bio box
  • Show/hide the author’s email in the bio box
  • Move the author bio box to the left-side of the screen

I really love the flexibility here!

Comments

Shapely supports indented comments, up to 5 levels deep. However, the design of each comment is not as polished as I’d like it to be. As you can see below, the date is very small and the Reply button text is not aligned well.

Shapely example comment

Related Posts

Shapely does something that most other themes don’t—include a “related posts” section at the bottom of each post. You have the option to turn this on/off. It doesn’t come with any options for how they are displayed (and I don’t know what kind of algorithm is being used to determine what is related), but if you just want something simple, it will do the trick.

Shapely related posts animation

For more advanced related posts options, you’ll want to turn to a plugin instead.

Shapely’s Footer

Let’s take a look at the Shapely footer.

Widgets

As previously mentioned, you can add a call-to-action area just above the main footer. In the main footer, you can add up to 4 widgets to show off various pieces of contents.

Shapely WordPress theme footer area
The footer callout area, plus space for up to 4 widgets

The footer widgets will be displayed in 4 columns, and they stack nicely on smaller screens.

The one improvement I would suggest here is if you only add 2 or 3 widgets, adjust the width of those widgets accordingly, so that they take up 100% of the footer. Instead, every width is 25% wide, which, if only 1 or 2 widgets are added, leaves a large blank space on the right side of the screen.

Social Links

Shapely adds support for an additional menu, besides the main navigation. Just create another menu with all of your social media channels, assign it to the “Social” menu location, and you’ll have nice icons displayed in your footer that link out to your social channels.

Shapely theme social icons

And there’s a nice little “back to top” arrow in the footer as well, if that’s your thing. It smooth scrolls you back to the top of the page.

Copyright

They’ve included an option to add your own copyright text in the footer, which is nice. However, you cannot easily remove the “Theme by Colorlib. Powered by WordPress” links (without editing some code).

Shapely footer Colorlib link

I really wish they provided an easy way to remove this.

Conclusion

The Shapely one page WordPress theme is packed with options, both for your homepage, as well as individual blog pages. There are a few areas where it could clean up its design, but for a free theme, you’re getting a lot of nice features.

Get Shapely

Shapely Review Video

Increase the video speed to 1.25 or 1.5x to save some time.

Subscribe for more WordPress Theme reviews

6 Commentson "Shapely"

  1. /

    How can I add my own custom JavaScript, PHP and SQL to the Shapely Theme?

    → Reply
    1. (Author) /

      Hi Peter,

      You can add custom JavaScript to the <head> or before the closing </body> tag using this plugin: Header and Footer Scripts.

      For PHP, I recommend using the Code Snippets plugin. This is an alternative to adding PHP code directly to your theme’s functions.php file. So if you switch themes, your custom PHP snippets will still be there. So especially for PHP code that is NOT related to your theme, this is a great way to go.

      As for custom SQL code, I would refer you to the wpdb PHP class built into WordPress. Anything related to the database should usually be taken care of via this class. Keep in mind, this is rather advanced code, and I only recommend making custom database calls if you know what you’re doing. It is possible to bring down your entire site, or even worse, erase data. So please be careful with this one.

  2. /

    Hello,

    How Can I create a carousel on my first page ?
    Section : title.

    Thanks a lot,

    → Reply
    1. (Author) /

      Hi Marion,

      You’ll need to use a page builder or slider plugin in order to do that. Check out Elementor or Beaver Builder. They’ll let you fully customize your first page with sliders and other design elements.

  3. /

    Thanks a lot.
    Is there any solution by adding code in CSS ?

    Marion

    → Reply
    1. (Author) /

      You can do a search for “css only slider” and try to implement it yourself. But using a page builder like mentioned above will give you a lot more flexibility, and save you some time.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.