COTOBEN CONTR CLASS B IBUTION OOK GUIDE July 201 Nov 7 ember 2017

Transcription

1 COTOBEN CONTRIBUTION CLASS BOOK GUIDE July November

2 1. NEWS PAGE BACK TO SUMMARY Committed to better energy a signature relying on 5 pillars ACCESSIBILITY RESPONSIBILITY ECOPERFORMANCE INNOVATION SHARED VALUE EACH ARTICLE WILL SERVE AS PROOF OF ONE OF THESE PILLARS 2

3 1. NEWS PAGE BACK TO SUMMARY Let s change the way we speak! New tone & style Our new spirit must be illustrated through the way we communicate. Sympathetic Close Welcoming Empathetic Significant Pertinent Sound Strong Simple Direct Clear Precise Sincere Factual Transparent Responsible 3

4 1. NEWS PAGE BACK TO SUMMARY CMS / Content Management System A CMS is designed to make it easy for non-technical users to edit and manage a website Examples of CMS : Drupal is an Open source web development platform : Built, used and supported by an active community of people around the world people in 228 countries 4

5 1. NEWS PAGE BACK TO SUMMARY Adapted browsers #1 Chrome (minimum 15) #2 #3 #4 Firefox (minimum 8) Internet Explorer (IE8 et IE9) Safari (minimum 15) 5

6 1. NEWS PAGE BACK TO SUMMARY GLOBAL CONTENT Created and published by Total Central Activity Making Energy Better Global project LOCAL CONTENT Created and published by the country Local project (proof) People (portrait) Partner News Websites Publication Job offer Basic page 6

7 1. NEWS PAGE BACK TO SUMMARY 7

8 1. NEWS PAGE BACK TO SUMMARY ATOMS = All medias (image, file, sound, video) BLOCKS = An organized set of content Ex : Local projet block CONTEXT = The way a page is organized (order of the blocks, reactions...) TRANSLATE = Create a content in a new language. It doesn t translate automatically. 8

9 1. NEWS PAGE BACK TO SUMMARY Contents 1. CREATE AN ATOM 2. CREATE A NEWS PAGE 3. CREATE A PARTNER PAGE 4. CRATE A PORTRAIT PAGE 5. CREATE A PROOF PAGE 6. CREATE A PUBLICATION PAGE 7. CREATE A KEY FIGURES PAGE 8. CREATE HOMEPAGE ACTIVITIES BLOCKS 9. EDIT HOMEPAGE BLOCKS 10. MANAGE EXISTING CONTENT 9

10 1. CREATE AN ATOM Image, file, sound, video

11 6. ATOM BACK TO SUMMARY Before starting to create the Atom Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 11

12 6. ATOM BACK TO SUMMARY Steps to create an Atom (= image, file, sound, video) 1 Click on "Content" in the black toolbar Then click on "Atom". 3 To create a new atom, click on "Add atom. To modify an existing atom, fill in the fields below and search by name, type, category, etc. 3 4 Choose the type of atom you want to create. Select your file in your computer then click on "Continue". 4 Please contact the Affiliate Relations team to upload a new video (see the last slide for our contact details). 12

13 6. ATOM BACK TO SUMMARY Naming Atoms Country_Type of content_name or Keyword_Language.jpg Examples: - Russia_Portrait_EvgeniaW_Marketing-Director-Bostik._RU.jpg - NL_Proof_K4Z_EN.jpg Do not use special characters / symbols (& + / * etc.), only numbers if the content page needs several visuals. 13

14 6. ATOM BACK TO SUMMARY Manual Crop You can resize your image in back office, just by selecting the type of format you want for your atom. Portrait / people Home page pillar 14

15 6. ATOM BACK TO SUMMARY Create a File 5 Insert the Title of your file. 6 Insert the Front Title of your file. It s only visible in back office. It can be the same as the title. 5 7 Select the Language of your file. 6 8 Select the Type of your file: pdf, excel or other. 7 9 Click on "Finish" (Save)

