MeVisLab · okonrad · Apr 29, 2026 · Apr 28, 2026
diff --git a/mevislab.github.io/content/tutorials/basicmechanisms/macromodules/guidesign.md b/mevislab.github.io/content/tutorials/basicmechanisms/macromodules/guidesign.md
@@ -81,10 +81,6 @@ In the *Parameters* section, you can define *fields* of your macro module. These
 ### Module Panel Layout
 To create your own user interface, we need to create a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_Window" "Window" >}}. A window is one of the layout elements that exist in MDL. These layout elements are called {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#Controls" "controls" >}}. The curled brackets define the window section, in which you can define properties of the window and insert further controls like a {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#mdl_Box" "Box" >}}.
 
-{{<alert class="info" caption="Info">}}
-We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.
-{{</alert>}}
-
 Initially, we call the window *MyWindowTitle*, which can be used to reference this window.
 
 Double-clicking {{< mousebutton "left" >}} on your module now opens your first self-developed user interface.
@@ -118,6 +114,12 @@ Window MyWindowName {
 
 ![Module panel](images/tutorials/basicmechanics/ModulePanel.png "Module panel")
 
+{{<alert class="info" caption="Info">}}
+We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.
+{{</alert>}}
+
+![Module panel without margin](images/tutorials/basicmechanics/ModulePanel_noMargin.png "Module panel without margin")
+
 You can define different properties of your control. For a window, you can, for example, define a title, or whether the
 window should be shown in full screen (*fullscreen = Yes*).
 

diff --git a/mevislab.github.io/content/tutorials/summary/summary3.md b/mevislab.github.io/content/tutorials/summary/summary3.md
@@ -70,15 +70,17 @@ Window {
 ```
 {{</highlight>}}
 
-{{<alert class="info" caption="Info">}}
-We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.{{</alert>}}
-
 You can preview your initial layout in MeVisLab by double-clicking your module {{< mousebutton "left" >}}.
 
 ![Initial window layout](images/tutorials/summary/Example3_1.png "Initial window layout")
 
 You can see the four vertical aligned parts as defined in the *.script* file. Now, we are going to add the content of the boxes.
 
+{{<alert class="info" caption="Info">}}
+We use *Category* as the top-level layouter in the *Window* to give the inner content a small margin. Otherwise, the controls touch the border of the window and look unappealing.{{</alert>}}
+
+![Initial window layout without margin](images/tutorials/summary/Example3_1_noMargin.png "Initial window layout without margin")
+
 {{<alert class="info" caption="Additional Info">}}
 An overview over the existing layout elements in MeVisLab Definition Language (MDL) can be found {{< docuLinks "/Resources/Documentation/Publish/SDK/MDLReference/index.html#N11695" "here" >}}
 {{</alert>}}

diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/HorizontalLayout.png b/mevislab.github.io/static/images/tutorials/basicmechanics/HorizontalLayout.png
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/ModulePanel.png b/mevislab.github.io/static/images/tutorials/basicmechanics/ModulePanel.png
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/ModulePanel_noMargin.png b/mevislab.github.io/static/images/tutorials/basicmechanics/ModulePanel_noMargin.png
diff --git a/mevislab.github.io/static/images/tutorials/basicmechanics/VerticalLayout.png b/mevislab.github.io/static/images/tutorials/basicmechanics/VerticalLayout.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_1.png b/mevislab.github.io/static/images/tutorials/summary/Example3_1.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_1_noMargin.png b/mevislab.github.io/static/images/tutorials/summary/Example3_1_noMargin.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_2.png b/mevislab.github.io/static/images/tutorials/summary/Example3_2.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_3.png b/mevislab.github.io/static/images/tutorials/summary/Example3_3.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_4.png b/mevislab.github.io/static/images/tutorials/summary/Example3_4.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_4b.png b/mevislab.github.io/static/images/tutorials/summary/Example3_4b.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example3_5.png b/mevislab.github.io/static/images/tutorials/summary/Example3_5.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example5_15.png b/mevislab.github.io/static/images/tutorials/summary/Example5_15.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example6_1.png b/mevislab.github.io/static/images/tutorials/summary/Example6_1.png
diff --git a/mevislab.github.io/static/images/tutorials/summary/Example7_4.png b/mevislab.github.io/static/images/tutorials/summary/Example7_4.png