1) Login to your WordPress dashboard. Go to Pages > Add New. Create a new page titled Home and click Publish.

2) Go to Settings > Reading. Under ‘Front page displays’ select ‘A static page’. For your Front Page select ‘Home’ and for your Posts page do not select anything. Click Save Changes.

3) Go to Appearance > Themes

4) Click Add New.

5) Click Upload Theme.

6) Click Choose File and select the Symbiostock Express zip file from your local drive. Click Install Now. Once installed activate the theme.

7) Now go to Appearance > Theme Recommended Plugins. Install Slider Revolution

8) Go to Plugins. Find Slider Revolution from in your list of plugins. Click Activate for Slider Revolution.

Symbiostock Express theme is now active.

Replicating Symbiostock Express Demo 1 Homepage

1) Download this file:

Express-demo1-simple

This file contains theme option settings for importing the settings used on the Symbiostock Express Demo 1 site.

2) Unzip and open the downloaded text file using a text editor. Select and copy the entire text within the document.

3) Login to your WordPress dashboard. Go to Symbiostock Express > Import/Export.

4) Under Import Options click Import from File. A text field box will appear. Paste the copied text into the text field box. Click Import.

5) Go to your website’s homepage to view the changes. You should now see that a number of theme elements have been imported. There should be a red error box where the Slider Revolution should be – which we will add soon. When you scroll down your homepage, you should the following sections:
– Four icon with text boxes that change color when you hover you mouse over.
– A Featured Images title
– A Browse Categories title with an image carousel

Customizing Elements For Your Website:

1) SITE LOGO
Through your WordPress dashboard go to Symbiostock Express > Main Settings. Under Logo Options > Logo click remove to delete the demo logo. Now upload your unique brand’s logo image. Click Save

If you do not want to use a a logo image, you can leave the logo section blank and the theme will use your site’s name. To edit your site’s name, go to WordPress Dashboard > Settings > General and edit Site Title. Click Save Changes.

2) ICON BOXES
Go to Symbiostock Express > Home Layout.  Scroll down to the section called Home Icon Menu.  Click the box titled Made For Artists. Edit the elements that you wish to edit. Repeat process for the rest of the icon boxes. Click save.

You can add/delete icon boxes, you can choose how many columns in each row and you can select custom colors for the box background and font using the settings available. Remember to click save after making changes.

3) FEATURED IMAGES
Featured images are chosen through your Symbiostock plugin section. You need to have already added Symbiostock media (products that you’ll be selling) before you can set featured images. Once you have done this, go to Symbiostock > Media. In your list of media products, there is a column with a BLUE STAR icon. To set an image as Featured, simply click on the corresponding star. Go through and star at least 6 images.

Now go to your homepage and refresh it to see how the featured images show up under the Featured Images section.

4) BROWSE CATEGORIES
Go to Symbiostock Express > Home Layout. Scroll down to the section called Home Custom Carousel Settings. Click the slide titled Abstract. Edit the elements that you wish to edit. Repeat process for the rest of the icon boxes. Click save.

You can add/delete slides and edit the carousel settings if you wish. Remember to click save after making changes.

Adding Slider Revolution to Your Home Page

1) Download this zipfile:

homepage-demo-1-simple

This file contains a Slider Revolution template for importing a simplified version of the slider shown on Symbiostock Express demo site. View the simplified demo slider here.

2) Go to WordPress dashboard > Slider Revolution.

3) Click Import Slider. Click Choose File and select the ‘homepage-demo-1-simple.zip’ zip file from your local drive. Click Import Slider.

4) Go to Symbiostock Express > Home Slider. Under ‘Choose a Home Image Slider’ make sure Revolution Slider is selected.  Under ‘If Revolution Slider’ select Home Page Demo 1 Simple. Click Save Changes.

5) Go to your website’s homepage and refresh. You should now see the demo slider on your homepage.

Customizing Slider Revolution For Your Website:

Before you begin, you will need to prepare two images to customize your slide. Each image needs to be 2000 pixels wide and 500 pixels high.

1) Through your WordPress dashboard go to Slider Revolution. Click the slider titled Homepage Demo 1 Simple.

