Doc: Restructure the Wireframing chapter

Renamed from "Creating UIs"

Fixes: QDS-4469
Change-Id: Iabf436a7ed9aa87c144c29fbe39d4d5923a29ae7
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>

48 files changed, 578 insertions, 636 deletions

diff --git a/doc/qtcreator/images/qtquick-components-custom.png b/doc/qtcreator/images/qtquick-components-custom.png
new file mode 100644
index 0000000000..eaca94ce70
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-components-custom.png
diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc
index 2358c3e3d8..b906082639 100644
--- a/doc/qtcreator/src/qtcreator-toc.qdoc
+++ b/doc/qtcreator/src/qtcreator-toc.qdoc
@@ -117,27 +117,47 @@
                         \li \l{Curve Editor}
                         \li \l{Text Editor}
                     \endlist
-                \li \l {Creating UIs}
+                \li \l {Wireframing}
                     \list
-                        \li \l {Creating Components}
+                    \li \l {Components}
                         \list
-                            \li \l{Shapes}
-                            \li \l{Text}
-                            \li \l{Images}
-                            \li \l{UI Controls}
-                            \li \l{User Interaction Methods}
-                            \li \l{Lists and Other Data Models}
-                            \li \l{Animations}
-                            \li \l{Creating Buttons}
-                            \li \l{Creating Scalable Buttons and Borders}
+                            \li \l {Preset Components}
+                            \list
+                                \li \l{Shapes}
+                                \li \l{Text}
+                                \li \l{Images}
+                                \li \l{UI Controls}
+                                \li \l{User Interaction Methods}
+                                \li \l{Lists and Other Data Models}
+                                \li \l{Animations}
+                                \li \l{3D Views}
+                                \li \l{Group}
+                                \li \l{3D Models}
+                                \li \l{Materials and Shaders}
+                                \li \l{Textures}
+                                \li \l{3D Materials}
+                                \li \l{3D Effects}
+                                \li \l{Custom Shaders}
+                                \li \l{Custom Effects and Materials}
+                                \li \l{Lights}
+                                \li \l{Cameras}
+                                \li \l{Scene Environment}
+                            \endlist
+                        \li \l {Creating Component Instances}
+                        \li \l {Creating Custom Components}
+                            \list
+                                \li \l{Creating Buttons}
+                                \li \l{Creating Scalable Buttons and Borders}
+                            \endlist
                         \endlist
+                        \li \l{Creating Optimized 3D Scenes}
                         \li \l{Specifying Component Properties}
-                        \li \l{Positioning Components}
+                        \li \l{Scalable Layouts}
                         \li \l{Using Custom Fonts}
                         \li \l{Annotating Designs}
                         \li \l{Loading Placeholder Data}
                         \li \l{UI Files}
-                   \endlist
+                    \endlist
                 \li \l {Adding Dynamics}
                     \list
                         \li \l{Creating Animations}
@@ -189,10 +209,6 @@
             \li \l {Best Practices}
             \list
                 \li \l{Optimizing Applications for Mobile Devices}
-                \li \l{Qt Quick Best Practices}
-                    \list
-                        \li \l{Creating Optimized 3D Scenes}
-                    \endlist
             \endlist
         \endlist
         \li \l{Coding}
diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
index 29da64a529..c8f0221529 100644
--- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
+++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
@@ -47,7 +47,7 @@
             You can use several different editors and views in the
             Design mode to develop Qt Quick applications.
 
-        \li \l {Creating UIs}
+        \li \l {Wireframing}
 
             Qt Quick enables you to build UIs around the behavior of
             \e components and how they connect with one another. You
@@ -61,15 +61,6 @@
             connections between them to enable them to communicate with
             each other.
 
-        \li \l {Editing 3D Scenes}
-
-            You can use the 3D editor in the Design mode to edit files you
-            created using 3D graphics applications and stored in one of the
-            supported formats. You cannot create 3D models or other assets
-            in the editor, but you can import the assets you need and work
-            with them to create scenes and states, as well as the
-            transitions between them.
-
     \endlist
 
     For more information, watch a video that shows how to perform the tasks
