Distance Instructions

Distance is a portfolio and eCommerce WordPress theme, great for design agencies. Powerful home page template featuring portfolio and WooCommerce categories.

Theme installation

Unzip file distance_unzip_first.zip that you downloaded from us and install distance.zip file. Read more how to install a theme → 

Making theme look like demo

Inside the package you will find a file named d-stance.WordPress.xml that you can use to import the demo content. Read more how to make theme look like the demo 

Activate child theme

This theme enables you to create and activate a child theme with just one click, which is the recommended way to modify themes.  Learn how to create a child theme 

Adding a logo image

Go to Appearance → Customize → Site Identity to add a logo image or edit your site title. Learn how to update your site identity 

Setting up the menu

This theme has two menu locations, the Primary Menu (main menu) and Social (the menu to display your social media profiles). Create menus and assign them to each of the available locations. Learn how to setup WordPress menus 

Social media icons

This theme will automatically display links to your social media profiles as icons, using a Custom Menu. Learn how to setup social media menu 

Header image

By default the theme will display a speeding road effect in the front page header. You can replace that effect by adding a header image.

In your Dashboard go to Appearance → Customize → Header Images. Add the image you want to display. You can add more than one and randomize them. The images will be resized to 600x410px.

Top widget

As you can see in our demo, at the front page header, there is a block of text with a call to action button. You can achieve that by adding a text widget or any other widget type to the Top Widget location. In your Dashboard go to Appearance → Widgets and add a widget to this location. Learn how to add widgets 

To have the same looking call to action button use this html code

<a class="widget-more" href="#">More</a>

Configuring the front page

In the front page below the header image, this theme will display the latest posts by default. You can assign a static page to display in front instead of the latest posts. Learn how to display a static page in front 

This way you can have the Home Page template, a default page, that is a page with a right sidebar, a full width page or your portfolio display in front, instead of the latest posts.

Home page template

This theme comes with a custom made template to create an attractive and very functional home page, just like in our demo.

At the top of the Home Page template will appear six latest portfolio entries.

Below the latest portfolio entries there is a carousel that can display WooCommerce product categories or featured posts and pages.

If WooCommerce is installed and activated, WooCommerce product categories will appear automatically. Add an image (thumbnail) to each product category, suggested size is 380x410px. You can add a thumbnail in the bottom of the screen when you edit a WooCommerce product category.

Alternatively you can have featured content instead of WooCommerce product categories. In your Dashboard go to Appearance → Customize → Theme Options and check the box to Display featured content instead of WooCommerce categories. If you are not going to use WooCommerce, the theme will automatically display featured content.

To feature a page or post, in the bottom of the right column in the editor, check the box to Feature post in the front page. Add a featured image which will be resized at 380x410px.

Change the title of Latest Portfolio and Carousel section under Appearance → Customize → Theme Options, refer to the screenshot above.

At the bottom of the Home Page template there is a widget section. In your Dashboard go to Appearance → Widgets and add a widget to the Front Widget location. Learn how to add widgets 

In our demo we are using text widget with form shortcode from Contact Form 7 plugin. To make the required asterisk look like the demo, you need to edit the form and replace (required) text with the code below

<span class=”required”>*</span>

Portfolio

First create a page. Assign the Portfolio template to the newly created page. Learn how to change page templates 

Add the page to the menu or have it display in the front page as explained above.

  • In your Dashboard go to Portfolio → Add New.
  • Add a featured image to each portfolio entry. The image will be resized to 500x500px. Learn how to add featured images to a page or post 
  • You can create Project Types in the right column to have multiple portfolios.
  • Assign each portfolio entry to one or more Project Types.
  • You can include each Project type in the menu via the Menu Manager. Make sure Portfolios are enabled in the Screen Options of the Menu Manager (top right corner).

WooCommerce

The theme does not need any special settings for WooCommerce, it is setup to work out of the box.

To achieve the hover effect that changes the image on rollover you need to add at least a gallery image to each product.

For the custom WooCommerce pages like Cart, account and checkout, we have used the Plain Page template.

If you need help to get started with WooCommerce, here is a tutorial.

Footer background

To upload a background image for the footer, in your Dashboard go to Appearance → Customize → Theme Options. Suggested image size is 2000x600px.

Page templates

  • Home Page: Custom page to display in front.
  • Default: Content page with right sidebar. The text below the title uses the page excerpt, you can customize it by using the excerpt field in the right column of the editor.
  • Full width: Full width page, no sidebar.
  • Plain: This is a page template that does not display the white background header.
  • Portfolio: Page to display portfolio entries.

Widgets

  • Right sidebar: This location is visible in default pages, blog and single posts.
  • Top Widget: Visible in the front page at the header.
  • Front widget: Visible in the bottom of the Home Page template.
  • Footer widgets: Visible throughout the website, in the footer.

Featured Images sizes

  • Header image: 600 x 410px
  • Blog featured images: 500 x 300px
  • Featured categories: 380 x 410px
  • Portfolio images: 500 x 500px

If you need more help regarding this theme, please contact us.