2) Scroll over Slides. This is where individuals slides can be edited.

3) Click #1 Slide. You will see the first slide image and content.

4) EDITING BACKGROUND IMAGE
Look for the Slide Options link in the top right menu. Click on Background, then Media Library under the Source header. Click Upload files and upload the image you want to use for your first slide. Click Insert.

Now you should see your selected image where the demo image was previously displayed.

5) EDITING TEXT
Click the SYMBIOSTOCK EXPRESS text to select that layer. Under the Editor to the right, a black box will appear containing the text SYMBIOSTOCK EXPRESS. Delete this text and add your own words. You can click on Style to customize details such as the text color, text size and font. Repeat this process for the second text layer that says ‘A store front theme optimized for digital media.’

Click Save Slide to save your changes.

6) Scroll back to the top and click #2 Slide. Repeat steps 4 & 5 for the second slide. Remember to click Save Slide to save all your changes.

Now go to your home page and refresh it to view your new customized slider!

Add Primary Navigation Links:

http://www.symbiostock.org/docs/adding-primary-navigation-links/

Add Topbar Navigation Links:

http://www.symbiostock.org/docs/adding-topbar-navigation-links/

Add Footer Links:

http://www.symbiostock.org/docs/adding-footer-links/

The post Replicating Demo Homepage Quick Guide appeared first on Symbiostock Knowledgebase & Documentation.

The makers of Slider Revolution provide a ‘purchaser code’ to direct buyers who purchase the slider directly from them and those customers are given access to premium slide templates. If you want to use premium slides templates, you must purchase a license for it. You do not need to purchase a licence to use the Slider Revolution normally.

Video Tutorial

The Slider Revolution is a fantastic visual tool for websites and comes bundled with the Symbiostock Express theme. The Slider Revolution provides a plethora of ways for you to create custom slides, however with so many setting options available, it can be overwhelming.

Thankfully, Darrel Wilson has created this excellent YouTube video tutorial that takes you through all the basics of how to use the Slider Revolution and much much more. Although the length of the video is a little over 1 hour long, it is useful for reference if you want to learn to use Slider Revolution.

The post Slider Revolution Video Tutorial appeared first on Symbiostock Knowledgebase & Documentation.

Before we begin, make sure you have activated the Revolution Slider plugin. To do this, go to the Plugins tab in your admin panel. Locate the Revolution Slider plugin and click ‘Activate‘.

The Revolution Slider provides a plethora of ways for you to create custom slides, however with so many setting options available, it can seen overwhelming. This guide is a good place to begin learning how to customize the Revolution Slider. You will learn how to create the slider that is on the Symbiostock Express demo site. Once you have gone through these steps, you should be able to experiment more readily with the Revolution Slider and create your own personalized slides.

SETTING UP A NEW SLIDER

1. Go to the Revolution Slider tab in your admin panel.

2. Click ‘Create New Slider‘. This will open up a ‘New Slider’ screen.

3. In the ‘Main Slider Settings‘ section change the following:

Slider Title: Homepage Slider

Slider Alias: Homepage Slider

Source Type: Gallery

Slider Layout: Auto Responsive

Unlimited Height: Off

Force Full Width: On

Min Height: 0

Grid Width: 1170

Grid Height: 500

4. In the ‘General Settings’ section (in the right column) change the following settings:

Delay: 4000

5. In the ‘Appearance’ section change the following settings:

Shadow Type: No Shadow

Background Color: #ffffff

6. In the ‘Navigation’ section change the following settings:

Bullet Type: None

7. In the ‘Mobile Visibility’ section change the following settings:

Hide All Layers Under Width: 770

8. Click ‘Create Slider‘.

PREPARING IMAGES FOR SLIDES

Before we proceed to adding slides, you need need to prepare the images that you will use.

The Symbiostock Express demo site uses six images (one for each slide) for its homepage slider. Choose 6 images that you want to use to represent your store. Remember, this will be the first thing most visitors will see when they visit your homepage – so try to choose images that highlight and provide a glimpse into the types of images you offer.

Each of your chosen images must be cropped/resized to 2000px wide by 500px high.