16 6. ATOM BACK TO SUMMARY Create an Image Check if this is the right image you want to upload. If not, click on "Remove" and select another one. 11 Insert the Title of your image. You can rename it Insert the Title of your image. It s only visible in back office. It can be the same as the title. 13 Select the Type of image: pics, pictograms, infographics, etc Select the Language of your image. It should be the same as the website language. Select the Area of the website in which you want to use this image

17 6. ATOM BACK TO SUMMARY Create an Image Optional: insert a Legend Optional: insert a Description Choose an End Date for your image. On this date, the image will be deleted from the website. 19 Fill in the "Copyright" of your image: the name of the photographer and/or Total Click on "Finish" (Save)

18 6. ATOM BACK TO SUMMARY About End Date & Copyright End Date (mandatory) 17 End Date - 45 days Notification sent to the publisher. End Date End Date + 45 days t Media automatically unpublished. Pourquoi ce «t»? Copyright: also mandatory. Always add before the copyright. 18

19 6. ATOM BACK TO SUMMARY Create a Sound 21 Insert the Title of your sound. 22 Optional: select a Thumbnail if you need one or remove it Fill in the Name of the author of the sound Optional: enter a Tag or a Keyword Insert the Front title of your sound. It s only visible in back office. 26 Select the Language of your sound. It should be the same as the language of your website

20 6. ATOM BACK TO SUMMARY Create a Video 27 Click on "Video". 28 Source, select "Video hosted" on Piksel (new API). 29 Click on "Continue" Copy and paste the UUID video identifier. 20

21 6. ATOM BACK TO SUMMARY Translate = create in a second language To make sure your atom will be displayed properly in the second version of your content (portrait, proof, news, publication, etc.), you need to create a second version of the atom, in your local language. You should always follow these steps: - Click on Atom". - Filter by the appropriate type of atom. - Once you have found your atom, click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save! The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 21

22 6. ATOM BACK TO SUMMARY Delete a media If you delete a media, it will be deleted for all languages available (translations). If you want to delete only one language: - Filter the media by language. - Edit it and delete the translated version only 22

23 2. CREATE A NEWS PAGE

24 1. NEWS PAGE BACK TO SUMMARY Final look of the News page Title 2. Date 3. Type (News or Press release) 4. Head title 5. Body 5 24

25 1. NEWS PAGE BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 25

26 1. NEWS PAGE BACK TO SUMMARY Steps to create a News page Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on "Add content". 2 3 Click on "News". 3 26

27 1. NEWS PAGE BACK TO SUMMARY Steps to create a News page 4 The "Head Title" field should always be Media, or the translation in your local language Select the Date of the News. 6 Insert the Title of your News (60 characters maximum). 6 7 Insert your Text here (1500 characters maximum). - Make sure you clear all formatting before copy-pasting it into the field. - Justify your text once everything is done. 7 27

28 1. NEWS PAGE BACK TO SUMMARY Steps to create a News page 8 Select "Full Html". 8 9 Either the Media (image, video) will already be in your library and you can search for it, or you will have to add it by creating a new atom. This Media is to illustrate the News. It will appear underneath the Head Title. Dimension required: 960 x 360 pixels Select the type of content, either a News or Press release. 11 You can add a File (PDF, Word, etc.): Add your file (use the drag and drop via the add media tool on the right) Insert the Title of your File You can insert more Files if needed

29 1. NEWS PAGE BACK TO SUMMARY Steps to create a News page You can insert a Slider if needed. 14 Either the Media will already be in your library and you can search for it, or you will have to add it by creating a new atom. This Media is to illustrate the News. It will appear in a slider. Dimension required: 960 x 466 pixels You can insert a Short Description of the Image/Video (260 characters maximum) You can insert more Images/Videos with descriptions if needed Weight: You can select the order in which to display the News. You can leave it at "0" Select the Language of your News. 29

30 1. NEWS PAGE BACK TO SUMMARY Steps to create a News page Ignore FYI Title (SEO): Defines HTML title, also used by search engines. If this field is empty, the field (1/Title) will be used. Ignore FYI (Meta)Description: Defines the content for HTML meta description, used to display a short summary of the page in search engine results. If this field is empty, the first characters of the field (4/Text) will be used Ignore FYI (Meta)Keywords: Defines the content for HTML meta keywords, used for the page's SEO Leave "Generate automatic URL alias" ticked. 30

