Spacious

Spacious is an incredibly spacious multipurpose responsive theme coded & designed with a lot of care and love.

close

Relevant Links

Getting started

This is the Spacious theme instruction page. We have tried our best to keep it as simple as possible. If you think it can be made even simpler let us know we will be glad to change it. Let’s start! On the left side you can see the table of contents of this documentation. Jump to the section you want, or read it all through – your choice. Let’s move on!

Installation

Installing your theme is pretty easy! After downloading you should have a spacious.zip file. This is a compressed file containing all of the required templates and images required for the theme to function properly.

Upload Theme

  1. Go to Appearance > Themes in the WordPress Dashboard
  2. Click on the Add New button
  3. Click on the Upload link
  4. Select the spacious.zip file
  5. Click on Install Now button

Activate the theme

Go to Appearance > Themes in the WordPress Dashboard.
Now, hover over the theme thumbnail and press the Activate button

Additional information: WordPress Codex – Using Themes

Site Identity

This theme supports the default Site Identity section provided by the WordPress and we have integrated some options in this theme in this section.

Site Identity

Add Logo

  1. Go to Appearance > Customize > Site Identity > Logo in the WordPress menu
  2. Now, Upload the custom logo from the Select Logo button there.
  3. To show the logo follow instruction in Header Options section

Spacious instruction header logo

Site title & Tagline
You can find the field to write the Site title and tagline for your site below logo. You can also find the option to hide the tagline there.

Header Media

This theme supports header media provided by the wordpress. Now, you can upload image and video as the header media section on the Custmizer.

How to upload header media (Video or Image)

  1. Go to Appearance > Customize > Header media from the WordPress Dashboard
  2. Upload your video in mp4 format or enter youtube video URL.
  3. Upload your header image. Note:In mobile devices video will be replaced by header image.
  4. Click Save and reload your page.

Setup Business Template

The beauty of this theme is that you can add the widgets in the Business sidebar area to showcase your business for the home page.
Additional information: Business page setup video tutorial

First Step

  1. In the dashboard, add a new page.
  2. In the Page Attributes option box, choose the Business Template in the Template drop-down option.
  3. Now, Upload the custom logo from the Select Image button there.
  4. Publish the page. Yes, that’s it for the first step.

Second Step

The Business template has four widget areas within it. Have a look here in this image. Click on the image for a better view.
business-setup1

  1. Business Top Sidebar
  2. Business Middle Left Sidebar
  3. Business Middle Right Sidebar
  4. Business Bottom Sidebar

You just need to add some widgets to these sidebars to setup the business template.

Third Step

Below are some widgets provided by the theme that you could use to make your business template look awesome.

    1. TG: Services

Add this widget to Business Top/Bottom Sidebar. In this widget, select any of your pages in the drop down option. There are six page drop-down options within it. The title, description and featured image of that same pages that you select will be shown.

    1. TG: Call to Action

Add this widget to Business Top/Bottom Sidebar. In this widget, add the first and second title line, button text, button redirect link and all is done.

    1. TG: Testimonials

Add this widget to any Business Sidebar. In this widgets, add the title, text, name, byline and all is done.

    1. TG: Featured Single Page

Add this widget to Business Middle Left/Right Sidebar. In this widget, select any of your page in the drop down option. The title, description and featured image of that same page that you select will be shown.

    1. TG: Featured Widget

Add this widget to Business Top/Bottom Sidebar. In this widget, add the title and description. select any of your page in the drop down option. There are three page drop-down options within it. The featured image of that same page that you select will be shown.

    1. TG: Featured Posts

Add this widget to Business Top/Bottom Sidebar. With the help of this widget, you can show some of your posts, news or articles in your site.

    1. TG: Fun Facts

Add this widget to any sidebar to show some fact about your work, business or site. This will display the icon, animated number and text.

    1. TG: Our Client

Add this widget to Business Top/Bottom Sidebar. It displayes the logo or image. You can use it to show the client that you worked with.

    1. TG: Pricing Table

