SCRED

DashboardSeite

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

Creating Content

  1. When adding a new page or entering content start in the root language, in this system „German“. Once a page is completed, then you can translate it to other languages.
  2. Go to „Seiten“/Pages and add a new page, or click inside the WordPress top Utility Menu (black) the plus symbol.
  3. Always use the Divi Builder.
  4. Add content, section (s), row (s) and modules. Mainly you will probably use the text, image, and accordion modules.
  5. Save page.
  6. It is very helpful once the page is layed out, to use also the „Visual Builder“ to make adjustments, such as for example removing white space between modules.
  7. Tip: German language words can be very long, you can add a „non-showing“ soft-hyphen: ­
    When in a text module, click to edit the text instead of „visual“ to „text“ (which displays and lets you edit the html text). Enter this code ­ inside long words, inbetween the syllables,
    where you think would make sence to hyphenate. Example: Ausbildungstransparenz -> Ausbildungs­transparenz
  8. Make sure the speech marks are constantly the same: not „word“ but «word»
  9. Duplicate content: you can right-click (option-click) in any module on the left side and choose to copy this module or section.
    Go to the page you wold like to insert it and right-click (option-click) and choose from the contextual menu to insert it.
  10. French language has a non-braking empty space before :;!?“  
  11. To prevent line break: <span style=“white-space:nowrap“>MiND-H</span>  

    Or if between two words that have an empty space in between them: No&nbsp;word&nbsp;word

Translating Page Content

  1. Before translating, build your main-language page out fully and save it.
  2. Open the main-language page you want to translate in German and you see in the right column the Translation interface: „Translate this Document“.
    You can chose to „Duplicate“ the page into the desired language, which copies page structure and modules with their content (images, text). This is the easiest way to start the new language page.
  3. Or: Go to „Seiten“/Pages and and click on the symbol (see image below) for the language you want to translate.

How to Build Menu / Navigation

  1. Go to the „Design“ tab and choose „Menus„. From there you can place with drag and drop the item in the navigation structure.
  2. It is important to place new page content in the main menu structure on second level. This ensures that the item is written in the sub navigation menu.
  3. First, click on the page you chose to add to the menu (in left side box)
  4. Once this page appears on the right side menu structure, simply drag the new menu item in the menu in the menu structure to the correct place.
  5. You can place the menu item anywhere using this method.

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.

 

WPML

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 secondary language 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.

Menu Management

We are using manual menus for this site.
Go to Design / Menus in the menu on the left.
When in Menus (Menüs) and select the language of the menu you want to edit. Choose the menu type you want to edit („Wähle ein Menu zum Bearbeiten“), then click the button „Select“ („Auswählen“). The name of the main menu is ‚Main‚. To manage the main menu in other languages ​​you would switch to the specific menu name for each language.

Important: ‚Main‘ = This is the Main Menu on this Website

  • Main-EN
  • Main-DE

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 ’stock image look‘, avoid stereotypes. avoid illustration / cartoons. 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 Dimensions

  • 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

 

Tutorials

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


Modules

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

Additional modules
Divider (= gray line, separated sections) Slider Blurb – Information text (image + text) Testimonial