DB-1029 - Layouts

docs/studio/Integrations/epcc.mdx

@@ -40,7 +40,7 @@ The following steps describe how to configure an integration between Studio and
 1. (Optional) In **Catalog Channel**, enter the channel you specified when you created your catalog rule in Product Experience Manager. Channels represent your ecommerce sales channel through which your shoppers may select and pay for your products, for example, **Mobile** for a mobile app or **Web** for website. See [Configure Shopper Catalog Rules](/docs/api/pxm/catalog/rules). If you leave this blank, the default catalog is used.
 1. (Optional) Configure the shipping options. If you have configured the **Shipping Service** in the [Integrations Hub](/docs/composer/integration-hub/integrations-hub), you can use the information from the integration to configure your shipping options in the **Elastic Path** integration. This enables you to use the shipping options available in your Elastic Path store in your Studio storefront.
 
-![shipping service](/assets/studio/shippingoptions.png)
+    ![shipping service](/assets/studio/shippingoptions.png)
 
     Complete the shipping options with the information from the **Shipping Service** in Integrations Hub.
 

docs/studio/content/advanced-page-editing/Managing-Redirects.mdx

@@ -29,7 +29,7 @@ steps to implement this for yourself
 1. Identify the page that you want to redirect, and the URL that you want to redirect to.
 2. Create or edit the page in your Studio account that you want to redirect.
 3. Add a Custom Code/Text or Custom Code section to that page and add the below meta tag to the code block. Don't forget