You can show the price and planning of your service or product. You can add your plans, price and button that will take to the related page of that pricing plan.

    1. TG: Team

This widget will help you to display team members from your company, office or organisation. This widget has the option to show member photo, name, title and social links. Its will be the great way to introduce your team member with this widget.

Note: If you want to set this Business Page as the Home page, then follow the instruction below:

  1. In the dashboard, go to Settings->Reading.
  2. Check on the ‘Static Page’ option.
  3. Choose the business page (the page you created following the instruction above) as the front page.
  4. Save the Changes.
If you set up everything right you can make your business template look the same as the one on our demo page. Business Template

How to Setup Blog page?

You can choose to show blog in 4 different ways.

Steps

  1. First go to Settings->Reading->Front Page displays->A static page (select below).
  2. Now from Posts page: dropdown select any page where you like to show blog post.
  3. Click Save Changes.
  4. Now if you want further options then go to Appearance->Customize->Design->Blog Posts display type.
  5. Choose Blog Image Large for large image with excerpt text.
  6. Choose Blog Image Medium for medium image with excerpt text.
  7. Choose Blog Full Content for showing full content without the featured images and readmore
  8. Choose Blog Image Alternate Medium for medium image with excerpt text but images appear in alternate fashion right, left.
  9. Now go to Appearance->Menu and select the blog page you choose in step 2 as menu
  10. See all blog demo here Demo

Also, you must upload featured images for each post to show the images on the blog page. For more detail on featured image have a look here Featured Images

Header Options

All the options related to Header part are available in Appearance-> Customize-> Header.

Show/hide header options

  1. After uploading logo from Site Identity section, check Show logo only or Show text only or Show both or Disable to show/hides the logo in header.
  2. Now, click on Save & Publish button.

Spacious instruction header logo options

Header Display Type

There are two options to show your header in the pro version of the theme. Just select your choice and save.

  1. Type 1 (Default): Social icons & small text area on left, menu area on right.
  2. Type 2: Social icons & small text area on right, menu area on left.

Active Header Top Bar

You have to active top header bar first to display social icons or menus in the top header of your site.

  1. Go to Appearance > Customize > Header.
  2. On the Active header top bar section, Click on checkbox to activate top header.
  3. After activating Header Top Bar, you can customize it’s content and display type from other section: Header Top Bar Display Type, Header Info Text.

Header Top Bar Display Type

  1. Go to Appearance > Customize > Header.
  2. On the Header Top Bar Display Type section, select an option.

Header Info Text

  1. Go to Appearance > Customize > Header.
  2. On the Header Info Text section, add content to the editor area.
  3. This text will appear on Header Top Bar if you’ve activated it from Activate Header Top Bar section.

Header Image Position

After uploading header image from the header media section you can choose the option to show the header image
here

  1. Position Above (Default): Display the Header image just above the site title and main menu part.
  2. Position Below: Display the Header image just below the site title and main menu part.
  3. Option to make header image link back to home page or other URL.

BreadCrumb Custom Text

  1. This option allows you to add custom text before breadcrumbs that appear on header section of the posts/pages/archive etc.
    breadcrumb-custom-text
Note: We support two plugins: Breadcrumb NavXT and Yoast SEO Breadcrumb for showing breadcrumb in post, page, archive etc. Yoast SEO breadcrumb is visible, if you’ve activated the plugin and enable Yoast breadcrumb. If you’ve activated Breadcrumb NavXT, it will override Yoast SEO breadcrumb.

Responsive Menu Style

  1. This option enables the new menu style in mobile devices with sub menu toggle icon.
    breadcrumb-custom-text

Social Links

The pro version of the theme supports Social icons to show in top header bar. There are
numberous fields for social icons. If yours own is not there then you can put additional too.