diff --git a/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc
new file mode 100644
index 0000000000..da2e8f49b3
--- /dev/null
+++ b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \page quick-component-instances.html
+    \previouspage studio-3d-scene-environment.html
+    \nextpage quick-components-creating.html
+
+    \title Creating Component Instances
+
+    \QDS comes with \e {preset components} that you can use in your UI by
+    creating instances of them.
+
+    \image qmldesigner-editing-components.png "Creating Component Instances"
+
+    To create component instances and edit their properties:
+
+    \list 1
+        \li Drag-and-drop components from \uicontrol Library (1) to
+            \l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
+            This creates instances of the components in the current
+            component file.
+        \li Select component instances in \uicontrol Navigator to edit the
+            values of their properties in \uicontrol Properties.
+            \image qmldesigner-properties-view.png "Properties view"
+            For more information, see \l {Specifying Component Properties}.
+        \li To change the appearance and behavior of the component instances
+            in ways that are not supported in \QDS by default, you can define
+            custom properties in \l {Connection View} > \uicontrol {Properties}.
+            \image qmldesigner-dynamicprops.png "Connection View Properties tab"
+            For more information, see \l{Specifying Dynamic Properties}.
+        \li To enable users to interact with the component instances, connect
+            the instances to signals in \uicontrol {Connection View} >
+            \uicontrol Connections. For example, you can specify what happens
+            when a component instance is clicked. For more information, see
+            \l{Connecting Components to Signals}.
+            \image qmldesigner-connections.png "Connection View Connections tab"
+        \li To dynamically change the behavior of a component instance when
+            another component instance changes, create bindings between them in
+            \uicontrol {Connection View} > \uicontrol Bindings.
+            For more information, see \l{Adding Bindings Between Properties}.
+            \image qmldesigner-bindings.png "Connection View Bindings tab"
+        \li Add states to apply sets of changes to the property values of one
+            or several component instances in the \uicontrol States view.
+            For more information, see \l{Adding States}.
+        \li Animate the properties of component instances in the \uicontrol
+            Timeline view. For more information, see \l{Creating Animations}.
+    \endlist
+*/
diff --git a/doc/qtcreator/src/qtquick/library/qtquick-components-custom.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-components-custom.qdoc
new file mode 100644
index 0000000000..1c785acd65
--- /dev/null
+++ b/doc/qtcreator/src/qtquick/library/qtquick-components-custom.qdoc
@@ -0,0 +1,157 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \page quick-components-creating.html
+    \previouspage quick-component-instances.html
+    \nextpage quick-buttons.html
+
+    \title Creating Custom Components
+
+    You can either use project wizard templates to create custom components and
+    controls or move component instances into separate files to turn them into
+    new components that you can create instances of. You can then use the
+    instances of the new components in other components.
+
+    \image qtquick-components-custom.png "Custom components in My Components"
+
+    Custom components are stored in \l Library > \uicontrol Components >
+    \uicontrol {My Components}. You can create instances of custom components
+    by dragging-and-dropping them from \uicontrol Library to \l {Form Editor},
+    \l {3D Editor}, or \l Navigator.
+
+    \section1 Creating Components from Scratch
+
+    To use wizard templates to create custom components:
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \if defined(qtcreator)
+            \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} >
+            \else
+            \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} >
+            \endif
+            \uicontrol Choose to create a new .qml file.
+            \note Components are listed in \uicontrol Library >
+            \uicontrol Components > \uicontrol {My Components} only
+            if the filename begins with a capital letter.
+        \li Click \uicontrol Design to open the component file (ui.qml) in
+            \uicontrol {Form Editor}.
+        \li Drag-and-drop a component from \uicontrol Library to
+            \uicontrol Navigator or \uicontrol {Form Editor}.
+        \li Edit component properties in the \uicontrol Properties view.
+            \image qmldesigner-custom-component-properties.png
+            The available properties depend on the component type. You can
+            \l{Specifying Dynamic Properties}{add properties for
+            components} in \uicontrol {Connection View} > \uicontrol Properties.
+        \li To change the appearance and behavior of the component instances
+            in ways that are not supported in \QDS by default, you can define
+            custom properties in \uicontrol {Connection View} >
+            \uicontrol {Properties}.
+
+    \endlist
+
+    The following sections contain more information about how to use
+    \uicontrol {Form Editor} to edit 2D content and \uicontrol {3D Editor}
+    to edit 3D scenes, as well as examples of how to create UI controls
+    using instances of basic components:
+
+    \list
+        \li \l{Form Editor}
+        \li \l{3D Editor}
+        \li \l{Creating Buttons}
+        \li \l{Creating Scalable Buttons and Borders}
+    \endlist
+
+    \section1 Naming Conventions
+
+    Establish naming conventions to keep the components in your UI organized.
+    Name your components accurately and give them suitable IDs. Particularly,
+    check and modify the default names of the components you export from design
+    tools to create reliable and self-explanatory names that follow the naming
+    conventions you have established.
+
+    For example, a button symbol might have the ID \e myButton_symbol and the
+    different layers might have it as a prefix with the states appended, thus
+    producing IDs such as \e myButton_symbol_default. To prepare for additional
+    mouse areas later in the project, you could use similar IDs for them, such
+    as \e myButton_symbol_hotspot. When you use the button as instances in a
+    screen, you would give each of these instances a unique ID that relates to
+    that screen. For example, \e myButton_myMenu_home, \e myButton_myMenu_profile,
+    and \e myButton_myMenu_settings
+
+    \if defined(qtdesignstudio)
+    \include qtdesignstudio-components.qdocinc creating studio components
+    \endif
+
+    \section1 Turning Component Instances into Custom Components
+
+    An alternative way of creating reusable components is to turn
+    component instances into custom components by moving them into
+    separate component files (.ui.qml). Right-click a component instance
+    in \uicontrol Navigator or \uicontrol {Form Editor}, and select
+    \uicontrol {Move Component into Separate File} in the context menu.
+
+    \image qtcreator-move-component-into-separate-file.png
+
+    Give the new component a name, and select whether properties are set for
+    the new component or for the original one.
+
+    When you select \uicontrol OK, a new component file is created and an
+    instance of the component is added to the code in the current component
+    file. The look of your UI in \uicontrol {Form Editor} does not change.
+
+    To open the new component file for editing the properties that you want
+    to change for all instances of the component, right-click the component,
+    and then select \uicontrol {Go into Component} in the context menu. For
+    additional ways of opening base components, see \l{Moving Within Components}.
+
+    For an example of creating a reusable custom component, see
+    \if defined(qtcreator)
+    \l{Creating a Mobile Application}.
+    \else
+    \l{Progress Bar}.
+    \endif
+
+    Custom components are listed in \uicontrol Library > \uicontrol Components
+    > \uicontrol {My Components}, and you can use instances of them to build
+    more components.
+
+    \include qtquick-mcu-support.qdocinc mcu qtquick components
+
+    \section1 Merging Files with Templates
+
+    You can merge the current component file against an existing second
+    component file using the second file in a way similar to using a CSS
+    stylesheet.
+
+    To use this experimental feature, right-click a component in the
+    \uicontrol Navigator or \uicontrol {Form Editor} view and select
+    \uicontrol {Merge File with Template} in the context menu.
+
+    \image qmldesigner-merge-with-template.png "Merge with Template dialog"
+
+    In the \uicontrol Template field, select the file to use as a template.
+*/
diff --git a/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc
new file mode 100644
index 0000000000..d9ac4b9387
--- /dev/null
+++ b/doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \page quick-preset-components.html
+    \previouspage quick-components.html
+    \nextpage quick-shapes.html
+
+    \title Preset Components
+
+    To use preset components, add the modules that contain them to your project
+    by selecting \l Library > \uicontrol Components > \inlineimage plus.png
+    . For more information, see \l{Adding and Removing Modules}. You can then
+    create instances of the components by dragging-and-dropping them from
+    \uicontrol Library to \l {Form Editor}, \l {3D Editor}, or \l Navigator.
+
+    To edit the appearance of a component instance, select it in
+    \uicontrol {Form Editor}, \uicontrol {3D Editor}, or \uicontrol Navigator
+    and set its properties in the \l Properties view.
+
+    For more information about creating your own components, see
+    \l{Creating Custom Components}.
+
+    \section1 2D Components
+
+    \list
+        \li \l Shapes
+        \li \l Text
+        \li \l Images
+        \li \l {User Interaction Methods}
+        \li \l {UI Controls}
+        \li \l {Lists and Other Data Models}
+        \if defined(qtdesignstudio)
+        \li \l {2D Effects}
+        \li \l {Logic Helpers}
+        \endif
+        \li \l Animations
+    \endlist
+
+    \section1 3D Components
+
+    You can use \l{3D Editor} in the \uicontrol Design mode to edit files you
+    created using 3D graphics applications and stored in one of the supported
+    formats. You cannot create 3D models or other assets in the editor, but you
+    can \l{Importing 3D Assets}{import} the assets you need and work with them
+    to create scenes and states, as well as the transitions between them.
+
+        \list
+        \li \l {3D Views}
+        \li \l {Group}
+        \li \l {3D Models}
+        \li \l {Materials and Shaders}
+        \li \l {Textures}
+        \li \l {3D Materials}
+        \li \l {3D Effects}
+        \li \l {Custom Shaders}
+        \li \l {Custom Effects and Materials}
+        \li \l {Lights}
+        \li \l {Cameras}
+        \li \l {Scene Environment}
+     \endlist
+
+    When you import 3D scenes from files that you exported from 3D graphics
+    tools, you also import the camera, light, model, and materials as 3D
+    components. If your scene did not contain them, you can add predefined
+    3D components to it and edit their properties to fit your needs.
+
+    \note Using 3D components will affect the performance of your UI. Do not
+    use 3D components if the same results can be achieved using 2D components.
+
+    \section2 Videos About 3D Components
+
+    The following video shows you how to add the components included in the
+    \uicontrol {Qt Quick 3D} module, such as 3D models, cameras, and lights,
+    to your scene:
+
+    \youtube u3kZJjlk3CY
+
+    The following video shows you how to use the custom shader utilities, 3D
+    effects, and materials:
+
+    \youtube bMXeeQw6BYs
+
+    The following video shows you how to combine 2D and 3D components:
+
+    \youtube w1yhDl93YI0
+*/
diff --git a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc
index 02e4f8a51e..0c4f721247 100644
--- a/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc
+++ b/doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc
@@ -25,7 +25,7 @@
 
 /*!
     \page quick-shapes.html
-    \previouspage quick-components.html
+    \previouspage quick-preset-components.html
     \nextpage quick-text.html
 
     \title Shapes
diff --git a/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc b/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc
deleted file mode 100644
index f76f54ef4c..0000000000
--- a/doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc
+++ /dev/null
@@ -1,102 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2020 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Design Studio documentation.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU Free Documentation License Usage
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of
-** this file. Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
-**
-****************************************************************************/
-
-/*!
-    \page studio-qtquick-best-practices.html
-    \if defined(qtdesignstudio)
-    \previouspage {Tutorials}
-    \nextpage studio-optimized-3d-scenes.html
-    \else
-    \previouspage creator-usability.html
-    \nextpage studio-optimized-3d-scenes.html
-    \endif
-
-    \title Qt Quick Best Practices
-
-    The following guidelines describe the most efficient ways to use \QC to
-    create UIs and scenes that run flawlessly on the intended platforms.
-
-    For best practices in creating 3D scenes with optimized graphics
-    performance, see \l {Creating Optimized 3D Scenes}.
-
-    \if defined(qtdesignstudio)
-    For guidelines on how to achieve best results when importing assets, see
-    \l {Exporting from Design Tools}.
-    \endif
-
-    \section1 Naming Conventions
-
-    Establish naming conventions to keep the components in your UI organized.
-    Name your components accurately and give them suitable IDs. You should
-    manually specify the names of the components you export from design tools to
-    create reliable and self-explanatory names that follow the naming
-    conventions you have established.
-
-    For example, a button symbol might have the ID \e myButton_symbol and the
-    different layers might have it as a prefix with the states appended, thus
-    producing IDs such as \e myButton_symbol_default. To prepare for additional
-    mouse areas later in the project, you could use similar IDs for them, such
-    as \e myButton_symbol_hotspot. When you use the button as instances in a
-    screen, you would give each of these instances a unique ID that relates to
-    that screen. For example, \e myButton_myMenu_home, \e myButton_myMenu_profile,
-    and \e myButton_myMenu_settings
-
-    \section1 Planning the UI
-
-    Plan your UI properly. Know what elements, such as screens, components,
-    and states, you need. Creating a descriptive wireframe and acquiring a
-    detailed UI specification before you start will make the process of creating
-    the UI more efficient.
-
-    \section1 Using Components Economically
-
-    It is important to understand the performance costs associated with using
-    components.
-
-    To use components efficiently and economically:
-
-    \list
-        \li Componentize your design by packaging your resources into reusable
-            components that can be conveniently recombined to suit the needs of
-            your UI.
-        \li Use as few components as necessary. To minimize the number of
-            components, use \l{Adding Property Aliases}{alias properties} and
-            \l{Adding States}{states} to create the differences in your
-            component instances. We recommend reusing components
-            instead of duplicating them, so the components do not need to be
-            processed as completely new component types. This reduces loading
-            and compilation time as well as the size of the binary.
-        \li Any content that is data-driven should be
-            \l {Using UI Files}{exported as a public property} of the
-            relevant component. For example, a speedometer should have an \c int
-            or \c real property for speed to which the UI is bound.
-        \li Separate UI from the application logic. Designers should work with
-            the \l{UI Files}{UI files} (.ui.qml), while developers should work
-            on the corresponding implementation files (.qml) to define their
-            programmatic behaviors or JavaScript. This enables iteration from
-            both the design and development side of the process without the the
-            risk of overwriting each other's work.
-    \endlist
-*/
diff --git a/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc b/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc
index a6693398eb..35878e73b9 100644
--- a/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc
+++ b/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc
@@ -25,12 +25,8 @@
 
 /*!
     \page studio-optimized-3d-scenes.html
-    \previouspage studio-qtquick-best-practices.html
-    \if defined(qtdesignstudio)
-    \nextpage studio-platforms.html
-    \else
-    \nextpage creator-coding.html
-    \endif
+    \previouspage quick-scalable-image.html
+    \nextpage qtquick-properties.html
 
     \title Creating Optimized 3D Scenes
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc b/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc
index 2e24284b50..101a489a63 100644
--- a/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc
@@ -30,7 +30,7 @@
     \else
     \previouspage quick-data-models.html
     \endif
-    \nextpage quick-buttons.html
+    \nextpage studio-3d-view.html
 
     \title Animations
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
index 526cc001f9..136b292d7e 100644
--- a/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
@@ -25,12 +25,12 @@
 
 /*!
     \page qtquick-annotations.html
-    \previouspage qtquick-fonts.html
     \if defined(qtdesignstudio)
-    \nextpage creator-quick-ui-forms.html
+    \previouspage qtquick-positioning.html
     \else
-    \nextpage qtquick-placeholder-data.html
+    \previouspage qtquick-fonts.html
     \endif
+    \nextpage qtquick-placeholder-data.html
 
     \title Annotating Designs
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
index e0049c6e90..83e006a658 100644
--- a/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
@@ -31,7 +31,7 @@
 
 /*!
     \page quick-buttons.html
-    \previouspage quick-animations.html
+    \previouspage quick-components-creating.html
     \nextpage quick-scalable-image.html
 
     \title Creating Buttons
@@ -128,7 +128,11 @@
 /*!
     \previouspage quick-buttons.html
     \page quick-scalable-image.html
+    \if defined(qtdesignstudio)
     \nextpage qtquick-properties.html
+    \else
+    \nextpage studio-optimized-3d-scenes.html
+    \endif
 
     \title Creating Scalable Buttons and Borders
 
@@ -275,7 +279,7 @@
     and set the button text for each button instance, for example.
 
     For more information about positioning buttons on screens, see
-    \l{Positioning Components}.
+    \l{Scalable Layouts}.
 
     \image qmldesigner-borderimage.png "Button preview as part of a screen"
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc
index 8e813f691d..af83a8e918 100644
--- a/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc
+++ b/doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc
@@ -77,7 +77,7 @@
         \li \l{Merging Files with Templates}
     \row
         \li Move Component Instances into Separate Files
-        \li \l{Moving Component Instances into Separate Files}
+        \li \l{Turning Component Instances into Custom Components}
     \row
         \li Add New Signal Handler
         \li \l{Adding Signal Handlers}
diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
index b17234a1da..0ea771d54a 100644
--- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
@@ -23,12 +23,6 @@
 **
 ****************************************************************************/
 
