Merge pull request #7125 from umbraco/adding-language-variant

Updated Adding Language Variants article as per UI

Author: eshanrnh

15/umbraco-cms/tutorials/creating-a-basic-website/adding-language-variants.md

@@ -15,24 +15,24 @@ To add a new language, follow these steps:
    * Mandatory language for your site, toggle **Mandatory Language**.
 6. Select a **Fallback Language** from the drop-down list.
 7. Click **Submit**.
-8.  Click **Save**.
+8. Click **Save**.
 
-    ![Adding a language](images/adding-a-language.png)
+    ![Adding a language](images/adding-a-language-v15.png)
 
 ## Enabling Language Variants on Document Types and Properties
 
 To enable language variants on Document Types, follow these steps:
 
 1. Go to the **Settings** section.
 2. Select **HomePage** from the **Document Types** folder.
-3.  Go to the **Settings** tab and toggle **Allow vary by culture**
+3. Go to the **Settings** tab and toggle **Allow vary by culture**
 
     ![Enable Vary by Culture](images/enable-vary-by-culture.png)
 4. Click **Save**.
 5. Go to the **Design** tab.
 6. Click on the Data Type of the **Page Title** and enable **Vary by culture**.
 7. Click **Submit**.
-8.  Click **Save**.
+8. Click **Save**.
 
     ![Allow property editor Language Variants](images/enable-vary-by-culture-property.png)
 
@@ -44,7 +44,7 @@ To add culture and hostnames, follow these steps:
 2. Click on the **...** dots next to the **Home Page** content node.
 3. Select **Culture and Hostnames**.
 4. Add a domain for each hostname, like it's done here:
-5.  Click **Save**.
+5. Click **Save**.
 
     ![Culture and Hostnames](images/culture-and-hostnames-v14.png)
 
@@ -58,20 +58,20 @@ In the language dropdown, you will find all the languages that you have installe
 
 To add language variants to the content, follow these steps:
 
-1.  Go to the **Home Page** node. You will find a language dropdown next to the title at the top.
+1. Go to the **Home Page** node. You will find a language dropdown next to the title at the top.
 
     ![Language Variant dropdown](images/language-dropdown-v14.png)
-2.  Click on the dropdown. You will see a **Split view** option next to the new language.
+2. Click on the dropdown. You will see a **Open in Split view** option next to the new language.
 
-    ![Open Language in Splitview](images/open-in-splitview-v14.png)
-3.  Click **Split view**. We can now see the content node with each language side by side.
+    ![Open Language in Splitview](images/open-in-splitview-v15.png)
+3. Click **Open in Split view**. We can now see the content node with each language side by side.
 
-    You may notice that the bodytext is greyed out - this is because we haven't checked the **Vary by culture** checkbox.
+    You may notice that the Body Text property is marked as *Shared*. This indicates that the **Allow vary by culture** option is not enabled. The value is shared across all languages, so any changes made in one language will automatically apply to all variants.
 
-    ![Splitview editing](images/splitview-editing.png)
+    ![Splitview editing](images/splitview-editing-v15.png)
 4. Enter the **Name** for your content node and the **Page Title** in the new language.
 5. Click **Save and Publish**.
-6.  The **Ready to Publish** window opens providing the option to publish in one or more languages.
+6. The **Ready to Publish** window opens providing the option to publish in one or more languages.
 
     ![Publishing Variant content](images/publishing-variant-content-v14.png)
 7. You can select either one or multiple languages and click **Save and Publish**.
@@ -83,7 +83,7 @@ To view the language variant on the browser, follow these steps:
 1. Go to the **Content** section.
 2. Select your new language from the language dropdown above your content tree.
 3. Select the **Home Page** node and go to the **Info** tab.
-4.  You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
+4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
 
     ![Viewing the Language Variant Link](images/viewing-langvariant-browser-v14.png)
 5. Click on the link to view the new language node in the browser.

15/umbraco-cms/tutorials/creating-a-basic-website/images/adding-a-language-v15.png

@@ -15,24 +15,24 @@ To add a new language, follow these steps:
    * Mandatory language for your site, toggle **Mandatory Language**.
 6. Select a **Fallback Language** from the drop-down list.
 7. Click **Submit**.
-8.  Click **Save**.
+8. Click **Save**.
 
-    ![Adding a language](images/adding-a-language.png)
+    ![Adding a language](images/adding-a-language-v15.png)
 
 ## Enabling Language Variants on Document Types and Properties
 
 To enable language variants on Document Types, follow these steps:
 
 1. Go to the **Settings** section.
 2. Select **HomePage** from the **Document Types** folder.
-3.  Go to the **Settings** tab and toggle **Allow vary by culture**
+3. Go to the **Settings** tab and toggle **Allow vary by culture**
 
     ![Enable Vary by Culture](images/enable-vary-by-culture.png)
 4. Click **Save**.
 5. Go to the **Design** tab.
 6. Click on the Data Type of the **Page Title** and enable **Vary by culture**.
 7. Click **Submit**.
-8.  Click **Save**.
+8. Click **Save**.
 
     ![Allow property editor Language Variants](images/enable-vary-by-culture-property.png)
 
@@ -44,7 +44,7 @@ To add culture and hostnames, follow these steps:
 2. Click on the **...** dots next to the **Home Page** content node.
 3. Select **Culture and Hostnames**.
 4. Add a domain for each hostname, like it's done here:
-5.  Click **Save**.
+5. Click **Save**.
 
     ![Culture and Hostnames](images/culture-and-hostnames-v14.png)
 
@@ -58,20 +58,20 @@ In the language dropdown, you will find all the languages that you have installe
 
 To add language variants to the content, follow these steps:
 
-1.  Go to the **Home Page** node. You will find a language dropdown next to the title at the top.
+1. Go to the **Home Page** node. You will find a language dropdown next to the title at the top.
 
     ![Language Variant dropdown](images/language-dropdown-v14.png)
-2.  Click on the dropdown. You will see a **Split view** option next to the new language.
+2. Click on the dropdown. You will see a **Open in Split view** option next to the new language.
 
-    ![Open Language in Splitview](images/open-in-splitview-v14.png)
-3.  Click **Split view**. We can now see the content node with each language side by side.
+    ![Open Language in Splitview](images/open-in-splitview-v15.png)
+3. Click **Open in Split view**. We can now see the content node with each language side by side.
 
-    You may notice that the bodytext is greyed out - this is because we haven't checked the **Vary by culture** checkbox.
+    You may notice that the Body Text property is marked as *Shared*. This indicates that the **Allow vary by culture** option is not enabled. The value is shared across all languages, so any changes made in one language will automatically apply to all variants.
 
-    ![Splitview editing](images/splitview-editing.png)
+    ![Splitview editing](images/splitview-editing-v15.png)
 4. Enter the **Name** for your content node and the **Page Title** in the new language.
 5. Click **Save and Publish**.
-6.  The **Ready to Publish** window opens providing the option to publish in one or more languages.
+6. The **Ready to Publish** window opens providing the option to publish in one or more languages.
 
     ![Publishing Variant content](images/publishing-variant-content-v14.png)
 7. You can select either one or multiple languages and click **Save and Publish**.
@@ -83,7 +83,7 @@ To view the language variant on the browser, follow these steps:
 1. Go to the **Content** section.
 2. Select your new language from the language dropdown above your content tree.
 3. Select the **Home Page** node and go to the **Info** tab.
-4.  You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
+4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
 
     ![Viewing the Language Variant Link](images/viewing-langvariant-browser-v14.png)
 5. Click on the link to view the new language node in the browser.