MC-4181: Organize Existing Topics

Added screenshots and better explanations as suggested in PR review

Author: bdenham

docs/customizations/product-conditions.md

@@ -4,16 +4,20 @@
 
 ## What's in this topic
 
-This topic describes how to use the product conditions rule tree for different content types. By reusing the conditions mechanism you can apply it to your own custom content types.
+Out-of-the-box, product conditions can be set on Page Builder's Product content type to define which products you want to display based on a variety of product attributes. For example, if you only want display products in a category with a price greater than $50, you would setup a condition for the product as shown here:
+
+![product conditions](../images/product-conditions.png "Product conditions example")
+
+This topic describes how you can apply the conditions mechanism to your own custom content types.
 
 ## Overview
 
 To reuse conditions for custom content types:
 
 1. [Add an attribute to the content type](#add-attribute)
-2. [Add the conditions form element to the `form` UI component](#add-conditions)
+2. [Add the conditions](#add-conditions)
 3. [Create a custom `form` data provider](#data-provider)
-4. [Include the `conditionsDataProcessor` and attribute in the data provider](#include)
+4. [Include the `conditionsDataProcessor` and attribute](#include)
 
 ## Add an attribute to the content type {#add-attribute}
 
@@ -23,7 +27,7 @@ To add an attribute within your custom content type:
 <attribute source="data-myconditions" name="myconditions"/>
  ```
 
-## Add the conditions form element to the `form` UI component {#add-conditions}
+## Add the conditions {#add-conditions}
 
 To add the conditions `form` element to the `form` UI component:
 
@@ -60,7 +64,7 @@ To create a custom `form` data provider for the edit form:
 
 The preceding code is an example of how to add a custom `form` data provider. Replace values with ones specific to your custom content type and component.
 
-## Include the `conditionsDataProcessor` and attribute in the data provider {#include}
+## Include the `conditionsDataProcessor` and attribute {#include}
 
 To include the `conditionsDataProcessor` and accompanying attribute in the data provider file, `view/adminhtml/web/js/content-type/mycomponent/form/provider.js`:
 

docs/customizations/visual-selects.md

@@ -6,7 +6,9 @@
 
 This topic describes how to extend some Page Builder fields to accommodate a custom look and feel for the text alignment option.
 
-The text alignment field for each content block, in the Advanced section, now shows an icon and title. You can customize the text alignment field to show this new look and feel for all content blocks.
+In the Advanced section of the content editor, the text alignment field for each content type now shows an icon and title. You can customize the text alignment field to show this new look and feel for your custom content types.
+
+![alignments](../images/advanced-alignment.png "Content alignment")
 
 All image formats are supported for icons, though we suggest using an SVG format.
 
@@ -20,7 +22,7 @@ To add Visual Select customization to a Page Builder content block:
 
 ## Override the select component with an element template {#element-template}
 
-We use the default select component in the `/app/code/Magento/PageBuilder/view/adminhtml/ui-component/pagebuilder_base_form.xml` file. You can override the default template, specifying an element template & component for this functionality, to implement the Visual Select option.
+We use the default select component in the `/app/code/Magento/PageBuilder/view/adminhtml/ui-component/pagebuilder_base_form.xml` file. You can override the default template, by specifying an element template and component for this functionality to implement the Visual Select option.
 
 In the provided template, specify `<elementTmpl>` alongside updating the fields component to `Magento_PageBuilder/js/form/element/visual-select`:
 
@@ -35,7 +37,7 @@ In the provided template, specify `<elementTmpl>` alongside updating the fields
 
 ## Add Visual Select to the XML config {#xml-config}
 
-The available options for select, `value`, `title`, `icon` and `noticeMessage`, can be provided by the PHP class that implements the `\Magento\Framework\Option\ArrayInterface` method. 
+The available options for select, `value`, `title`, `icon` and `noticeMessage`, can be provided by the PHP class that implements the `\Magento\Framework\Option\ArrayInterface` method.
 
 Options should return an array with the following format:
 
@@ -123,7 +125,7 @@ To apply vertical alignment to a content type using the Visual Select component,
 </virtualType>
 ```
 
-### Add the Visual Select option in your module's form configuration file.
+### Add the Visual Select option in your module's form configuration file
 
 ```xml
 <field name="justify_content" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">

docs/getting-started/activate-pagebuilder.md

@@ -10,6 +10,7 @@ Follow these steps to activate PageBuilder in the Admin:
 2. In the **Stores** tab, select **Configuration** under the Settings group.
 3. In the **General** group on the page, select **Content Management**.
 4. Under **Advanced Content Tools**, select **Yes** for **Enable Page Builder**.
+   ![activate page builder](../images/activate-pagebuilder.png "Activate Page Builder")
 5. Click **Save Config**
 
 ## Deactivate Page Builder