Shoreditch

Shoreditch is a functional and responsive theme perfect for your business’s online presence.

Custom Page Templates

Shoreditch has two custom page templates that work particularly well for corporate sites:

• Panel Page Template
• Full-Width Page Template

Panel Page Template

The Panel Page Template is a way to highlight multiple pages on your site’s home page, and is what you see on the demo site. It displays the page you’ve assigned to the template, followed by a panel for each of its child pages. You can change the order that your child pages are displayed in by using the Order field of the Page Attributes module. The Panel Page Template is powerful and flexible enough to be used for a variety of purposes — use it to introduce your business to the world, or present all the services you offer.

When you first activate Shoreditch, you’ll see your posts in a traditional blog format. If you’d like to set up your site like the demo, follow these instructions:

1. Create or edit a page, and then assign it to the Panel Page Template from the Page Options box.
2. Add an introduction to your site in the editor.
3. Add Featured Image, which will be displayed behind the text in that panel.
4. Go to Customizer → Static Front Page and set “Front page displays” to “A static page.”
5. Select the page to which you just assigned the Panel Page Template as “Front page”, and then choose another page as “Posts page” to display your blog posts.
6. Add some child pages to the page to which you just assigned the Panel Page Template.

Full-Width Page Template

The Full-Width Page Template gives you more space for your content. It’s perfect for showcasing a gallery of images, embedding a map, inserting a large video, or adding a contact form. Select the template under Page Options.

Blog Page

Although its main purpose is business, Shoreditch looks great as a personal blog theme too.

Featured Content

Shoreditch displays Featured Content in a slideshow on the blog page. To set it up:

1. Navigate to Customize → Featured Content.
2. Choose a word to use as your Featured Content tag and add it in the text field. We suggest using a lowercase, single word, like featured.
3. Click the Publish button to save changes.
4. Create at least a few posts. For each post you’d like to feature, use the Tags & Categories area of the editor to add the tag you chose under Customize → Featured Content. With this theme, you can also tag pages to be displayed as Featured Content, in addition to posts.
5. Add a featured image to each post or page you’re featuring.

Check out the full Featured Content setup guide and video.

Testimonials

Shoreditch features testimonials in two ways:

• 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:

Welcome

The URL of the testimonial archive page will be:
https://shoreditchdemo.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.

Widget Areas

Shoreditch offers three widget areas, configured in Customizer → Widgets:

• A Sidebar widget area, which appears on the right.
• An optional Top Footer widget area.
• An optional Bottom Footer widget area.

Theme Options

Shoreditch comes packed with three Theme Options available via the Customizer:

• Fixed header when scrolling down: On larger screens the header will stick to the top of the browser when scrolling down. This option has been enabled on the demo site.
• Top Footer Area Layout: You can choose between one, two, or three columns to display your widgets in the Top Footer Area. The default setting is one column.
• Bottom Footer Area Layout: You can choose between one, two, or three columns to display your widgets in the Bottom Footer Area. The default setting is three columns.

Custom Menu

Shoreditch includes one Custom Menu in the header, which can be configured via Customizer → Menus.

Social Links

With Shoreditch, you have the option to display links to your social media profiles in the footer with perfectly sized icons, just next to the site credits. Learn how to set up your social links menu.

Extras

Shoreditch comes with a few special CSS styles.

Buttons

button and button minimal

You can add these classes to your links in the HTML Editor, to create “call to action” buttons:

For example:

<a href="https://shoreditchdemo.wordpress.com/" class="button">Button</a>

<a href="https://shoreditchdemo.wordpress.com/" class="button minimal">Button Minimal</a>

Columns (recommended for advanced users only)

Two special CSS classes are available to create a two-column or three-column area within a post or page:

column-1-2 and column-1-3 (plus column-first and column-last)

You will need to use the HTML Editor to create your columns. We recommend not switching back and forth between the Visual and HTML Editor once you start creating columns.

For example, this code creates a two-column layout:

<div class="column-1-2 column-first">

London!—that great place!—nobody—not even Mr. Bumble—could ever find him there! He had often heard the old men in the workhouse, too, say that no lad of spirit need want in London; and that there were ways of living in that vast city, which those who had been bred up in country parts had no idea of.

</div>



<div class="column-1-2 column-last">

London!—that great place!—nobody—not even Mr. Bumble—could ever find him there! He had often heard the old men in the workhouse, too, say that no lad of spirit need want in London; and that there were ways of living in that vast city, which those who had been bred up in country parts had no idea of.

</div>

This variation creates a three-column layout:

<div class="column-1-3 column-first">

The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind.

</div>



<div class="column-1-3">

The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind.

</div>



<div class="column-1-3 column-last">

The stone by which he was seated, bore, in large characters, an intimation that it was just seventy miles from that spot to London. The name awakened a new train of ideas in the boy's mind.

</div>

See live examples on Shoreditch‘s demo site.

Linked content images without the shadow

Due to styling of the links, when adding a linked transparent image to the content, you may notice a line behind the image.

To make sure, the above doesn’t happen, you can add a class .no-shadow to the anchor element:

<a href="#" class="no-shadow"><img src="#" /></a>

Keywords

business, agency, freelancer, services, responsive, modern, light, clean, professional, ecommerce, product, technology, software, computer, it