31 1. NEWS PAGE BACK TO SUMMARY Steps to create a News 23 Click on "Save". You will be able to see your News in "Draft mode". At this stage, it s not published on your website (only visible by you in back office). 24 To publish, click on the "Workflow" tab and then on "Immediate publish" As "log message for this state change" you can write "OK to publish" or anything else

32 1. NEWS PAGE BACK TO SUMMARY Steps to create a News 26 The news is published on the "Media" page. Tips: Once you ve completed these steps, the front office should appear with your new content! If not, empty your browser s cache, close it, wait a few minutes and try again! 32

33 1. NEWS PAGE BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the news, in your local language, you should always follow these steps: - Click on "Content". - Filter by "News to display only news content. - Click on "Your news title" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 33

34 2. CREATE A PARTNER PAGE Total In Country section

35 2. PARTNER PAGE BACK TO SUMMARY Final look of the Partner page 1. Title Text 3. Hyperlink button 3 35

36 2. PARTNER PAGE BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 36

37 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner 1- Create a Partner block Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar Then on "Add content". 3 Click on "Partner". 3 37

38 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner 4 By default, it s the language in which you re editing your website. To change it you must translate this partner into your local language. 5 6 Insert the Logo of the partner if you have one. It will be displayed in the top right-hand side of the title and will be automatically resized. Insert the Name of your partner (25 characters maximum) Insert a Short Description of your partner: it will appear when the partner in displayed in the block (130 characters maximum)

39 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner 8 Insert your Text here. Make sure you clear all formatting before copy-pasting it into the field. Justify your text once everything is done. - Introduction text to describe your partner. - Title that introduces the first paragraph (42 characters maximum for each subtitle). - Content about your partner (600 characters maximum for each paragraph). - Optional: title that introduces the second paragraph. - Optional: content about your partner. - Optional: subtitles format is Title 3. 8 Justify 9 Optional, if you wish to add the link to your partner s website: 9.1- Type in "See the website" Then select the text "See the website", and click on the "link" button Insert the partner s link in the "link info" tab and click on "OK" Then click on the "Formatting style" and select "red button"

40 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner Leave text format as "Full Html". Optional: insert an Image or Video. Please make sure this image is the following size: 300 x 225 pixels. Select the Language of your country page. By default, it s the language in which you re editing your website. To change it you must translate this partner into your local language Ignore the "Title" and "URL" fields. 14 Leave the "Weight" as zero Ignore Ignore FYI Title (SEO): Defines HTML title, also used by search engines. If this field is empty, the field (1/Title) will be used

41 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner Ignore FYI (Meta)Description: Defines the content for HTML meta description, used to display a short summary of the page in search engine results. Ignore FYI (Meta)Keywords: Defines the content for HTML meta keywords, used for the page's SEO Leave "Generate automatic URL alias" ticked Ignore Click on "Save". You will be able to see your partner page in "Draft mode". At this stage, it s not published on your website (only visible by you in back office) To publish, click on the "Workflow" tab and then on "Immediate publish" As "log message for this state change" you can write "OK to publish" or anything else. 41

42 2. PARTNER PAGE BACK TO SUMMARY Steps to create a Partner 2- Choose which partner you want to display in the "Partner" block. Partners are displayed in Total In Country (TIC). New partners will not be automatically displayed in the Partners block of the "Total In Country" Page. To choose which partner you want to display in the "Partner" Block, please follow the steps below: 1 Click on "Content" then click on "Block. 2 Then, filter by "Partner". 3 Click on "Edit" next to the our_local_partners section. 4 From the list, select the partners to display in the block. Save. 42

43 2. PARTNER PAGE BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the partner, in your local language, you should always follow these steps: - Click on "Content". - Filter by Partner to display only partners. - Click on "Your partner title" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 43

44 3. CREATE A PORTRAIT PAGE Commit With Us section

45 3. PORTRAIT PAGE BACK TO SUMMARY Final look of the Portrait page Background picture 4 2. Head Title 1 3. Head Title Title People 5 5. Text Short summary Title Short summary Title 2 8. Title - details 9. Media Quote 45

