Weber Websites User Manual 01/04/2010
Table of contents General Overview........................................4 Introduction to Typo3...................................4 How to access................................................5 Front : lay‐out................................................6 Backend: “lay‐out”........................................6 1 ‐ Left main modules panel......................7 2 ‐ Middle pagetree panel.........................8 3 ‐ Right page layout and content pane. .10
Main typo3 icons.........................................13 Main page types..........................................14 Standard pages ............................................15 Advanced pages............................................17 Shortcut pages..............................................17 Sysfolder pages.............................................18 External Url page..........................................18
Page content's elements.............................18 Flex form elements......................................19 “Real” content elements..............................20
File management.........................................29 Filelist............................................................29 Uploading files.........................................29 Folder management................................30 File list default structure..........................30
How to prepare your pages?.....................31 Home page .................................................31 Left part slideshow.......................................31 Main activities pictures.................................32 Mission statement........................................32 News.............................................................32 Editing news ............................................33 News categories ‐ segmentation of the News .......................................................36 Weber guide highlight..................................39
Activity pages..............................................40 Activity home page.......................................40 News........................................................42 My Weber space......................................42 Universes.................................................42 Pictures....................................................42 Links.........................................................43 Weber's corner........................................43 Background pictures menu......................43
Weber guide pages......................................44 Product pages...............................................44 List of products page...............................44
2 / 135
Product Datasheets.................................47 Products plug‐ins.....................................50 Problem solutions/Jobsite solution pages....56 List of problem solution pages................57 Product‐selectors/Selection guides..............61 Selection guide list...................................61 Selection Guide Page...............................62 Case studies pages........................................66 Front end overview..................................66 Weber diaporama (Slideshow function)..67 Preparing the case study page ................69 case studies data‐sheets..........................70
Top menu pages..........................................73 Weber guide.................................................73 Contact us.....................................................74 Documentation and sample orders..............77 Documentation order plug in..................78 Weber sample orders plug‐in..................81 About weber.................................................83 Who we are.............................................83 Company/local pages..............................83 Weber International................................83 Carrier...........................................................83 Work at weber.........................................83 Job offers.................................................83 Job application form................................83 Help...............................................................86 Glossary...................................................86 FAQ..........................................................87
Footer menu pages.....................................88 Site map........................................................88 Legal notice...................................................89 Credits...........................................................89
Services pages / tools..................................90 Colour cards..................................................90 How to create Colour cards.....................92 Weber cards..................................................96 Search contact (with map).......................97 Search contact (with form)......................97 Search contact with zipcode....................98 Weber area map....................................100 Weber area............................................100 Weber activity........................................101 Weber category.....................................101 Weber cards editing...............................101 Find a retailer plug‐in............................101
Weber Websites User Manual Training application form............................102 How to do?............................................102 Video player................................................109
Global management................................111
3 – Translate items (e.g. news, categories, orderable items, ...)...............................126
Newsletters plug‐in...................................127 Page creation..............................................128 Content export............................................129
Translation editor......................................111 Front End users and groups......................112Key factor of success...............................131 Registration.................................................112 Writing for the web: general rules............131 Weber sign up form...............................113 Weber edit profile form.........................115 User groups............................................116 Exporting users...........................................117 Regions.......................................................120 Profiling – access denied pages .................120
Back‐End user management.....................122 Multi‐lingual in typo3................................123 Front end translation menu........................123 Backend language translation management ....................................................................123 1 – Translating a page............................123 2 – Translating blocks of contents.........125
Semantic approach.....................................131 Determine your content........................131 Identify a page.......................................131 Organize your content...........................131 Meta data information...............................132 The HTML tag <title>.............................132 Fill the Meta tag "description"..............132 Fill the Meta tag "keywords" (the keywords associated to the page).........133 Navigation rules..........................................133 Use internal navigation:.........................133 Navigation between pages....................133
Site statistics..............................................134 Google Analytics.........................................134
3 / 135
General Overview Introduction to Typo3 The new Weber websites are based on one of the leading Open source Content Management System (CMS) Typo3 (www.typo3.org).
The purpose of a CMS is to enable webmasters to edit and manage the web site content in the most simple way, while the display and relations between elements are automatically processed by the system. In a few words, the main advantages are: ➔ Features Richness, ➔ Price and license: open Source, ➔ Freedom to extend and adapt, Usability / Ease of use (even if a training and this
documentation are necessary), ➔ Large developer community and large client base.
The purpose of a CMS is to enable webmasters to edit and manage the web site content in the simplest way, while the display and relations between elements are automatically processed by the system. Webmasters can manage the website content inside the back end, after authentication. Only you and your content contributors are allowed to access to the back‐end ‐ the administration part of the website. On the front end, Typo3 cares about the layout and navigation logic, thanks to predefined templates and customized plug‐ins. The following section will describe both front end and back end environments, and emphasize their relationships.
4 / 135
Weber Websites User Manual - How to access
How to access To manage your website content, you have to enter inside the Backend section (also called “back office” sometimes), and this zone is (of course) protected. To access to the backend of your website, you must add /typo3 to your main domain name, for example: www.weber.fr/typo3
Access identification During development phase, at first connection, a general identification is required (it’s done to keep your website development private and prevent search engine indexation). The user account is: Login = gaya Password = devinfo The address of the website during the development phase is: http://weber‐cc‐dev.gaya.fr:8080 (cc is for the country code) After this first identification (again: only used during development of your website), you will access the typo3 backend identification page:
5 / 135
Front : lay-out
The home page is broken down into 3 parts : ●
the header shows a corporate banner and some links to specific content and contact forms
●
the main content (in the center part) is divided in two rows: 1. the links to the different activities, a search box and the access to “my profile” in a first row, and 2. Weber's mission statement, homepage news, and a video on the right (this place is also often used to show the Weber guide direct link).
●
the footer, where we can see the copyright notice and usual links to a site map, legal notices and credits.
Backend: “lay-out”
6 / 135
Weber Websites User Manual - Backend: “lay-out”
2 3
1
1 - Left main modules panel This frame lists all available modules to manage the website and its content. Each module has its own content to display. Since you are the administrator you have access to all modules. But there are other "normal" users ‐ they have access only to the modules you have selected for them! Items are classified into 5 categories. 1. Web : where you can switch between several views for displaying your pages Page mode = to view your page layout and work on contents View mode = to preview your pages from the backend List mode = to work on elements which are not real pages but items (like news, users, profession, flash movies, etc). 2. Weber modules: special modules developed specifically for Weber 3. File, to manage (upload, display, delete ... ) images, files or multimedia content used on the site. This is your access to your website Library. See more on “file management” chapter. 4. Manage users this module is only available for country administrator users, this is the place to create and modify backend webmasters accounts 5. Help, that contains comprehensive – although rather outdated – guidelines for all tools functionalities.
7 / 135
2 - Middle pagetree panel This is the page tree. You can think about the page tree as a directory structure where web pages are organized in a hierarchy with main pages, sub pages and sub‐sub pages etc. The trees can be expanded by clicking the plus/minus icons , This works exactly like folders on your own computer. Tree structure: Your page tree structure is consistent with the real URL of your web pages, it means that the page located into “tile Fixing” called “Weber products” will be reachable at the URL http://www.sever.domain/tile‐fixing/weber‐ products.php (url rewriting to be friendly and accessible) Page identifier attribute On mouse over on a page icon , you can get the typo3 page identifier (Id) – You need to know how to get this page Id for selection guide construction. All your web pages are also available with the url http://www.server.domain/index.php?id=XX Pages main menu By clicking on the pages icon you can access to the main page menu – The page main menu are usefull to copy and paste pages in your tree of pages, or access direct page action like edit, show, hide …
The Standard tree of pages hierarchy In the structure, some pages, ergonomics principles, and rules are mandatory and must be followed for countries to be true to the original website design concepts and keep consistency among all countries websites – the concerned following points are written in green. The screenshots below show how a product list, here the preparation products of the Tile Fixing activity, are displayed on the web site.
8 / 135
Weber Websites User Manual - Backend: “lay-out”
9 / 135
3 - Right page layout and content pane The content of this pane depends on the type of module your are using: On page mode : The display corresponds to the webpage layout with the different elements of contents
This mode is used to work on page content. You will find also two tabs on the top: non used elements and advanced fuctions The non used elements tab: shows all the elements that had been unlinked (no more wanted) from the current page– in page mode the deletion of an element from the trash bin icon moves it into this section – To recover a unlinked block, just click the first icon with the arrow and paste the block wherever you want into the page – In order to avoid too big pages, you can put unwanted elements into the trash with the link “Delete all records …” or use List mode from where the deletion are real.
10 / 135
Weber Websites User Manual - Backend: “lay-out”
The advanced function tab:
has 3 options: – the first one to show hidden elements into the page layout, – the second option is not used – the last one to clear the page server cache (page memory) for this page. Use this solution when you don’t see on front end the changes you made in back end. For elements which are not really pages, like news, if your changes are not visible on front end page, you must clear the cache of the page that calls the elements (ex: home page for home page news) On view mode = this pane shows the front render of your current web page into the backend. On list mode : The display corresponds to the list of page elements or to the list of subpages if any. This mode is used to work on many pages at once (like reordering), or used to work on items like news which are not real pages.
11 / 135
Where is the page? (Binding things together.). A Typo3 front end website precisely reflects the tree structure and its content, built in the backend. As for the site structure, the editable content blocks are visually organized in the backend and displayed at their respective places on the web site. For example, see the 3 bottom elements of the home page below.
12 / 135
Weber Websites User Manual - Main typo3 icons
Main typo3 icons Here is the list of the icons used by the typo3. These icons can appear in the back‐end either in list‐mode or in page mode. ‐
1/
open a new web window to preview your page
‐
2/
to edit page or element properties
‐
3/
to create a new block of contents
‐
4/
to hide, unhide a page
‐
5/
to move a page
‐
6/
to clear page cache
‐
7/
to reload / refresh the page
‐
8/
to get page information
‐ ‐ ‐ ‐ ‐ ‐ ‐
9/ 10 / 11/ 12 / 13 / 14 / 15 /
to unlink, delete an element to copy an element to cut an element to create a reference of an element * to move page up (in the list) to move page down (in the list) to paste an element
Using a referenced block to share the same element on several pages
Imagine you create a block of content with your main headquarters addresses. Of course you want this paragraph to appear in many pages, you enter it once, and then you use the little ‘create a reference’ icon – By clicking this icon, you will see the paste icon every where it’s possible to paste into your page, select the page you want, then paste the block at the right place
As you can see, the new block background header is in yellow; it means it’s a reference to another block – you can redo the same operation for other pages. Now if the phone numbers of the headquarters change, you only have to enter it once in one of the linked blocs (or the original one): the changes will be done in every pages. If you do not want a block to be a reference of another one anymore, just click the 4th icon of the previous image to make the block standalone! It creates a local copy of your linked element. 13 / 135
Main page types The main content element in Typo3 is a page with a type, which is composed of one or several blocks of content.
Typo3 standard page types •
Standard = used for common standards pages
•
Advanced pages = used for common standards pages with more advanced properties than the standard one
•
Shortcuts = to redirect to another internal page
•
SysFolder = to organize your backend tree of pages, this type of page looks like a folder in windows
•
External URL = to redirect to another website page on click
In addition to the standard ones given by typo3, three specific types of pages have been created for the Weber websites:
Weber specific page types •
Products = used for displaying the product data sheet
•
Systems = mainly used for Etics systems, where the solution is a collection of products
•
Problem solution = corresponding the the “problem‐solution/jobsite” pages of the Guide
•
Case studies = used to show references of your company
The page properties define the characteristics and behaviour of the pages. All these pages have common and specific properties that will be looked over in the following sections.
How to create a new page: There are two ways to create a new page: either you build a new page from the scratch or you copy and past an already existing page. Add / Edit a page
To add a new page, click on the icon next to the page located near the insertion point. You can then choose from a list, whether you want to insert the new page inside the current item ( so it becomes a subpage ) or after it on the same hierarchical level. To edit an existing page select the Edit item. When creating a page, its original status is hidden, for security reasons. To display it on the web site, you must unhide it (contextual menu / Unhide).
14 / 135
Weber Websites User Manual - Main page types
Copy / Cut and Paste a page
Pages can be copied/cut and pasted through the hierarchical tree view. Setting the page type
After creating the new page you can set the type of the page here:
Now here is the explanations for the main page types:
Standard pages The standard pages are empty basic pages with no extra functions. (Most of standard pages properties are shared among page types.) With this type of page you can build up new pages with texts, pictures, tables, links etc. After setting the type of the new page for standard, this is the back‐end lay‐out of the page:
15 / 135
‐ Hide page: means that the page cannot be seen on the front end. This is checked at the beginning of the editing process for draft reasons, and must be explicitly unchecked once the content is ready for publication. ‐ Type: the type of the page can be chosen from this combo box. Every change requires a confirmation, as it affects all properties of the sheet. ‐ No search: prevents internal search engines to index the page. ‐ Page title: title of the page. Must be filled out carefully! SEO : ‐ Keywords : meta tag = enter coma separated keywords related to this page here or with different spelling of the main words ‐ description : meta tag = enter short description of your page ‐ Standfirst text: this is meant for a short introductory text. ‐ Hide in menu: prevents this page from being displayed in menu structures (tabs, combo boxes ...). ‐ Tip a friend: adds a clickable 'tip a friend' option on the page, in order to send the current page address to an email along with a comment. It is a good idea to keep this option checked. Background image One or several background images can be used on some layouts. These images are for the top right main menu Anywhere possible, preferably use the folder icon than the Browse button to upload your files, as it is the only way to decide precisely where to put them. Access denied / General access options Access to the page can be restricted to one or several users' profiles. Select some authorized user groups if you wish to hide it from others.(see the Access Rights chapter for more details). Choose a visibility starting and ending date here if appropriate.
16 / 135
Weber Websites User Manual - Main page types
Advanced pages Advanced pages are slightly the same as standard pages, except for some new or displaced fields.
Abstract : short introductory text displayed when pages of the same type are listed on a higher page of the hierarchy. The other fields have already been described in the standard page properties.
Shortcut pages You can redirect this page to another internal page in the website. Therefore there are no real contents in this pages. ‐ Page title : title of the shortcuts page
‐ Shortcut to page: here is the place where you must select your target page for this shortcut. By clicking the little folder a new window will list your tree of pages: you have to select the page you want ‐ Shortcuts mode: First subpages The “first subpage“ value defines that the shortcut will load automatically the first subpage located under the shortcut itself. Examples: ‐ When you have a main help menu with 2 subpages (glossary and FAQ) – Without selecting directly a target page, this mode enable to load, independently to the future hierarchy, the first sub page (in this example: “glossary”). This mode must be set for products sub activities shortcuts pages. As these sub activities are listed in the breadcrumb, they must redirect to their first subpage. Random subpage: Imagine a ”case studies portfolio” menu with 10 case studies datasheets, you can use this mode to redirect randomly from the shortcuts to one of your 10 case studies datasheets (not to always have the same first default one)
17 / 135
Sysfolder pages This type of page is mostly used to organize pages and items in your tree of pages. To create a new one, you only have to enter a title for the page. Here, the “News home folder” is a “sysfolder” page.
External Url page Use this type to redirect to another existing webpage (outside your Weber website).
Page content's elements After having a look to at the pages themselves, let’s talk about content’s you can put into. There are 2 big different types of content’s: •
The ones used to split, organize your page called the flexible contents (flex form elements)
◦
The “real” blocks of content like text, movies and specific plug‐ins for dedicated action (subscribe, login …)
Blocks are added, edited and removed either from the page view mode (more visual and easy) or using the list view mode. To add an element, click on the icon where you want the new block to appear. Here you access the full list of available elements you can use. 18 / 135
Weber Websites User Manual - Page content's elements
Flex form elements With help of the flex forms you can build and organise the layout of your page. Double cell Jobsite tab This flex form is used for problem solution pages; it splits the page in 2 parts, the left area is dedicated to “problem” contents and the right one for “solution” contents Quadruple cell This flex form is used to split the page in 4 equivalent columns Triple cell activities This flex form is used to split the activity pages in 3 columns for universes with the main navigation on the right (symbolized in yellow) Simple cell module this is a technical flex form; you are not going to use it Double cell (large) This flex form divide the page in 2 columns, one large for full main contents and the other one on the right to put picture or contact information – This flex form is used in pages out of an activity, it means pages without main universes menu on the right Double cell nav The same usage than the previous one but for activity pages with universes main menu on the right (symbolized in yellow) Double cell (50) Split the page in 2 equivalent columns, this flex form is often used into the large column of a double cell (large or nav) flex form – Use the flex form items to organize the content’s layout of your page. Note that you can combine flex forms together. For example, the Sitemap page is composed of 2 flexforms of quadruple columns each:
19 / 135
“Real” content elements A - Typical page content
Regular text element
Even if you choose one of these 4 types of content, you can at any time transform types after creation ‐ It means if you add a block of “regular text element” and tomorrow you want to add an image, we will just have to change the type to Text with image – Note that in the main list, only ‘text with image below’ and ‘to the right’ are available but you can customize the position of the image at any time in the settings of the block, don’t really care about your first choice of this list..
20 / 135
Weber Websites User Manual - Page content's elements
21 / 135
SEO: these old html table are not the best to present your contents for search engines, if the display of your table is not so complicated it’s better to use the real Table element (described next in tables chapter)
Writing hyperlinks ‐ First select some text, button to create a and then click on the hyperlink from this text. Links can target: • an internal page of the website, • a file, • an external URL, • an email address, SEO : try to use clear and detailed textual links. For example, to make a link to a pdf file prefer writing a full link on “Download weber.pral technical documentation than writing “ to download weber.pral technical datasheet, click here”. Try also to enter a title for your link (visible on mouse over). Don’t forget to open “file links” in a new window in order to keep the current webpage after opening the link. This is done by adding the term (_blank) The icon can be used to insert special characters, missing from your keyboard. The binoculars icon is an advanced “search and replace” functionality. The other icon is a formatting removal function. After pasting text from Word or another web page, you must clean it with this Remove formatting functionality, and format the text again according to your wishes, unless it may produce unpredictable results.
22 / 135
Weber Websites User Manual - Page content's elements
Text with image below & Text with image to the right
This block contains the same elements as the previous one, plus some fields dedicated to the image(s) associated with the text. You first have to choose one or several image(s) from your filelist Preferably use the folder icon to select them, otherwise you will not have any control on their location in the Filelist (in other words, do not use the “Browse” button unless you know exactly what you're doing). Then set an alignment for the image(s). If more than one image are inserted, all will be aligned in the same way. Select the desired position of the image you want regarding your text. (On the right, left, bellow, under ...) If you want to decrease the picture size, you can add a width inside the dedicated field, typo3 will then resize the picture. Note: It’s much better to use web optimized pictures (final sized and well compressed, prepared in a graphic software like Photoshop) than to change the size later in typo3: the result will be better and lighter. If you want to show a big picture, you can use the click‐enlarge option: you will get a zoom effect by clicking on your picture. To get this, you need: • to upload a picture sized to the final zoom size • to change the size by entering a lower value in the “width” field • check the box “Click‐enlarge” SEO : To finish, take care of the “Alternative Text” and “title Text “ fields which must describe your pictures, it helps web search engines such as Google to properly index images.
23 / 135
Images only
This content block is used when only images have to be inserted into the page. Fields are the same as the image‐specific fields of the previous block. Tables
For consistency and search engines reasons it’s better to use these real tables than the ones from the RTE “table button” (even if they are more easy and can benefit of the rich text editors editing option like bold, links …). You can either build the table manually by directly entering its content into the Text field, or use the provided Table Wizard.
In the manual approach, you have to enter one line per desired row. The first line is the title row. Columns have to be separated by the pipe sign “|”. Be careful to enter the same amount of columns on every line in order not to get unexpected results. Using the table wizard, you can graphically add and delete rows and columns, move them into the table and fill their content.
24 / 135
Weber Websites User Manual - Page content's elements
B Special elements
Filelinks
This content element makes it easy to display an unordered list of files, in order to show or download them. Select chosen files into the Files list. You can also decide to show the size of files, if relevant. SEO : If you wish to replace the file names with another text, enter it into the Description field (one line per file ) with understandable and pertinent text. The result of this file links in the front end would be :
Multimedia
Use this element to embed multimedia content within a page. For streamed movies (like application movies in recommended flv format) it is preferred to use the flash plug‐ in instead. See Flash movie player for more details. SEO : think about the alternative content text to the animation
25 / 135
Menu/Sitemap
Creates menu of subpages from a page starting point down the hierarchy. There are different types of menu/sitemap menu with different styles, here are the most used ¾ Sitemap menu type is used to build your sitemap web pages. ¾ Menu colour cards is used to list available colour cards pages (2 columns, title, abstract, images if any) ¾ Menu select (build a classical select drop down menu) ¾ Menu tab to add subpages navigation into your pages ¾ Menu tab Weber guide is used in your Weber guide pages to switch from an activity to another. ¾ Menu Weber guide is used to list your Weber guide web pages with standard Weber charter. An example of Menu/Sitemap menu:
26 / 135
Weber Websites User Manual - Page content's elements Plain HTML
Gives the possibility to insert blocks of pure HTML into the page. This special element has to be used with caution, as good HTML skills are required not to mess up the page layout. plug-ins
The plugin elements are dedicated to special behaviours. For example, there is a dedicated one created to manage the associated weber products, another one dedicated to build a diaporama, and so on. Here the list of actual plug‐ins, have a look at each documentation chapter to find more information about their usage.
27 / 135
Editing the same property for several items at once It is possible to edit the same property for several items at once, in order to avoid repetitive tasks (e.g. “packaging background colour” for product titles). Proceed as follows: 1. Select the top hierarchy level of the group of items you want to edit, for instance a product subcategory. 2. Switch to list view. 3. Click on the header of the table that appears in the right frame. 4. Select a column to edit in the list that appeared under the table, and click the “Set Fields” button on its right side.
5. A new column listing the item you just selected for all records is now visible on the right of the main table. Click on the pencil next to the new column header.
28 / 135
Weber Websites User Manual - File management
File management If you just need to upload or select a file for a block of content, you can do this operation directly from the paragraph content itself, but If you need to work on your folders (delete, add, move …) or organize several files, switch to the filelist view
Filelist The filelist is a list of folders to organize and stock your media: images, pdf, video … You must take care of the hierarchy and names of your folders to be able to find your files and make changes.
Selecting a directory in the middle pane brings up the list of all files contained in it in the right pane. By default files are displayed as a flat list : on each line the name of the file along with its type, date of creation, size, Read/write access status and number of references, if any. Thumbnails of images can be shown, check the Display Thumbnails checkbox to launch this functionality.
Uploading files You can easily upload files by clicking on the appropriate button:
29 / 135
Folder management Click on the folder icon to access the typo3 folder menu, here are the possible entries: Rename: to rename the current folder Upload files: to upload files into the folder This menu will open a new upload files screen – you can choose to upload 1 to 10 files at the same time – don’t forget ¾ to click the radio button ‘Overwrite existing files” if it’s a file update ¾ That the upload is limited to 8 Mo per upload (for many heavy file transfer ask for FTP direct uploads) New:to create a new folder Copy, Cut and Delete: as usual
File list default structure The default structure of your filelist contains: Colour_cards: the folder to organize your colour cards elements, one folder per colour card. Corporate image: the folder to stock your generic home picts home: • diaporama for your homepage left pictures • navigation for the activity roll over pictures home activities, one folder per activity • navigation to put your background pictures for top right menu • univers : for your universe’s round pictures jobsite_houses = for your problem solution houses pictures map = the map of your countries news= folder for the news pictures Orders_items= for your orderable items (paper guides…) video = flv files weber_card= for the logo, pictures associated to Weber cards weber guide = field with your recovered files and pictures with one folder per activity plus : • one folder for products • one folder for jobsite solutions/problem solutions • one folder for case studies • one folder for selection guides be careful: folders and files names are supposed to be standards, it means without specific languages accents, white spaces, punctuation and special characters – Typo3 will rename your wrong characters as better as possible but try to respect these rules SEO : Try do give valuable textual names to your files, for example the pdf file of the product weber.pral could be “weber‐pral‐technical‐datasheet.pdf” 30 / 135
Weber Websites User Manual - .How to prepare your pages?
. How to prepare your pages? Home page Left part slideshow The pictures used in the slide‐show on home page are simple «.jpg» pictures uploaded and associated with the home page. If you want to edit the slideshow, just select the home page in the Back‐End, click on «edit page»:
Then select the «Advanced» tab:
You now get the target field : the images are configured in the field called «Background managment»:
31 / 135
Main activities pictures This part is automatic : the pictures are taken from the activities home pages.
Mission statement This part is a classical text block, and a specific style‐sheet is automatically used (in particular for the big brackets). Nothing special to do here : translate or adapt the text in place for your context.
This is where is the block in the Back‐End:
News News are displayed at both main home page and activity home pages. A specific News Plug‐in is used to display them as lists.
Actual news items are stored in a child folder, here News home folder. To display them, switch to the List mode. 32 / 135
Weber Websites User Manual - Home page
Editing news Pop-over news This is the most basic type of news. When the title is clicked, the news content is displayed in a pop‐over window, i.e within a little frame in the page itself. The news is very concise and accessible this way.
The drawback is that this type of news offers very restricted layout possibilities, and only one image can be inserted. Full page news In some cases, the “classical” news is not enough to show a lot of information. You can then choose to link the news to a full page in order to show more. 1. Create a normal page with the desired content (some content like the news extract will be duplicated with the news) 2. Create your news (list mode), choose the type of news called “Link internal page”, and indicate the page created in 1/ that you want to be seen. The Italian website used a lot this type of news: go to http://www.netweber.it/ and click on some news to see what happens.
33 / 135
The news plug in This plug‐in is made to manage news articles on your website pages. First it will list news on web pages and then redirect to each detail page by clicking titles. It is linked to specifics front end renders templates, one for the home and one for the activity pages. These types of news are: standard news, that are displayed in a pop over window, and full page news which are accurate for more comprehensive news that require a more complex layout. Location By default it is used on: ●
The website home page,
●
every activity pages,
●
detailed news pages.
Configuration The configuration is available on element edition and split into 4 navigation tabs. The general Settings tab
A A
BB
CC A – “What to display”: This is the definition of the plug‐in corresponding to the context, several values are possible:
34 / 135
●
LIST_HOME for the home page
●
LIST_HOME_ACTIVITY for the activity pages
Weber Websites User Manual - Home page ●
SINGLE HEADER, SINGLE, LATEST, SINGLE DOC to compose full detail news pages (top header, body pages contents, right sub news navigation, listing of attached news files).
B – “Order by" this field (LIST & LATEST): This field is used to specify the ordering news value, by default we decided to automatically order news by descending creation date to list newest element first. C – Starting Point: This field defines the directory from which the plug‐in will read and retrieve the news. By default: ●
on the home page the news sources directory is set on the home page “news home folder” sub directory
●
on the activity page it is set to the corresponding “news list” sub directory.
Note that you can add other news directories form your website, for example on the home page you can also add activities news subdirectories, in order to increase the number of home page news without duplicating items. The Template tab
A
A – Max width for images in news records. By default a maximum image width of 100 pixels is specified. The image you associate with a specific news will be resized to this value if it exceeds it. You can change this value in order to display larger images in the news block. This value applies to every news. When increasing this value, you will have to control the width of images before uploading them, as they will no longer be resized to an acceptable width if you want to display some text beside the image. This can lead to major visual inconsistencies.
35 / 135
The Other Settings tab
A
B
A – PageId for single news display: This field is used to specify the page to redirect to when you click on the news title to load the full news detail page. It is just used for activities news (on home page there is no special detail news page, detail is shown on a layer), and point on the standard news page that had been added and configured for you into each sub news directory sub folder. B – Limit: maximum items for LIST and LATEST This field is meant to indicate the maximum number of news the plug‐in will retrieve on the front end website page – we recommend to list between 2 and 6 news by page.
News categories - segmentation of the News Typo 3 gives the possibility to link each news item to a special category. With this you can define on each page (editing the news plug‐in) which category shall be displayed on the page. (For example: on the homepage you want to display just the news linked to the category “corporate” and “events”, in the activity pages you want to display news linked to the category “products”.) The categories can be defined by you. This is just a possibility, what gives you more freedom to segment your news. How to do? Go to the News home folder, switch to list view and create a new news item:
36 / 135
Weber Websites User Manual - Home page
After, edit the news item (General tab) then click on the Relations tab. Here you can select a category, if the category does not exist, you can click on the small icon on the right to create a new category.
You can define the name of the category (title), and you can link it to a parent category if needed.
Save and close.
37 / 135
Now you have to go back to the page where the news are listed (it can be the home page or the activity pages). Switch to page mode, and open to edit the news‐plug‐in.
Click on the PLUG‐IN main tab, then to the GENERAL SETTING tab. Here you can select the category or categories you want to have displayed.
IMPORTANT! You have to decide for using categories or not! If you decide to use them, you need to link all your already existing news to a category, otherwise they will be not displayed!
38 / 135
Weber Websites User Manual - Home page
Weber guide highlight
When launching a new site, there is already configured on the lower right corner of the home page a picture of the guide linked to the products pages of the first activity (same as the first link in header called “Weber guide”) and some description text. This block is a classical “Text / image”. Note: if you don't have a Guide, you can use this corner for some ads or any other important messages.
39 / 135
Activity pages Activity home page All activity home pages are built on the same template. They always include 3 Universes blocks that offer each one a thematic approach.
The wording of the 3 universes depends on your country but their meaning is always the same : ●
Specify – Making my projects successful, which is mainly aimed at professional and private specifiers, provides the user with support and essential technical documentation and certifications,
●
Choose – The right solution for my website, to help customers choose the solution that fits their needs from Weber's product range through Problem Solutions and Selection guides approach.
●
Apply – How to apply, with links to training courses, Problem Solutions datasheets, videos of application and any type of guidelines available (e.g. preparation of support)
In the back end, universes are organized as subpages of each activity. For example External Wall Insulation in the screenshot on the left.
40 / 135
Weber Websites User Manual - Activity pages
Backend structure The main entries of the website are the activities, it means that the main contents are directly stored under activities nodes of pages. Some pages can be shared between activities, but in means that the pages are out of an activity. These pages are usually organized under a folder called “services”. If you want to make a link from a universe under an activity to a page located in “services” folder it will be a shortcut to the target page. One node of pages per activity with : ¾ The activity home page itself ¾ One node of Weber offer pages with ‐ The products list page o The hierarchy of sub‐activity pages as shortcuts o The products datasheets under hierarchy o ‐ The problem solution list page o The hierarchy of sub‐activity pages as shortcuts o The problem solutions datasheets under hierarchy ‐ The selection guides list page o The hierarchy of sub‐activity pages as shortcuts o The selection guides datasheets under hierarchy ‐ The support preparation list page o The support preparation pages The “products”, “problem solutions” and “selection guides” are different ways of presenting the Weber products offer. This approach is tightly related to the weber guide
41 / 135
News On each activity home page, the upper left part is used to display the activity news. The way it works is the same as for the news showed in the home page: see home news section for details.
My Weber space Users are invited to register or to log in. See more in chapter II. Global management, under ProfilingFront End users and groups.
Universes Introduction text It is a good practice to put here a text that includes some keywords: the search engines will use it to bring your customers into the right universe.
Pictures The pictures are classical picture blocks that you can edit in backend:
42 / 135
Weber Websites User Manual - Activity pages
Links The links under each universe are automatically present: each page under the universe root is referenced here: The right part is using the same mechanism: the links are the same.
Weber's corner This is the lower right part of the page. The background is yellow. You can put here special promotions, new products, teasing for specific services (customer hotline, training school,...)
Background pictures menu The pictures showed inside the activity home page are managed by a “diaporama” plug‐in. The proper size for images is 364x225 pixels.
To manage these pictures, edit the page in the backend :
Select the “Advanced” tab and manage the pictures:
43 / 135
Weber guide pages
The Weber guide is the box on the right side. This contains the main information of the webpage, the BASE of all pages: the product datas‐sheets, the problem‐solution pages, product‐selectors, etc. These elements can appear as titles under the universes, but in that case they will be shortcuts to the pages placed in the Weber guide box.
Product pages List of products page The first product page is usually a list of all available product pages inside all activities, with the current activity selected (the tab is in yellow). This list page is a normal page containing 2 components of type «Menu/Sitemap». The first is used to build the tab menu («menu tab weber guide», in red), the second lists the product pages inside your current activity («menu weber guide», in blue).
44 / 135
Weber Websites User Manual - Weber guide pages
45 / 135
In order to show all products of all activities in a tab, all activities must be selected as starting points in the properties of the plugin “Menu/site map‐menu weber guide”.
Because this component will be repeated in all starting/list product pages, a good practice is to create this component in the first activity, and to copy as reference it in other activities: 1. Create reference:
Paste it: 2. Result:
Note : The references components are coloured in red. If a new activity is created later, you will have to modify the first component, and only this one (references will be automatically updated). More details in the referenced blocks detailed page.
46 / 135
Weber Websites User Manual - Weber guide pages
Product Datasheets Front end overview
Like all specific Weber pages, product pages are based on a predefined template. This means that some elements are generated automatically ( blue frames ) while you only have to focus on the relevant content of the data sheet ( red frames ). Automatically generated : ●
a breadcrumb navigation trail in the upper left corner, to give users a way to keep track of their location within the site,
●
the activities menu block shows a list of available activities, with the current one highlighted. It also includes a search bar and the connection dialog to a user's profile,
●
a right block containing some shortcuts contextual to products for this activity, and quick access to items of the three universes linked to the current activity.
The actual datasheet consists of the product name, the standfirst text, it's description along with a “More Information” section, made up of one or several plug‐ins.
47 / 135
Back end Page view
Notice how the display is similar to the data sheet in the Front End. A two‐column layout was defined to hold the main content. Several image and text blocks were created in the left column to describe the product. The right column contains text/image blocks and, in addition, features all plug‐ins mentioned previously.
48 / 135
Weber Websites User Manual - Weber guide pages
Specific properties Specific properties of the product page can be accessed from the Weber product tab. A previous name can be set for the product, if any, while checking the box and entering the name in the text field. Upload a packaging picture if available. Choose packaging background and text colours, in order to illustrate the product name in the front end. Tip : To find the right html colour code to use (for example from a Pantone code), you can use photoshop colour picker, or an online tool like www.goffgrafix.com/pantone‐ rgb‐100.php. You can also bind different PDF documents to the product page:
Finally, you can retrieve one or several associated product from the available product list.
49 / 135
Products plug-ins Associated products weber_product_link_pi1 Description
This plug‐in is made to list associated products to a product. This choice of associated products is available on back office product edition page:
For each association, the plug‐in gets the products name (clickable and designed as packaging colour), the description and the packaging picture. Note that each country can choose whether or not to use the packaging picture.
Location
By default the plug‐in is added on each product datasheets, on the right column: Configuration
The only parameter is the choice to show or not packaging pictures for associated products – the parameter is global for your website filled by ourself.
50 / 135
Weber Websites User Manual - Weber guide pages
Products or systems of the same family weber_product_list_pi1 Description
This plug‐in is made to list in a menu the other products available for the same current activity structure position. It shows a drop‐down menu. Location
By default the plug‐in is added on each products datasheets, on the right column. Configuration
This plug‐in uses one parameter to set the desired activity structure position to use. Possible values are: ● ● ● ●
sibling pages = pages at the same level of activity point pages n‐1 = pages at the +1 level of activity point pages n‐2 = pages at the +2 level of activity point child pages = sub pages.
Weber product documentation This plug‐in lists all the associated pdf files to a product. By default the plug‐in is added on each products datasheets, on the right column. (For “old” Typo3 countries: please add this plug‐in!)
This plug‐in doesn't need any configuration. All configuration is done inside the product page configuration. 51 / 135
Note: if you want to build a page, where all product pages are listed you can use a special plug‐in, called Weber product documentation list: This plug‐in lists certain categories of pdf documents associated to an universe. The configuration is easy : just check the type of product you want to get and a starting point:
Associated problem solutions
Illustration 1: plug‐in "List of pages problem‐solutions" (front) 52 / 135
Weber Websites User Manual - Weber guide pages
Illustration 2: plug‐in "List of pages problem‐solutions" (back) Description
This plug‐in lists jobsite datasheets associated to a product and builds links to load corresponding pages. The association is made in the jobsite datasheets where you can specify main and secondary Weber products used as solution. Location
The plug‐in is used on each product page, at the bottom of the right column. List of case studies Description
This plug‐in is aimed at listing case studies associated with a product, i.e the product has been used for the case studies. It retrieves case studies titles with links to the case studies datasheets. Location
It is used on product datasheets on the right column, usually at, or close to the bottom.
53 / 135
Configuration
No special plug‐in configuration.
54 / 135
Weber Websites User Manual - Weber guide pages
System pages The system pages are a special type of page that collects different products. A typical use is for ETICS pages. On back‐end, you will have to: 1. select “weber system” as the type of page:
2. Associate the products:
3. Include an Associated products” plug‐in in your page:
55 / 135
Problem solutions/Jobsite solution pages The problem page is the second specific page type built to display the problem‐solution approach from Weber It contains three main parts: One tab to explain the problem
The second tab to display the solution
On the right you will find the a list of products associated to the solution.
56 / 135
Weber Websites User Manual - Weber guide pages
Usually there is an introductive page to list the available problem‐solutions.
List of problem solution pages These pages are done using two plug‐ins of type “Menu/Sitemap”. The first menu type is “menu tab weber guide” (to get the tabs), and the second is “menu Weber guide”.
Illustration 3: Backend vision House pictures
These pages represent, for each activity, a typical jobsite in which Weber products can be employed. The numberings on the illustration are hotspots symbolizing problems, that are linked to the corresponding Problem Solutions datasheets. Note: the maximum weight size for house pictures is 350 pixels.
57 / 135
Notice that the Jobsite solution house picture page is built only with one plug‐in:
As for product pages, the breadcrumb navigation trail, the activities link and the universes block are generated automatically by the template. The type of this plug‐in is “Weber Category Map”. You have to select a jobsite category from the list of items shown in the Plug‐in Options section. Jobsite categories are defined in the Categories folder of the page tree. For more details, see the section Global Management > Categories management
58 / 135
Weber Websites User Manual - Weber guide pages
Weber category map plug-in Description
This plug‐in is used to present jobsite datasheets attached to points on a dedicated house picture. Category pictures are managed through the Categories > Jobsite solution back office folder, first you will create a primary pictures category with the choice of a picture, then you will create as many subcategories as desired, each positioned to point on the picture. The association between sub categories area map and datasheets is made into each jobsite datasheet:
Location
The plug‐in is configured by default in the jobsite page from the “how to apply” universe Configuration
On edition, you must specify the desired category area map you want to use:
59 / 135
Jobsite categories These categories are used for house pictures and sensitive area management in Problem solutions / Jobsites pages.
The screenshot above shows the main category for the External Wall Insulation activity jobsites. This is where you set a building picture, along with on and off pictograms. No parent category is set because we are on a main category. This is the edition screen of the first subcategory of External Wall Insulation. The sensitive hotspot has been set on the little 1 in a circle on a yellow background. The Parent category points to the main category, in that case External Wall Insulation.
60 / 135
Weber Websites User Manual - Weber guide pages
Product-selectors/Selection guides The product selector is a convenient way to find the right product, or a combination of Weber products, thanks to a selection of proposed criteria. All the data is imported from Excel files built by contributors. As many selection guides as wished can be created for each activity. In the front end, a selection guide is made of one or several columns that act as exclusive criteria.
Illustration 4: selection guide page (front)
Selection guide list Usually, the different product selectors are proposed together in a list page.
61 / 135
A product selector list page is a classic page, with 2 components included :
The first component has to be configured : the different starting points (typically one by activity) have to be indicated. The second component is automatic : nothing to be done.
Selection Guide Page In the back end, selection guides are uploaded in tabuled separated values text files, into a specific directory of the Filelist.
Illustration 5: selection guide pages (back) Importing source files Building Selector guide pages is a two‐step process. You first have to make a source file. As already mentioned, source files for Selector Guides are flat text files, in a TXT format. It is not very convenient to edit these files in simple text editors. That's why it is preferred to use a spreadsheet software like Excel to build them, then save them as Text Unicode. 62 / 135
Weber Websites User Manual - Weber guide pages
Sample files are provided :
These files are then uploaded into the Filelist directory mentioned above:
Modifying source files Modifying source files cannot be done online. Files have to be downloaded first, then edited using Excel and saved as TXT files, and finally uploaded again. The procedure is described bellow. In the source file list, click on the icon next to the source file you want to modify, and choose Info from the list. In the popup windows, right click on the file name and select Save link as from the browser dialog box. Save the file on your hard drive so you can edit it. Once you're done, upload the file again in the same folder. Beware: don't open the file in your browser before to save it: the encoding method will be incorrect, be sure to follow the “save link as” method described upper.
63 / 135
Creating page + plug-in The second step is to create the actual page, then embedding the plug‐in into it.
64 / 135
1.
In a new page, create a new element:
2.
select “weber selection guide” as type of element:
3.
Add the source file in the element configuration:
4.
select the source file:
Weber Websites User Manual - Weber guide pages
5.
result:
Selection Guide plug-in The plug‐in is called “weber_selection_guide_pi1” Location
This plug‐in is installed by default in the Product selector page usually within the Find the right solution universe. Configuration
The only parameter needed by the plug‐in is the selection guide text file to be used.
65 / 135
Case studies pages Front end overview Case studies pages show a categorized list of building site where Weber products were used. Below the main page listing all Case Studies of the activity.
Results are filtered through one or several criteria. The user is first shown a single column, from which he selects a top level category. Categories are managed through the back office Categories > Case studies subcategory (see details further). The initial filter is then applied and the second column appears, revealing supplementary criteria the user can choose from. A list of case studies based on the previous choices is displayed after them.
66 / 135
Weber Websites User Manual - Weber guide pages
Below a detailed case study page. Notice the 3 plug‐ins used : associated categories, diaporama and related products.
Weber diaporama (Slideshow function)
Description
This plug‐in is build to add a picture slide show on your web pages. Each picture is shown at first in vignette format with legend and is clickable to see the full sized corresponding picture. Location
This plug‐in is actually used in all case studies datasheets, on the right column, but it can be used anywhere else. Configuration
1. The images must be sized in order to respect a maximum of 640*480 pixels.
67 / 135
2. Each description is written in the “title” section, the line number corresponds to the pictures order. For example, here the image file 10649_img.jpg (line number 2) will have the comment “Altolusso House Cardiff B2” (line 2)
68 / 135
Weber Websites User Manual - Weber guide pages
Preparing the case study page
The case study list page only holds one plug‐in, Weber case studies search, which is not meant to be modified.
A detailed case study typically contains a text block along with 3 plug‐ins : ➔
List of case studies (associated products)
➔
Weber case studies associated categories
➔
Weber Diaporama (pictures of the case study)
It is divided in two cells of the same width.
69 / 135
Specific properties
Associated products Choose one or several products involved in this case study, from the products tree view. These products are then linked in a box entitled Related Weber Products on the front end case study page. Categories Select one or several categories, which are in fact the criteria previously evoked in which the case study will be displayed. Picture used in list Allows you to associate a picture to the case study in the listing page.
case studies data-sheets The template used in the past for case studies is not so important now: a lot of countries are using diaporama instead.
70 / 135
Weber Websites User Manual - Weber guide pages
Case studies categories Both top and sub Case studies categories are administrated in the Categories / Case studies folder.
Here you can add as many criteria as you want and add for each as many values as you want. First add the Criteria by setting a name (ex: building types ), then add the possible values you need for this criteria like “public buildings” by setting for each the corresponding parent category ( here Specifiers ) Top level categories do not belong to a parent category. By default, those added to your application are: ●
Specifiers
●
Building types
●
Region
●
Company.
case studies plug-in This section describes the plug‐ins used on case studies pages of the website. Weber case studies search weber_case_studies_category_pi1 Description
This plug‐in is used to search case studies belonging to categories as defined in the back end in the Categories > Case studies folder.
71 / 135
Location
This plug‐in is actually used in all case studies parent pages, in the Find the right solution universe of every activity where this functionality is provided. Configuration
There is no special configuration for this plug‐in. Weber case studies attached category weber_case_studies_category_pi2 Description
This plug‐in displays all categories a specific case study belongs to, under the form of a list of links. Location
This plug‐in is actually used in every case studies datasheet, usually at the bottom of the left column. Configuration
There is no special configuration for this plug‐in.
72 / 135
Weber Websites User Manual - Top menu pages
Top menu pages
The top menu, also called “header” is a special menu, always visible and with constantly the same content (it does not depend on the page you are navigating inside). The structure of this "header menu" is not flexible. We impose the following links: Weber guide (products) | Contact us | Documentation order (if any)| About Weber | Human Ressources | Help, and the order of these items can't be changed in any way. The correspondent menu in the back end is called “weber” (it was previously called “header”, and still present under this name on some websites):
Weber guide This link is a “shortcut” that references the Weber product pages. If you click on “Weber guide” when you are visiting the home page or inside a page without an activity connection (like “contact us”, “About Weber”, “Site map”, “Credits”, etc.), you will be redirected to the first activity product list (the first tab will be pre‐selected). If you are visiting a page located inside an activity, you will stay in this activity and see the related products list (the right tab will be pre‐selected). To learn more about product pages, go to the dedicated section (later in this guide).
73 / 135
Contact us This page is dedicated to contact the Weber team. The page uses a plug‐in called “Weber contact form”. New ! We added a Captcha to improve security.
Captcha This is usually a little picture showed inside forms. It is used to avoid spam robots: the question asked is quasi impossible to resolve for computer or programs, but very easy for humans. There is often a way to change the picture (link, picture with arrows, etc.) in case the text is not clear enough. More infos on wikipedia. We added 3 translation values associated to this functionality; you will have to edit them in order to translate this part: •
tx_weberfeuserscontact_pi1.label.v_captcha_change
•
tx_weberfeuserscontact_pi1.error.v_captcha.required
•
tx_weberfeuserscontact_pi1.error.v_captcha.invalid
These values are inside the entry called “weber_feuser_contact (L1)” in the translation editor. Weber contact form plug-in weber_feusers_contact_pi1 Description This plug‐in is intended for users to send email to different services of Weber. It allows to define as many type of questions needed, each of which can be associated to a dedicated email destination. On the front end, if a user is logged one's values are automatically filled.
74 / 135
Weber Websites User Manual - Top menu pages
Location By default the plug‐in is added in the contact‐us page in the top menu bar. Configuration > Destination list label
Dynamic Label used on form for the “subject” of the question. > Destination list selection message
Dynamic Label used as selection message into the drop down menu list of values for the “subject” of the question. > Destination list error message
Error text message in case of none selection of « subject » by the user on submission. > Destination list
List of values for email subject with corresponding destination’s email. For each line enter the text value|destination email| (ex : technical‐tile fixing| solutions@netweber.co.uk|). > From
The email used as message sender > User's text
Body text sent in user email confirmation. > Website confirmation message
Text message shown after submission on website for user. > Webmaster's subject
Subject used for Weber destination email, the system enables dynamic values: > Webmaster's text
Email body text used for Weber services sent email If the user who fills the form is not identified on the site ( i.e., logged‐in ), only available values actually filled in the website form will be sent in the email.
75 / 135
Note: The system enables dynamic values (auto filled fields) like email of sender, user name, etc.
To see available variables, click on question‐mark icons: Contact form fields {id_user} {user} {email} {activity} {type_question} {subject} {message}
{postcode} {town} {region} {country} {telephone} {company} {address}
> Website confirmation message Text message shown after submission on website for user. > Webmaster's subject Subject used for Weber destination email, the system enables dynamic values: {id_user} {user} {email} {activity} {type_question} {subject} {message} {address}
{postcode} {town} {region} {country} {telephone} {company}
> Webmaster's text Email body text used for Weber services sent email, the system enables dynamic values: {id_user} {user} {email} {activity} 76 / 135
{postcode} {address} {town} {region}
Weber Websites User Manual - Top menu pages
{type_question} {subject} {message}
{country} {telephone} {company}
If the user who fills the form is not identified on the site ( i.e., logged‐in ), only available values actually filled in the website form will be sent in the email.
Documentation and sample orders Weber literature and samples can be ordered on‐line, through a dedicated request form. There are two different plug‐ins: •
Documentation orders plug‐in is used to order pre‐defined items like paper guide, litterature, etc.
•
Sample orders plug‐in is used to order on‐demand items.
77 / 135
Documentation order plug in Description This plug‐in was designed to manage “documentation” ordering on your website. Note that user identification is necessary to access ordering page.
To build a page that gives the possibility to order items, you need 3 steps: 1. create a new page and limit access to logged users:
(the page must have a “playmobil” icon) 2. add the plug‐in inside the page and configure it (fill the different fields) 3. switch to list view and add items “under” the page:
To manage orderable items, just select your page, switch to list view, and add remove or delete items (see point 3 upper).
To evaluate the quantities that a user will be able to order, the systems looks inside the group(s) of the user, so to manage these values, you must edit the field called “Max order quantity” inside the groups edition.
78 / 135
Weber Websites User Manual - Top menu pages
In the front end (what the users see), Ordering is made in tree steps: 1. First the plug‐in lists orderable items associated to the page – for each item the system retrieves the maximum items quantity defined for the user profile group (if a user belongs to several groups, the highest value will be used).
2. Then the plug‐in show a summary page corresponding to the user items choice
3. Finally the plug‐in validates the submission by : ○
Saving the user ordering in database (accessible through the “order history” back office menu for webmaster and Weber space history page for the user)
○
Sending an email to the configured Weber email account
○
Sending an confirmation email to the user.
Location By default the plug‐in is used on the “Documentation order” page accessible from of the header menu bar. Other usages In some cases, you can use the documentation order page for another usage. The UK website, for example, used this kind of page to manage their training program.
79 / 135
Configuration
D
On edition, this plug‐in enables to: A – Define the email sender for the order B – Define the subject of the confirmation email send to user C – Define the user email body text D – Define the text message shown as order validation on the website E – Define the Weber webmaster email recipient F – Define the webmaster's email subject ( email sent to the webmaster ) G – Define the webmaster email body text Note: Dynamic values can be used on email subject and body text to get user information. Click on question mark sign to get all of them. Actually the available list is: {order} {id} {username} {first_name} {last_name} {address} {postcode} {town} {region} {country} {profession} {telephone} {company} {delivery_name} {delivery_postcode} {delivery_address} {delivery_town}. You have to switch to the List view in order to add items under the order page
80 / 135
Weber Websites User Manual - Top menu pages
Weber sample orders plug-in
Plug-in name weber_sample_orders_pi1 Description Because the sample are made on request (tailored work), the documentation orders was not enough to collect sample orders: the sample orders is here for more sophisticated orders (colours, . This plug‐in is made to present items sample orders, and manage ordering. Sample items are defined with a product name and a corresponding list of available colours. After selecting desired samples and quantity, the user is redirected to an order summary page which recalls the list of items and enables filling out user delivery addresses. At opening delivery form values are filled with the user’s corresponding values retrieved from his My Profile information. The user can change and save these values if necessary and submit the order. The plug‐in performs different actions: > Save the order in database > Accessible for user in history page from My Profile space area > Accessible for webmasters in the Order history back office pages > Send an email to the configured back office Weber email address > Send a confirmation email to user > Redirects to a confirmation page. Location This plug in is installed by default in the “Weber samples” page.
81 / 135
Configuration Sample data is managed through an import of txt unicode file. This file is quiet easy to edit : prepare an excell file, one line per product (the name is located in the first column), and one case by colour (following columns):
Save it in txt unicode. On edition in back office, the plug‐ins parameters are: A – Data file = the selection of uploaded data txt file (based on country samples) B – From email address sender
A
C – User’s mail subject, field
B C
82 / 135
Weber Websites User Manual - Top menu pages
About weber Who we are This page is mandatory. It shows the worldwide Weber dimension (corporate vision). Some parts have to be translated.
Company/local pages These pages give some details about the local Weber company. It is a classic “text page”. You can use it or not.
Weber International This tab is a link to the corporate website (http://www.e‐weber.com/).
Carrier Work at weber This page is mandatory: it is connected to the weber competence model of weberation principles, and explains the human ressource policy of Weber. It is a text page, the content has to be translated.
Job offers This page is not mandatory, it gives the opportunity to propose jobs. It is usually a “classical text” page.
Job application form A user can apply on‐line, using an application form : On the back end, the job application form uses a dedicated plug‐in, called “Weber Job Application”, including a cover letter and a resume.
This plug‐in provides different mandatory fields to be configured:
83 / 135
Destination list: internal recipients (usely HR correspondent). If there is more than one, separate emails with comas. From: The sender of this email (e.g. the webmaster's emai). User's text : the content of the confirmation email that the user will get. Website confirmation message: The message showed on the website just after the form is posted. Webmaster's subject: the subject of the mail (sent to previously indicated destination list) Webmaster's text: the message sent to the destination list.
Note: you can get more explanations (for example all the “variable fields” available) by clicking on the question mark button! This module uses some translation items to localize some form fields (name, city, country, etc.). Use the translation editor and choose “weber_job_application (L1)” in order to manage them: The new version of this plug‐in (installed late 2009) includes 2 fields for joined documents: •
resume
•
cover letter
Please check all the translation fields in order to translate these new values.
84 / 135
Weber Websites User Manual - Top menu pages
The General Settings tab just mentions the predefined form provided, Join Us Form.
The E‐Mail Settings tab provides additional configuration options, such as From or Subject fields.
85 / 135
Help Glossary This page shows a list of technical words of our mortar industry. The content is managed by the glossary plug‐in (a21glossary).
Description This plug‐in is used to display a glossary of words. Configuration This plug‐in takes one parameter on edition: the directory that contains all glossary word items. Glossary items To manage words (list mode), select in center panel the folder called “glossary words”.
Words need only two filled fields: “short form” and “description”:
86 / 135
Weber Websites User Manual - Top menu pages
FAQ There is a module to help you to build a “Frequently Asked Questions” page.
To create a FAQ: 1. create a sysfolder that will contain FAQ elements 2. fill that folder with some entries (in list mode): 3. add a “Modern FAQ” element to a page. 4. in the plug‐in configuration, indicate the previously created folder in the “starting point” field:
5. Choose the type of FAQ you prefer:
87 / 135
Footer menu pages The footer is located at the bottom of the website pages Front view: BackEnd view: ¾ Sitemap: a global map of the website pages (beware, not all pages are showed) ¾ Legal notices (juridical ! to be filled with your country website laws contents) as far as we know all countries must inform their visitors about legal information ¾ Credits page, default page to translate information about webagency, hosting company. Don’t forget to write credits for pictures, thanks authors and sources you use
Site map
This page shows the structure of your website: the pages are showed in a hierarchical way, from top to bottom, like an inverted family tree. The page is composed with different instances of the “Sitemap” plug‐in, with different starting points. It does not show automatically “all pages of the website” but only “the subtrees that Weber wants to show”. Normally, you have nothing to do: all is already configured for you. In case of changeovers after the production phase (of, for example, a new activity section), a new instance of sitemap has to be added by making reference to the right title and starting point. There are different Sitemaps configured to start inside the “Weber” menu (header) ‐ “contact us”, “information request”, “about Weber”, “job opportunities”, and one more sitemap for each activity. You can manage the content of this page by choosing the different starting points of the sitemaps, and the name of each sitemap menu:
88 / 135
Weber Websites User Manual - Footer menu pages
Legal notice This page contains a lot of text, provided to you in English. You will just have to translate the content in your language, and give your e‐mail at bottom.
Credits This page shows the details of companies used to create and host the Weber website. Please translate: •
the standfirst
•
the 2 titles of the headers “Artistic creation” and “Hosting”
These two blocks are mandatory, but you can add some more details if needed (like did the French website):
89 / 135
Services pages / tools Service pages are pages, which belong to more activities, like this you can put the page in the Service folder that you do links from the activities to this page.
Colour cards Colour cards are accessible from the Find the right solution universe of every activity they are defined for.
They are based on a classic page, in which a “lash Movie” plug‐in is inserted, with specific configuration (see further article “how to create a color card”for details).
New ! You can now decide the number of columns you want:
90 / 135
Weber Websites User Manual - Services pages / tools
In the back end, Colour Cards are ordered in folders, one per product. Each of these folders contains 2 subfolders : one for a single XML description file ( called data.xml ) and one for the sample images in jpeg format.
To modify the data.xml file, proceed just like for Selection guides: Modifying source files. This is an extract of the XML file used for the screenshot: Add as many <thumb> elements inside the <thumblist> tag, as images you wish to have displayed. The <id> must be unique. The <image> tag contains the name of the image, as uploaded in the images folder of the Filelist. A legend can be added, which will be displayed under the image on the frontend. After modifying the XML file, you might also need to update the plug‐in in order for the modification to be taken into account.
91 / 135
How to create Colour cards The colour card pages are probably the most difficult part to realize. The process is basically separated in four steps : 1. create a TXT file describing the pictures legends 2. upload this file and the pictures (standard size: 400x180px, RGB) 3. go to the back‐end and use the plug‐in “ColorCardGen” to generate the colour card 4. add the colour card to your page On your workstation The colour cards need a data reference file, where images and legend are specified. You can start with the excel file called “model_colour_card.xls” (given after Kick‐off meeting), or start from scratch from a file with 2 columns : images files and legends. Open the Excel file, remove the first line if any header line exists, and save it under a “CSV” file type. Confirm both warning windows that pop up during saving :
Open the CSV file in a text software like notepad, edit+ or notepad++, and save it under “text UTF‐8” filetype:
Notice that you can also edit the config file directly inside notepad: it is not complicated to create a file with one line by color, and a semi‐column between the image file name and description.
92 / 135
Weber Websites User Manual - Services pages / tools
On Typo 3 ●
Switch to Filelist mode
●
Create a new folder for the colour card inside colour_cards → activity directory
●
Upload all the colour card images into the new directory. Keep in mind that you can upload up to 10 images at once by selecting this value in the dropdown list at the top of the “Upload Files” page.
●
Upload the TXT file into the same directory.
●
Select “ColorCardGen” plug‐in in the left panel.
●
Select, in the central panel, the folder where you uploaded the TXT (by default, the folder “fileadmin/user_upload/colour_cards/” is selected).
●
Check that your TXT file is found by the ColorCardGen plug‐in, check the box associated to that file, and press the “run button”.
93 / 135
94 / 135
●
Check the message you get: in some cases, there is some mistake in your TXT file and typo3 will show you what kind of error you got:
●
Select the number of columns you want and click “Commit the update”
●
As a result, two folders are created: “data” and “images”, the TXT is renamed with an extension like “_arc<date>.txt”and you will see some configuration lines to copy:
●
Switch to list mode.
●
In the Find a solution → Colour cards → items folder of the activity, copy / paste any existing flash element
Weber Websites User Manual - Services pages / tools ●
Edit the resulting record
●
Change the name ( field Description/name of the flash movie )
●
Change both paths in the 2 first lines of the text zone "Additional variables" at the bottom, so that they respectively point to the “data.xml” file and the “images” folder previously created (paste here the text you copied before):
●
Save this new flash element
●
Select the Find a solution → Colour cards folder ( go up one level in the tree hierarchy ) and copy / paste an existing page.
95 / 135
●
Edit this new page.
●
Uncheck "Hide Page" and rename the page ( Pagetitle field ).
●
Save and close.
●
Select this new page in the tree structure
●
Edit the second element of the Pagecontent table ( which is the flash plug‐in, where we are going to modify the flash element called by the plug‐in )
●
In the Plugin options section, remove the value of the "Flash movie to display" field, then select the Flash movie element previously created.
Weber cards Weber cards are managed in the Weber cards module in the back office. Five sub‐ modules are available. Locations of the Weber card owners are managed in the Weber area map and Weber area sections. Further information is defined in the Weber activity and Weber category sections, while the Weber card section allows editing the Weber cards themselves.
96 / 135
Weber Websites User Manual - Services pages / tools
Search contact (with map) weber_feusers_findretailer_pi1 Description
This plug‐in allows searching Weber cards by category associated to a dedicated picture. Category maps are created on the back office with selection of pictures, and then areas are positioned on the corresponding pictures on the right location. Selection of areas and categories are available on Weber cards edition. Location
The plug‐in is configured by default in the find a retailer page in the Find the right solution universe. Configuration
This plug‐in takes two parameters on edition: ● the desired area map to use, and ● the desired Weber card’s category to use.
Search contact (with form) weber_feusers_findcontact_pi1 Description
This plug‐in purpose is to search professional Weber cards on the website. First the plug‐in builds a refine by table that enables to search published Weber cards (available in the Weber cards back office folder). On the first column the plug‐in lists Weber cards categories that contain active elements. Categories are managed as dynamic list that you can customize on list mode from the Weber cards back office folder; each Weber cards on edition can then be linked to a specific category. By default categories look like professional profiles like applicators, sales’ man ... On the second table column it is listed the areas that contain active Weber cards. Weber card areas are managed as dynamical list that can be accessed on list mode from the Weber cards back office folders. The association between Weber cards and areas is done on the Weber cards back office edition pages, block covered areas. Location
The plug‐in is configured by default in the find a trade contact page of the Find the right solution universe. Configuration
No special configuration is needed. 97 / 135
Search contact with zipcode
This plug‐in provide an easy tool to search a contact throw a zipcode.
The list of contacts is configured inside a txt unicode file in backend, and the plug‐in has to be added inside a page to use it. How to get it? 1. Prepare an excel file with your data:
The first line contains the headers (not visible in front, just for reference). The second line contains headers and prefixes that you want to see. Here, we will see “Search by postcode”, and 3 prefixes before the data : tel., fax:, email.
98 / 135
Weber Websites User Manual - Services pages / tools
2. Save your file as a txt unicode file! Upload the txt file inside the file repository
3. Add the plug‐in to your page:
4. Configure the plug‐in (just tell it where is the config file):
99 / 135
Weber area map This module is used for region definition, map assignment and hotspot illustration.
Map picture This is where the map to be used for this area cut‐out is defined. Picto rollover on / off Choose one pictogram to be displayed on the hotspot areas of the image, and one to be displayed when hovering the hotspot with the mouse.
Weber area This is where areas are graphically assigned on the area maps previously defined, according to their category. First create some area items in the list mode. In the edition screen of an area item, in order to link the area to a portion of the image you need to : 1. select an area map from the drop down list, the country picture changes accordingly 2. click on the image where the current area is located. This adds a circle pictogram on the map and automatically fields the coordinates in the Position XY field.
100 / 135
Weber Websites User Manual - Services pages / tools
Weber activity This section is used to create the activities that Weber cards are going to be associated with. The only information to fill in is the name of the activity.
Weber category Weber cards can be classified into some main categories. This is where you define them.
Weber cards editing
The actual Weber card editing makes use of all these items, that's why they have to be defined prior to the cards themselves.
Find a retailer plug-in weber_feusers_findretailer_pi1 Description
This plug‐in allows searching Weber cards by category associated to a dedicated picture. Category maps are created on the back office with selection of pictures, and then areas are positioned on the corresponding pictures on the right location. Selection of areas and categories are available on Weber cards edition. 101 / 135
Location
The plug‐in is configured by default in the find a retailer page in the Find the right solution universe. Configuration
This plug‐in takes two parameters on edition: ●
the desired area map to use, and
●
the desired Weber card’s category to use.
Training application form This plug in gives you the possibility to offer a nice application form for trainings that you propose to your customers.
As you see, you can write a teasing text for the training, other information like cost or duration, and you can offer to the customer the dates and places available for this special training. The customer can choose the most appropriate location and – if the session is not completed yet – he can register. After registering, an automatic e‐mail will go to the person in charge of trainings. Of course many training courses can be displayed but one after the other.
How to do? As this is a special plug‐in, you need to work on two parts: 1. create the training items (like news) in a special folder 2. create the page for trainings, put there the plug‐in 3. make the connection between the plug in and the folder 102 / 135
Weber Websites User Manual - Services pages / tools
In the next three chapters you will find the way how to do this in three steps. 1. How to create the training items? Find the new Academy folder in your structure. This is the folder for all your trainings. (notice that you can choose to use another one if you prefer).
Click on it and switch to list view! You will probably see the list of some examples of the training items.
By clicking on the new item button, you can create your new training item. On the General tab, you can edit the title of the training, the description and you can also add pictures.
103 / 135
By clicking on the Session tab, you can define for this special training the sessions:
After clicking on create new session, a new line appears, you need to click on the element to edit it:
104 / 135
Weber Websites User Manual - Services pages / tools
This are the things you need to edit:
Save and close. You can create one or more, it depends how many you have. If this training (for example ETICS training) occurs once a year, you just prepare for it one session. If you have two different dates, or two locations you create two sessions etc:
105 / 135
•
2. Create a page for the trainings: Decide first where you want to have your training displayed. Some countries put them in the Header, but the best place for it is under the third universe (How to apply) in each activity. Create the standard page where you want to put the information of your trainings. Edit the page: the title, the standfirst text, dont forget the background image and metadata!
106 / 135
Weber Websites User Manual - Services pages / tools
Please note: before putting the special plug in, you can also create some new elements in the page like text or text/picture, table etc. The training plug in
Create a new element in the page:
Choose the Weber academy plug in from the plug in list: Edit the plug in:
On the General tab you can give the title of the plug in (header).
107 / 135
Clicking on the plug‐in tab, these are the features you can edit:
You can also edit the mail address of the webmaster or the mail of the colleague in charge of the training, the subject of the mail and the content. 3. How to create a link between your training page and the Academy folder? Very important! On the bottom of the page you need to indicate a starting point (this has to be the Academy folder, in which the training items are listed. The plug‐in will automatically pull in every information, what is put in this special folder. 108 / 135
Weber Websites User Manual - Services pages / tools
Video player
Small video sequences are mainly used in order to illustrate the product application procedures (these films are located in the How to apply our products universe), but you can also show your last advertising campaign, or any kind of video. You can insert a video movie anywhere in any page, using the FLV player plug‐in. The format used for videos is a streaming flash format using the .flv extension. Some size and weight specifications have to be respected for an optimal result. A flash player 109 / 135
is then embedded into the page, that refers to the video file. The result can be seen in the screenshot above. To include a film, several steps are necessary : 1. Videos have to be uploaded into the video folder of the Filelist. 2. Insert in your page a new element of type “FLV player”:
3. Select your flv file and configure the options:
Here are the optimal specification for video .flv files exceeding 5 or 6 minutes length, in order to get resulting files that are less than 10 MB (maximum acceptable). Video :
Scale size: Frames / second: Bitrate kbps:
320 x 240 15 128
Audio :
Sampling Freq: Bitrate kbps:
22050 32
If your source video file is not a FLV (.mov, .avi, .divx, etc.), you can convert your file to flv using a free software called SUPER! (http://www.erightsoft.com/SUPER.html)
110 / 135
Weber Websites User Manual - .Global management
. Global management Some things are not visible for the end‐user, but they have to be configured!
Translation editor All labels of the web site can be edited and translated into your local language.
Select Translation in the module list. The Translation editor is displayed on the right. Choose from the drop down list, a plug‐in or a section you wish to edit the translations of. Once clicked, a list of all labels for the selected plug‐in appears. Translate the expression mentioned in each Master language translation block in the provided text field. If the translation is not filled in, the label will be displayed in the master language ( English ) on the website. When finished, save your modifications by clicking the Submit button at the bottom of the page.
111 / 135
Front End users and groups Registration Users are invited to register on each activity page:
The backend place for editing the registering and log‐in forms are in the main structure of the home page. Here are all the front pages to manage user accounts and registration More for technical reasons, these pages must be kept as the standards models, you only have to work on plugin settings (most of these pages contain plug‐in to proceed special actions, send mail etc) You can edit the sign‐up form by editing the sign up form plug‐in:
112 / 135
Weber Websites User Manual - Front End users and groups
Weber sign up form
Plug‐in name: weber_feusers_signup_pi1 Description This plug‐in is used to create user accounts on the website. The registration process is : > The user fills required information on form, > Filled information is checked and either the error messages are listed, or the process passes to the next step, > The system sends an email to the user in order to check that his/her email is valid, which contains a special link for the user to confirm, thus activate his/her account > From this step on, the user can access to the My Weber space area and the webmaster will be informed by mail that a new registration has been performed. User data is also available in the back end “users” directory.
113 / 135
Location The plug‐in is used on the registration page from the Weber space directory. Configuration On element edition the configuration parameters are: A – Email sender for registration B – User’s email subject, here dynamic values are possible C – User’s email body text
D – Website confirmation message E – Webmaster email destination F – Webmaster’s email subject G – Webmaster’s body mail
As usual, some automatic values like {username}, {country}, etc. are available. Feel free to click on the question mark button to get the list of available values (it depends on each field).
114 / 135
Weber Websites User Manual - Front End users and groups
Weber edit profile form After registering visitors have the possibility to change their personal information. With the help of this plug in you can define the message sent after a modifying. Plug‐in name: weber_feusers_editprofil_pi1 Description This plug‐in is made for users to modify their personal information. Location By default the plug‐in is added in the My Profile section, which users can access once they are logged‐in. Configuration The only configuration parameter is the confirmation message sent to users after modification of their personal information.
115 / 135
User groups Users and groups are managed in the Users folder of the tree view. First groups have to be defined, then users are linked to them. User groups are displayed in list mode.
A group in editing mode is shown below.
When a user is created, his membership to a group is automatically resulting from his profession.
116 / 135
2. Enter the starting and ending dates and validate
117 / 135
3. Check the number of users found and click on “Export” button
Wait a little bit (it can taxes a couple of minutes), and you get the “save pop‐up”:
118 / 135
Weber Websites User Manual - Front End users and groups
4. If you want to edit the file with Excel, when importing, choose “Unicode/UTF8 file”, and declare the file as a “tabulation separated values”:
Now you can save the file as a CSV file:
119 / 135
Regions Regions are used to specify the origin of registered users. They are administrated in the Regions folder on the back end :
In the Users administration section, a region can then be chosen from a drop‐down list.
Profiling – access denied pages The access to certain pages can be restricted to identified users only. The profiling of these pages is based on users registration. Once they filled a sign‐up form, they can access (if they are included in correct groups) to access granted pages.
120 / 135
Weber Websites User Manual - Front End users and groups
You can define access rights and the related teasing pages (access denied page & access denied logged page).
Choose a target in the Access denied page field to redirect anonymous users, and in the Access denied logged page to redirect identified users that do not belong to authorized profiles. Users that do not meet the authorization requirements are then redirected to the indicated pages.
From the second properties box, you can select the user groups that actually have access granted to the current page.
121 / 135
Back-End user management Webmaster groups, rights and accounts Typo3 enables to create different groups of backend users with customized access rights. After, you can assign user’s accounts to several groups in function of the needs. Currently, the simple weber rule is not to share accounts between users and let the country manage their own accounts. For every country, there will be at least one person with the role of "country administrator" who will be responsible of the "validators" user’s accounts To summarize, here are the standards groups of users to work on your website backend section: ➔ A country administrator to manage the accounts ➔
A validator to manage page contents (if needed, there is the possibility to add a “contributor” level, with less rights)
We use SGID (Saint‐Gobain identifier) as login. You will be assigned a default password and we invite you to change it after your first connection. Backend users management The administrator of the website can create back‐End users easily. Please go for more details to “Global management > Back‐End user management”. Each website has at least one “country administrator” already configured. If you are country administrator, you may edit all users of your website. If you want to add a user, follow this: 1. Select “User Admin” inside the module called “ManageUsers” on the left menu Click the “Create a new user” button. 2. Fill all mandatory fields (Username ‐use SGI‐, Password, Name, email) and eventually language (the user will be able to change it by himself later). = Save and close Note: Check carefully the selected groups : start with “Default”, then add “Validator” or “Contributor”, or even “Country Administrator” later.
122 / 135
Weber Websites User Manual - Multi-lingual in typo3
Multi-lingual in typo3 Typo3 CMS can provide several translations of your website for visitors; the main logical is to have : •
1 master language; the default one of your front website and also for your backend tree of pages
•
1 or several translations of the master language
Translation works page by page, it means that if one page is translated the content will be displayed, otherwise the content will still be the default one. The switch to available languages is done from a sub language menu at the top of front end pages –
Front end translation menu
Backend language translation management After the first settings of your website by the agency you will be able to manage your translation through typo3
1 – Translating a page Some countries are using different official languages (Switzerland, Belgium, South‐ Africa, etc.), so Typo3 authorize a website to use different languages. There is a “default” language and as many other languages for a website.
123 / 135
The translation is done at any level: page, block, items, etc. When a content is not translated, the “default” language is displayed. First step is to translate the pages, on each page you will have a new top tab menu for «Localization view»; this menu enables you to create a new translated page per declared translation language :
By creating a new translation page you will access the page properties layout to enter your translations. On every field is shown with a little flag the default master translation text you previously used :
124 / 135
Weber Websites User Manual - Multi-lingual in typo3
Once the translated page is created, the localization top tab menu of the pages give access to all the translated version of the page by clicking on the available flags :
2 – Translating blocks of contents For each translated page version you now need to translate each block of contents that contains text – of course a simple picture don't need to be translated! To translate a paragraph, first click on the link «create a local copy» in front of the right flag:
This operation duplicates the block, adds [translate to language] to the master text and copies it into the new translation field. 125 / 135
The link on the new text or flag gives access to the form field to put your final content translation – the master text translation is still here to help you,
3 – Translate items (e.g. news, categories, orderable items, ...) To translate items (not real page) a first configuration is necessary, these settings are done by the Agency., for your information, for each types of items must be set an 'alternative page Language' ‐ The logical of item translation is also to have one default element and a new one by translation attached to the default one.
126 / 135
Weber Websites User Manual - Multi-lingual in typo3
The creation of the default item is standard when you create an item is automatically attached to the default language, The easiest way to translate the item is to copy and paste the default one, edit the new one, change the languages on the top menu and verify the block is still linked to the original one:
Newsletters plug-in Creating a newsletter is sometimes very complicate (just as an example, all the images have to be uploaded inside a website, the image addresses have to be changed later in the HTML code of the newsletter, you need to have one page hosted somewhere to help people when they cannot see the newsletter well – the famous “click here if you don't see this newsletter”, etc.). To simplify all this complicate process, we have created a dedicated plug‐in and a special template: you can now create by yourself a simple newsletter, without pain. The way to works is quiet easy: 1. Create a page dedicated to the newsletter 2. Export the content of this page using the newsletter plug‐in
127 / 135
Page creation 1. Just create a new page inside a folder outside of the activities hierarchy. We recommend to use a folder named “newsletter”. Right‐click on the folder icon and choose “New”, then “Page inside”:
2. Edit the page properties, and select the right Template Design “Page Newsletter”: Tip: you can also configure the upper folder “newsletter” in order to apply this template on sub‐pages: It will apply automatically the right template to all pages located inside the folder. 3. Fill the page content. Notice that the left block will be used as introduction text, the center blocks will become the main content, and the right block will be presented in the
footer. Note: It is a good practice to group the images used inside a dedicated folder:
128 / 135
Weber Websites User Manual - Newsletters plug-in
4. Check your result (clic on magnifier):
Content export When the content is ready, you are ready to export it. 1. Select the newsletter plug‐in on left panel
2. Select your page on the centre panel:
3. Select “get the newsletter code” on the menu (top right of the screen):
(you can also choose “preview” in his menu if needed). 4. Configure the google analytics form (it will be useful for the statistics), and clic on the “generate” button:
129 / 135
5. Copy the content. (you will paste the content code inside your favourite newsletter tool).
6. Paste the content inside your newsletter tool (here it is “e‐circle”):
For more information about how to use e‐circle, please contact us.
130 / 135
Weber Websites User Manual - .Key factor of success
. Key factor of success Writing for the web: general rules Before having a deeper look in typo3 content’s management, let ‘s just focus on how to write for the web and what are the main basements of publishing web content’s. What are the main rules to keep in mind? The goals are of course to be efficient for the visitor’s points of view and also for the SEO1 web ranking results into search engine! Write for web users and it will also work for search engines.
Semantic approach Your pages must be considered to refer to the theme the user requests if you want them to be positioned at the top Search Engine Results Pages.
Determine your content ➔ Understand your audience expectations and their behaviour on the Internet ➔ Compare them to web user's requests to determine their vocabulary instead of
specialists’ vocabulary. ➔ Each page will have a single HTML tag <title> and will be personally optimized. The density of appropriate keywords to each theme will be naturally increased.
Identify a page A page is identified by an URL2 (web address) that describes the content; some writing rules must be followed: ➔ Apply the rule of the inverted pyramid: from general to specific ➔ Describe your content ➔ Words must be written in the language of the targeted resource content ➔ Avoid adverbs, pronouns etc. when possible, by trying not to go over 4 to 5
keywords. Special characters are prohibited: spaces, quotes, percents etc.
Organize your content ➔ Make an effort to introduce correctly your pages, the
introduction text is really important (standfirst field) ➔ Use short paragraphs organized by ideas ➔ Subheadings : make title short, use the keywords ➔ Use bold to highlight an expression in your contents ➔ Use bullet points for list = Presentation as bullet points gives high legibility. ➔ Think about alternative content to media files, write precisely alt and titles for pictures ➔ Think about hypertextuality, write links titles ➔ Update as frequently as possible your content 1 Search Engine Optimization 2 a Uniform Resource Locator (URL) is commonly used to describe an internet address (http://...)
131 / 135
Meta data information
and in the favorites. The title of your page must be transparent and describe your content well. It has the most representative keywords of your content. It must be placed in first position after the opening of the <head> HTML tag. An original title per page: Do not repeat the same title on every page. You loose the opportunity to vary keywords. They will be identical and therefore bad for indexing. Writing: We advise you not to go over 64 characters (around 12 words, spaces included). This restricted number helps you to be concise and clear. Keywords first: Each word has a strong influence so do not dilute your most important keyword by employing too many keywords or too many words that do not have any sense (the, a, etc.). The most important keywords must be placed first and the brand name last.
imperative to individualize the HTML tag and to write a clear and attractive description for each page. Writing: Maximum number of characters (spaces included) Avoid having a cut summary. We advise you not to go over 160 characters (spaces included). Keywords first: Words used in this sentence are also considered as keywords by most search engines. Write a sentence that is syntactically correct and that contains the main keywords for a given page. You must begin with the most important element such as a keyword 3 Hyper Text Markup Language(HTML) is the encoding scheme used to create and format a web document. A user need not be an expert programmer to make use of HTML for creating hypertext documents that can be put on the internet.
132 / 135
Weber Websites User Manual - Writing for the web: general rules
Fill the Meta tag "keywords" (the keywords associated to the page) The abuse of this HTML tag by placing a maximum of keywords (sometimes more than 1000 words) makes search engines discount the tag. ➔ Choose keywords in relation with
the HTML tags <title> and <description> as well as your page title and its two first paragraphs. It also can be used to put any web users’ requests containing possible mistakes and vagueness. You can put the most generic keywords here. ➔ Your competitors’ keywords HTML tag can also be used as a source of inspiration to
choose your keywords. ➔ Place the most important keywords first ➔ Separate words by commas
Navigation rules Use internal navigation: ➔ To build content, use the principle of internal navigation between pages. ➔ Do not create too many links. In the same page, limit yourself to 5 links.
Navigation between pages
Besides the menus and breadcrumbs4, offer your visitors (and spiders) links to additional information (articles from the same thematic, lists of equivalent products, partners, sites that offer additional services, etc). !Notice that all the information about SEO5 that you will find in the manual is identified with this colour code. 4 Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. 5 Search Engine Optimization
133 / 135
Site statistics Google Analytics In order to get statistics about the websites visits, we have added Google Analytics to our legacy statistics tool (Xiti). To be able to see the Google Analytics data, you need a gmail account. All new websites have a gmail account associated to them used for Google Analytics usage. Connect to https://www.google.com/analytics/settings/, indicate your google account. You will see a select menu on the upper right of the page with your website inside. When selected, you will see your website resume: click on "View report".
134 / 135
Weber Websites User Manual - Site statistics
You can seen now a dashboard with all type of data about your website. You can fine tune your preferences, set up goals and funnels, export datas to excel, etc. There is some visual tools very interesting, like “Site overlay”:
We wish you a good job, an exciting learning and a nice new web‐site! The webmarketing team
135 / 135