1. Episerver training guide - Catharina Brodka, GMC

2. 5 easy steps to create a page
Episerver training guide - Catharina Brodka, GMC
5 easy steps to create a page
Createa a page
Create content blocks
Add content blocks
Preview
Adjust

3. Episerver training guide - Catharina Brodka, GMC
Pages

4. Working with pages A number of different pages types are available
Episerver training guide - Catharina Brodka, GMC
Working with pages
A number of different pages types are available
Pages are created and edited from the left hand side Navigation Pane
Can be edited via on-page editing or viar All properties editing
Content is build up by content blocks
Blocks can be either page specific or global and rest in the Block tree

5. Episerver training guide - Catharina Brodka, GMC
Page types
Block Page: Are a generic page type used for all other pages besieds the below
News Page and Event Page: Are special pages used for news articles and events. They work together with special blocks to created lists with news and events
Page Folder: Is used to group page together in a folder when you don’t need a parent page
Additional: Commerce holds one generic page type called Product Page. Additional templates can be created for different product types by OPCOs

6. Creating a page Open the Navigation Pane
Episerver training guide - Catharina Brodka, GMC
Creating a page
Open the Navigation Pane
Find the place in the structure you want the page placed
Click on the Context Menu
Choose New Page
Type in the Name of the page
Choose the relevant Page Type by clicking on it. Typical the Block Page
You now have an empty page you can start adding content to

7. On-page editing vs. All Properties editing
Episerver training guide - Catharina Brodka, GMC
On-page editing vs. All Properties editing
On-page editing view is the default editing mode.
The on-page editing view shows how the page looks in the front end
Edit basic info properties
Edit and add content blocks
The All properties editing view provides editing access to all properties available for content (pages and blocks),
Access the All Properties  sellect  in the toolbar to access these additional properties.
Edit all properties
Property elements depends on the page type and content block
The next slide describe how to edit a page step by step. However the procedure is similar when editing, for instance, blocks or products in Commerce.

8. Episerver training guide - Catharina Brodka, GMC
Blocks

9. Blocks Blocks holds the content and exist in different types
Episerver training guide - Catharina Brodka, GMC
Blocks
Blocks holds the content and exist in different types
Blocks are created directly on the page (Page specific page) or from the right-hand side Assets pane (Global page)
If a block is only to be placed on a specific page keep it local.
If a block is to be used on multiple pages place in the Acssets Pane
A block can be created from both On-page editing view and All properties view
Make sure to keep tthe recommend naming
Once a block type has been chosen and content added you are not able to choose a different block type (you will have to create a new one)

10. Episerver training guide - Catharina Brodka, GMC
Block types
General Blocks: The most used block to be used for text, images, videos, product filters, Dealer Finder, downloads, news, events etc.
Sidebar Blocks: Some can have additional content in the form of other blocks (sidebar blocks).
Data Blocks: Data blocks are used to feed content/data into other blocks
Product Blocks: Used only in the Commerce for products.
Other Block Types: Vertical Grid: Used to show Text and Image Panel in a vertival grid
Action Elements: Contact Form

11. Episerver training guide - Catharina Brodka, GMC
Sidebar blocks
Sidebar blocks are blocks that sits within another block adding additinal data in the right hand side of the block.
Are a sidebar block not added the block content wlll span across the entire page
They can only sit within other blocks and cannot be added directly on a page
The following blocks can use sidebar blocks: Article Text and Event Pages
When you name your blocks make sure you for sitebar blocks add a _sidebar

12. Data Blocks (blocks within blocks)
Episerver training guide - Catharina Brodka, GMC
Data Blocks (blocks within blocks)
Some blocks are dependen on content from other blocks
Data blocks provide data/content to other blocks
They can only sit within other blocks and cannot be added directly on a page
The following blocks uses Data Blocks: Two Column Slider, Slider Panel, Download Panel, Guide Panel, Links Panel, FAQ Panel, Product Finder, Product List, Product Filter, Sales Rep .Filter and Featured News.
Most of the above block can only be seen in the All Properties view untill data blocks are added.
When you name your blocks make sure you for sitebar blocks add a _data

13. Episerver training guide - Catharina Brodka, GMC
Vertical Grid
The Vertical Gid is a special block used for showing Text and Image Panel in a vertical grid instead of side- by-side
The two Text and Image Panels are placed inside the Vertical Grid Block
Below you see an example where the Vertical Grid and side-by-side is placed next to a Promotion Panel
When naming you Vertical Grid block add a _vertical grid
The Text and Image Panel you place inside the Vertical Grid can still be used on other pages as side-by-side or combined in other Vertical Grid blocks

14. Creating a block / Page Specific page
Episerver training guide - Catharina Brodka, GMC
Creating a block / Page Specific page
Select the page to edit from the page tree in the Navigation Pane
Scrol down to the bottom of the page
Click the create a new block link
Give the block a name, e.g. Contact_Customer support_Service Panel_Button
Choose the block type you want to use
Click Create
You are now ready to add content to your block
A page created as a page specific page can always be moved to the Assets Pane as a global block

15. Creating a block /Global page
Episerver training guide - Catharina Brodka, GMC
Creating a block /Global page
Open the Asstes Pane
Find the folder you want the block placed in
Cick on the Context menu of the folder
Click New Block OR click on the + sign below the folders
Give the block a name, e.g. Contact_Customer support_Service Panel_Button
Choose the block type you want to use
Click Create
You are now ready to add content to your block