46 3. PORTRAIT PAGE BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 46

47 3. PORTRAIT PAGE BACK TO SUMMARY Steps to create a Portrait (= People) Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on "Add content". 2 3 Click on "People". 3 47

48 3. PORTRAIT PAGE BACK TO SUMMARY Steps to create a Portrait (= People) 4 Must always be the same cover picture as the "Commit with us" page. Use the search button in the library (the vertical tab on the right of your screen) and use the keyword cover". Drag and drop it in the field. Dimension required: 1420 x 360 pixels. 5 Should always be "Commit" or the translation in your local language. 4 6 Should always be "with us" or the translation in your local language Insert the Title of your portrait. Should mention the name + his role/job (75 characters maximum). By default, it s the language in which you re editing your website. To change it you must translate this portrait into your local language

49 3. PORTRAIT PAGE BACK TO SUMMARY Steps to create a Portrait (= People) 9 Insert your text here. Make sure you clear all formatting before copy-pasting it into the field. Justify your text once everything is done characters maximum for the introduction text characters maximum for each subtitle characters maximum for each paragraph 9 (up to 3). Justify 10 Create subtitles and apply Style "Title H2" Then highlight in bold the subtitle s 2 nd part. 49

50 3. PORTRAIT PAGE BACK TO SUMMARY Steps to create a Portrait (= People) Insert your people picture here. Either it will already be in your library and you can search for it, or you will have to add it by creating a new atom. Dimension required: 300 x 231 pixels. Insert a Quote from the people introduced in this page (260 characters maximum). Should always be "Short" or the translation in your local language Should always be "Resume" or the translation in your local language Create a maximum of 6 "Title" and "Detail" blocks by entering: Dates and job/experience description. 2 lines maximum for each description You can move the lines up/down manually by holding this sign with your mouse pointer

51 3. PORTRAIT PAGE BACK TO SUMMARY Steps to create a Portrait (= People) 18 Should always be "get the full story" or the translation in your local language. Then you can ignore the next fields regarding SEO, metadescription and keywords. 19 Optional: if you want your portrait to appear on the HR page or local CSR page, choose the appropriate typology. 20 Click on "Save". You will be able to see your portrait page in "Draft mode". At this stage, it s not published on your website (only visible by you in back office). 21 To publish, click on "Workflow" tab and then on "Immediate publish". 22 As "log message for this state change" you can write "OK to publish" or anything else. 51

52 3. PORTRAIT PAGE BACK TO SUMMARY Portraits are displayed in Commit With Us (CWU) New portraits will not be automatically displayed in the Committed People block of the "Commit With Us" Page. To choose which portrait you want to display, please follow the steps below: "Active People" block To choose which people (portrait) you want to display in the block: 1 Click on "Content" then on "Block. 2 Then, filter by Active people". 3 Click on "Edit the committed_people block. 4 From the list, select the portraits to display in the block. Save. 52

53 3. PORTRAIT PAGE BACK TO SUMMARY Portraits can be displayed in the HR or Local CSR page New portraits will be automatically displayed in the HR page if you choose the typology HR or CSR. 53

54 3. PORTRAIT PAGE BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the portrait, in your local language, you should always follow these steps: - Click on "Content". - Filter by People to display only portraits. - Click on "Your portrait title" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 54

55 4. CREATE A PROOF PAGE Total In Country section

56 4. PROOF PAGE BACK TO SUMMARY Final look of the Proof page Background picture Head Title 1 3. Head Title 2 4. Title Description 6. Slider 7. Short description 8. Image/Proof 9. Text 9 56

57 4. PROOF PAGE BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 57

58 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on "Add content" Click on "Local Project". 58

59 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) 4 Insert the title of your proof (75 characters maximum). 4 5 Insert "Total IN" Insert the name of your country. Must always be the same cover picture as the page "Total IN". Use the search button in the library (the vertical tab on the right of your screen) and use the keyword "cover". Drag and drop it in the field. Dimension required: 960 x 466 pixels. By default, it s the language in which you re editing your website. To change it you must translate this proof into your local language Insert a brief explanation of your proof (350 characters maximum for the introduction text). 59