-   to replace the **https://www.google.com**portion of it with the URL of the page you'd like to redirect the user to:
+   to replace the **https://www.google.com** portion of it with the URL of the page you'd like to redirect the user to:
 
     ```
     <meta http-equiv="refresh" content="0; url=https://www.google.com">

docs/studio/design/Design-&-Styles/Styling-for-light-and-dark-backgrounds.mdx

@@ -1,7 +1,7 @@
 ---
 title: Styling for Light and Dark Backgrounds
 nav_label: Styling for Light and Dark Backgrounds
-sidebar_position: 20
+sidebar_position: 10
 ---
 
 ## How to adjust the elements in a section for light/dark

docs/studio/design/Design-&-Styles/Using-your-Style-Guide.mdx

@@ -1,7 +1,7 @@
 ---
 title: Using your Style Guide
 nav_label: Using your Style Guide
-sidebar_position: 10
+sidebar_position: 5
 ---
 
 The Styles Guide can be accessed through the Studio Admin and is a huge asset when trying to quickly spin up page with

docs/studio/design/branding/_category_.json

@@ -0,0 +1,4 @@
+{
+  "position": 5,
+  "label": "Branding"
+}

docs/studio/design/branding/branding.mdx

@@ -0,0 +1,15 @@
+---
+title: Branding
+nav_label: Branding
+sidebar_position: 5
+---
+
+In **Branding**, you can configure the visible elements of your brand, including your logos, favicon image, and social share image. Maintaining a consistent use of brand identity throughout your pages enhances your company's image, creating a memorable first impression.
+
+1. From Studio, select **Design**.
+1. Select **Branding**.
+1. Depending on the image you want to add, select one of the following to open the Studio Media Editor and add your images.
+    - **Logo for light backgrounds**
+    - **Logo for dark backgrounds**
+    - **Favicon**
+    - **Social share image**

docs/studio/design/Header-and-Footer/Header-Formatting-Options.mdx → docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options.mdx

@@ -1,7 +1,7 @@
 ---
 title: Formatting Header
 nav_label: Formatting Header
-sidebar_position: 50
+sidebar_position: 5
 ---
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/fjdG-JN7nG8" title="Formatting Header" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/studio/design/layouts/Header-and-Footer/_category_.json

@@ -0,0 +1,4 @@
+{
+  "position": 20,
+  "label": "Header & Footer"
+}

docs/studio/design/layouts/_category_.json

@@ -0,0 +1,4 @@
+{
+  "position": 30,
+  "label": "Layouts"
+}

docs/studio/design/layouts/creating-layouts.mdx

@@ -0,0 +1,50 @@
+---
+title: Creating Layouts
+nav_label: Creating Layouts
+sidebar_position: 10
+---
+
+Layouts are a powerful tool that offers flexibility in designing the structure of your pages. Layouts allow you to create visually appealing and well-structured pages efficiently, ensuring consistency and ease of use across your site.
+
+You can either create new components and add them to a layout component, or you can design a new layout in the layout editor and add the sections you want using the page editor. When working in the page editor, you can combine newly-created components with existing components for a customized layout.
+
+## Step 1 - Create a New Layout
+
+To create a new layout:
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. Select **+ Add layout**. The **New layout** panel is displayed.
+1. Specify a name for your layout. This should be something easy to understand, indicating the layout's purpose or function. For example, **Featured products** or **Sales countdown**.
+1. In **Layout component**, select the layout component you want from the list.
+1. Select **Create layout**. The new layout is displayed.
+1. Select **Header**. A list of available sections is displayed.
+1. Navigate to  **Layout** to see a list of available headers.
+1. Select the header that you want to use.
+1. Select **Footer**. A list of available sections is displayed.
+1. Select the footer that you want to use.
+    :::note
+    For more information about how to format your headers and footers, see [Headers & Footers](/docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options)
+    :::
+1. When you are happy with your layout, select **Publish**.
+
+:::note
+You can build a new layout component using the `layout` tag. See [Layouts](/docs/studio/developers/tags/layout).
+:::
+
+## Step 2 - Apply a Layout to a Page
+
+Once a layout is published, when you create a new page, your new page automatically uses the new layout.
+
+For the page defaults, you can go to the Layouts Editor and change the layouts that the pages are using.
+
+Alternatively, manually change the layout for individual pages by going into the page settings and selecting a different layout.
+
+1. Select **Options** next to the page that you want to add a page layout. The **Page settings** are displayed.
+1. In **Layout**, select the layout you want to apply from the list.
+1. Select **Save only**.
+1. Preview the page to check that the layout is working correctly.
+1. When you are happy with your page, you can publish your page.
+
+
+

docs/studio/design/layouts/managing-layouts.mdx

@@ -0,0 +1,27 @@
+---
+title: Managing Layouts
+nav_label: Managing Layouts
+sidebar_position: 10
+---
+
+You can manage your layouts in the Layouts Editor. In the Layouts Editor, you can see the layouts that you have, the page usage,
+
+## Editing a Layout
+
+You can edit your layouts at any time. Once you publish your changes, all the pages using the layout are automatically updated to use the new layout.
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. Select the layout you want to edit. The layout is displayed.
+1. Make the changes that you want.
+1. When you are happy with your layout, select **Publish**.
+
+## Deleting a Layout
+
+You can delete your layouts at any time. In the Layouts Editor, you can see how many pages are using the layout. You can still delete a layout, even if it is currently being used.
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. For the layout you want to delete, select **Settings**.
+1. From **Settings**, select **delete**.
+1. Select **Yes, delete layout** to delete the layout.

docs/studio/design/layouts/overview.mdx

@@ -0,0 +1,33 @@
+---
+title: Overview
+nav_label: Overview
+sidebar_position: 5
+---
+
+You can use layouts to design the structure of your pages. Layouts determine how information, visuals, and components are organized to guide visitors through your content toward specific goals, such as making a purchase or signing up for an offer. By streamlining the page development process, layouts save time and enhance the overall user experience of your pages.
+
+Below is an overview of the steps to follow to use layouts:
+
+1. If required, create your own custom components, including banners, headers, footers, layouts or sections. See [Custom Components](/docs/studio/developers/).
+1. In the **Layouts** editor, create your new layout. You can use a default layout or use a custom layout that you have created.
+1. Add your headers and footers.
+1. Depending on your requirements, format your headers and footers.
+1. Once you have saved and published your layout, when you create a new page, the new page automatically uses the new layout. Alternatively, you can manually change the layout for individual pages by going to the **Settings** for a page and selecting a different layout.
+1. You can see a list of all your current layouts and the number of pages using each one. In addition, you can see the layouts used on your default pages, and change them if you wish.
+
+## Default Layouts
+
+There are three default layouts.
+
+| Default Layout                  | Description                                                                                                                                                                                                            |
+|---------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Full header - Full Footer       | The full header and footer provides an example of the typical elements commonly included in an online storefront. The header has key components such as company logo, navigation menu, and a call to actcion, while the footer includes essential information like contact details, link to policies, social media icons, and site navigation. The full header and footer offers a useful starting point when designing or developing your online storefront.                                                                                             |
+| Minimal header - Minimal footer | A minimal header consists of a company name and the footer contains a copyright notice. By starting with a minimal header and footer, you can take an iterative approach to adding elements to your header and footer. |
+| No header - No footer          | The layout consists of a main section only.    |
+
+
+
+
+
+
+

docs/studio/developers/custom-themes/css-variables.mdx → docs/studio/developers/css-variables.mdx

@@ -1,7 +1,7 @@
 ---
 title: CSS Variables
 nav_label: CSS Variables
-sidebar_position: 60
+sidebar_position: 25
 ---
 
 Studio enables you to customize your Studio storefronts appearance using CSS variables. You can use these variables in the Component Editor when you are creating your [custom components](/docs/studio/developers/custom-themes/custom-components). 

docs/studio/developers/custom-themes/_category_.json

@@ -1,4 +1,4 @@
 {
-    "position": 19,
+    "position": 5,
     "label": "Custom Themes"
 }

docs/studio/developers/custom-themes/custom-components.mdx

@@ -12,5 +12,5 @@ Building your own components will give you the ultimate flexibility. Studio prov
 
 The component editor can be used to build a few different types of components:
 
-* [**Sections**](/docs/studio/developers/components/section) - The main building blocks of Studio pages.
-* [**Headers & Footers**](/docs/studio/developers/components/header-and-footer) - If the built-ins don't work for you you can go custom.
+* [**Sections**](/docs/studio/developers/tags/section) - The main building blocks of Studio pages.
+* [**Headers & Footers**](/docs/studio/developers/tags/header-and-footer) - If the built-ins don't work for you you can go custom.

docs/studio/developers/components.mdx → docs/studio/developers/developers.mdx

@@ -1,11 +1,11 @@
 ---
-title: Custom Components
+title: Custom Component Development
 nav_label: Custom Components
-sidebar_position: 20
+sidebar_position: 1
 ---
 How to customize existing components or add your own.
 
-## Getting started
+## Getting Started
 
 To add or edit components you'll need to have the Developer or Administrator role within Studio. Then, click on **Design** -> **Sections** in the navigation to begin editing components:
 
@@ -17,6 +17,24 @@ Components are written in HTML, CSS, and JavaScript and use special tags we call
 
 ![Components are just HTML, CSS, and Javascript!](/assets/BA6C1C46-F1CC-4B60-9509-7F7968553378_1_201_a.jpeg)
 
+### Creating a new component
+
+To add a new component:
+
+1. Go to **Design**.
+1. Select **Sections**.
+1. Select **+New Section**.
+1. Complete the details as follows:
+
+    | Option | Description |
+    | --- | --- |
+    | Name | Provide a descriptive name for your component. |
+    | Slug | Provide a unique slug for your component. |
+    | Category | From the list, select a category. |
+
+1. Configure your NoML. See [A NoML example](#a-noml-example).
+1. Select **Publish**. Once the component is published, it is available to use on your pages.
+
 ### A NoML example
 
 NoML is Studio's proprietary markup language that makes it possible to build components that can be edited within the page editor. It is quite similar to [JSX](https://reactjs.org/docs/introducing-jsx.html). Using NoML you can define exactly what parts of a component should be editable by page authors. You can use any HTML you want within a component, but you'll need to use NoML to make bits editable.
@@ -59,7 +77,7 @@ Several tags appear in the example above:
 2. There's then a `Collection` tag that generates multiple `Item` based on user input. These are rendered with the `callout` class which is used by the CSS to make them look like cards.
 3. Finally, the `Media`, `RichText`, and `Action` tags provide the icon, text, and editable actions (buttons) for the user of the component.
 
-## Available tags
+## Available Tags
 
 There are an array of tags within Studio that provide dynamic functionality for page authors. If you're building your own components, you'll want to familiarize yourself with each of them.
 

docs/studio/developers/eCommerce/_category_.json

@@ -1,4 +1,4 @@
 {
-  "position": 51,
+  "position": 15,
   "label": "eCommerce"
 }

docs/studio/developers/features/_category_.json

@@ -1,4 +1,4 @@
 {
-    "position": 60,
+    "position": 20,
     "label": "Other NOML Features"
 }

docs/studio/developers/tags/_category_.json

@@ -1,4 +1,4 @@
 {
-    "position": 30,
-    "label": "Basic Tags"
+    "position": 10,
+    "label": "Tags"
 }

docs/studio/developers/tags/actions.mdx

@@ -1,7 +1,6 @@
 ---
 title: Actions
 nav_label: Actions
-sidebar_position: 10
 ---
 
 The Actions tag allows you to add buttons and forms to your section.

docs/studio/developers/tags/articles.mdx

@@ -1,7 +1,6 @@
 ---
 title: Article Collection
 nav_label: Article Collection
-sidebar_position: 20
 ---
 
 The ArticleCollection generator allows you to create components powered by dynamic blog content. Users can optionally filter, sort, and pin articles to a given section using this component, giving them the flexibility to selectively display editorial content throughout your site.

docs/studio/developers/tags/banner.mdx

@@ -0,0 +1,27 @@
+---
+title: Banner
+nav_label: Banner
+---
+
+The `<Banner>` tag can be used to create site banners. To create your own banner component, simply create a new component and use the `<Banner>` tag as the outer wrapper for the component. (This should replace the `<Section>` tag as the outermost wrapper.)
+
+### Attributes
+
+The `banner` tag has the following attributes.
+
+| Attribute | Type | Required | Description |
+| --- | --- | --- | --- |
+| className | string | Optional | A hard-coded class name to add to the rendered element. |
+| dataRef | DataLocator | Required | The data-element storing the Section's configuration |
+| location | array\string | Optional | Where the component can appear; `header`, `main`, and `footer` (Default: `['main']`)|
+| properties | array/object | Optional | Define properties that content authors can configure within the page editor. For details see [Custom Properties](/docs/studio/developers/features/properties). |
+
+## Example
+
+An example of the banner tag is shown below.
+
+```jsx
+<Banner dataRef={content.banner}>
+...
+</Banner>
+```

docs/studio/developers/tags/box.mdx

@@ -1,7 +1,6 @@
 ---
 title: Box
 nav_label: Box
-sidebar_position: 20
 ---
 
 The `<Box>` tag is a special type of block-level element, which acts as a configurable container, as well as a child element of Layouts, or Collections defining a specific item in the defined layout that inherits properties from its parent.