-// **********************************************************************
-// NOTE: the sections are not ordered by their logical order to avoid
-// reshuffling the file each time the index order changes (i.e., often).
-// Run the fixnavi.pl script to adjust the links to the index order.
-// **********************************************************************
-
 /*!
     \page quick-components.html
     \if defined(qtdesignstudio)
@@ -36,9 +30,9 @@
     \else
     \previouspage creator-using-qt-quick-designer.html
     \endif
-    \nextpage quick-shapes.html
+    \nextpage quick-preset-components.html
 
-    \title Creating Components
+    \title Components
 
     A \e component is a reusable building block for a UI.
 
@@ -50,7 +44,7 @@
     Some of the preset components represent simple shapes, text, or images,
     while others represent complex UI controls with full functionality, such
     as spin boxes or sliders. You can also add instances of preset
-    \l {Using 3D Components}{3D components} to your UIs.
+    \l {3D Components}{3D components} to your UIs.
 
     To build your own components, you can modify the \e properties of the
     component instances and combine them.
@@ -60,7 +54,7 @@
     in \e Button.ui.qml. Typically, the visual appearance of a component
     is defined in a \e {UI file} (ui.qml). To create component files,
     you can use \l{Creating Components from Scratch}{wizard templates}, or
-    \l{Moving Component Instances into Separate Files}
+    \l{Turning Component Instances into Custom Components}
     {move component instances into separate component files}.
 
     Select \l Library > \uicontrol Components to view the preset components that
@@ -70,160 +64,41 @@
 
     \image qtquick-components-tab.png "Components in Library"
 
-    \note Use as few components as possible. To minimize the number of
-    components, use \l{Adding Property Aliases}{alias properties} and
-    \l{Adding States}{states} to create the differences in your component
-    instances. Using component instances instead of duplicating the components
-    reduces the time needed to load and build the application, as well as the
-    size of the application package.
-
-    \section1 Creating Component Instances
-
-    \image qmldesigner-editing-components.png "Creating Component Instances"
+    Read more about components:
 
-    \list 1
-        \li Drag-and-drop components from \uicontrol Library (1) to
-            \l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
-            This creates instances of the components in the current
-            component file.
-        \li Select component instances in \uicontrol Navigator to edit the
-            values of their properties in \uicontrol Properties.
-            \image qmldesigner-properties-view.png "Properties view"
-            For more information, see \l {Specifying Component Properties}.
-        \li To change the appearance and behavior of the component instances
-            in ways that are not supported in \QDS by default, you can define
-            custom properties in \l {Connection View} > \uicontrol {Properties}.
-            \image qmldesigner-dynamicprops.png "Connection View Properties tab"
-            For more information, see \l{Specifying Dynamic Properties}.
-        \li To enable users to interact with the component instances, connect
-            the instances to signals in \uicontrol {Connection View} >
-            \uicontrol Connections. For example, you can specify what happens
-            when a component instance is clicked. For more information, see
-            \l{Connecting Components to Signals}.
-            \image qmldesigner-connections.png "Connection View Connections tab"
-        \li To dynamically change the behavior of a component instance when
-            another component instance changes, create bindings between them in
-            \uicontrol {Connection View} > \uicontrol Bindings.
-            For more information, see \l{Adding Bindings Between Properties}.
-            \image qmldesigner-bindings.png "Connection View Bindings tab"
-        \li Add states to apply sets of changes to the property values of one
-            or several component instances in the \uicontrol States view.
-            For more information, see \l{Adding States}.
-        \li Animate the properties of component instances in the \uicontrol
-            Timeline view. For more information, see \l{Creating Animations}.
+    \list
+        \li \l {Preset Components}
+        \li \l {Creating Component Instances}
+        \li \l {Creating Custom Components}
     \endlist
 
-    \section1 Creating Your Own Components
-
-    You can either use project wizard templates to create custom components and
-    controls or move component instances into separate files to turn them into
-    new components that you can create instances of. You can then use the
-    instances of the new components in other components.
-
-    \section2 Creating Components from Scratch
-
-    To use wizard templates to create custom components:
-
-    \list 1
-
-        \li Select \uicontrol File > \uicontrol {New File or Project} >
-            \if defined(qtcreator)
-            \uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} >
-            \else
-            \uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} >
-            \endif
-            \uicontrol Choose to create a new .qml file.
-
-            \note Components are listed in the \uicontrol {My Components}
-            tab in the \uicontrol Library view only if the filename begins with
-            a capital letter.
+    \section1 Using Components Economically
 
-        \li Click \uicontrol Design to open the component file (ui.qml) in
-            \uicontrol {Form Editor}.
+    It is important to understand the performance costs associated with using
+    components.
 
-        \li Drag-and-drop a component from \uicontrol Library to
-            \uicontrol Navigator or \uicontrol {Form Editor}.
-
-        \li Edit component properties in the \uicontrol Properties view.
-            \image qmldesigner-custom-component-properties.png
-
-            The available properties depend on the component type. You can
-            \l{Specifying Dynamic Properties}{add properties for
-            components} in \uicontrol {Connection View} > \uicontrol Properties.
-
-        \li To change the appearance and behavior of the component instances
-            in ways that are not supported in \QDS by default, you can define
-            custom properties in \uicontrol {Connection View} >
-            \uicontrol {Properties}.
-
-    \endlist
-
-    The following sections contain more information about how to use
-    \uicontrol {Form Editor} to edit 2D content and \uicontrol {3D Editor}
-    to edit 3D scenes, as well as examples of how to create UI controls
-    using instances of basic components:
+    To use components efficiently and economically:
 
     \list
-
-        \li \l{Form Editor}
-
-        \li \l{3D Editor}
-
-        \li \l{Creating Buttons}
-
-        \li \l{Creating Scalable Buttons and Borders}
-
+        \li Componentize your design by packaging your resources into reusable
+            components that can be conveniently recombined to suit the needs of
+            your UI.
+        \li Use as few components as necessary. To minimize the number of
+            components, use \l{Adding Property Aliases}{alias properties} and
+            \l{Adding States}{states} to create the differences in your
+            component instances. We recommend reusing components
+            instead of duplicating them, so the components do not need to be
+            processed as completely new component types. This reduces loading
+            and compilation time as well as the size of the binary.
+        \li Any content that is data-driven should be
+            \l {Using UI Files}{exported as a public property} of the
+            relevant component. For example, a speedometer should have an \c int
+            or \c real property for speed to which the UI is bound.
+        \li Separate UI from the application logic. Designers should work with
+            the \l{UI Files}{UI files} (.ui.qml), while developers should work
+            on the corresponding implementation files (.qml) to define their
+            programmatic behaviors or JavaScript. This enables iteration from
+            both the design and development side of the process without the the
+            risk of overwriting each other's work.
     \endlist
-
-    \if defined(qtdesignstudio)
-    \include qtdesignstudio-components.qdocinc creating studio components
-    \endif
-
-    \section2 Moving Component Instances into Separate Files
-
-    An alternative way of creating reusable components is to move component
-    instances into separate component files (.ui.qml). Right-click a component
-    instance in \uicontrol Navigator or \uicontrol {Form Editor}, and select
-    \uicontrol {Move Component into Separate File} in the context menu.
-
-    \image qtcreator-move-component-into-separate-file.png
-
-    Give the new component a name, and select whether properties are set for
-    the new component or for the original one.
-
-    When you select \uicontrol OK, a new component file is created and an
-    instance of the component is added to the code in the current component
-    file. The look of your UI in \uicontrol {Form Editor} does not change.
-
-    To open the new component file for editing the properties that you want
-    to change for all instances of the component, right-click the component,
-    and then select \uicontrol {Go into Component} in the context menu. For
-    additional ways of opening base components, see \l{Moving Within Components}.
-
-    For an example of creating a reusable custom component, see
-    \if defined(qtcreator)
-    \l{Creating a Mobile Application}.
-    \else
-    \l{Progress Bar}.
-    \endif
-
-    Custom components are listed in \uicontrol Library > \uicontrol Components
-    > \uicontrol {My Components}, and you can use instances of them to build
-    more components.
-
-    \include qtquick-mcu-support.qdocinc mcu qtquick components
-
-    \section1 Merging Files with Templates
-
-    You can merge the current component file against an existing second
-    component file using the second file in a way similar to using a CSS
-    stylesheet.
-
-    To use this experimental feature, right-click a component in the
-    \uicontrol Navigator or \uicontrol {Form Editor} view and select
-    \uicontrol {Merge File with Template} in the context menu.
-
-    \image qmldesigner-merge-with-template.png "Merge with Template dialog"
-
-    In the \uicontrol Template field, select the file to use as a template.
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
index 6fb9b8ad63..df88e5473a 100644
--- a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
@@ -72,13 +72,13 @@
         \li \l{3D Editor}
         \li Provides an editor for files you created using 3D graphics
             applications and stored in one of the supported formats.
-        \li \l{Editing 3D Scenes}
+        \li \l{3D Editor}
    \row
         \li \l Library
         \li Contains the building blocks that you can use to design
             applications: preset components, your own components, and
             assets.
-        \li \l {Creating Components}
+        \li \l{Components}
     \row
         \li \l Navigator
         \li Displays the composition of the current component file as
@@ -272,7 +272,7 @@
             component in the list to open it in \uicontrol {Form Editor} and
             \uicontrol Navigator.
         \li
-        \li \l{Creating Components}
+        \li \l{Components}
     \row
         \li Workspace
         \li Displays the currently selected workspace. To switch to another
diff --git a/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc b/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
index f1b50211a7..7721d52b2f 100644
--- a/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
@@ -121,7 +121,7 @@
     \image qmldesigner-form-editor-move-cursor.png "Move cursor in Form Editor view"
 
     For more information about alternative ways of positioning component
-    instances in UIs, see \l{Positioning Components}.
+    instances in UIs, see \l{Scalable Layouts}.
 
     \section1 Resizing 2D Components
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-library.qdoc b/doc/qtcreator/src/qtquick/qtquick-library.qdoc
index 5e679e6568..331ea4eb22 100644
--- a/doc/qtcreator/src/qtquick/qtquick-library.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-library.qdoc
@@ -69,11 +69,21 @@
         \li \l {Logic Helpers}
         \endif
         \li \l Animations
-        \li \l{Using 3D Components}{3D Components}
+        \li \l{3D Views}
+        \li \l{Group}
+        \li \l{3D Models}
+        \li \l{Materials and Shaders}
+        \li \l{Textures}
+        \li \l{3D Materials}
+        \li \l{3D Effects}
+        \li \l{Custom Shaders}
+        \li \l{Lights}
+        \li \l{Cameras}
+        \li \l{Scene Environment}
     \endlist
 
     For more information about creating your own components, see
-    \l{Creating Components}.
+    \l{Creating Custom Components}.
 
     \section2 Adding and Removing Modules
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
index 798ddff679..ad593ec587 100644
--- a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
@@ -26,9 +26,13 @@
 /*!
     \page qtquick-positioning.html
     \previouspage qtquick-properties.html
+    \if defined(qtdesignstudio)
+    \nextpage qtquick-annotations.html
+    \else
     \nextpage qtquick-fonts.html
+    \endif
 
-    \title Positioning Components
+    \title Scalable Layouts
 
     The position of a \l{glossary-component}{component} in a UI can be either
     absolute or relative to other components. The visual components exist at a
diff --git a/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc
index 0da66229a8..01f9b47962 100644
--- a/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc
@@ -160,6 +160,6 @@
             \l{Specifying Component Properties}.
         \li For more information on the properties available for a
             component, press \key {F1} or see \l{Component Types}
-            and \l{Positioning Components}.
+            and \l{Scalable Layouts}.
     \endlist
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
index 126ed209bd..ad9962daa9 100644
--- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
@@ -76,7 +76,7 @@
     In the \uicontrol Position group, you can set the position of a component on
     the x and y axis. The position of a component in the UI can be either
     absolute or relative to other components. For more information, see
-    \l{Positioning Components}.
+    \l{Scalable Layouts}.
 
     In the 2D space, the z position of a component determines its position in
     relation to its sibling components in the component hierarchy. You can set
diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc
index 5f695173d2..6267acb071 100644
--- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-states.qdoc
@@ -27,10 +27,11 @@
     \page quick-states.html
     \if defined(qtdesignstudio)
     \previouspage quick-property-bindings.html
+    \nextpage creator-live-preview.html
     \else
-    \previouspage quick-connections-backend.html
+    \previouspage qtbridge-figma-using.html
+    \nextpage exporting-3d-assets.html
     \endif
-    \nextpage studio-3d.html
 
     \title Adding States
 
diff --git a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
index c29bf21b53..3cb66337fc 100644
--- a/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-uis.qdoc
@@ -26,20 +26,28 @@
 /*!
     \page quick-uis.html
     \if defined(qtdesignstudio)
-    \previouspage creator-exporting-qml.html
+    \previouspage {Examples and Tutorials}
     \nextpage studio-app-flows.html
     \else
     \previouspage qtquick-text-editor.html
     \nextpage quick-components.html
     \endif
 
-    \title Creating UIs
-
-    \if defined(qtdesignstudio)
-    When you install \QDS, everything you'll need to design UIs and to preview
-    them on the desktop or embedded Linux devices is automatically installed
-    and configured correctly for you.
-    \endif
+    \title Wireframing
+
+    \table
+        \row
+            \li \image front-ui.png
+            \li Plan your UI properly. Know what elements, such as screens,
+                components, and states, you need. Create a descriptive wireframe
+                and acquire a detailed UI specification before you start to make
+                the process of creating the UI more efficient.
+                \QC enables you to turn your UI concept into a wireframe with
+                a scalable layout where all your screens and controls are in
+                place. You can present your wireframe to developers and other
+                stakeholders for discussion, review, and approval before
+                continuing into the prototyping phase.
+    \endtable
 
     In \QC, you build UIs around the behavior of \l{glossary-component}
     {components} and how they connect with one another. You can use preset
@@ -49,11 +57,12 @@
     set of predefined properties, some of which control things that are
     visible to users, while others are used behind the scene.
 
-    When you drag-and-drop the preset components from the \uicontrol Library
-    view to the \l {Form Editor} or \l Navigator view and change them to your
-    liking by modifying their properties in the \l Properties view, the
-    application code is generated for you accordingly. For more information
-    about the code, open the developer documentation by pressing \key F1.
+    You drag-and-drop the preset components from the \uicontrol Library view
+    to the \l {Form Editor}, \l{3D Editor}, or \l Navigator view to create
+    instances of them. You then change the instances to your liking by modifying
+    their properties in the \l Properties view. The application code is
+    generated for you accordingly. For more information about the code, open
+    the developer documentation by pressing \key F1.
 
     \list
 
@@ -67,12 +76,13 @@
             the user experience of the application.
         \endif
 
-        \li \l {Creating Components}
+        \li \l {Components}
 
-            You can enhance imported designs by customizing preset
-            components or design custom forms and shapes directly as
-            components. You can import visual assets in various formats,
-            such as PNG, JPG, and SVG for use in the components.
+            \QDS comes with \e {preset components} that you can use in
+            wireframes and prototypes by creating instances of them.
+            To build your own components, you can modify the \e properties
+            of the component instances and combine them. You can import
+            designs and assets from other tools as components.
 
         \li \l {Specifying Component Properties}
 
@@ -80,10 +90,10 @@
             its appearance and behavior. All components have a set of predefined
             properties. Some properties, such as position, size, and visibility,
             are common to all components, whereas others are specific to the
-            component. You can specify properties for your components in the
-            \l Properties view.
+            component. You can specify values for properties of component
+            instances in the \l Properties view.
 
-        \li \l {Positioning Components}
+        \li \l {Scalable Layouts}
 
             The position of a component in a UI can be either absolute
             or relative to other components. While manual positioning
@@ -91,9 +101,11 @@
             methods, such as anchors, layouts, positioners, and property
             bindings, for dynamic UIs.
 
+        \if defined(qtcreator)
         \li \l {Using Custom Fonts}
 
             You can load custom fonts to \QC and use them in your designs.
+        \endif
 
         \li \l {Annotating Designs}
 
@@ -107,19 +119,13 @@
             you can test grid, list, or path views, even though you don't
             have access to real data.
 
-        \endif
-
-    \if defined(qtdesignstudio)
-    \endlist
-
-    \section1 Related Topics
-
-    \list
-    \endif
-            \li \l{UI Files}
+        \li \l{UI Files}
 
             Some of the wizards create projects that contain UI files
             (.ui.qml). You should always edit UI files in \l{Form Editor}
             and \l Properties, to avoid breaking the code.
+
+        \endif
+
     \endlist
 */