60 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) 10 Keep text format as "Full Html" Insert your proof image/video here. It will be used in the slider. Either it will already be in your library and you can search for it, or you will have to add it by creating a new atom Insert a short description of the image/video. It will appear in the slider underneath the image/video (260 characters maximum)

61 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) 13 Insert your text here. Make sure you clear all formatting before copy-pasting it into the field. Justify your text once everything is done. - First subtitle for your local proof (42 characters maximum for each subtitle). - Local text corresponding to your local proof (600 characters maximum for each paragraph). - Second subtitle for your local proof. - Local text corresponding to your country. 15 Justify Create subtitles and apply Style "Title H2". 15 Then highlight in bold the subtitle s keyword. 16 Leave text format as "Full Html"

62 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) Leave the "Weight" as zero Link title should always be "get the full story" or the translation in your local language FYI Title (SEO): Defines HTML title, also used by search engines. If this field is empty, the field (1/Title) will be used FYI (Meta)Description: Defines the content for HTML meta description, used to display a short summary of the page in search engine results FYI (Meta)Keywords: Defines the content for HTML meta keywords, used for the page's SEO Optional: if you want your proof to appear on your local CSR page, choose the CSR typology Leave "Generate automatic URL alias" ticked. 62

63 4. PROOF PAGE BACK TO SUMMARY Steps to create a Proof (= Project) 24 Click on "Save". You will be able to see your Proof in "Draft mode. At this stage, it s not published on your website (only visible by you in back office) To publish, click on the "Workflow" tab and then on "Immediate publish". As "log message for this state change" you can write "OK to publish" or anything else

64 4. PROOF PAGE BACK TO SUMMARY Proofs are displayed in TOTAL In Country (TIC) New local projects created are automatically displayed in the Better Energy Projects block of the Total In Country page. You don t need to edit the block! 64

65 4. PROOF PAGE BACK TO SUMMARY Proofs can be displayed on the local CSR page If you choose the typology CSR, your proof will automatically appear on your local CSR page. You don t need to edit the block! 65

66 4. PROOF PAGE BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the proof, in your local language, you should always follow these steps: - Click on "Content". - Filter by Local Project to display only projects. - Click on "Your project title" then click on the tab "Translate". - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 66

67 End of the first Session 21/11/2017

68 Second Session 23/11/2017

69 5. CREATE A PUBLICATION PAGE

70 5. PUBLICATION PAGE BACK TO SUMMARY Final look of the Publication on the media page 1 1. Image 2. Title 3. Interactive file title

71 5. PUBLICATION PAGE BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 71

72 5. PUBLICATION PAGE BACK TO SUMMARY Steps to create a Publication Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on "Add content". 2 3 Click on "Publication". 3 72

73 5. PUBLICATION PAGE BACK TO SUMMARY Steps to create a Publication 4 4 Insert the title of your publication. 5 6 Select the Language of the publication. By default, it s the language in which you re editing your website. To change it you must translate this publication in your local language. Select the Date of the Publication Insert the Title of the interactive file, usually it s "read more". 8 9 Insert the Link (URL) of the interactive file (atom) that you created. Insert the Interactive File using drag and drop from the add media tool on the right. Either the File will already be in your library and you can search for it, or you will have to add it by creating a new atom Please note that you should use both options 5 and 6 (Link to the file and directly attach the file). 73

74 5. PUBLICATION PAGE BACK TO SUMMARY Steps to create a Publication Select an Image for the publication vignette, using drag and drop from the media tool on the right. Either the image will already be in your library and you can search for it, or you will have to add it by creating a new atom. Ignore FYI Title (SEO): Defines HTML title, also used by search engines. If this field is empty, the field (1/Title) will be used. Ignore FYI (Meta)Description: Defines the content for HTML meta description, used to display a short summary of the page in search engine results. Ignore FYI (Meta)Keywords: Defines the content for HTML meta keywords, used for the page's SEO Optional If you want your publication to appear on the global CSR page, choose the appropriate typology Leave "Generate automatic URL alias" ticked