16. Adding content to your block
Episerver training guide - Catharina Brodka, GMC
Adding content to your block
Select the page to
Find the block you want to edit
Click the Context menu
Click Edit
Add content to the relevant fields
Click Publish
All Properties view
You can choose to add content in All Properties view
Add content in teh Content tab and the Appearance tab

17. Adding images to blocks
Episerver training guide - Catharina Brodka, GMC
Adding images to blocks
1) Drag’n’drop (both views)
2) Inserting (both views)

18. Adding blocks to pages /Global Blocks
Episerver training guide - Catharina Brodka, GMC
Adding blocks to pages /Global Blocks
In the Navigation Pane select the page you want to add the block to
Open the Assets Pane
Find the block you want to add
Drag’n’drop the block to the page

19. Episerver training guide - Catharina Brodka, GMC
Editing a block

20. Editing a content block On-page editing
Episerver training guide - Catharina Brodka, GMC
Editing a content block On-page editing
Select the page to edit from the page tree in the Navigation Pane.
Click the Context menu of the content block you want to edit
Choose Edit
The content of the block will now be shown in On-page view
Edit the relevant elements
Some elements can only be accessed from the All Properties view (see later slides
Once fished click publish
To return to the page click Back

21. Edit a content block All Properties editing
Episerver training guide - Catharina Brodka, GMC
Edit a content block All Properties editing
Select the page to edit from the page tree in the Navigation Pane.
Click the All Properties icon
Click the Context menu of the blocks you want to edit
Choose Edit
The block will now bee shown in On-page view
Click the All properties icon to change view
Make the relevant changes to Content tab and Appearance tab
Editing options in the tabs vary depending on the block type
Once fished click publish
To return to the page click Back

22. Episerver training guide - Catharina Brodka, GMC
Exercise

23. Episerver training guide - Catharina Brodka, GMC
Exercise
Create a page with blocks based on the page you created in yesterday’s exercise
Create a page in the navigation pane. Under EPI training
In the Assest pane create a folder under EPI training to hold your blocks
Create the relevant blocks. Create some as page specific and some as shared in the Assets pane
Add all your blocks to the page
Preview
Adjust
Publish
Test server:
Sample images are placed in the EPI training folder
Style Guide: styleguide.rockwool.com
Lorem Ipsum text:

24. Episerver training guide - Catharina Brodka, GMC
Assets

25. Adding assets to the Assets Pane – drag’n’drop
Episerver training guide - Catharina Brodka, GMC
Adding assets to the Assets Pane – drag’n’drop
To add images and files to the Media library follow the below steps
Open the Assets Pane
Go to the folder you want to add the assets to or create e new folder
Click on the folder
Drag’n’drop the asset from your desktop to the content area

26. Adding assets to the Assets Pane
Episerver training guide - Catharina Brodka, GMC
Adding assets to the Assets Pane
Open the Assets Pane
Go to the folder you want to add the assets to or create e new folder
Click on the folder
Scrol down to th bottom of the pane
Clcik the +sign
Click the +sign in the new window
This will open your desktop
Pick the image(s) you want to uplaoded

27. Localizing the master pages
Episerver training guide - Catharina Brodka, GMC
Localizing the master pages

28. Creating local versions
Episerver training guide - Catharina Brodka, GMC
Creating local versions
The following is in Episerver referred to as translation. This is a bit misleading as you are really not translating but rather opening up a local version of the English master version.
All business with the ROCKWOOL Group has its own House: ROCKWOOL, RFN, RP, GRODAN, RTI, RockDelta and Lapinus Firbres
Within the house, language versions for each OPCO and country exist.
Within each house all languages are based on the master version of the website
To open up your language version of a master page you will need to opening up a local version.
You do this via the Language Gadget
Both pages and blocks needs to be opened up in your local language to be shown on your website
Once your local language has been opned up you can add you own local version of the content.

29. Episerver training guide - Catharina Brodka, GMC
Language gadget
When you are opening your local version of a page it is important that you use the Language Gadget and not the Translation option in top of the page as this will create a blank version of the page/block.
To use the Language Gadget it needs to be added to your gadget:
NO!
Click Settings in the top of Navigation Pane
Click Add Gadgets
Click on the Language gadget to install
It will now be found in the bottom of the Navigation Pane
If a version of the page/block has already been opend it will say Publish otherwise ti will say Create

30. Opening the master pages
Episerver training guide - Catharina Brodka, GMC
Opening the master pages
Go to the page you want to open in your own language
Go to the Language gadet in the bottom of the navigation pane
Next to your language click on create, e.g. German
Next click Duplicate English content
All blocks will now be shaded indicating that these has not been opend
Open the blocks you want to edit byt following the same steps as above (remember til publish each block)
Once the page is done publish it
Note that only the blocks you open up will be shown on your website

31. Exercises Add the translation gadget
Episerver training guide - Catharina Brodka, GMC
Exercises
Add the translation gadget
Click Settings in the Navigation Pane
Click Add Gadgets
Click on the Language gadget to install
Opening master content
Go to the page REDArt Solution under Products
Click the language gadget
Click create next to your langauge
Open the blocks you want to localize
Add you local version
Publish the page
View on website