diff --git a/doc/qtdesignstudio/examples/doc/progressbar.qdoc b/doc/qtdesignstudio/examples/doc/progressbar.qdoc
index 3fb608f0c4..27042f72ea 100644
--- a/doc/qtdesignstudio/examples/doc/progressbar.qdoc
+++ b/doc/qtdesignstudio/examples/doc/progressbar.qdoc
@@ -73,7 +73,7 @@
     change for the animation.
 
     For more information about creating and positioning components, see
-    \l {Creating Components} and \l {Positioning Components}.
+    \l {Components} and \l {Scalable Layouts}.
 
     \section1 Animating Progress Bar Elements
 
diff --git a/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
index f90c83ee30..5674381202 100644
--- a/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
+++ b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
@@ -102,7 +102,7 @@
     by selecting \uicontrol File > \uicontrol {New File or Project} >
     \uicontrol {Qt Quick Files}. While designing the screens, you can
     move reusable components into separate files. For more information,
-    see \l{Creating Components}.
+    see \l{Components}.
 
     \section1 Creating a Progress Indicator
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
index 2680880963..9782f5a6e0 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
@@ -134,7 +134,7 @@
 
     The QML types supported by \QDS are listed in the \uicontrol {Components}
     tab in the \l {Library} in the Design mode of \QDS. For more
