ot Modena

Modena Woocommerce

  • By Cro.ma

Thank you for supporting Croma and your purchase of Modena.

The documentation will guide you through the setup of the theme.

1 After downloading the theme from Themeforest, extract the contents of the downloaded zip file to your computer.
2 In your Wordpress admin area, go to Appearance -> Themes -> and click the "add theme" button next to the page title.
3 In the page that opens next, Select "upload" just below the Page title and in the window that will open, browse to the zip file and click the "install now button".
4 After installation Activate the theme.

Installation video
After the theme installation you will be prompted to install some plugins. The plugins are configured to enhance the theme, and is a important part of the success of the theme. You are best advised to install the plugins.

1 Look for the message "this theme requires the folllowing plugins"
2 Click on "begin installing my plugins"
3 On the next page, click the radio button next to the word "plugin" to select all the plugins.
4 Select "install from the "bulk actions" dropdown and click the "apply" button.
5 Wait for the installation messages to appear.

Install plugins video
It's advisable not to import the demo content untill the theme and all the plugins have been installed. To access the demo file, extract the file downloaded from Themeforest and look for the demo.xml file in the extras->demo content folder

Remember to import the demo content for the layerslider before importing the demo content for the site.

1 From admin menu, select "tools", then import.
2 On the import page, click on "wordpress" on the bottom of the table.
3 Popup window will open and click and click on "install now"
4 Click on "plugin" and run importer.
5 Click "browse" to upload the demo.xml file.
6 Click on "upload file" and import.
7 On the next screen under "import attachments" click to download and import all attachments.
8 Now click on "submit".
9 You might wait for a while, but the message "All done, have fun!" will appear.

Import demo content video
Settings after import video

1 In admin section, click on "Layerslider WP" and select "All sliders"
2 Look for the import and export button, click on "import sliders"
3 Click on "browse" and open the "Layerslider.demo.jason" file. (also to be found in the demo folder)
4 Click on "import" to import the file.
5 After importing the file, it will be ready to be used.

Import layerslider content video
After installation you will see a message at the top of the page telling you that your theme has not been set up properly. This page setup detailed below will assist you to setup the pages and get rid of the message.

1 In the admin section click on page, then "create new page" and create the homepage.
2 Just below the publish button, click on "template" and select "front page template" and click "update".
3 Click on "add new" and create a new blog page.
4 You will now have two pages, one is the home page with the front page template, one is the blog page without any template.
5 Select "settings->reading". Select from frontpage displays: "static page" (right at the top of the page) and select your home page as frontpage and your blogpage as Posts page.
6 The messages will then have disappeared and everything is ready.

PAge setup video

