Selaby Automattic
Overview

Sela is not your typical business theme. Vibrant, bold, and clean with lots of space for large images, it’s a perfect canvas to tell your company’s story — and it’s responsive, adapting to any screen and providing your visitors with a great browsing experience on any device.

To copy the layout of the site demo, you will need to have published pages, images in your Media Library, and testimonials.

Sela - Front Page

Setting up your front page

Set up a static front page with the Front Page Template

When you first activate Sela, your homepage will display posts in a traditional blog format. The demo site is using a static front page with the Front Page Template, so if you would like to copy the look of the site demo, follow these steps:

  1. Publish two pages and give them titles that are easy to remember, like Home and Blog. To publish a page, navigate to My Site → Pages → Add Page.
  2. Set the Front Page Template on the Home page.
    1. Go to the editor of your Home page.
    2. In the left sidebar, open the Page Options panel.
    3. Select “Front Page” in the Templates dropdown menu.
    4. Optional: Upload a featured image. The featured image will appear as the background image of your front page.  All content created in the Home page will show up in the white box on your front page.
    5. Save/Update your changes.
      Front page template
  3. Go to Customize  Static Front Page.
  4. Select « A static page » and choose the two pages you published in Step #1 as your Front page and Posts page.

static front page

The Front Page Template includes the following:

  • A featured area with a full-width featured image and an overlay containing the page content.
  • Three front-page widget areas, displayed side-by-side in columns, managed under Customize → Widgets. This is where you can get creative and use any of the available widgets to feature products or services, or showcase different parts of your website. See below for detailed setup used on the demo site.
  • The Testimonial area, configured under Customize → Testimonials, displays two testimonials. To add a testimonial, go to My Site → Testimonials → Add. If no testimonials are added, this section will not be displayed.

Front-page widget areas

Front-page widget areas

On the theme demo, this section is populated with a text widget in each front-page widget area, with an image and link to a page in each widget. To re-create the same look, follow the directions here:

  1. Publish the three pages you would like to feature on your front page, and upload featured images for each page.
  2. Copy the URLs of each of your featured images.  The directions on how to find the image URLs are here.
  3. Go to the Customizer.
  4. Go to Widgets → First Front Page Widget Area.
    first front page widget area
  5. Add a Text widget.
  6. Paste in the code below, replacing page/url/address with the full URL address of a page you want to link to (you can find the URL by going to the editor of the page and looking beneath the title), and image/url/address with the URL copied in step 2.

<a href="page/url/address"><img src="image/url/address"></a>

This is a full-width page template. It’s great for embedding a map, a large video, or a contact form. <a href="page/url/address">Read more &rarr;</a>


Your text widget will look like this:
text widget 1

Repeat steps 1-6 for each Front Page Widget Area until the first, second, third widget areas each have a text widget.  It may help to copy and paste the URLs for your pages and images into a separate text editor before going to the Customizer and creating the three text widgets.

Widgets in the the front page widget area will automatically occupy the entire width of the page.  For example, widgets in the first front page widget area will use the entire space, widgets in the first and second front page widget areas will divide the space into two columns, and widgets in all three front page widget areas will divide the space into three columns.

Text widget in the first front page widget area:

one widget

Text widgets in the first and second front page widget areas:

two widgets

Text widgets in the first, second, and third front page widget areas:

three widgets

Custom Page Templates

Full-Width Template

The Full-Width template gives you more space for your content. It’s the perfect way to showcase a gallery of images or a video, Don’t forget to take advantage of the beautiful full-width featured image, too. To use the Full Width template, select it under Page Options while editing a Page.

full width page

The Sela site demo is using a gallery on its Full-Width Template page:
Sela - Full-Width Page Template

Grid Template

The Grid Page template is designed to show child pages in a grid format. To get started, first create or edit a page, and assign it to the Grid Page template from the Page Options panel. The content of this page and featured image – if one is set – will be displayed above the grid.

To add items to the grid, create additional pages and set their parent page in the Page Options box to the grid page you just created. Be sure to set a featured image for each child page if you want an image to show up inside the grid. Repeat these steps for every item you want to display in the grid.

child page

The grid page template on the Sela site demo:

Sela - Grid Page Template

Custom Menu

Sela includes one Custom Menu in the header, which can be configured via My Sites → Menus. If no menu is assigned, this area will display a list of Pages by default.

Site Logo

Brand identity is very important — that’s why Sela supports the Site Logo feature. To add your own image, go to Customize → Site Title. The logo will appear in the header, above the Site Title.
sela logo

Social Links

With Sela, you have the option to display links to your social media profiles in the footer, just above the website credits. To display them, set up a Social Links Menu.

Sela - Social Links Menu

Available Icons

Linking to any of the following sites will automatically display its icon in your menu:

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Email (mailto: links)
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS Feed (urls with /feed/)
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Widget Areas

Sela offers seven widget areas:

  • Main Sidebar appears on the right in blog view and on pages, using the default template.
  • Three optional footer widget areas.
  • Three optional widget areas on the Front Page Template.

The site demo is using the Contact Info widget, Text widget, and Custom Menu widget in the footer widget areas.

As a bonus, Sela comes with a special design for the Milestone and Gravatar Profile widgets.

Sela - Gravatar Profile Widget
Sela - Milestone Widget

Testimonials

Sela features testimonials in three ways:

  • The Front Page Template displays the oldest two testimonials. If you prefer to select which two testimonials are displayed on the homepage, add the numbers 0 or 1 to the Order field in the Page Attributes box on the testimonial edit screen, and ensure all other Testimonials have an Order number of greater than 1.
  • The dedicated testimonial archive page displays all testimonials in reverse chronological order, with the newest displayed first.
  • The Testimonial Shortcode allows you to display the testimonials wherever you want on your site. On Shoreditch‘s demo site, it is used on the homepage.

To add a testimonial, go to My Site → Testimonials → Add. Testimonials are composed of the testimonial text, the name of the customer — added as testimonial title — and an image or logo, which can be added as a Featured Image.

Testimonial Archive Page

All testimonials are displayed on the testimonial archive page, which can be added to a Custom Menu using the Links Panel.

Where is the Testimonial archive page?

Let’s say you have a WordPress.com site at:
https://selademo.wordpress.com/

The URL of the testimonial archive page will be:
https://selademo.wordpress.com/testimonial/

This page can be further customized by adding a title, intro text, and featured image via Customizer → Testimonials. This content will appear above the testimonials list.

Testimonials

Custom Background

Custom color, pattern, or a beautiful image – the choice is yours. To change the background, visit Customize → Colors & Backgrounds from your dashboard.

Quick Specs (all measurements in pixels)

  1. The main column width is 620 except in the full-width layout where it’s 778.
  2. A widget in the sidebar is 250.
  3. A widget in the Footer Widget Area or Front Page Widget Area is 320.
  4. The featured image on the front page and on pages works best with images at least 1180 wide.
  5. Featured Images for posts should be at least 820 wide by 312.

This theme is available for download to be used on your WordPress self-hosted installation.

Download
You might also like
Next theme