NOTE: Do not use the Divi Builder of Divi backend to edit this page (this page is not Divi compatible).
This section contains system tips and instructional videos related to the Divi System and content modules. Best practices are outlined in order to assist content page developers for entering content.
Getting Started Basics
Translating Page Content
How to Build Menu / Navigation
DIVI Content Management
It’s a good idea to start with the Divi Builder video (the first video below in the Structure and Function section). What is it about the interactive page building system? It’s quite an advancement and once you get to it, you want it to be the effect of everything you do; as you do it.
History Revision – if something went wrong
On any page you can open the history of this page: „Revisions“. Use the slider to go back. You can see the differences in green and red. Sometimes it makes sense even to go to a previous date if things got muddled up too much.
Start a new page translation from the page overview („All pages“):
Or from the German language page, using the Plus or the Check Box to duplicate the page, on the right side column of any page when editing.
The WPML system has been set up to use the automated language management machinery. This means the pages are linked, the correct German page will be linked to the correct French and Italian page automatically.
To familiarize: Make a new sample page that you can trash later (do not publish this page, just save it as a draft. Play with the content in the Divi Builder. That’s the easiest way to become familiar with the Divi Builder.
We are using manual menus for this site.
Important: Colortabs ‚Main Menu‘ = This is the Main Menu on this Website
Now you can add and arrange the items as needed.
Page Design Guide
Corporate Identity – Images
- Use images that come across as sincere and realistic. Avoid the ’stick image look‘, avoid stereotypes. avoid illustration / cartoons, avoid collages. Images should have a realistic and aesthetic atmosphere.
- Images can display humans, objects, can be abstract, or transmit an atmosphere.
- Abstract images can be transmitted on a metaphoric level.
In order to maintain the design schema of your site, please follow this guide for colors and structural ideas while building new pages:
- Image slider background: Fullwidth background Image: 1920×1280
- 1 column: 1080 pixels
- ¾ column: 795 pixels
- ⅔ column: 700 pixels
- ½ column: 524 pixels
- ⅓ column: 320 pixels
- ¼ column: 225 pixels
Parallax wants to give your background images in a position as you scroll.
Slide Image – I want to show you the slide of your slide image. If no slide image is set, then the slide text will be displayed centered. The height of the slide is set by the amount of text on the slide.
Slide images are only appearing in sliders that are in ⅔ column, ¾ column, or 1 column widths.
Slide images will not display more than 768 pixels. The widths of slide images are:
- 1 column: 410 pixels
- ¾ column: 308 pixels
- ⅔ column: 260 pixels
Structure & Function
|Divi Builder||Divi Sections||Divi Rows||Divi Library|
|Right Click Options||Keyboard Shortcuts||WP Design / Menus Section||WPML Menu Management|
|WordPress Menu Management|
Main Content Modules
|text||Accordion – Accordion||Tabs – tab||Toggle switch|
Image Related Content Modules
|Gallery – Gallery||Image – Image||Map – Map||Video|
Full Width Content Modules
|Full Width Header||Full Width Map||Full Width Portfolio||Full Width Slider|
Structural Content Modules
|Sidebar sidebar (insert widgets)|
Interactive Content Modules
|Button – Button||Call to action||Contact form||Social Follow|
Design Type Element Modules
|Divider (= gray line, separated sections)||Slider||Blurb – Information text (image + text)||Testimonial|