Empty Template Document

Transcription

1 Empty Template Document This template consist of 2 sections Header and Body. HEADER In the header section you have the ability to show or hide the Header by selecting an option in the Other Personalization section, which is located at the bottom of the page. Header SHOWN When the header is showing you can select a product image that is within the catalog or add a product image of content that has not been created yet. Examples: Electrical, Flame, Buzzsaw, Softimage, etc. Just click on the pencil icon in the upper right corner to add or change content image. Header HIDDEN

2 Product Name and Navigation Menu 1) Click the text Product Name to enter the product name 2) Navigation Menu a. By default all menu items are shown, but you can hide them by going into the Other Personalization section, located at the bottom of the page, and deselecting the items you want hidden. You cannot hide Features. b. Once you have the menu items you want, you can select each text field and change the name of the menu items. c. You can change the background color of the navigation by clicking the colored box with # next to the word Accent Color. A color picker will display so you can pick a new color. d. You can change the Navigation Text color by clicking the colored box with #ffffff next to the word Accent Color Links. A color picker will display. IMPORTANT! Any changes made in the Other Personalization section needs to have the apply button pressed for changes to take place.

3 BODY The body section has 3 layout options which can be selected from the Other Personalization section. Layout Option 1 Blank Layout Selecting this layout allows you to add either simple or rich text (HTML) to create a unique website body. Click on Empty: Click to Edit text or go to the bottom of the page and use the Blank Layout text editor section (see image below) to create your panel. Layout Option 2 Two Column Layout The Two Column Layout consists of a column that can display a box image of the product and a column that allows you to enter simple or rich text which can be edited the same as the blank layout. 1) Select the pencil icon to add or change the box image or click the x button to delete the image and have a blank area.

4 2) You can either click the Insert your text here box to create your own or go to the bottom of the page and use the Two Column Text text editor section (see image below) to create your panel. Layout Option 3 Accordion Layout The Accordion Layout is similar to the layout used throughout many of the product pages found on Autodesk s website. 1) Below the header is a rich text area for you to enter content before the accordion. You can either click the text Empty: Click to edit or go to the bottom of the page and use the Two Column Text text editor section (see image below) to create your content. 2) By default you are only given 1 Group Feature, which is the area in black and grey and can go up to 7 sections. Below is an example of a finished Accordion with 5 Group

5 Feature sections. a. You can select how many Feature Group sections you need by going into the Other Personalization section and changing the Number of Group Features needed. b. Click on each text Empty: Click to edit in the black sections to add the name of the group features. c. You can change the color of the background and title color by copying the css code snippet below and pasting it into the Custom CSS section (click edit text to add the content). Make adjustments to # to alter the background color and the #ffffff for the title color i. #z_wrapper.z_content_title{background-color:#000000; Color:#ffffff;} 3) By default the content section is blank. Clicking the Add Content button allows you to populate your accordion one piece of content at a time. Fill in the information that clicking the Add Content button pops up. After adding multiple group features and

6 pieces of content your accordion will start to look like this. a. You might notice that the content in the accordion needs more space. If your title is very long it will go behind the other content. You can fix that with the css code below. Go to the Custom CSS section in the Other Personalization section and click edit text to copy the code below. Alter the 110 number to adjust the height. i. #z_wrapper #z_list div{height:110px;} CSS to make changes to color to Feature Group content section 1) Go to the Custom CSS section and click the edit text to copy the code snippet below and make

7 adjustments to the background color. Make sure to copy both and change the # to the color you want. The background-color in both sections should be the same. a. #z_wrapper.z_content_video{background-color: #666666;} b. #z_wrapper #z_product_list{background-color:#666666;} Your finished panel could look similar to one of the images below. Blank Layout Two Column Layout

8 Accordion Layout