75 5. PUBLICATION PAGE BACK TO SUMMARY Steps to create a Publication Click on "Save". You will be able to see your Proof in "Draft mode". At this stage, it s not published on your website (only visible by you in back office) To publish, click on the "Workflow" tab and then on "Immediate publish". As "log message for this state change" you can write "OK to publish" or anything else

76 5. PUBLICATION PAGE BACK TO SUMMARY Publication is published on the Media page Tips: Once you ve completed these steps, the front office should appear with your new content! If not, empty your browser s cache, close it, wait a few minutes and try again! 76

77 5. PUBLICATION PAGE BACK TO SUMMARY Publication can be published on the global CSR page New publication will be automatically displayed on the HR page if you choose the typology CSR. 77

78 5. PUBLICATION PAGE BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the publication, in your local language, you should always follow these steps: - Click on "Content". - Filter by "Publication" to display only projects. - Click on "Your publication title" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 78

79 7. CREATE A KEY FIGURES PAGE Total In Country section

80 7. KEY FIGURES BACK TO SUMMARY Final look of the Key Figures page 1. Key figures Title 1 2. Key figures Title 2 3. Figure 4. Title Caption 6. Link/URL

81 7. KEY FIGURES BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 81

82 7. KEY FIGURES BACK TO SUMMARY Steps to create a Key Figures Page Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on "Add content". 2 3 Click on "Page Total In". 3 82

83 7. KEY FIGURES BACK TO SUMMARY Steps to create a Key Figures Page 4 Insert "Key". 4 5 Insert "Figures" Insert the first local figure that has been chosen to be displayed in this section it must be the entry date of Total in the country. Insert a Small Value Unit if needed, e.g. percentage, dollars, euros, billion euros, etc. If the small value unit is filled in, it will be displayed. Otherwise, the Long Value Unit is displayed. In this case, the "N/A" option must be chosen in the small value unit display Choose the best display for your value unit if needed. 9 N/A, optional Insert the Title of the key figure, e.g. collaborators, employees, etc. (50 characters maximum). 83

84 7. KEY FIGURES BACK TO SUMMARY Steps to create a Key Figures Page 11 Insert the Local Figure that has been chosen to be displayed in this section Insert a Small Value Unit if needed, e.g. percentage, dollars, euros, billion euros, etc. If the small value unit is filled in, it will be displayed. Otherwise, the long value unit is displayed. In this case, the "N/A" option must be chosen in the small value unit display Choose the best display for your value unit. 14 N/A, optional Insert the Title of the key figure, e.g. collaborators, employees, etc. (50 characters maximum). It s possible to fill in up to 4 key figures. 15 Repeat this step to fill in all of your 4 key figures. 84

85 7. KEY FIGURES BACK TO SUMMARY Steps to create a Key Figures Page 16 Insert the legal reference for the source of the text (mandatory), e.g. "UK environment and social responsibility Report 2013". You can insert only one Source for the 4 key figures Insert "To learn more about Total (255 characters maximum) Insert the "URL": Tick "Open URL in a New Window

86 7. KEY FIGURES BACK TO SUMMARY Steps to create a Key Figures Page 20 Click on "Save". You will be able to see your Total In Country page in "Draft mode". At this stage, it s not published on your website (only visible by you in back office) To publish, click on the "Workflow" tab and then on "Immediate publish". As "log message for this state change" you can write "OK to publish" or anything else

87 7. KEY FIGURES BACK TO SUMMARY Key figures are displayed in TOTAL In Country (TIC) Created Key Figures are automatically displayed in the Key Figures block of the Total In Country page. You may create a maximum of 4 key figures. You don t need to edit the block! 87

88 7. KEY FIGURES BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the key figures, in your local language, you should always follow these steps: - Click on "Content". - Filter by "Page Total In" to display only key figures. - Click on the Page Total In" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 88

89 8. CREATE HOMEPAGE ACTIVITIES BLOCKS Homepage

90 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Final look of the Homepage Activities block Title 1 2. Title 2 3. Local activities 90

91 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Before starting the contribution 1- Always start with atoms Before jumping into creating your proof, portrait, news, publication or partner, always create an Atom for your files. Please refer to section "6. Create an Atom". 2- Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 91

