QmlDesigner: Update effects specifics

Update studio components effects specifics for the property editor

Task-number: QDS-4945
Change-Id: Ie4f910eb4480edd07bc434d6f450ef1d69172a9e
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

42 files changed, 1680 insertions, 1272 deletions

diff --git a/src/imports/effects/designer/BlendEffectSpecifics.qml b/src/imports/effects/designer/BlendEffectSpecifics.qml
index 10ee2a6..6398e7e 100644
--- a/src/imports/effects/designer/BlendEffectSpecifics.qml
+++ b/src/imports/effects/designer/BlendEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,23 +42,24 @@ Column {
         caption: qsTr("Blend")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Mode")
-                toolTip: qsTr("The mode which is used when foreground source is blended over "
-                               + "source.")
+                tooltip: qsTr("The mode which is used when foreground source is blended over "
+                              + "source.")
             }
+
             SecondColumnLayout {
                 ComboBox {
                     id: blendMode
-
                     backendValue: backendValues.mode
-                    Layout.fillWidth: true
-
                     useInteger: true
                     manualMapping: true
-
-                    model: ["normal", "addition", "average", "color", "colorBurn", "colorDodge", "darken", "darkerColor", "difference", "divide", "exclusion", "hardLight", "hue", "lighten", "lighterColor", "lightness", "multiply", "negation", "saturation", "screen", "subtract", "softLight"]
+                    model: ["normal", "addition", "average", "color", "colorBurn", "colorDodge",
+                        "darken", "darkerColor", "difference", "divide", "exclusion", "hardLight",
+                        "hue", "lighten", "lighterColor", "lightness", "multiply", "negation",
+                        "saturation", "screen", "subtract", "softLight"]
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
 
                     property bool block: false
 
@@ -78,8 +80,7 @@ Column {
                         onSelectionChanged: blendMode.fromBackendToFrontend()
                     }
 
-                    function fromBackendToFrontend()
-                    {
+                    function fromBackendToFrontend() {
                         if (!__isCompleted)
                             return
 
@@ -90,23 +91,25 @@ Column {
                         block = false
                     }
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Foreground Source")
-                toolTip: qsTr("The item that is going to be blended over the source.")
+            PropertyLabel {
+                text: qsTr("Foreground source")
+                tooltip: qsTr("The component that is going to be blended over the source.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.foregroundSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -117,20 +120,22 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
                     Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/BrightnessContrastEffectSpecifics.qml b/src/imports/effects/designer/BrightnessContrastEffectSpecifics.qml
index 545d9aa..2efc2a8 100644
--- a/src/imports/effects/designer/BrightnessContrastEffectSpecifics.qml
+++ b/src/imports/effects/designer/BrightnessContrastEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,42 +42,45 @@ Column {
         caption: qsTr("Brightness and Contrast")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Brightness")
-                toolTip: qsTr("The increase or decrease of source brightness.")
+                tooltip: qsTr("The increase or decrease of source brightness.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.brightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Contrast")
-                toolTip: qsTr("The increase or decrease of source contrast. The decrease of the "
+                tooltip: qsTr("The increase or decrease of source contrast. The decrease of the "
                               + "contrast is linear, but the increase is applied with a "
                               + "non-linear curve to allow very high contrast adjustment at the "
                               + "high end of the value range.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.contrast
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -87,20 +91,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/ColorOverlayEffectSpecifics.qml b/src/imports/effects/designer/ColorOverlayEffectSpecifics.qml
index 9c1e303..9bfc7ee 100644
--- a/src/imports/effects/designer/ColorOverlayEffectSpecifics.qml
+++ b/src/imports/effects/designer/ColorOverlayEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Overlay Color")
 
-        ColorEditor {
-            caption: qsTr("Overlay Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Overlay color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,20 +57,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/ColorizeEffectSpecifics.qml b/src/imports/effects/designer/ColorizeEffectSpecifics.qml
index a5c7e24..6410e8c 100644
--- a/src/imports/effects/designer/ColorizeEffectSpecifics.qml
+++ b/src/imports/effects/designer/ColorizeEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,60 +42,64 @@ Column {
         caption: qsTr("Colorize")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Hue")
-                toolTip: qsTr("The hue value which is used to colorize the source.")
+                tooltip: qsTr("The hue value which is used to colorize the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.hue
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Lightness")
-                toolTip: qsTr("The increase or decrease of source lightness value. Unlike hue and "
+                tooltip: qsTr("The increase or decrease of source lightness value. Unlike hue and "
                               + "saturation properties, lightness does not set the used value, but "
                               + "it shifts the existing source pixel lightness value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.lightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Saturation")
-                toolTip: qsTr("The saturation value which is used to colorize the source.")
+                tooltip: qsTr("The saturation value which is used to colorize the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.saturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 
@@ -104,20 +109,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/DesaturationEffectSpecifics.qml b/src/imports/effects/designer/DesaturationEffectSpecifics.qml
index 4ea4f04..40d5e4e 100644
--- a/src/imports/effects/designer/DesaturationEffectSpecifics.qml
+++ b/src/imports/effects/designer/DesaturationEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,22 +42,23 @@ Column {
         caption: qsTr("Desaturation")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Desaturation")
-                toolTip: qsTr("How much the source colors are desaturated.")
+                tooltip: qsTr("How much the source colors are desaturated.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.desaturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -67,20 +69,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/DirectionalBlurEffectSpecifics.qml b/src/imports/effects/designer/DirectionalBlurEffectSpecifics.qml
index 83f6a47..f23ef8c 100644
--- a/src/imports/effects/designer/DirectionalBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/DirectionalBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,77 +27,80 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
-    id: root
     anchors.left: parent.left
     anchors.right: parent.right
 
-    property int spinBoxWidth: 90
-
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
         caption: qsTr("Directional Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Angle")
-                toolTip: qsTr("The direction for the blur. Blur is applied to both sides of each "
+                tooltip: qsTr("The direction for the blur. Blur is applied to both sides of each "
                               + "pixel. Therefore, setting the direction to 0 and 180 produces "
                               + "the same result.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.angle
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 1
                     minimumValue: -180
                     maximumValue: 180
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Length")
-                toolTip: qsTr("The perceived amount of movement for each pixel. The movement is "
+                tooltip: qsTr("The perceived amount of movement for each pixel. The movement is "
                               + "divided evenly to both sides of each pixel.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.length
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -109,36 +112,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/DisplaceEffectSpecifics.qml b/src/imports/effects/designer/DisplaceEffectSpecifics.qml
index e5df92f..88eaa1d 100644
--- a/src/imports/effects/designer/DisplaceEffectSpecifics.qml
+++ b/src/imports/effects/designer/DisplaceEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,38 +42,41 @@ Column {
         caption: qsTr("Displace")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Displacement")
-                toolTip: qsTr("The scale for the displacement. The bigger the scale, the bigger "
+                tooltip: qsTr("The scale for the displacement. The bigger the scale, the bigger "
                               + "the displacement of the pixels.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.displacement
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Displacement source")
-                toolTip: qsTr("The item that is going to be used as the displacement map.")
+                tooltip: qsTr("The component that is going to be used as the displacement map.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.displacementSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -83,20 +87,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/DropShadowEffectSpecifics.qml b/src/imports/effects/designer/DropShadowEffectSpecifics.qml
index 2bb07c1..f98f27f 100644
--- a/src/imports/effects/designer/DropShadowEffectSpecifics.qml
+++ b/src/imports/effects/designer/DropShadowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Drop Shadow Color")
 
-        ColorEditor {
-            caption: qsTr("Drop Shadow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Drop shadow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,60 +57,65 @@ Column {
         caption: qsTr("Drop Shadow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
                               + "shadow to appear more blurry.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the shadow color that is strengthened near the source "
+                tooltip: qsTr("The part of the shadow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -117,41 +126,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset for the rendered shadow compared to the "
-                              + "drop shadow component's horizontal position.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset for the rendered shadow compared to the drop "
-                              + "shadow component's vertical position.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -162,36 +182,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/FastBlurEffectSpecifics.qml b/src/imports/effects/designer/FastBlurEffectSpecifics.qml
index 8b57c80..a6f1c17 100644
--- a/src/imports/effects/designer/FastBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/FastBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,23 +42,24 @@ Column {
         caption: qsTr("Fast Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -68,36 +70,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/GammaAdjustEffectSpecifics.qml b/src/imports/effects/designer/GammaAdjustEffectSpecifics.qml
index 8493204..0f61c2d 100644
--- a/src/imports/effects/designer/GammaAdjustEffectSpecifics.qml
+++ b/src/imports/effects/designer/GammaAdjustEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,22 +42,23 @@ Column {
         caption: qsTr("Gamma Adjust")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Gamma")
-                toolTip: qsTr("The change factor for how the luminance of each pixel is altered.")
+                tooltip: qsTr("The change factor for how the luminance of each pixel is altered.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.gamma
-                    Layout.preferredWidth: 100
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -67,20 +69,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/GaussianBlurEffectSpecifics.qml b/src/imports/effects/designer/GaussianBlurEffectSpecifics.qml
index 8859fff..658c42b 100644
--- a/src/imports/effects/designer/GaussianBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/GaussianBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,12 +42,12 @@ Column {
         caption: qsTr("Gaussian Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -54,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Deviation")
-                toolTip: qsTr("A parameter to the gaussian function that is used when calculating "
+                tooltip: qsTr("A parameter to the gaussian function that is used when calculating "
                               + "neighboring pixel weights for the blurring.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.deviation
@@ -71,16 +75,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 50
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
@@ -88,9 +95,11 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -101,36 +110,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/GlowEffectSpecifics.qml b/src/imports/effects/designer/GlowEffectSpecifics.qml
index 7c7882a..181f807 100644
--- a/src/imports/effects/designer/GlowEffectSpecifics.qml
+++ b/src/imports/effects/designer/GlowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Glow Color")
 
-        ColorEditor {
-            caption: qsTr("Glow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Glow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,63 +57,68 @@ Column {
         caption: qsTr("Glow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the glow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the glow. A larger radius causes the edges of the "
                               + "glow to appear more blurry. Depending on the radius value, value "
                               + "of the samples should be set to sufficiently large to ensure the "
                               + "visual quality.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. A larger "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. A larger "
                               + "value produces better quality, but is slower to render. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the glow color that is strengthened near the source "
+                tooltip: qsTr("The part of the glow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -120,36 +129,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/HueSaturationEffectSpecifics.qml b/src/imports/effects/designer/HueSaturationEffectSpecifics.qml
index 26e1f94..8c8d127 100644
--- a/src/imports/effects/designer/HueSaturationEffectSpecifics.qml
+++ b/src/imports/effects/designer/HueSaturationEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,59 +42,63 @@ Column {
         caption: qsTr("Hue and Saturation")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Hue")
-                toolTip: qsTr("The hue value which is added to the source hue value.")
+                tooltip: qsTr("The hue value which is added to the source hue value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.hue
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Lightness")
-                toolTip: qsTr("The lightness value which is added to the source saturation value.")
+                tooltip: qsTr("The lightness value which is added to the source saturation value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.lightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Saturation")
-                toolTip: qsTr("The saturation value value which is added to the source saturation "
+                tooltip: qsTr("The saturation value value which is added to the source saturation "
                               + "value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.saturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 
@@ -103,20 +108,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/InnerShadowEffectSpecifics.qml b/src/imports/effects/designer/InnerShadowEffectSpecifics.qml
index 32ac0bd..8160925 100644
--- a/src/imports/effects/designer/InnerShadowEffectSpecifics.qml
+++ b/src/imports/effects/designer/InnerShadowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Inner Shadow Color")
 
-        ColorEditor {
-            caption: qsTr("Inner Shadow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Inner shadow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,75 +57,82 @@ Column {
         caption: qsTr("Inner Shadow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
                               + "shadow to appear more blurry.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the shadow color that is strengthened near the source "
+                tooltip: qsTr("The part of the shadow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Fast")
-                toolTip: qsTr("The blurring algorithm that is used to produce the softness for the "
+                tooltip: qsTr("The blurring algorithm that is used to produce the softness for the "
                               + "effect.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.fast
                     text: backendValues.fast.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -132,41 +143,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset for the rendered shadow compared to the inner "
-                              + "shadow component's horizontal position.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset for the rendered shadow compared to the inner "
-                              + "shadow component's vertical position. ")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -177,20 +199,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/LevelAdjustEffectSpecifics.qml b/src/imports/effects/designer/LevelAdjustEffectSpecifics.qml
index 7981398..6ce7fdd 100644
--- a/src/imports/effects/designer/LevelAdjustEffectSpecifics.qml
+++ b/src/imports/effects/designer/LevelAdjustEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,105 +42,121 @@ Column {
         caption: qsTr("Level Adjust")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Gamma")
-                toolTip: qsTr("The change factor for how the luminance of each pixel is altered.")
+                tooltip: qsTr("The change factor for how the luminance of each pixel is altered.")
             }
+
             SecondColumnLayout {
-                ColumnLayout {
-                    RowLayout {
-                        Label {
-                            text: qsTr("R")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaR
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
-                    RowLayout {
-                        Label {
-                            text: qsTr("G")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaG
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
-                    RowLayout {
-                        Label {
-                            text: qsTr("B")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaB
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaR
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("R", "red")
                 }
+
+                ExpandingSpacer {}
             }
-        }
-    }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Minimum Input")
+            PropertyLabel {}
 
-        ColorEditor {
-            caption: qsTr("Minimum Input")
-            backendValue: backendValues.minimumInput
-            supportGradient: false
-        }
-    }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaG
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Minimum Output")
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("G", "green")
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {}
 
-        ColorEditor {
-            caption: qsTr("Minimum Output")
-            backendValue: backendValues.minimumOutput
-            supportGradient: false
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaB
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("B", "blue")
+                }
+
+                ExpandingSpacer {}
+            }
         }
     }
 
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Maximum Input")
+        caption: qsTr("Input")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Minimum") }
+
+            ColorEditor {
+                backendValue: backendValues.minimumInput
+                supportGradient: false
+            }
 
-        ColorEditor {
-            caption: qsTr("Maximum Input")
-            backendValue: backendValues.maximumInput
-            supportGradient: false
+            PropertyLabel { text: qsTr("Maximum") }
+
+            ColorEditor {
+                backendValue: backendValues.maximumInput
+                supportGradient: false
+            }
         }
     }
 
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Maximum Output")
+        caption: qsTr("Output")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Minimum") }
+
+            ColorEditor {
+                backendValue: backendValues.minimumOutput
+                supportGradient: false
+            }
 
-        ColorEditor {
-            caption: qsTr("Maximum Output")
-            backendValue: backendValues.maximumOutput
-            supportGradient: false
+            PropertyLabel { text: qsTr("Maximum") }
+
+            ColorEditor {
+                backendValue: backendValues.maximumOutput
+                supportGradient: false
+            }
         }
     }
 
@@ -149,20 +166,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/MaskedBlurEffectSpecifics.qml b/src/imports/effects/designer/MaskedBlurEffectSpecifics.qml
index 37bc3c1..c075e6f 100644
--- a/src/imports/effects/designer/MaskedBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/MaskedBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,12 +42,12 @@ Column {
         caption: qsTr("Masked Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -54,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
@@ -71,24 +75,28 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The component that controls the final intensity of the blur.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that controls the final intensity of the blur.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -99,20 +107,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/OpacityMaskEffectSpecifics.qml b/src/imports/effects/designer/OpacityMaskEffectSpecifics.qml
index 3922ffd..82a8940 100644
--- a/src/imports/effects/designer/OpacityMaskEffectSpecifics.qml
+++ b/src/imports/effects/designer/OpacityMaskEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,33 +42,37 @@ Column {
         caption: qsTr("Opacity Mask")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Invert")
-                toolTip: qsTr("Controls how the alpha values of the source mask will behave.")
+                tooltip: qsTr("Controls how the alpha values of the source mask will behave.")
             }
+
             SecondColumnLayout {
                 CheckBox {
                     backendValue: backendValues.invert
                     text: backendValues.invert.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The item that is going to be used as the mask.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that is going to be used as the mask.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -78,20 +83,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/RadialBlurEffectSpecifics.qml b/src/imports/effects/designer/RadialBlurEffectSpecifics.qml
index 83d47ff..eb018f6 100644
--- a/src/imports/effects/designer/RadialBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/RadialBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,44 +42,47 @@ Column {
         caption: qsTr("Radial Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Angle")
-                toolTip: qsTr("The direction for the blur and at the same time the level of "
+                tooltip: qsTr("The direction for the blur and at the same time the level of "
                               + "blurring. The larger the angle, the more the result becomes "
                               + "blurred. The quality of the blur depends on samples property.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.angle
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 360
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render. This property is not "
                               + "intended to be animated. Changing this property may cause the "
                               + "underlying OpenGL shaders to be recompiled.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 200
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -89,41 +93,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset in pixels for the perceived center point of "
-                              + "the rotation.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset in pixels for the perceived center point of the "
-                              + "rotation.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -134,35 +149,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
-            Label {
+
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/RecursiveBlurEffectSpecifics.qml b/src/imports/effects/designer/RecursiveBlurEffectSpecifics.qml
index d62a372..c23c3f2 100644
--- a/src/imports/effects/designer/RecursiveBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/RecursiveBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,13 +42,12 @@ Column {
         caption: qsTr("Recursive Blur")
 
         SectionLayout {
-            rows: 2
-
-            Label {
+            PropertyLabel {
                 text: qsTr("Loops")
-                toolTip: qsTr("The amount of blur iterations that are going to be performed for "
+                tooltip: qsTr("The amount of blur iterations that are going to be performed for "
                               + "the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.loops
@@ -55,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -72,9 +75,11 @@ Column {
                     minimumValue: 0
                     maximumValue: 16
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -85,36 +90,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels  to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels  to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/ThresholdMaskEffectSpecifics.qml b/src/imports/effects/designer/ThresholdMaskEffectSpecifics.qml
index 4f36e77..ecb21ee 100644
--- a/src/imports/effects/designer/ThresholdMaskEffectSpecifics.qml
+++ b/src/imports/effects/designer/ThresholdMaskEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,54 +42,59 @@ Column {
         caption: qsTr("Threshold Mask")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The smoothness of the mask edges near the threshold alpha value.")
+                tooltip: qsTr("The smoothness of the mask edges near the threshold alpha value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Threshold")
-                toolTip: qsTr("A threshold value for the mask pixels.")
+                tooltip: qsTr("A threshold value for the mask pixels.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.threshold
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The item that is going to be used as the mask.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that is going to be used as the mask.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -99,20 +105,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects/designer/ZoomBlurEffectSpecifics.qml b/src/imports/effects/designer/ZoomBlurEffectSpecifics.qml
index 4dd0a3f..efa3f8e 100644
--- a/src/imports/effects/designer/ZoomBlurEffectSpecifics.qml
+++ b/src/imports/effects/designer/ZoomBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,42 +42,45 @@ Column {
         caption: qsTr("Zoom Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Length")
-                toolTip: qsTr("The maximum perceived amount of movement for each pixel. The amount "
+                tooltip: qsTr("The maximum perceived amount of movement for each pixel. The amount "
                               + "is smaller near the center and reaches the specified value at the "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.length
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel to calculate blur. A larger value produces better "
+                tooltip: qsTr("Samples per pixel to calculate blur. A larger value produces better "
                               + "quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 200
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -87,40 +91,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset in pixels for the blur direction center "
-                              + "point.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset in pixels for the blur direction center point.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -131,36 +147,38 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/BlendEffectSpecifics.qml b/src/imports/effects_qt6/designer/BlendEffectSpecifics.qml
index 10ee2a6..6398e7e 100644
--- a/src/imports/effects_qt6/designer/BlendEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/BlendEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,23 +42,24 @@ Column {
         caption: qsTr("Blend")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Mode")
-                toolTip: qsTr("The mode which is used when foreground source is blended over "
-                               + "source.")
+                tooltip: qsTr("The mode which is used when foreground source is blended over "
+                              + "source.")
             }
+
             SecondColumnLayout {
                 ComboBox {
                     id: blendMode
-
                     backendValue: backendValues.mode
-                    Layout.fillWidth: true
-
                     useInteger: true
                     manualMapping: true
-
-                    model: ["normal", "addition", "average", "color", "colorBurn", "colorDodge", "darken", "darkerColor", "difference", "divide", "exclusion", "hardLight", "hue", "lighten", "lighterColor", "lightness", "multiply", "negation", "saturation", "screen", "subtract", "softLight"]
+                    model: ["normal", "addition", "average", "color", "colorBurn", "colorDodge",
+                        "darken", "darkerColor", "difference", "divide", "exclusion", "hardLight",
+                        "hue", "lighten", "lighterColor", "lightness", "multiply", "negation",
+                        "saturation", "screen", "subtract", "softLight"]
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
 
                     property bool block: false
 
@@ -78,8 +80,7 @@ Column {
                         onSelectionChanged: blendMode.fromBackendToFrontend()
                     }
 
-                    function fromBackendToFrontend()
-                    {
+                    function fromBackendToFrontend() {
                         if (!__isCompleted)
                             return
 
@@ -90,23 +91,25 @@ Column {
                         block = false
                     }
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Foreground Source")
-                toolTip: qsTr("The item that is going to be blended over the source.")
+            PropertyLabel {
+                text: qsTr("Foreground source")
+                tooltip: qsTr("The component that is going to be blended over the source.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.foregroundSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -117,20 +120,22 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
                     Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/BrightnessContrastEffectSpecifics.qml b/src/imports/effects_qt6/designer/BrightnessContrastEffectSpecifics.qml
index 545d9aa..2efc2a8 100644
--- a/src/imports/effects_qt6/designer/BrightnessContrastEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/BrightnessContrastEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,42 +42,45 @@ Column {
         caption: qsTr("Brightness and Contrast")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Brightness")
-                toolTip: qsTr("The increase or decrease of source brightness.")
+                tooltip: qsTr("The increase or decrease of source brightness.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.brightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Contrast")
-                toolTip: qsTr("The increase or decrease of source contrast. The decrease of the "
+                tooltip: qsTr("The increase or decrease of source contrast. The decrease of the "
                               + "contrast is linear, but the increase is applied with a "
                               + "non-linear curve to allow very high contrast adjustment at the "
                               + "high end of the value range.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.contrast
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -87,20 +91,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/ColorOverlayEffectSpecifics.qml b/src/imports/effects_qt6/designer/ColorOverlayEffectSpecifics.qml
index 9c1e303..9bfc7ee 100644
--- a/src/imports/effects_qt6/designer/ColorOverlayEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/ColorOverlayEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Overlay Color")
 
-        ColorEditor {
-            caption: qsTr("Overlay Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Overlay color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,20 +57,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/ColorizeEffectSpecifics.qml b/src/imports/effects_qt6/designer/ColorizeEffectSpecifics.qml
index a5c7e24..6410e8c 100644
--- a/src/imports/effects_qt6/designer/ColorizeEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/ColorizeEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,60 +42,64 @@ Column {
         caption: qsTr("Colorize")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Hue")
-                toolTip: qsTr("The hue value which is used to colorize the source.")
+                tooltip: qsTr("The hue value which is used to colorize the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.hue
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Lightness")
-                toolTip: qsTr("The increase or decrease of source lightness value. Unlike hue and "
+                tooltip: qsTr("The increase or decrease of source lightness value. Unlike hue and "
                               + "saturation properties, lightness does not set the used value, but "
                               + "it shifts the existing source pixel lightness value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.lightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Saturation")
-                toolTip: qsTr("The saturation value which is used to colorize the source.")
+                tooltip: qsTr("The saturation value which is used to colorize the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.saturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 
@@ -104,20 +109,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/DesaturationEffectSpecifics.qml b/src/imports/effects_qt6/designer/DesaturationEffectSpecifics.qml
index 4ea4f04..40d5e4e 100644
--- a/src/imports/effects_qt6/designer/DesaturationEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/DesaturationEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,22 +42,23 @@ Column {
         caption: qsTr("Desaturation")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Desaturation")
-                toolTip: qsTr("How much the source colors are desaturated.")
+                tooltip: qsTr("How much the source colors are desaturated.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.desaturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -67,20 +69,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/DirectionalBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/DirectionalBlurEffectSpecifics.qml
index 83f6a47..f23ef8c 100644
--- a/src/imports/effects_qt6/designer/DirectionalBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/DirectionalBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,77 +27,80 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
-    id: root
     anchors.left: parent.left
     anchors.right: parent.right
 
-    property int spinBoxWidth: 90
-
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
         caption: qsTr("Directional Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Angle")
-                toolTip: qsTr("The direction for the blur. Blur is applied to both sides of each "
+                tooltip: qsTr("The direction for the blur. Blur is applied to both sides of each "
                               + "pixel. Therefore, setting the direction to 0 and 180 produces "
                               + "the same result.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.angle
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 1
                     minimumValue: -180
                     maximumValue: 180
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Length")
-                toolTip: qsTr("The perceived amount of movement for each pixel. The movement is "
+                tooltip: qsTr("The perceived amount of movement for each pixel. The movement is "
                               + "divided evenly to both sides of each pixel.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.length
-                    Layout.preferredWidth: root.spinBoxWidth
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -109,36 +112,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/DisplaceEffectSpecifics.qml b/src/imports/effects_qt6/designer/DisplaceEffectSpecifics.qml
index e5df92f..88eaa1d 100644
--- a/src/imports/effects_qt6/designer/DisplaceEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/DisplaceEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,38 +42,41 @@ Column {
         caption: qsTr("Displace")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Displacement")
-                toolTip: qsTr("The scale for the displacement. The bigger the scale, the bigger "
+                tooltip: qsTr("The scale for the displacement. The bigger the scale, the bigger "
                               + "the displacement of the pixels.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.displacement
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Displacement source")
-                toolTip: qsTr("The item that is going to be used as the displacement map.")
+                tooltip: qsTr("The component that is going to be used as the displacement map.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.displacementSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -83,20 +87,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/DropShadowEffectSpecifics.qml b/src/imports/effects_qt6/designer/DropShadowEffectSpecifics.qml
index 2bb07c1..f98f27f 100644
--- a/src/imports/effects_qt6/designer/DropShadowEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/DropShadowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Drop Shadow Color")
 
-        ColorEditor {
-            caption: qsTr("Drop Shadow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Drop shadow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,60 +57,65 @@ Column {
         caption: qsTr("Drop Shadow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
                               + "shadow to appear more blurry.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the shadow color that is strengthened near the source "
+                tooltip: qsTr("The part of the shadow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -117,41 +126,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset for the rendered shadow compared to the "
-                              + "drop shadow component's horizontal position.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset for the rendered shadow compared to the drop "
-                              + "shadow component's vertical position.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -162,36 +182,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/FastBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/FastBlurEffectSpecifics.qml
index 8b57c80..a6f1c17 100644
--- a/src/imports/effects_qt6/designer/FastBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/FastBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,23 +42,24 @@ Column {
         caption: qsTr("Fast Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -68,36 +70,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/GammaAdjustEffectSpecifics.qml b/src/imports/effects_qt6/designer/GammaAdjustEffectSpecifics.qml
index 8493204..0f61c2d 100644
--- a/src/imports/effects_qt6/designer/GammaAdjustEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/GammaAdjustEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,22 +42,23 @@ Column {
         caption: qsTr("Gamma Adjust")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Gamma")
-                toolTip: qsTr("The change factor for how the luminance of each pixel is altered.")
+                tooltip: qsTr("The change factor for how the luminance of each pixel is altered.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.gamma
-                    Layout.preferredWidth: 100
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -67,20 +69,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/GaussianBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/GaussianBlurEffectSpecifics.qml
index 8859fff..658c42b 100644
--- a/src/imports/effects_qt6/designer/GaussianBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/GaussianBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,12 +42,12 @@ Column {
         caption: qsTr("Gaussian Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -54,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Deviation")
-                toolTip: qsTr("A parameter to the gaussian function that is used when calculating "
+                tooltip: qsTr("A parameter to the gaussian function that is used when calculating "
                               + "neighboring pixel weights for the blurring.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.deviation
@@ -71,16 +75,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 50
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
@@ -88,9 +95,11 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -101,36 +110,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/GlowEffectSpecifics.qml b/src/imports/effects_qt6/designer/GlowEffectSpecifics.qml
index 7c7882a..181f807 100644
--- a/src/imports/effects_qt6/designer/GlowEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/GlowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Glow Color")
 
-        ColorEditor {
-            caption: qsTr("Glow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Glow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,63 +57,68 @@ Column {
         caption: qsTr("Glow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the glow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the glow. A larger radius causes the edges of the "
                               + "glow to appear more blurry. Depending on the radius value, value "
                               + "of the samples should be set to sufficiently large to ensure the "
                               + "visual quality.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. A larger "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. A larger "
                               + "value produces better quality, but is slower to render. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the glow color that is strengthened near the source "
+                tooltip: qsTr("The part of the glow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -120,36 +129,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/HueSaturationEffectSpecifics.qml b/src/imports/effects_qt6/designer/HueSaturationEffectSpecifics.qml
index 26e1f94..8c8d127 100644
--- a/src/imports/effects_qt6/designer/HueSaturationEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/HueSaturationEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,59 +42,63 @@ Column {
         caption: qsTr("Hue and Saturation")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Hue")
-                toolTip: qsTr("The hue value which is added to the source hue value.")
+                tooltip: qsTr("The hue value which is added to the source hue value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.hue
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Lightness")
-                toolTip: qsTr("The lightness value which is added to the source saturation value.")
+                tooltip: qsTr("The lightness value which is added to the source saturation value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.lightness
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Saturation")
-                toolTip: qsTr("The saturation value value which is added to the source saturation "
+                tooltip: qsTr("The saturation value value which is added to the source saturation "
                               + "value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.saturation
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: -1
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 
@@ -103,20 +108,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/InnerShadowEffectSpecifics.qml b/src/imports/effects_qt6/designer/InnerShadowEffectSpecifics.qml
index 32ac0bd..8160925 100644
--- a/src/imports/effects_qt6/designer/InnerShadowEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/InnerShadowEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -40,10 +41,13 @@ Column {
         anchors.right: parent.right
         caption: qsTr("Inner Shadow Color")
 
-        ColorEditor {
-            caption: qsTr("Inner Shadow Color")
-            backendValue: backendValues.color
-            supportGradient: false
+        SectionLayout {
+            PropertyLabel { text: qsTr("Inner shadow color") }
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: false
+            }
         }
     }
 
@@ -53,75 +57,82 @@ Column {
         caption: qsTr("Inner Shadow")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
+                tooltip: qsTr("The softness of the shadow. A larger radius causes the edges of the "
                               + "shadow to appear more blurry.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
+                tooltip: qsTr("Samples per pixel for edge softening blur calculation. Ideally, "
                               + "this value should be twice as large as the highest required "
                               + "radius value plus one.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 201
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The part of the shadow color that is strengthened near the source "
+                tooltip: qsTr("The part of the shadow color that is strengthened near the source "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Fast")
-                toolTip: qsTr("The blurring algorithm that is used to produce the softness for the "
+                tooltip: qsTr("The blurring algorithm that is used to produce the softness for the "
                               + "effect.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.fast
                     text: backendValues.fast.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -132,41 +143,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset for the rendered shadow compared to the inner "
-                              + "shadow component's horizontal position.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset for the rendered shadow compared to the inner "
-                              + "shadow component's vertical position. ")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -177,20 +199,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/LevelAdjustEffectSpecifics.qml b/src/imports/effects_qt6/designer/LevelAdjustEffectSpecifics.qml
index 7981398..6ce7fdd 100644
--- a/src/imports/effects_qt6/designer/LevelAdjustEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/LevelAdjustEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,105 +42,121 @@ Column {
         caption: qsTr("Level Adjust")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Gamma")
-                toolTip: qsTr("The change factor for how the luminance of each pixel is altered.")
+                tooltip: qsTr("The change factor for how the luminance of each pixel is altered.")
             }
+
             SecondColumnLayout {
-                ColumnLayout {
-                    RowLayout {
-                        Label {
-                            text: qsTr("R")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaR
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
-                    RowLayout {
-                        Label {
-                            text: qsTr("G")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaG
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
-                    RowLayout {
-                        Label {
-                            text: qsTr("B")
-                        }
-                        SpinBox {
-                            minimumValue: 0
-                            maximumValue: 100
-                            decimals: 2
-                            stepSize: 0.1
-                            backendValue: backendValues.gammaB
-                            Layout.fillWidth: true
-                            sliderIndicatorVisible: true
-                        }
-                    }
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaR
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("R", "red")
                 }
+
+                ExpandingSpacer {}
             }
-        }
-    }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Minimum Input")
+            PropertyLabel {}
 
-        ColorEditor {
-            caption: qsTr("Minimum Input")
-            backendValue: backendValues.minimumInput
-            supportGradient: false
-        }
-    }
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaG
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Minimum Output")
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("G", "green")
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {}
 
-        ColorEditor {
-            caption: qsTr("Minimum Output")
-            backendValue: backendValues.minimumOutput
-            supportGradient: false
+            SecondColumnLayout {
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.gammaB
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("B", "blue")
+                }
+
+                ExpandingSpacer {}
+            }
         }
     }
 
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Maximum Input")
+        caption: qsTr("Input")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Minimum") }
+
+            ColorEditor {
+                backendValue: backendValues.minimumInput
+                supportGradient: false
+            }
 
-        ColorEditor {
-            caption: qsTr("Maximum Input")
-            backendValue: backendValues.maximumInput
-            supportGradient: false
+            PropertyLabel { text: qsTr("Maximum") }
+
+            ColorEditor {
+                backendValue: backendValues.maximumInput
+                supportGradient: false
+            }
         }
     }
 
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Maximum Output")
+        caption: qsTr("Output")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Minimum") }
+
+            ColorEditor {
+                backendValue: backendValues.minimumOutput
+                supportGradient: false
+            }
 
-        ColorEditor {
-            caption: qsTr("Maximum Output")
-            backendValue: backendValues.maximumOutput
-            supportGradient: false
+            PropertyLabel { text: qsTr("Maximum") }
+
+            ColorEditor {
+                backendValue: backendValues.maximumOutput
+                supportGradient: false
+            }
         }
     }
 
@@ -149,20 +166,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/MaskedBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/MaskedBlurEffectSpecifics.qml
index 37bc3c1..c075e6f 100644
--- a/src/imports/effects_qt6/designer/MaskedBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/MaskedBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,12 +42,12 @@ Column {
         caption: qsTr("Masked Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -54,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 100
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
@@ -71,24 +75,28 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The component that controls the final intensity of the blur.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that controls the final intensity of the blur.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -99,20 +107,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/OpacityMaskEffectSpecifics.qml b/src/imports/effects_qt6/designer/OpacityMaskEffectSpecifics.qml
index 3922ffd..82a8940 100644
--- a/src/imports/effects_qt6/designer/OpacityMaskEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/OpacityMaskEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,33 +42,37 @@ Column {
         caption: qsTr("Opacity Mask")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Invert")
-                toolTip: qsTr("Controls how the alpha values of the source mask will behave.")
+                tooltip: qsTr("Controls how the alpha values of the source mask will behave.")
             }
+
             SecondColumnLayout {
                 CheckBox {
                     backendValue: backendValues.invert
                     text: backendValues.invert.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The item that is going to be used as the mask.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that is going to be used as the mask.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -78,20 +83,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/RadialBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/RadialBlurEffectSpecifics.qml
index 83d47ff..eb018f6 100644
--- a/src/imports/effects_qt6/designer/RadialBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/RadialBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,44 +42,47 @@ Column {
         caption: qsTr("Radial Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Angle")
-                toolTip: qsTr("The direction for the blur and at the same time the level of "
+                tooltip: qsTr("The direction for the blur and at the same time the level of "
                               + "blurring. The larger the angle, the more the result becomes "
                               + "blurred. The quality of the blur depends on samples property.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.angle
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 360
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel for blur calculation. A larger value produces "
+                tooltip: qsTr("Samples per pixel for blur calculation. A larger value produces "
                               + "better quality, but is slower to render. This property is not "
                               + "intended to be animated. Changing this property may cause the "
                               + "underlying OpenGL shaders to be recompiled.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 200
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -89,41 +93,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset in pixels for the perceived center point of "
-                              + "the rotation.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset in pixels for the perceived center point of the "
-                              + "rotation.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -134,35 +149,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
-            Label {
+
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/RecursiveBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/RecursiveBlurEffectSpecifics.qml
index d62a372..c23c3f2 100644
--- a/src/imports/effects_qt6/designer/RecursiveBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/RecursiveBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,13 +42,12 @@ Column {
         caption: qsTr("Recursive Blur")
 
         SectionLayout {
-            rows: 2
-
-            Label {
+            PropertyLabel {
                 text: qsTr("Loops")
-                toolTip: qsTr("The amount of blur iterations that are going to be performed for "
+                tooltip: qsTr("The amount of blur iterations that are going to be performed for "
                               + "the source.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.loops
@@ -55,16 +55,19 @@ Column {
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Radius")
-                toolTip: qsTr("The distance of the neighboring pixels which affect the blurring of "
+                tooltip: qsTr("The distance of the neighboring pixels which affect the blurring of "
                               + "an individual pixel. A larger radius increases the blur effect.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.radius
@@ -72,9 +75,11 @@ Column {
                     minimumValue: 0
                     maximumValue: 16
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -85,36 +90,39 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels  to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels  to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/ThresholdMaskEffectSpecifics.qml b/src/imports/effects_qt6/designer/ThresholdMaskEffectSpecifics.qml
index 4f36e77..ecb21ee 100644
--- a/src/imports/effects_qt6/designer/ThresholdMaskEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/ThresholdMaskEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,54 +42,59 @@ Column {
         caption: qsTr("Threshold Mask")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Spread")
-                toolTip: qsTr("The smoothness of the mask edges near the threshold alpha value.")
+                tooltip: qsTr("The smoothness of the mask edges near the threshold alpha value.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.spread
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Threshold")
-                toolTip: qsTr("A threshold value for the mask pixels.")
+                tooltip: qsTr("A threshold value for the mask pixels.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.threshold
-                    Layout.preferredWidth: 80
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
-                text: qsTr("Mask Source")
-                toolTip: qsTr("The item that is going to be used as the mask.")
+            PropertyLabel {
+                text: qsTr("Mask source")
+                tooltip: qsTr("The component that is going to be used as the mask.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.Item"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.maskSource
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -99,20 +105,21 @@ Column {
         caption: qsTr("Caching")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
diff --git a/src/imports/effects_qt6/designer/ZoomBlurEffectSpecifics.qml b/src/imports/effects_qt6/designer/ZoomBlurEffectSpecifics.qml
index 4dd0a3f..efa3f8e 100644
--- a/src/imports/effects_qt6/designer/ZoomBlurEffectSpecifics.qml
+++ b/src/imports/effects_qt6/designer/ZoomBlurEffectSpecifics.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Quick Designer Components.
@@ -27,9 +27,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -41,42 +42,45 @@ Column {
         caption: qsTr("Zoom Blur")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Length")
-                toolTip: qsTr("The maximum perceived amount of movement for each pixel. The amount "
+                tooltip: qsTr("The maximum perceived amount of movement for each pixel. The amount "
                               + "is smaller near the center and reaches the specified value at the "
                               + "edges.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.length
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: 0
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Samples")
-                toolTip: qsTr("Samples per pixel to calculate blur. A larger value produces better "
+                tooltip: qsTr("Samples per pixel to calculate blur. A larger value produces better "
                               + "quality, but is slower to render.")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.samples
-                    Layout.preferredWidth: 80
                     decimals: 0
                     minimumValue: 0
                     maximumValue: 200
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -87,40 +91,52 @@ Column {
         caption: qsTr("Offsets")
 
         SectionLayout {
-            rows: 2
-            Label {
-                text: qsTr("Horizontal offset")
-                toolTip: qsTr("The horizontal offset in pixels for the blur direction center "
-                              + "point.")
+            PropertyLabel {
+                text: qsTr("Offset")
             }
+
             SecondColumnLayout {
                 SpinBox {
                     backendValue: backendValues.horizontalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The horizontal offset
+                    text: qsTr("H", "horizontal")
+                    tooltip: qsTr("The horizontal offset for the rendered shadow compared to the " +
+                                  "inner shadow component's horizontal position.")
                 }
-            }
 
-            Label {
-                text: qsTr("Vertical offset")
-                toolTip: qsTr("The vertical offset in pixels for the blur direction center point.")
-            }
-            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
                 SpinBox {
                     backendValue: backendValues.verticalOffset
-                    Layout.preferredWidth: 80
                     decimals: 1
                     minimumValue: -1000
                     maximumValue: 1000
                     stepSize: 1
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    //: The vertical offset
+                    text: qsTr("V", "vertical")
+                    tooltip: qsTr("The vertical offset for the rendered shadow compared to the " +
+                                  "inner shadow component's vertical position. ")
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
@@ -131,36 +147,38 @@ Column {
         caption: qsTr("Caching and Border")
 
         SectionLayout {
-            rows: 2
-            Label {
+            PropertyLabel {
                 text: qsTr("Cached")
-                toolTip: qsTr("Caches the effect output pixels to improve the rendering "
+                tooltip: qsTr("Caches the effect output pixels to improve the rendering "
                               + "performance.")
             }
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.cached
                     text: backendValues.cached.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Transparent border")
-                toolTip: qsTr("Pads the exterior of the item with a transparent edge, making "
+                tooltip: qsTr("Pads the exterior of the component with a transparent edge, making "
                               + "sampling outside the source texture use transparency instead of "
                               + "the edge pixels.")
             }
+
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
                     backendValue: backendValues.transparentBorder
                     text: backendValues.transparentBorder.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
+
+                ExpandingSpacer {}
             }
         }
     }