Presentation Guidelines
Last Update: July 2025
Background
Apply to all slides automatically.
BASE Background is color #f3f3f3
CANVAS Background is an image file with the following specs: SVG format 1920x1080px transparent background with the RECOA logo and 1 grey line separator
Use this button to automatically set it in all the presentation!
The Grid
Our template has a 4x3 grid that let us set a clean layout of elements with an editorial style.
RECOA Grid Settings in the left-top corner burger menu.
Show Grid
RECOA Grid Settings
Slide Transitions & Navigation
Setting: Fade in / Center Nagivation: Standard
Burger Menu let you access specific sections of a presentation. Once inside a presentation it will appear appear by default in all slides, but you can customize this by editing the settings of the button. The Burger Menu can be placed next to the Audio Bar or in the corner of a Default Bento Box.
Audio Bar & Burger Menu
Aligned to RECOA logo, on right-top corner
This Audio Bar is ready to Copy and Paste into presentations.
Replace audio with a silent Placeholder audio file.mp3
This audio bar is ready to Copy and Paste into presentations.
You can download the MP3 file from Dropbox
Pay attention to the dimensions and position of the audio bar. Please note that all the audio bars should keep the same size along the presentation.
Lesson Title
Typography Hierarchy
Lato Light 80px #36516E Line height 1.1
Subtitles
Lato Bold 36px #36516E Line height 1.15
Avoid using intro animations in texts.
Secondary Subtitle
Lato Black 22px #3c3d41 Line height 1.15
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lato Regular 22px #3c3d41 Line height 1.6
Item A Item B Item C
Lato Regular 22px #3c3d41 Line height 2
Picture Description
Lato Bold Italic 20px #36516E Line height 1.15
Lato Italic 16px #3c3d41
Guidance for Interactivity
Source: Author | Date | Title | Source or URL | Licence Type
Lato Italic 16px ##3c3d41 Opacity 50% (APA style)
Covers
If a presentation needs a cover, use the first column of the grid to place the title and the other 2 to place a representative image.
Formats and colours
Variants for white backgroundcolor #e5edf3
Buttons
Use Orange to highlight interactive elements like buttons and icons.
Orange color has high contrast with RECOA's pallete so it will be easier to spot. color code: #F09031
PLAY
PLAY
Closing Windows
PLAY
CONCLUSION
Right
CONCLUSION
interactive image
If images are interactive, you can choose:
SUBMIT
Wrong
SUBMIT
1Add an filter animation
Animation > Hover mouse> Filter > Setting Customise color as #36515e
Box Sample
ADD FLOAT HOVER EFFECT
Box Sample
2. Add a orange button
Difference between Buttons & Icons
ICON
Text Box Button
Symbol Button
no interactivity
Float Effect when hover
Text and button should direct to the same window
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Use the right mouse click to set the window to more than one element
Navigation Arrows
Color of botton: 36516FColor of text: #494949
Go to first page
Go to previews page
1/2
INACTIVE STATES50% opacityRemove Interactivity
Go to next page
Go to last page
If there are less than 3 slides do not include these buttons
Last Slide
1st Slide
Real Size
9/31
Elements inside the windows
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Blue Line Separator #8dc0d4
Subtitle Lato Bold 36px #36516E
text Lato Regular
Example
Subtitle 1
Image Title or Description (if needed)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
Click on the hotspots for more information
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source: Author | Date | Title | Source or URL | Licence Type
2/3
Interactive elements
Drag the arrows in the middle to compare both images
Source: Integrated Ground Model | Netherlands Enterprise Agency | 4.0 CC BY
Interactive Questions Formats
Widget - Cards
You can add buttons, images, GIFs, icons...
Be carefull if you make the card bigger or smaller, as the texts will also change.
Click fo flip the card
Write a question here
Write an answer here
Title
Use this side of the card to provide more information about a topic.
Concept 1
Concept 2
True
Use this side of the card to provide more information about a topic. Focus on one concept. Make learning and communication more efficient.
Use this side of the card to provide more information about a topic.
Use this side of the card to define Concept 1 and highlight its differences with Concept 2. Compare briefly.
Use this side of the card to define Concept 1 and highlight its differences with Concept 2. Compare briefly.
Use this side of the card to affirm whether a topic or concept is true or false.
Write a question or statement here?
Title
Write a brief description here.
Widget - Cards
Examples
Click fo flip the card
Reports
Yes
Old cables or pipelines no longer in use can pose a risk to installation. Information given just states cables and pipelines, and not if its only active utilities. Historic databases can be consulted to verify the location of any cables and pipelines no longer in use, and if removal of the asset has been documented.
To mitigate this risk, investigations in shallow gas-prone areas require careful planning and specialised safety protocols.
You can see geophysical data from a real-life project, as provided publicly by the Netherlands Enterprise Agency.
Is it still advisable to perform a Utility Desktop Study?
Write a question or statement here
Download
Image source: RECOA
Reminders
When a presentation has many slides and will probably be reviewed in fullscreen mode please add the following reminder on the last slide in the bottom-right corner.
Quotes
We bridge the gap
by offering practical
applicable "educational
programmes".
In British English, single quotation marks (') are used to indicate quotations or dialogue, while double quotation marks (“) are used for nested quotations: Single quotation marks
Used for direct speech or quotations. For example, "The longest chapter in the book is the last one called 'The Future of Africa'". Double quotation marks are used for nested quotations or when quoting within a quote. For example, "This is how British people, as they say, 'do it'"
Satya Tanner - Director at Lautec
We bridge the gap
by offering practical
applicable "educational
programmes".
Satya Tanner - Director at Lautec
A black box is placed in the background to conceal the margins of the video.
Embeded Videos
Videos need to be uploaded to RECOA's Vimeo account and set as Hidden from Vimeo in the privacy settings.
Set a thumbnail cover using a screenshot of the instructor with a good facial expresion.
Color Hierarchy/Proportion
It is important to know how to use the color. Dark Blue and Grey will be dominant in order to give a professional look-and-feel to our compositions. The rest of the color and brighter tones like orange and greens will serve
as highlights to drag attention inside the layouts.
Creative Layout Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
Use your creativity to create interesting designs!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Item 5
Item 3
Item 6
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 6
Item 7
Item 2
Lorem ipsum dolor sit amet, consectetur
Inspiration
Genially has a lot of templates that we can use as inspiration or as a starting point for our designs (specially timelines and maps). Please have a look, analyse the information/data design applied and consider using them if needed to save time when designing an interactive layout.
Fake Windows
IF MORE CONTENT NEED TO BE PLACED THEN IS BETTER TO USE SLIDES TO SEPARATE THE CONTENT MIMICKING THE WINDOW FORMAT
Navigation arrows inside the ''Window'' Slide
1/2
Test your knowledge
TITLE 55 pt Lato light
Instructions
Final Message
Correct Input Icon
Embedding Content
It is possible to integrate external content with an html iframe codes, see an example below. The codes may need to be adapted according to the source characteristics and restrictions. See example below. Each vessel has a MMSI number that can be found in the marine traffic site, replace the number highlighted in the code before inserting the code in the 'insert'> 'others' section. Resize the map once it is on the slide, the bigger the better it displays.
<iframe src="https://www.marinetraffic.com/en/ais/embed/mmsi:253134000" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Before Publishing...
If there are Genially Interactive Questions in the presentation please disable the test scores and the name input.
Disable this 2 options
Before Publishing...
Make sure to turn off "Monitor Your Genially" & "User Tracking" in Analytics section
Before Publishing...
Set in private and make sure all the other sharing options are disable
1. Disable Sharing
Before Publishing...
2. Enable Fullscreen (unless it is a small material)
Before Publishing...
1. Copy and paste the code inside the box
2. Resize and place the resulting transparent boxes in the left-bottom corner of the first slide.
Disable the right-click button and the cut/copy/paste function by inserting the following code:
<script> document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
document.addEventListener('copy', function(e) {
e.preventDefault();
alert('You shall not copy!');
});
document.addEventListener('paste', function(e) {
e.preventDefault();
alert('Sorry! Paste function is disabled.');
});
document.addEventListener('cut', function(e) {
e.preventDefault();
alert('Cut function is disabled on this website.');
}); </script>
After Publishing...
CHECK YOUR DESIGN ON THINKIFIC IN MEDIUM AND LARGE DISPLAYS
- Is text readable?
- Is the layout design functional in fullscreen mode?
- Have all images the right size and resolution?
- Is the overall design responsive?
- What else can be improved?
Space for additional information
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
- Labore et dolore magna aliqua.
Space for additional information
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
Lorem ipsum dolor sit
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
- Lorem ipsum dolor sit amet.
- Consectetur adipiscing elit.
- Sed do eiusmod tempor incididunt ut.
Lorem ipsum dolor sit
Genially Guidelines 2025
Recoa Production
Created on July 2, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Smart Presentation
View
Practical Presentation
View
Essential Presentation
View
Akihabara Presentation
View
Flow Presentation
View
Dynamic Visual Presentation
View
Pastel Color Presentation
Explore all templates
Transcript
Presentation Guidelines
Last Update: July 2025
Background
Apply to all slides automatically.
BASE Background is color #f3f3f3
CANVAS Background is an image file with the following specs: SVG format 1920x1080px transparent background with the RECOA logo and 1 grey line separator
Use this button to automatically set it in all the presentation!
The Grid
Our template has a 4x3 grid that let us set a clean layout of elements with an editorial style.
RECOA Grid Settings in the left-top corner burger menu.
Show Grid
RECOA Grid Settings
Slide Transitions & Navigation
Setting: Fade in / Center Nagivation: Standard
Burger Menu let you access specific sections of a presentation. Once inside a presentation it will appear appear by default in all slides, but you can customize this by editing the settings of the button. The Burger Menu can be placed next to the Audio Bar or in the corner of a Default Bento Box.
Audio Bar & Burger Menu
Aligned to RECOA logo, on right-top corner
This Audio Bar is ready to Copy and Paste into presentations.
Replace audio with a silent Placeholder audio file.mp3
This audio bar is ready to Copy and Paste into presentations.
You can download the MP3 file from Dropbox
Pay attention to the dimensions and position of the audio bar. Please note that all the audio bars should keep the same size along the presentation.
Lesson Title
Typography Hierarchy
Lato Light 80px #36516E Line height 1.1
Subtitles
Lato Bold 36px #36516E Line height 1.15
Avoid using intro animations in texts.
Secondary Subtitle
Lato Black 22px #3c3d41 Line height 1.15
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lato Regular 22px #3c3d41 Line height 1.6
Item A Item B Item C
Lato Regular 22px #3c3d41 Line height 2
Picture Description
Lato Bold Italic 20px #36516E Line height 1.15
Lato Italic 16px #3c3d41
Guidance for Interactivity
Source: Author | Date | Title | Source or URL | Licence Type
Lato Italic 16px ##3c3d41 Opacity 50% (APA style)
Covers
If a presentation needs a cover, use the first column of the grid to place the title and the other 2 to place a representative image.
Formats and colours
Variants for white backgroundcolor #e5edf3
Buttons
Use Orange to highlight interactive elements like buttons and icons.
Orange color has high contrast with RECOA's pallete so it will be easier to spot. color code: #F09031
PLAY
PLAY
Closing Windows
PLAY
CONCLUSION
Right
CONCLUSION
interactive image
If images are interactive, you can choose:
SUBMIT
Wrong
SUBMIT
1Add an filter animation
Animation > Hover mouse> Filter > Setting Customise color as #36515e
Box Sample
ADD FLOAT HOVER EFFECT
Box Sample
2. Add a orange button
Difference between Buttons & Icons
ICON
Text Box Button
Symbol Button
no interactivity
Float Effect when hover
Text and button should direct to the same window
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Use the right mouse click to set the window to more than one element
Navigation Arrows
Color of botton: 36516FColor of text: #494949
Go to first page
Go to previews page
1/2
INACTIVE STATES50% opacityRemove Interactivity
Go to next page
Go to last page
If there are less than 3 slides do not include these buttons
Last Slide
1st Slide
Real Size
9/31
Elements inside the windows
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Please note that all the audio bars should keep the same size as the audio bars outside the windows.
Blue Line Separator #8dc0d4
Subtitle Lato Bold 36px #36516E
text Lato Regular
Example
Subtitle 1
Image Title or Description (if needed)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
Click on the hotspots for more information
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source: Author | Date | Title | Source or URL | Licence Type
2/3
Interactive elements
Drag the arrows in the middle to compare both images
Source: Integrated Ground Model | Netherlands Enterprise Agency | 4.0 CC BY
Interactive Questions Formats
Widget - Cards
You can add buttons, images, GIFs, icons...
Be carefull if you make the card bigger or smaller, as the texts will also change.
Click fo flip the card
Write a question here
Write an answer here
Title
Use this side of the card to provide more information about a topic.
Concept 1
Concept 2
True
Use this side of the card to provide more information about a topic. Focus on one concept. Make learning and communication more efficient.
Use this side of the card to provide more information about a topic.
Use this side of the card to define Concept 1 and highlight its differences with Concept 2. Compare briefly.
Use this side of the card to define Concept 1 and highlight its differences with Concept 2. Compare briefly.
Use this side of the card to affirm whether a topic or concept is true or false.
Write a question or statement here?
Title
Write a brief description here.
Widget - Cards
Examples
Click fo flip the card
Reports
Yes
Old cables or pipelines no longer in use can pose a risk to installation. Information given just states cables and pipelines, and not if its only active utilities. Historic databases can be consulted to verify the location of any cables and pipelines no longer in use, and if removal of the asset has been documented.
To mitigate this risk, investigations in shallow gas-prone areas require careful planning and specialised safety protocols.
You can see geophysical data from a real-life project, as provided publicly by the Netherlands Enterprise Agency.
Is it still advisable to perform a Utility Desktop Study?
Write a question or statement here
Download
Image source: RECOA
Reminders
When a presentation has many slides and will probably be reviewed in fullscreen mode please add the following reminder on the last slide in the bottom-right corner.
Quotes
We bridge the gap by offering practical applicable "educational programmes".
In British English, single quotation marks (') are used to indicate quotations or dialogue, while double quotation marks (“) are used for nested quotations: Single quotation marks Used for direct speech or quotations. For example, "The longest chapter in the book is the last one called 'The Future of Africa'". Double quotation marks are used for nested quotations or when quoting within a quote. For example, "This is how British people, as they say, 'do it'"
Satya Tanner - Director at Lautec
We bridge the gap by offering practical applicable "educational programmes".
Satya Tanner - Director at Lautec
A black box is placed in the background to conceal the margins of the video.
Embeded Videos
Videos need to be uploaded to RECOA's Vimeo account and set as Hidden from Vimeo in the privacy settings.
Set a thumbnail cover using a screenshot of the instructor with a good facial expresion.
Color Hierarchy/Proportion
It is important to know how to use the color. Dark Blue and Grey will be dominant in order to give a professional look-and-feel to our compositions. The rest of the color and brighter tones like orange and greens will serve as highlights to drag attention inside the layouts.
Creative Layout Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
Use your creativity to create interesting designs!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Item 5
Item 3
Item 6
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 6
Item 7
Item 2
Lorem ipsum dolor sit amet, consectetur
Inspiration
Genially has a lot of templates that we can use as inspiration or as a starting point for our designs (specially timelines and maps). Please have a look, analyse the information/data design applied and consider using them if needed to save time when designing an interactive layout.
Fake Windows
IF MORE CONTENT NEED TO BE PLACED THEN IS BETTER TO USE SLIDES TO SEPARATE THE CONTENT MIMICKING THE WINDOW FORMAT
Navigation arrows inside the ''Window'' Slide
1/2
Test your knowledge
TITLE 55 pt Lato light
Instructions
Final Message
Correct Input Icon
Embedding Content
It is possible to integrate external content with an html iframe codes, see an example below. The codes may need to be adapted according to the source characteristics and restrictions. See example below. Each vessel has a MMSI number that can be found in the marine traffic site, replace the number highlighted in the code before inserting the code in the 'insert'> 'others' section. Resize the map once it is on the slide, the bigger the better it displays.
<iframe src="https://www.marinetraffic.com/en/ais/embed/mmsi:253134000" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Before Publishing...
If there are Genially Interactive Questions in the presentation please disable the test scores and the name input.
Disable this 2 options
Before Publishing...
Make sure to turn off "Monitor Your Genially" & "User Tracking" in Analytics section
Before Publishing...
Set in private and make sure all the other sharing options are disable
1. Disable Sharing
Before Publishing...
2. Enable Fullscreen (unless it is a small material)
Before Publishing...
1. Copy and paste the code inside the box
2. Resize and place the resulting transparent boxes in the left-bottom corner of the first slide.
Disable the right-click button and the cut/copy/paste function by inserting the following code:
<script> document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); document.addEventListener('copy', function(e) { e.preventDefault(); alert('You shall not copy!'); }); document.addEventListener('paste', function(e) { e.preventDefault(); alert('Sorry! Paste function is disabled.'); }); document.addEventListener('cut', function(e) { e.preventDefault(); alert('Cut function is disabled on this website.'); }); </script>
After Publishing...
CHECK YOUR DESIGN ON THINKIFIC IN MEDIUM AND LARGE DISPLAYS
Space for additional information
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit
Space for additional information
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit
Lorem ipsum dolor
Consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor sit