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.
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:
- 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.
- Set the Front Page Template on the Home page.
- Go to the editor of your Home page.
- In the right sidebar, open the Page Attributes panel.
- Select “Front Page” in the Templates dropdown menu.
- 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.
- Save/Update your changes.
- Go to Customize → Static Front Page.
- Select « A static page » and choose the two pages you published in Step #1 as your Front page and Posts 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
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:
- Publish the three pages you would like to feature on your front page, and upload featured images for each page.
- Copy the URLs of each of your featured images. The directions on how to find the image URLs are here.
- Go to the Customizer.
- Go to Widgets → First Front Page Widget Area.
- Add a Text widget.
- Paste in the code below, replacing
page/url/addresswith 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/addresswith 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 →</a>
Your text widget will look like this:
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:
Text widgets in the first and second front page widget areas:
Text widgets in the first, second, and third front page widget areas:
Custom Page Templates
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 Attributes while editing a Page.
The Sela site demo is using a gallery on its Full-Width Template page:
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 Attributes 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 Attributes 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.
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.
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.
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.
Linking to any of the following sites will automatically display its icon in your menu:
- Email (mailto: links)
- RSS Feed (urls with /feed/)
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.
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
Where is the Testimonial archive page?
Let’s say you have a WordPress.com site at:
The URL of the testimonial archive page will be:
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.
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)
- The main column width is
620except in the full-width layout where it’s
- A widget in the sidebar is
- A widget in the Footer Widget Area or Front Page Widget Area is
- The featured image on the front page and on pages works best with images at least
- Featured Images for posts should be at least