-    information, see \l{Creating Components}.
+    information, see \l{Components}.
 
     You can also specify values for the properties of the component or create
     \l{Property Aliases}{property aliases} to fetch the values from other
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
index 6945efce12..67d5db7276 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
@@ -47,6 +47,11 @@
 
             You can install and run \QC on several operating systems to design
             UIs for multiple desktop, embedded, and mobile device platforms.
+        \li \l{UI Files}
+
+            Some of the wizards create projects that contain UI files
+            (.ui.qml). You should always edit UI files in \l{Form Editor}
+            and \l Properties, to avoid breaking the code.
         \li \l{Coding}
 
             You can use the code editor in the \uicontrol {Text Editor} view or
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
index 4756f6b367..f66f4b29c2 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
@@ -175,7 +175,7 @@
 
     If you are building your UI from scratch in \QDS, you must first add
     components to the flow items to create the screens as you would any
-    components. For more information, see \l {Creating Components}. The
+    components. For more information, see \l {Components}. The
     flow items that you attach the components to are listed under
     \uicontrol {My Components}.
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
index d71417aa6b..efa43dcbba 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
@@ -25,7 +25,7 @@
 
 //! [creating studio components]
 
-    \section2 Creating Custom Controls
+    \section1 Creating Custom Controls
 
     You can use project wizard templates to create stylable UI controls based
     on the components in the Qt Quick Controls module:
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
index 401df6d837..d121d018e0 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Design Studio documentation.
@@ -34,9 +34,7 @@
     grouped by categories. You might also find answers to your questions in the
     product documentation by searching or browsing the index in the
     \l{Using the Help Mode}{Help mode}. Many questions are also answered by the