Save your images as JPEGS and try to reduce the file size of each image (the smaller the file size the quicker your page will load). You may also want to add a small non-obtrusive watermark/copyright to each image (eg. a copyright symbol with your name/store name in the corner of each image).

ADDING SLIDES

Now that you’ve have set up a new slider and your images are ready, we need to add slides to your slider.

1. In your Revolution Slider screen you should see the name of the slider you created earlier (ie Homepage Slider). You should also see various ‘Actions‘ that you can select in the same row as the slider. Click the ‘Edit Slides‘ action.

2. In the Edit Slides screen it should say ‘No Slides Found’, as we have not yet added any slides.

Click ‘New Slide‘. You will be prompted to select an image for your slide. Upload one of your prepared images. Click ‘Insert‘. Your first slide has been created.
Repeat this step for each of your remaining images.

3. You should now have 6 slides listed on your screen. Before we proceed to editing each slide, you need to decide on the order that you want your images to appear. Your slides are numbered 1 to 6 – 1 being the first image that will appear to 6 being the last. To rearrange the slides, use the gray button located on the left side of each slide to drag and drop each slide into your desired sequence. You will notice that your slides are automatically re-numbered according to their position. Once you are happy with the order, proceed to the next step.

4. Click ‘Edit Slide‘ for Slide 1.

5. In the ‘General Slide Settings‘ section, follow these settings:

State: Published

Transitions: Fade

Slot Amount: 7

Transition Duration: 300

Save Performance: Off

Enable Link: Disable

6. In the ‘Slider Main Image / Background‘ section, follow these settings:

Background Source: Image BG

Background Fit: Cover

Background Repeat: no-repeat

Background Position: center top

Ken Burns / Pan Zoom Settings: Off

7. In the ‘Slide‘ section, follow these settings:

Helper Grid: 50 x 50

Snap to: None

8. Now to add some dynamic text over your image. In this step you will need to make decisions about:
– the words that will appear over your image
– the styling of the text (font/font size/font color)
– the position of words (where they will appear over your image)If you do not want to add text to your slide you can skip to step 13.
You can preview your slide at anytime by clicking the magnifying icon.

9. Click ‘Add Layer‘. A new layer will appear in the ‘Layers Timing & Sorting‘ section. Select the new layer by clicking on it. When selected the layer will be highlighted in blue.
In the Start column, enter 1500. In the End column, enter 4000.

10. The ‘Layer General Parameters‘ section is where you edit and stylize your text. Delete the default text (Caption Text1) that was created and type the words that you want to use in the rectangle input field. Style the words by selecting a pre-defined font style from the ‘Style‘ dropdown menu, or click ‘Edit Style‘ to create custom styles.

11. The ‘Align, Position & Styling‘ section is used to position the text. The nine square grid can be used to place your text at pre-programmed locations such as center/center top/bottom left etc. Experiment with the ‘Align, Position & Styling’ parameters to position your text. As you make adjustments, you can see how the text will appear on your image preview in the ‘Slide’ box. Alternatively, you can click on the text layer that is shown on the image preview and position the text by dragging it where you want. Just make sure to remain within the blue grid area.

12. The ‘Layer Animation‘ section is where you program the way your text will be animated. There are many settings and options in this section. We are going to choose a very subtle animation that looks calm and professional.
Within the Layer Animation box, follow these settings:

Start Animation: Fade

Start Easing: Linear.easeNone

Start Duration: 600 ms

Split Text per: No Split

Split Duration: 10 ms

End Animation: Choose Automatic

End Easing: No Change

End Duration: 300 ms

Split Text per: No Split

Split Duration: 10 ms

Animation: Disabled

13. Click ‘Update Slide‘ to save your work. Your slide is now complete.

14. Click ‘To Slide List‘ to return to your list of slides. Click ‘Edit Slide’ for the next slide on your list and repeat steps 5-13 for your remaining slides.

15. After editing each of the individual slides your slider is ready to be used. To preview your slider, go back to the Revolution Slider tab in your admin panel. In the Actions column for your new slider, click the magnifying icon. A preview pop-up screen will appear to show you a small scaled preview of your newly created slider.