92 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create an Homepage activities block Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 1 Click on "Content" in the black toolbar. 2 2 Then on "Add block". 3 Click on Homepage activities". 3 92

93 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create a Homepage activities block 4 5 Insert the Label of your Homepage activities block to find it easily in your back office Insert the grey Title 1 of your Homepage activities block (75 characters maximum for the title) Insert the red Title 2 of your Homepage activities block (75 characters maximum for the title). 8 7 Create an anchor if necessary to immediately reach your Homepage activities block when you arrive on the homepage. 8 Select the local activity content you want to appear in the your Homepage activities block 9 9 Leave the view mode as Default 93

94 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create a Homepage activities block 10 Click on "Save". You will be able to see your Proof in "Draft mode. At this stage, it s not published on your website (only visible by you in back office) To publish, click on the "Workflow" tab and then on "Immediate publish". As "log message for this state change" you can write "OK to publish" or anything else

95 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create a Homepage activities block Add your Homepage activities block in the homepage structure using context. 12 Click Structure Click on Context 95

96 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create a Homepage activities block Find your homepage structure (label finishing by _homepage ) 13 Edit your homepage structure 96

97 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Steps to create a Homepage activities block Click on Blocks to make appear all blocks structure 17 Tick the box of your Homepage activities bloc (refer to the label you chose step 4) 18 Click on Add of the Content block 19 Save 97

98 8. HOMEPAGE ACTIVITIES BACK TO SUMMARY Last step: translate = create in a second language To create a second version of the Homepage activities blocks, in your local language, you should always follow these steps: - Click on Block". - Filter by Homepage activities to display only Homepage activities blocks. - Click on "Your project title" then click on the "Translate" tab. - Select "Your local language" by clicking on "Add". - You will be able to fill in all the fields with the text translated into your local language this time. - Do not forget to Save and then Publish via the Workflow tab. The "Translate" function in the web factory is not a translator. It will not automatically translate your content into the target language, merely allow you to duplicate the original version in another language. 98

99 9. EDIT HOME PAGE BLOCKS

100 9. HOME PAGE BLOCKS BACK TO SUMMARY Final look of the Local Pillar Blocks Pillar No.1 2. Pillar No.2 3. Pillar No.3 100

101 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.1 Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click on "Content" in the black toolbar. 1 2 Then on Blocks"

102 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.1 3 Select "Pillar" in the list of Blocks. 4 Click on "Filter" Click on "Edit" to start modifying the block

103 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.2 Featuring Local Project (Middle one) Editing this pillar will allow you to change the local project you want to feature on your Home Page. We recommend that you update this part each time you create a new project, so that it refreshes your website content. It s easy and it only take a few minutes to do! This part doesn t need to be changed Part to update 103

104 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.2 Featuring Local Project (Middle one) 1 Please do not change fields 4 (Title), 5 (Subtitle) and 6 (Text). 1 2 Field 7 (Title "A shared history" & URL) should always redirect to the page "Total In" - Do not touch

105 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.2 Featuring Local Project (Middle one) 3 4 Insert a picture to illustrate one of your local projects. The image should be the one used on the local project page. Dimension: 300 x 231 pixels. The crop tool can be useful if you do not want to create a new visual. Insert the Title of the project. It should be the same as the title of the project you re featuring. Check after saving if the characters fit into the dedicated space (143 characters maximum) Insert "Get the Full Story" in the "Title" field (128 characters maximum) Insert the URL of your project page in the URL field. 7 Finally, click on "Save" and check the result on your Home Page. If the modifications don t appear right away, clear your cookies, close and re-open your browser. 105

106 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.3 Featuring a Portrait (Last one) Editing this pillar will allow you to change the portrait you want to feature on your Home Page. We recommend that you update this part each time you create a new portrait, so that it refreshes your website content. It s easy and it only take a few minutes to do! This part doesn t need to be changed Part to update 106