1 Click on the croma.dash and the themeoptions subtab
2 Click on the topbar subsection
3 activate or deactivate the topbar
4 Add your social links
5 Set the topbar section (see the section on navigation & menu's)

View theme topbar video

1 The theme options is available as a subtab of the croma.dash in the top lefthandside of the admin section.
2 The theme options will assist you in setting up all the theme defaults that you need.
3 After adjusting a value remember to save the values so that you do not lose them.

View theme options video

1 On the top of the page on the right hand side click on "screen options" and ensure that all menu components are ticked.
2 On the top of the page click on "manage locations" and set your menu locations,

View the navigation setup video

1 Select the croma.dash from the admin menu and select the frontpage sub-tab
2 Click on "click to add page element" to add a new page element
3 From the dropdown box, select the page element to add.
4 All the different page elements will be shown in the section below.

View the parralax composer video

1 Blog Articles: adds the latest news from your blog to the frontpage section
blog articles
1 Text Banner: adds a small text banner in 1 2 or 3 columns.
text banner
1 Portfolio showcase: adds a frontpage listing of your portfolio.
portfolio showcase
1 Twitter component: adds a twitter feed to your frontpage.
Twitter registration video

1 Woo products: adds a Woocommerce products grid to your frontpage.
Woocommerce component
1 Image banner: Adding a 2 or 3 column image banner.
image banner
1 Layerslider Slideshow: Adding Layerslider slideshow
layerslider video
1 Text over image: Adding text message over image
Text message over image
1 Video Background: Adding a video background video
Video background
1 Map component: Adding a map to your frontpage
1 Feedback component: Adding a feedback component to your frontpage
Feedback component
1 Page content component: Adding a page component to your frontpage
Page content

1 Click on the appearances section and select the widget subsection
2 drag your widgets to a sidebar position

Widget setup video

Video widget video

Twitter widget video

Latest news widget video

Twitter registration video

1 go to http://codex.wordpress.org/WordPress_in_Your_Language and locate your language code and read the translating instructions for your language an get your language code.
2 Add your language code to the wp_config.php file.
3 Next you need to add a language folder to your wp-content folder and copy the WordPress official language files for your wordpress installation (see video)
4 Go to your plugins section in the admin and add and activate the codestyling localization plugin.
4 Locate the plugin that you just installed in tools->localization and create a po and mo file for your language.
5 Rescan the po file and afterwards you can edit the file.
6 Now you can translate your strings and afterwards generate the mo file by clicking the button.
7 You also need to translate the cromax helper plugin in the same basis as the theme.

Finding your language code

Edit the wp_config file

Copy the official wordpress language files

Installing the plugins

Translating the cromax plugin
The woocommerce demo's will show you how to setup the items that intersects with the theme. If you need in depth tutorials on Woocommerce you can find excellent tutorials right over the web.

1 Setting the shop Sidebar
  1. Go to the croma.dash and sidebars subtab and add a custom sidebar for the shop (see the sidebar section here)
  2. Add your widets to the custom sidebar in appearances->widgets
  3. Open the pages listing and locate the shop page
  4. set the sidebar for your shop page.

2 Setting the account page menu
  1. Go to appearances-> menu
  2. Create a new menu and name it My Account
  3. Select the MyAccount pages from the pages and drag it to the menu bar
  4. Save your manu and set the My Account menu location.

2 Setting the account page menu
  1. Go to appearances-> menu
  2. Create a new menu and name it My Account
  3. Select the MyAccount pages from the pages and drag it to the menu bar
  4. Save your manu and set the My Account menu location.

Setting the account page

Setting the shop sidebar

Setting thumbnail sizes

1 The first method is to set up the blog pagefrom the innitial page setup. You will use the "blog" page in settings reading to add to the menu.
2 Now the second method. First create a new blog category.
3 Now add the category to all the posts that you want to show.
4 Add the blog cateogry to the menu
5 Remember to fine tune the blog in the settings page

Setting the blog page

1 You can select from 4 dfferent blog types. Normal, video, audio and quote
2 The video below will show in detail how to set up each type.

Blog formats

1 Click on the portfolio tab in the admin section followed by the portfolio types and set up your categories
2 Click to add a new page
3 Add a title, featured image and content. Also add additional content
4 Publish your portfolio item
5 Add a new page and give it a title
6 From the template dropdown select to either have a 2 column, 3 column or 4 column page template.
7 Go to the croma.dash and theme options and select the portfolio tab
8 Set your portfolio paging options

Setting the portfolio

1 Click to add a new page
2 Click to activate the pagebuilder
3 Click to add a new section
4 Click to add a new item
5 Click to edit the item

Pagebuilder components

1 Watch the video for inserting page content into the page builder
Insert page content

2 Watch the video for adding video to a page.
Insert video

3 Watch the video for adding tabs to a page.
Adding Tabs

4 Watch the video for adding a map to a page.
Adding a map

5 Watch the video for adding a header block to a page.
Adding a header block

6 Watch the video for adding a featured box to a page.
Adding a featured box

7 Watch the video for adding forms to a page.
Adding forms

8 Watch the video for adding contact details to a page.
Adding contact details

9 Watch the video for adding directions to a page.
Adding directions

4 Watch the video for adding a map to a page.
Adding a map

4 Watch the video for using the maptool with directions and maps.
using the maptool

10 Watch the video for adding a image banner
Image banner

10 Watch the video for adding a Layerslider component

10 Watch the video for adding a call to action component
Call to action