The post Replicating the Revolution Slider Demo (old version) appeared first on Symbiostock Knowledgebase & Documentation.

1. Login to your WordPress dashboard.
2. Go to Appearance > Menus
3. Click ‘create new menu‘
4. In the ‘Menu Name‘ field enter a name for your new menu. It is best to choose a name correlates to the location of where the menu will be. So as this menu will be in your Topbar section, name it ‘Topbar Menu’.
5. Click ‘Create Menu‘
6. Before we proceed to adding links to your Topbar Menu, we need to assign its location. Click the ‘Manage Locations‘ tab. Under the Theme Location column, you will find ‘Topbar Navigation‘ in the list of locations. Using the dropdown menu next to Topbar Navigation, select ‘Topbar Menu’.
7. Click ‘Save Changes‘
8. Now we will add links to your Topbar Menu. Click the ‘Edit Menus‘ tab.
9. If your Topbar Menu is the only menu you have, it will automatically be selected. If you have other menus, select ‘Topbar Menu’ from the ‘Select a menu to edit’ dropdown. Click ‘Select’ to select the menu.
10. Using the ‘Pages’ and ‘Custom Links’ option boxes on, add the links that you want to have on your Topbar Menu. You can drag and drop items within the ‘Menu Structure’ section to order them according to your preference.
11. Once you have added/configured your links, click ‘Save Menu‘.

The post Adding Topbar Navigation Links appeared first on Symbiostock Knowledgebase & Documentation.

1. Login to your WordPress dashboard.
2. Go to Appearance > Menus
3. Click ‘create new menu‘
4. In the ‘Menu Name‘ field enter a name for your new menu. It is best to choose a name correlates to the location of where the menu will be. So, as this menu will be in your Primary Navigation section, name it ‘Primary Menu’.
5. Click ‘Create Menu‘
6. Before we proceed to adding links to your Primary Menu, we need to assign where you would like your menu to be displayed. Under  ‘Manage Settings‘  there is a list of navigation locations. Select ‘Primary Navigation‘ and ‘Mobile Navigation‘. **Note if Mobile Navigation is not selected your menu will not appear on mobile devices.
7. Click ‘Save Changes‘
8. Now we will add links to your Primary Menu. Make sure you are still in the ‘Edit Menus‘ tab.
9. If your Primary Menu is the only menu you have, it will automatically be selected. If you have other menus, select ‘Primary Menu’ from the ‘Select a menu to edit’ dropdown. Click ‘Select’ to select the menu.
10. Using the ‘Pages’ and ‘Custom Links’ option boxes, add the links that you want to your menu. You can drag and drop items within the ‘Menu Structure’ section to order them according to your preference. You can also add sub-items to your menu. To make the items sub-items drag them slightly to the right under the page you would like. You can make sub-items for sub-items by dragging even further to the right as shown below under the Shop page.
11. Once you have added/configured your links, click ‘Save Menu‘.

The post Adding Primary Navigation Links appeared first on Symbiostock Knowledgebase & Documentation.

2) Under the Footer Layout section, select how many columns you want in footer area of your website. The Symbiostock Express demo-1 site contains 4 columns.  Click Save Changes

3) Now through your WordPress dashboard go to Appearance > Widgets.

4) Depending on how many footer columns you chose, you should find a correlating number of ‘Footer Column’ boxes on your widgets page. If you selected 4 columns in the previous step, you will have a box allocated for each of the four columns (shown as Footer Column 1, Footer Column 2, Footer Column 3, Footer Column 4).

5) Add content to your footer columns adding and customizing ‘Widgets’ from your ‘Available Widgets‘ area to the column that you want the widget to show in.

6) To add navigational links to other pages, you must create separate menus (through Appearance > Menu) for each footer column where you want to show text links. You must do this in the same way you created your Topbar and Primary navigation menus, except do not assign a location through the Manage Locations tab.

7) Once you have created your footer column menus, go back into Appearance > Widgets and use the ‘Custom Menu‘ widget to assign the footer menus that you created to which ever footer column you want each menu to show up in.

The post Adding Footer Links appeared first on Symbiostock Knowledgebase & Documentation.