107 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.3 Featuring a Portrait (Last one) 1 2 Please do not change fields 4 (Title), 5 (Subtitle) and 6 (Text). Field 7 (Title Why not you" & URL) should always redirect to the page Commit with us"- Do not touch

108 9. HOME PAGE BLOCKS BACK TO SUMMARY Steps to edit Pillar Block No.3 Featuring a Portrait (Last one) 3 4 Insert a picture to illustrate your portrait. The image should be the one used on the portrait page. Dimension: 300 x 231 pixels. The crop tool can be useful if you do not want to create a new visual. Insert the Title of the project. It should be the same as the title of the portrait you re featuring. Check after saving if the characters fit into the dedicated space (143 characters maximum) Insert Discover xxx s Story" in the "Title" field (128 characters maximum) Insert the URL of your portrait page in the URL field. 7 Finally, click on "Save" and check the result on your Home Page. If the modifications don t appear right away, clear your cookies, close and re-open your browser. 108

109 9. HOME PAGE BLOCKS BACK TO SUMMARY Second language If you have a second language for your website, please follow the same steps after switching the language of your website. 109

110 10. HOW TO MANAGE EXISTING CONTENT

111 10. MANAGE EXISTING CONTENT BACK TO SUMMARY Warning / language Before starting to create any content (atom, project, portrait, etc.), please make sure you re working on the right language page: - Check your URL address and make sure the language is consistent with your website. For instance the Chinese website is in EN/ZH so: chine.cotoben.backoffice.total.com/en/user chine.cotoben.backoffice.total.com/zh-hans/user And not en-us or en-uk or fr (the most commonly made mistakes). If you notice too late that you have created an item in the wrong language, it will not appear in front office and you will not be able to modify the language. You will have to recreate the item in the right language. 111

112 10.1 EDIT

113 10.1 MANAGE EXISTING CONTENT / EDIT BACK TO SUMMARY Edit existing content: partner example Total in Country > our partners In this example, I want to edit the partner "Nenets Oil Company". Partner 113

114 10.1 MANAGE EXISTING CONTENT / EDIT BACK TO SUMMARY Edit existing content: partner example Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click directly on "Content". 1 2 Select "Partner" in the type field. 3 Click on "Apply"

115 10.1 MANAGE EXISTING CONTENT / EDIT BACK TO SUMMARY Edit existing content: partner example Click on "Edit". Once on the modification page, edit the title, description or any other field available. When you re finished, click on "Save/Finish". Tips: Once you ve completed these steps, the modified content should be displayed in your front office. If you can t see the modification right after saving, empty your browser s cache, close it, wait a few minutes and try again! 4 You can apply this process to edit any type of content you find in the content item list of your back office. 115

116 10.2 UNPUBLISH

117 1. NEWS PAGE BACK TO SUMMARY Unpublish existing content: partner example 4 Click on Edit". 5 Once on the modification page, click on "Workflow". 6 Then click on "Unpublish". 7 "Update state" by logging a short message

118 1. NEWS PAGE BACK TO SUMMARY End result: partner unpublished Tips: Once you ve completed these steps, the content should not appear on your front office anymore! If it s still there, empty your browser s cache, close it, wait a few minutes and try again! You can apply this process to unpublish any type of content you find in the content item list of your back office. 118

119 10.3 DELETE

120 1. NEWS PAGE BACK TO SUMMARY Delete existing content: website example Website 120

121 1. NEWS PAGE BACK TO SUMMARY Delete existing content: website example Log into your website back office: tips to land on your back office login page: add "/user" to your country website URL. 1 Click directly on "Content"

122 1. NEWS PAGE BACK TO SUMMARY Find the content in back office: website example 2 Select "Website" in the type field. 3 And Apply the filter. 3 2 Please note that you can apply the same method to the following content: 122

123 1. NEWS PAGE BACK TO SUMMARY Delete the content in back office: website example 4 Find the website/content you want to delete in the list of websites/content. E.g. here: the user wants to delete the CCP Composites website. 5 Click on delete" next to the website/content you want to delete. 6 Repeat these same steps in the other language version of the website, if it hasn t been deleted after this 1 st deletion of the English version

124 1. NEWS PAGE BACK TO SUMMARY End result: content/website deleted Tips: Once you ve completed these steps, the website/content should not appear on your front office anymore! If it s still there, empty your browser s cache, close it, wait a few minutes and try again! You can apply this process to delete any type of content you find in the content item list of your back office. 124