How to add social links?

  1. Go to Appearance > Customize > Social links from the WordPress Dashboard
  2. Activate the Social link area from the checkbox on first option.
  3. Add you social link in the associated social link field
  4. If you field is not there, go to the last option i.e Additional Social Icon and add
    there.
  5. Click Save and reload your page.

Home Page Slider

This theme supports the home page image slider. To use it follow the steps below.

Steps

  1. Go to Appearance > Customize in the WordPress menu
  2. Now go to the Slider section.
  3. To activate the slider, check the Check to activate slider checkbox
  4. Upload the image # 1 for the first slider. Similarly, add the corresponding slider title, slider
    description and redirect link. You can link to a link within your site or outside of your site.
  5. Repeat the above step for your other slides.
  6. Now, click on Save & Publish button. That’s it, open your home page and it should
    be there. 🙂

Design Option

To set the different design and options follow the follwing instructions.

Site Layout

You can choose the Wide and Boxed layout with different content width from this option.

    1. Please go to

Appearance > Customize > Design > Site Layout option and you will find
following option for layout there.

    in the WordPress menu

  1. Boxed layout with content width of 1218px
  2. Boxed layout with content width of 978px
  3. Wide layout with content width of 1218px
  4. Wide layout with content width of 978px

Color Skin

You can choose the Dark (Black) and Bright (White) Skin option from this option.

Primary Color Option

You can choose any color as your primary color from this option.

Default Layout for page,post and blogpost display type

You can choose default display type, display type for pages, post and bolg page from here.

    1. Option for Default layout, Page layout, Single post layout Optios
    2. Option for Blog Post Display Type
      Note: Only few option available for Free.

Category Options

  1. Go to Appearance > Customize > Design from the WordPress Dashboard
  2. Activate term description from the checkbox. It will show the category/term description to the category page.

How to limit the excerpt text

Now if you want to reduce or increase the number of words that appear in services widgets or post. You can easily change that.

Steps

  1. First Go to the service widget page or post in your dashboard.
  2. Just below the page editor you will see the excerpt box
  3. If you don’t see the excerpt box. Scroll to the top and you will see the screen options on the right hand side corner.

screen-options

  1. Click it and check the Excerpt box. Now you should see the excerpt box below the editor.
  2. Fill the excerpt box with the desired amount of text that you want to show.

Contact Us Page

Plugin Installation

  1. Download Contact Form 7 plugin from here Download then install and activate it
  2. Then go to plugin’s page and set it. Here is a detail on that Docs
  3. If you don’t see the excerpt box. Scroll to the top and you will see the screen options on the right hand side corner.

Contact us page template

  1. Go to dashboard, then create a page. Give it a name “Contact” or “Contact us” as your wish.
  2. Now on the right hand side you can see Template Drop-down. Select Contact Page Template
  3. Copy the contact form 7 shortcode and paste it in this page.
  4. Click on Publish.

Footer Options

In pro versio of the theme you can manage the footer column, edit copyright and allign the copyright section.

Footer Options

You will find the box as shown below in Footer Copyright Editor section where you can edit the footer copyright text.

  1. Click it and check the Excerpt box. Now you should see the excerpt box below the editor.
  2. Fill the excerpt box with the desired amount of text that you want to show.

Recommended Image Size

Since this theme heavily relies on the featured images of the post to be displayed the content of your site uniquely as it is best suited for the news/magazine site. So, we have created different recommended image size for this theme.Recommended image size (width*height) used in Spacious theme in px.

Image Sizes

  1. Recommended image size for Slider – 1400*500
  2. Recommended image size for Featured Blog Post (large) – 750*350
  3. Recommended image size for Featured Blog Post (large for boxlayout width 978px) – 642*300
  4. Recommended image size for Featured Blog Post (medium) – 270*270
  5. Recommended image size for Featured Blog Post (medium-small) – 230*230
  6. Recommended image size for Service Image – 150*150
  7. Recommended image size for Feature Widget Image – 270*270
  8. Recommended image size for Team Widget – 270*270
Spacious