-    \l{Examples and Tutorials}{examples and video tutorials}. Also see
-    \l {Qt Quick Best Practices} to learn about the most efficient ways to use
-    \QDS.
+    \l{Examples and Tutorials}{examples and video tutorials}.
 
     \section1 \QB
     \section2 How does \QBPS differ from \QBSK?
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
index c5412114e0..e1460b6f4f 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
@@ -76,13 +76,15 @@
     in Button.ui.qml. Typically, the visual appearance of a component is
     defined in a \e {UI file}. To create component files, you can use
     \l{Creating Components from Scratch}{wizard templates}, or
-    \l{Moving Component Instances into Separate Files}
+    \l{Turning Component Instances into Custom Components}
     {move component instances into separate component files}.
 
     Read more about components:
 
     \list
-        \li \l{Creating Components}
+        \li \l {Preset Components}
+        \li \l {Creating Component Instances}
+        \li \l {Creating Custom Components}
     \endlist
 
     \section1 Device
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index 92115cee6d..3250d6d73a 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -60,32 +60,23 @@
                 \li \l{Use Cases}
                 \li \l{Concepts and Terms}
                 \li \l{Examples and Tutorials}
-                    \list
-                        \li \l{Qt Quick Best Practices}
-                            \list
-                                \li \l{Creating Optimized 3D Scenes}
-                            \endlist
-                    \endlist
             \endlist
-        \li \l{Wireframing} (NEW)
+        \li \l{Wireframing}
             \list
-                \li \l {Creating UIs}{Creating 2D and 3D UIs}
+                \li \l{Designing Application Flows}
                     \list
-                        \li \l{Designing Application Flows}
-                            \list
-                                \li \l{Adding Flow Views}
-                                \li \l{Adding Flow Items}
-                                \li \l{Adding Action Areas and Transitions}
-                                \li \l{Applying Effects to Transitions}
-                                \li \l{Simulating Events}
-                                \li \l{Simulating Conditions}
-                                \li \l{Applying States in Flows}
-                                \li \l{Reacting to External Events}
-                             \endlist
+                        \li \l{Adding Flow Views}
+                        \li \l{Adding Flow Items}
+                        \li \l{Adding Action Areas and Transitions}
+                        \li \l{Applying Effects to Transitions}
+                        \li \l{Simulating Events}
+                        \li \l{Simulating Conditions}
+                        \li \l{Applying States in Flows}
+                        \li \l{Reacting to External Events}
                     \endlist
-                \li \l {Creating Components}{Components} (NEW) (grid?)
+                \li \l {Components}
                     \list
-                        \li \l{Component Types}{Preset Components}
+                        \li \l{Preset Components}
                             \list
                                 \li \l{Shapes}
                                 \li \l{Text}
@@ -96,28 +87,29 @@
                                 \li \l{2D Effects}
                                 \li \l{Logic Helpers}
                                 \li \l Animations
-                                \li \l{Setting Scene Environment}{Scene Environment}
-                                \li \l{Adding 3D Views}{3D Views}
-                                \li \l{Setting Group Properties}{Group}
-                                \li \l{Adding 3D Models}{3D Models}
-                                \li \l{Using Materials and Shaders}{Materials and Shaders}
-                                \li \l{Attaching Textures to Materials}{Textures}
-                                \li \l{Using 3D Materials}{3D Materials}
-                                \li \l{Applying 3D Effects}{3D Effects}
-                                \li \l{Using Custom Shaders}{Custom Shaders}
-                                \li \l{Using Lights}{Lights}
-                                \li \l{Using Scene Camera}{Cameras}
+                                \li \l{3D Views}
+                                \li \l{Group}
+                                \li \l{3D Models}
+                                \li \l{Materials and Shaders}
+                                \li \l{Textures}
+                                \li \l{3D Materials}
+                                \li \l{3D Effects}
+                                \li \l{Custom Shaders}
+                                \li \l{Custom Effects and Materials}
+                                \li \l{Lights}
+                                \li \l{Cameras}
+                                \li \l{Scene Environment}
                             \endlist
-                        \li \l {Creating Your Own Components}{Creating Custom Components}
+                        \li \l {Creating Component Instances}
+                        \li \l {Creating Custom Components}
                             \list
                                 \li \l{Creating Buttons}
                                 \li \l{Creating Scalable Buttons and Borders}
-                                \li \l{Creating Custom Effects and Materials}
                             \endlist
-                        \li \l{Specifying Component Properties}
-                        \li \l{Positioning Components}{Scalable Layouts}
-                        \li \l{Annotating Designs}
                     \endlist
+                \li \l{Specifying Component Properties}
+                \li \l{Scalable Layouts}
+                \li \l{Annotating Designs}
             \endlist
         \li \l{Prototyping} (NEW)
             \list
@@ -200,6 +192,7 @@
             \endlist
         \li \l{Implementing Applications} (NEW)
             \list
+                \li\l{Creating Optimized 3D Scenes}
                 \li Using Flows in Production (NEW)
                 \li \l{Coding}{Cross-Platform Development} (NEW)
                     \list
diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc
index 39dad57b08..963c446eb0 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc
@@ -55,12 +55,12 @@
                 \li \l{Concepts and Terms}
                 \li \l{Examples and Tutorials}
             \endlist
-        \li \b {\l{Wireframing}} (NEW)
+        \li \b {\l{Wireframing}}
             \list
-                \li \l{Creating UIs}{Creating 2D and 3D UIs}
-                \li \l{Creating Components}{Components}
+                \li \l{Designing Application Flows}
+                \li \l{Components}
                 \li \l{Specifying Component Properties}
