- Content Designer Installation Guide
- Make a folder named Common on the root of your web application.
- Make a folder named Widgets and copy folder ContentDesigner into it (/Common/Widgets/ContentDesigner).
- Download Images and Styles folders and copy them in /Common as well.
- Structure should look like below after you copy necessary files for the sample:
– (All images in attached Images folder)
- Now browse to your Sitefinity Backend and goto Administration > Settings > Advanced > Toolboxes > Toolboxes > PageControls > Sections > ContentToolboxSection > Tools > (Create New).
- Enter the fields with the values as shown below:
- Save the settings and edit your any existing page or create a new one.
- Drag and drop your widget which we named ‘Tabs designer’ in the configuration on to your page.
- Click Edit to customize the tabs view.
- You will see the designer like this:
- Click ‘Add Tab’ to add a new tab on the control.
- Under ‘Put up some content’, you will see couple of fields to put up your desired content into a newly added tab.
- Select a style for your tabs container in the CSS Style field.
- Simple copy/paste some content or write it in Content field.
- Select an image for the tab to be shown as normal state and for the hover/selected state under Image and Hover Image fields.
- You can add and/or delete as many tabs as you want with inner content and tab images for each.
- Here is the final result with ‘Fun’ style selected: