0
Welcome Guest! Login
0 items Join Now

Interstellar: Recreating the Demo

Your Guide to Recreating Elements of the Interstellar Demo for WordPress


Introduction

Recreating features of the demo site used to show off some of the more interesting aspects of Interstellar can be done fairly easily. All you need is the right plugins and settings, and you should be able to reproduce most (if not all) of the elements found in our demo site.

Below, we will break down some of these elements and give you the information you need to know to recreate them on your own site using the Interstellar Theme.

Keep in mind that a lot of the detail that makes our demos look so good is the result of many hours of hard work by our team, and some of them will require a moderate level of experience working with the WordPress back end. We have added most of these elements into the theme's core files in order to make them easily accessible without having to edit any code.

NOTE: We recommend downloading a copy of the RocketLauncher whenever you are attempting to replicate demo content. This allows easy referencing, whether on your site in a subdirectory, development server, or on a localhost. This will allow you to see all of our demo content in context, making it easier to replicate.

Widget and Particle Settings

Below, you will find the widget placement and settings for the various widget positions as they appear on the front page of our demo. Not all of these position assignments are unique to the front page.

1
Navigation
Logo (Particle)
2
Navigation
Social (Particle)
3
Navigation
Menu (Particle)
4
Header
Custom HTML (Particle)
5
Header
Custom HTML (Particle)
6
Slideshow
Owl Carousel (Particle)
7
Above
Simple Content (Particle)
8
Above
Simple Content (Particle)
9
Feature
Owl Carousel (Particle)
10
Expanded
Simple Content (Particle)
11
Expanded
Image Grid (Particle)
12
Extension
Simple Content (Particle)
13
Extension
Block Content (Particle)
14
Bottom
Pricing Table (Particle)
15
Footer
Custom HTML (Particle)
16
Footer
Newsletter (Particle)
17
Copyright
Copyright (Particle)

We have detailed how to recreate the individual widgets and particles pictured above in the links below, separated by sections found in the Layout Manager.

  1. Navigation
  2. Header
  3. Slideshow
  4. Above
  5. Feature
  6. Expanded
  7. Extension
  8. Bottom
  9. Footer
  10. Copyright

Not pictured here is an Offcanvas position which hosts the mobile menu. You can find out more about the Offcanvas position in the Gantry 5 documentation.

Recommended Plugins

Here is a list of RocketTheme plugins used to create the demo version of Interstellar:

Many of these plugins are included with the Interstellar RocketLauncher, and can be downloaded and installed individually by going to the RocketTheme website.

Recreating the Front Page

The front page of the Interstellar demo sits apart from the rest of the page layouts in that it features the latest and greatest features of the theme. It is because of this that several widget and layout overrides were done. In this section, we will break down the settings you will need to recreate elements present in the front page of the Interstellar demo.

Home Page Layout Presets

Layout Presets

In order to make it really easy to replicate the home page, we included two layout presets for the home page with the theme. The first, Home - Particles includes all of the particle-based home page demo content so you can hit the ground running with a copy of our demo to work from loaded directly into the layout. If you downloaded the theme and not a RocketLauncher, this is the best option for you if you want a copy of the front page with minimal effort.

The other preset is called Home - Positions and this is used in our demo by default in the RocketLauncher. This option creates widget positions which give you a little more flexibility to swap out demo particles with standard WordPress widgets. Keep in mind that this Layout Preset will not fill in the Gantry 5 Particle widgets, only the widget positions we used in the layout for the demo. We've included this documentation to help you recreate specific elements if you opt to go with this layout preset on an existing site.

You can access the presets by selecting Load in the Layout Manager.

Theme Settings

The first thing you will need to do in order to set your front page apart as it appears in the demo is to create a Home outline which is commonly referred to in WordPress as a Style Override. This can be done by navigating to Components > Gantry 5 Themes and finding the theme you wish to create a new outline based in. Once you have done this, you can select the blue Configure button and then navigate to Outlines. This page gives you a quick overview of any configurations for this theme.

You can then simply find the default outline and select the dark blue Duplicate button to create a new one based on the default outline used by your site. This will create an override, or Style. This outline can have its own layout, style, and settings preferences.

It would be a good idea for organization to name this outline something like Interstellar - Home as it would be used only for the front page of your site. In our own Demo and in the RocketLauncher we have named this Style Interstellar - Demo instead of Interstellar - Home.

Menu Editor

Interstellar has its own built-in Menu Editor which takes full advantage of WordPress's menu system, taking your WordPress menus and enhancing them before passing them to visitors on the front end. Any changes made in the Menu Editor will only affect the way it appears to the visitor, and not the way WordPress sees or uses it.

You can access the Gantry Menu Editor by navigating to Admin > Interstellar Theme > Menu. You can find out more about navigating and using the Gantry Menu Editor in our documentation.

Assignments

Assignments are also managed in the Gantry Administrator. This administrative panel enables you to assign theme outlines to specific menu items, pages, and other areas of your site. By navigating to Admin > Topaz Theme and selecting an outline other than the Base Outline, you will be able to assign that outline by navigating to the Assignments panel. Simply switch any menu items to on (green) that you want to assign that outline to. In the case of the Home page, this would be your default Home page in your default (main) menu.


Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.