-                \li \l{Positioning Components}{Scalable Layouts}
+                \li \l{Scalable Layouts}
                 \li \l{Annotating Designs}
             \endlist
         \li \b {\l{Prototyping}} (NEW)
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
index b47c9d5209..68ab76c655 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
@@ -29,9 +29,9 @@
 /*!
     \page exporting-3d-assets.html
     \if defined(qtdesignstudio)
-    \previouspage qtbridge-figma-using.html
+    \previouspage
     \else
-    \previouspage studio-3d.html
+    \previouspage quick-states.html
     \endif
     \nextpage exporting-from-blender.html
 
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
index 695c1bded3..6f546839ab 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
@@ -30,12 +30,12 @@
     \previouspage studio-3d-lights.html
     \nextpage studio-3d-scene-environment.html
 
-    \title Using Scene Camera
+    \title Cameras
 
     A camera is always necessary to view the content of a 3D scene. A camera
     defines how to project the content of a 3D scene into a 2D coordinate space,
     which can then be used on a 2D surface. When a camera is present in the
-    scene, it can be used to direct what is displayed in a \l {Adding 3D Views}
+    scene, it can be used to direct what is displayed in a \l {3D Views}
     {3D view}.
 
      \image studio-qtquick-3d-components.png "Qt Quick 3D components in Library"
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc
deleted file mode 100644
index 5dd7ba32d0..0000000000
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc
+++ /dev/null
@@ -1,110 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2019 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Design Studio documentation.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU Free Documentation License Usage
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of
-** this file. Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
-**
-****************************************************************************/
-
-/*!
-    \page studio-3d-components.html
-    \previouspage studio-3d-view.html
-    \nextpage studio-3d-node.html
-
-    \title Using 3D Components
-
-    To use 3D components, you need to first add the required modules to your
-    project in \l Library > \uicontrol Components > \inlineimage plus.png
-    . For more information, see \l{Adding and Removing Modules}. You can then
-    add 3D components to your scene by dragging-and-dropping them from
-    \uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} to
-    \l {3D Editor} or to a 3D view in \l Navigator.
-
-    \note Using 3D components will affect the performance of your UI. You should
-    not use 3D components if the same results can be achieved using 2D
-    components.
-
-    To edit 3D components, select the component in \uicontrol {3D Editor} or in
-    \uicontrol Navigator and set its properties in the \l Properties view.
-
-    \section1 Getting Started Videos
-
-    The following video shows you how to add the components included in the
-    \uicontrol {Qt Quick 3D} module, such as 3D models, cameras, and lights,
-    to your scene:
-    \youtube u3kZJjlk3CY
-
-    See the next video to learn more about the custom shader utilities, 3D
-    effects, and materials:
-    \youtube bMXeeQw6BYs
-
-    \section1 More Information about 3D Components
-
-    \list
-        \li \l {Setting Group Properties}
-
-            You can set the opacity, visibility, and transform properties
-            of all 3D components.
-        \li \l {Adding 3D Models}
-
-            You can use the model component to load static mesh data from
-            storage or one of the built-in primitive types: cube, cone,
-            cylinder, plane (rectangle), or sphere. You can attach materials to
-            meshes and sub-meshes.
-        \li \l {Using Materials and Shaders}
-
-            You can use materials and shaders to define how component surfaces
-            are rendered in a scene and during live preview.
-        \li \l {Attaching Textures to Materials}
-
-            You can use a Texture component to specify an image and how it is
-            mapped to meshes in a 3D scene. Texture components can use image
-            data either from a file or a Qt Quick QML type.
-        \li \l {Using 3D Materials}
-
-            You can apply a set of predefined 3D materials on your models.
-        \li \l {Applying 3D Effects}
-
-            You can use 3D effect components to generate post-processing
-            effects.
-        \li \l {Using Custom Shaders}
-
-            You can use 3D shader utilities to construct your own effects and
-            materials.
-        \li \l{Creating Custom Effects and Materials}
-
-            If the ready-made 3D effects and materials don't meet your needs,
-            you can use 3D shader utilities to construct your own effects and
-            materials.
-        \li \l{Using Lights}
-
-            You can use several light types as the source of lighting in a
-            scene and set their properties.
-        \li \l {Using Scene Camera}
-
-            To project a 3D scene to a 2D viewport, such as \l {Form Editor},
-            it is necessary to view the scene from a camera. You can select the
-            camera type and set its properties.
-        \li \l {Setting Scene Environment}
-
-            You can use the SceneEnvironment component to specify how the scene
-            is rendered globally.
-     \endlist
-*/
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
index 3d44cf363c..f75fef5487 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
@@ -30,9 +30,9 @@
     \previouspage studio-3d-custom-shaders.html
     \nextpage studio-3d-lights.html
 
-    \title Creating Custom Effects and Materials
+    \title Custom Effects and Materials
 
-    The \l{Applying 3D Effects}{Qt Quick 3D Effects} and \l{Using 3D Materials}
+    The \l{3D Effects}{Qt Quick 3D Effects} and \l{3D Materials}
     {Qt Quick 3D Materials} modules contain a set of ready-made effects and
     materials that you can apply to 3D models. If the ready-made effects and
     materials don't meet your needs, you can create custom effects and
@@ -57,7 +57,7 @@
     component in \uicontrol Library > \uicontrol {QtQuick3D Materials} >
     \uicontrol {Qt Quick 3D Custom Shader Utils}. For more information about the
     shader utilities and commands and their properties, see
-    \l {Using Custom Shaders}.
+    \l {Custom Shaders}.
 
     \note You must create the actual shader source files with some other tool
     and copy them to your project folder. You can then specify the source file
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc
index 12580641fa..521e9c666e 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-effects.html
     \nextpage studio-3d-custom-effects-materials.html
 
-    \title Using Custom Shaders
+    \title Custom Shaders
 
     You can use the 3D shader utilities and commands available in \l Library
     > \uicontrol Components > \uicontrol QtQuick3D > \uicontrol
@@ -52,7 +52,7 @@
     \l {Adding and Removing Modules}.
 
     For more information on using the shaders, see
-    \l {Creating Custom Effects and Materials}.
+    \l {Custom Effects and Materials}.
 
     See the following tables for available shader utilities and commands.
 
@@ -90,8 +90,8 @@
             \uicontrol {Always Dirty} properties. The \uicontrol Passes property
             contains a list of render passes implemented by the material.
             The \uicontrol {Shader Info} specifies the shader info of the
-            material. For more information, see \l {Creating Custom Effects and
-            Materials}.
+            material. For more information, see
+            \l {Custom Effects and Materials}.
 
     \row
         \li \l Effect
@@ -99,7 +99,7 @@
 
             The \uicontrol Passes property contains a list of render passes
             implemented by the effect. For more information, see
-            \l {Creating Custom Effects and Materials}.
+            \l {Custom Effects and Materials}.
 
     \row
         \li \l Pass
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
index 1ffa427760..a7ac461262 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
@@ -40,9 +40,9 @@
     the scene.
 
     When you import 3D scenes from files that you exported from 3D graphics
-    tools, you also import a \l{Using Scene Camera}{scene camera},
-    \l{Using Lights}{light}, \l{Adding 3D Models}{model}, and
-    \l {Using Materials and Shaders}{materials}. If your scene did not contain
+    tools, you also import a \l{Cameras}{scene camera},
+    \l{Lights}{light}, \l{3D Models}{model}, and
+    \l {Materials and Shaders}{materials}. If your scene did not contain
     them, you can add the corresponding \l {Using 3D Components}{Qt Quick 3D}
     components from \l Library > \uicontrol Components > \inlineimage plus.png
     > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
@@ -120,7 +120,7 @@
     cameras are available in \uicontrol Library > \uicontrol Components
     > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. For more information
     about using cameras in the scene, the available camera types, and their
-    properties, see \l{Using Scene Camera}.
+    properties, see \l{Cameras}.
 
     \section1 Using Global and Local Orientation
 
@@ -151,7 +151,7 @@
     or press \key U.
 
     For more information about the available scene light types and their
-    properties, see \l{Using Lights}.
+    properties, see \l{Lights}.
 
     \section1 Selecting Components
 
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc
index 5e9deb0cef..995f29b1fd 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-materials-types.html
     \nextpage studio-3d-custom-shaders.html
 
-    \title Applying 3D Effects
+    \title 3D Effects
 
     \QDS provides a set of 3D effects, which are visible in \l {Form Editor}.
     To apply a visual effect to a scene, drag-and-drop an effect from \l Library
@@ -41,7 +41,7 @@
     You can use the \l Effect component available in \uicontrol
     {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as the base
     component for creating custom post-processing effects. For more information,
-    see \l {Creating Custom Effects and Materials} and \l {Using Custom Shaders}.
+    see \l {Custom Effects and Materials} and \l {Custom Shaders}.
 
     You can apply multiple effects to a scene. Select the \uicontrol
     {Scene Environment} component in \uicontrol Navigator to view the applied
@@ -282,8 +282,8 @@
         \note Only has a visible effect if the background of the scene is set to
         be transparent in the \uicontrol {Background Mode} field of the
         \uicontrol {Scene Environment} component. Otherwise, the clear color of
-        the background hides the blur. For more information, see \l {Setting
-        Scene Environment}.
+        the background hides the blur. For more information, see
+        \l {Scene Environment}.
 
         The \uicontrol {Fade Amount} property defines the fade speed of the
         trail.
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
index 8860afa73a..2e3195ed72 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-custom-effects-materials.html
     \nextpage studio-3d-camera.html
 
-    \title Using Lights
+    \title Lights
 
     Light components are the primary source of lighting in a \QDS scene.
     As a secondary light source, you can use \l{Using Image-based Lighting}
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
index 75cb1e1275..85b5d1b3d6 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-model.html
     \nextpage studio-3d-texture.html
 
-    \title Using Materials and Shaders
+    \title Materials and Shaders
 
     \image studio-qtquick-3d-material.png "Material attached to model in Design mode"
 
@@ -48,7 +48,7 @@
     \list
         \li Default material
         \li Principled material
-        \li \l{Creating Custom Effects and Materials}{Custom material}
+        \li \l{Custom Effects and Materials}{Custom material}
         \li Texture
     \endlist
 
@@ -60,7 +60,7 @@
 
     You can use the \l Texture component to apply textures to materials. It
     defines an image and how the image is mapped to meshes in a 3D scene. For
-    more information, see \l {Attaching Textures to Materials}.
+    more information, see \l {Textures}.
 
     You can modify material properties in the \uicontrol Properties view, as
     instructed in the following sections. The availability of the properties
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc
index bd57d63f43..288b664c45 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc
@@ -30,10 +30,10 @@
     \previouspage studio-3d-texture.html
     \nextpage studio-3d-effects.html
 
-    \title Using 3D Materials
+    \title 3D Materials
 
     \QDS provides a set of pregenerated Qt Quick 3D materials that can be used
-    to create good-looking \l {Adding 3D Models}{models} quickly and easily.
+    to create good-looking \l {3D Models}{models} quickly and easily.
 
     To apply a 3D material to a component, you should first delete the default
     material and then drag-and-drop a new material from \l Library >
@@ -64,8 +64,8 @@
     You can use the \l {CustomMaterial}{Custom Material} component available in
     \uicontrol {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as
     the base component for creating custom materials used to shade models. For
-    more information, see \l {Creating Custom Effects and Materials} and
-    \l {Using Custom Shaders}.
+    more information, see \l {Custom Effects and Materials} and
+    \l {Custom Shaders}.
 
     \section1 Metal Materials
 
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
index e7b4218601..5826a2bb17 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-node.html
     \nextpage studio-3d-materials.html
 
-    \title Adding 3D Models
+    \title 3D Models
 
     \QDS \l Library features some built-in primitive 3D models. This allows you
     to add cubes, cones, cylinders, and planes (rectangles) to your scene.
@@ -38,7 +38,7 @@
     \image studio-3d-models.png
 
     A Model component loads mesh data from a file. You can modify how the
-    component is shaded by adding \l{Using 3D Materials}{materials} to the model.
+    component is shaded by adding \l{3D Materials}{materials} to the model.
 
     You can drag-and-drop a model from \uicontrol Library > \uicontrol Components
     > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to \l {3D Editor} or
@@ -86,5 +86,5 @@
     material. Select the material from the list in the \uicontrol {Materials}
     field. Select the \inlineimage plus.png
     button to add materials to the list. For more information about materials,
-    see \l {Using Materials and Shaders}.
+    see \l {Materials and Shaders}.
 */
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
index adb946dba6..701683979c 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
@@ -24,11 +24,11 @@
 ****************************************************************************/
 
 /*!
-    \previouspage studio-3d-components.html
     \page studio-3d-node.html
+    \previouspage quick-animations.html
     \nextpage studio-3d-model.html
 
-    \title Setting Group Properties
+    \title Group
 
     The \uicontrol Group component is a \uicontrol Node component that can be
     used to wrap other objects for the purpose of grouping them. This allows you
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
index 086c991516..f648dd4efe 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
@@ -28,13 +28,9 @@
 /*!
     \page studio-3d-scene-environment.html
     \previouspage studio-3d-camera.html
-    \if defined (qtdesignstudio)
-    \nextpage creator-live-preview.html
-    \else
-    \nextpage qtquick-iso-icon-browser.html
-    \endif
+    \nextpage quick-component-instances.html
 
-    \title Setting Scene Environment
+    \title Scene Environment
 
     You can use the SceneEnvironment type to specify how the scene is rendered
     globally. You can specify settings for antialiasing, scene background,
@@ -134,13 +130,13 @@
     \note Large distances between the clipping planes of your camera may cause
     problems with ambient occlusion. If you are seeing odd banding in ambient
     occlusion, try adjusting the value in the \uicontrol {Clip far} field in
-    the \l{Using Scene Camera}{scene camera} properties.
+    the \l{Cameras}{scene camera} properties.
 
     \section1 Using Image-based Lighting
 
     In the material properties, you can specify an image (preferably
     a high-dynamic range image) to use to light the scene, either
-    instead of or in addition to \l{Using Lights}{scene lights}. In the
+    instead of or in addition to \l{Lights}{scene lights}. In the
     \uicontrol {Probe brightness} field, you can modify the amount of
     light emitted by the light probe.
 
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
index 8b86d68dca..eb5aa2d77d 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
@@ -30,7 +30,7 @@
     \previouspage studio-3d-materials.html
     \nextpage studio-3d-materials-types.html
 
-    \title Attaching Textures to Materials
+    \title Textures
 
     You can use the \uicontrol Texture component to attach textures to materials.
     You specify an image to use as the source file for the \uicontrol Texture,
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
index 7d0c23b0a8..1e285e9ec1 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
@@ -24,20 +24,20 @@
 ****************************************************************************/
 
 /*!
-    \previouspage studio-3d-editor.html
     \page studio-3d-view.html
-    \nextpage studio-3d-components.html
+    \previouspage quick-animations.html
+    \nextpage studio-3d-node.html
 
-    \title Adding 3D Views
+    \title 3D Views
 
     To create a Qt Quick 3D UI project, we recommend using a \uicontrol
     {Qt Quick 3D Application Template} wizard template that adds the
-    \l {Using 3D Components}{Qt Quick 3D} components to \l Library >
+    \l {3D Components}{Qt Quick 3D} components to \l Library >
     \uicontrol Components and contains a 3D view. A 3D view component includes a
-    \l {Setting Scene Environment}{scene environment} as well as a scene
-    \l {Using Lights}{light}, \l {Using Scene Camera}{camera}, and
-    \l {Adding 3D Models}{model}. A default \l {Using Materials and Shaders}{material}
-    is attached to the model. You can attach \l {Attaching Textures to Materials}{textures}
+    \l {Scene Environment}{scene environment} as well as a scene
+    \l {Lights}{light}, \l {Cameras}{camera}, and
+    \l {3D Models}{model}. A default \l {Materials and Shaders}{material}
+    is attached to the model. You can attach \l {Textures}{textures}
     to materials. For more information about creating projects, see \l{Creating Projects}.
 
     To add a 3D view to some other kind of a project, you first need to add the
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc
deleted file mode 100644
index 0862955c73..0000000000
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc
+++ /dev/null
@@ -1,80 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2020 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Qt Design Studio documentation.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU Free Documentation License Usage
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of
-** this file. Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
-**
-****************************************************************************/
-
-/*!
-    \page studio-3d.html
-    \previouspage quick-states.html
-    \if defined(qtdesignstudio)
-    \nextpage studio-3d-view.html
-    \else
-    \nextpage exporting-3d-assets.html
-    \endif
-
-
-    \title Editing 3D Scenes
-
-    You can use \l{3D Editor} in the \uicontrol Design mode to edit files you
-    created using 3D graphics applications and stored in one of the supported
-    formats. You cannot create 3D models or other assets in the editor, but you
-    can \l{Importing 3D Assets}{import} the assets you need and work with them
-    to create scenes and states, as well as the transitions between them.
-
-    When you import 3D scenes from files that you exported from 3D graphics
-    tools, you also import the camera, light, model, and materials as 3D
-    components. If your scene did not contain them, you can add predefined
-    3D components to it and edit their properties to fit your needs.
-
-    The following topics contain information about editing 3D scenes:
-
-    \list
-        \if defined (qtcreator)
-        \li \l {Exporting 3D Assets}
-
-            You can import files you created using 3D graphics applications and
-            stored in several widely-used formats, such as .blend, .dae, .fbx,
-            .glb, .gltf, .obj, .uia, or .uip.
-
-         \li \l{Importing 3D Assets}
-
-            You can import 3D assets that you created using 3D graphics
-            applications and stored in one of the supported file formats.
-            You can then edit them in the Design mode.
-        \endif
-        \li \l{Adding 3D Views}
-
-            You can drag-and-drop 3D components from \l Library >
-            \uicontrol Components to \uicontrol {3D Editor} or to \l Navigator.
-            You must add all 3D components into a 3D view.
-        \li \l {Using 3D Components}
-
-            You can speficy properties for 3D components, such as cameras,
-            lights, materials, and shaders, in the \uicontrol Properties view.
-     \endlist
-
-    For more information, watch the following video:
-
-    \youtube w1yhDl93YI0
-
-*/