├── examples
    ├── luma_homepage_admin.png
    ├── luma_homepage_storefront.png
    └── luma_homepage.html
├── registration.php
├── view
    ├── frontend
    │   ├── web
    │   │   ├── js
    │   │   │   └── content-type
    │   │   │   │   └── homepage-grid
    │   │   │   │       └── appearance
    │   │   │   │           └── default
    │   │   │   │               └── widget.js
    │   │   └── css
    │   │   │   └── source
    │   │   │       └── _module.less
    │   └── layout
    │   │   └── default.xml
    └── adminhtml
    │   ├── web
    │       ├── template
    │       │   └── content-type
    │       │   │   ├── homepage-grid
    │       │   │       └── default
    │       │   │       │   ├── master.html
    │       │   │       │   └── preview.html
    │       │   │   └── homepage-grid-item
    │       │   │       └── default
    │       │   │           ├── master.html
    │       │   │           └── preview.html
    │       ├── js
    │       │   └── content-type
    │       │   │   ├── homepage-grid-item
    │       │   │       └── preview.js
    │       │   │   └── homepage-grid
    │       │   │       └── preview.js
    │       └── css
    │       │   └── source
    │       │       └── _module.less
    │   ├── layout
    │       ├── pagebuilder_homepage_grid_form.xml
    │       └── pagebuilder_homepage_grid_item_form.xml
    │   ├── ui_component
    │       ├── pagebuilder_homepage_grid_form.xml
    │       └── pagebuilder_homepage_grid_item_form.xml
    │   └── pagebuilder
    │       └── content_type
    │           ├── homepage_grid.xml
    │           └── homepage_grid_item.xml
├── etc
    ├── module.xml
    └── adminhtml
    │   └── di.xml
├── composer.json
└── README.md


/examples/luma_homepage_admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davemacaulay/module-page-builder-grid/HEAD/examples/luma_homepage_admin.png


--------------------------------------------------------------------------------
/examples/luma_homepage_storefront.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davemacaulay/module-page-builder-grid/HEAD/examples/luma_homepage_storefront.png


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | 
 7 | use \Magento\Framework\Component\ComponentRegistrar;
 8 | 
 9 | ComponentRegistrar::register(ComponentRegistrar::MODULE, 'DaveMacaulay_PageBuilderGrid', __DIR__);
10 | 


--------------------------------------------------------------------------------
/view/frontend/web/js/content-type/homepage-grid/appearance/default/widget.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright © Magento, Inc. All rights reserved.
 3 |  * See COPYING.txt for license details.
 4 |  */
 5 | define([], function () {
 6 |     'use strict';
 7 | 
 8 |     return function (config, element) {
 9 |         console.log('Hello World');
10 |     };
11 | });
12 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/template/content-type/homepage-grid/default/master.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * Copyright © Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | -->
 7 | 
 8 | <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-homepage-grid">
 9 |     <render args="masterTemplate"/>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/template/content-type/homepage-grid-item/default/master.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * Copyright © Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | -->
 7 | 
 8 | <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-homepage-grid-item">
 9 |     <render args="masterTemplate"/>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 9 |     <module name="DaveMacaulay_PageBuilderGrid">
10 |         <sequence>
11 |             <module name="Magento_PageBuilder"/>
12 |         </sequence>
13 |     </module>
14 | </config>
15 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/template/content-type/homepage-grid/default/preview.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * Copyright © Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | -->
 7 | 
 8 | <div class="pagebuilder-content-type type-container pagebuilder-homepage-grid"
 9 |      attr="data.main.attributes"
10 |      ko-style="data.main.style"
11 |      css="data.main.css"
12 |      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
13 |     <render args="getOptions().template" />
14 |     <render args="childTemplate" />
15 | </div>
16 | 


--------------------------------------------------------------------------------
/view/adminhtml/layout/pagebuilder_homepage_grid_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 9 |     <update handle="styles"/>
10 |     <body>
11 |         <referenceContainer name="content">
12 |             <uiComponent name="pagebuilder_homepage_grid_form"/>
13 |         </referenceContainer>
14 |     </body>
15 | </page>
16 | 


--------------------------------------------------------------------------------
/view/adminhtml/layout/pagebuilder_homepage_grid_item_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 9 |     <update handle="styles"/>
10 |     <body>
11 |         <referenceContainer name="content">
12 |             <uiComponent name="pagebuilder_homepage_grid_item_form"/>
13 |         </referenceContainer>
14 |     </body>
15 | </page>
16 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "davemacaulay/module-page-builder-grid",
 3 |   "description": "Example Page Builder Grid Module",
 4 |   "version": "1.0.0",
 5 |   "require": {
 6 |     "magento/framework": "*",
 7 |     "magento/module-page-builder": "*",
 8 |     "php": "~7.1.3||~7.2.0||~7.3.0"
 9 |   },
10 |   "type": "magento2-module",
11 |   "license": [
12 |     "proprietary"
13 |   ],
14 |   "authors": [
15 |     {
16 |       "name": "Dave Macaulay",
17 |       "email": "macaulay@adobe.com"
18 |     },
19 |     {
20 |       "name": "Hwashiang Yu",
21 |       "email": "hwyu@adobe.com"
22 |     }
23 |   ],
24 |   "autoload": {
25 |     "files": [
26 |       "registration.php"
27 |     ],
28 |     "psr-4": {
29 |       "DaveMacaulay\\PageBuilderGrid\\": ""
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/template/content-type/homepage-grid-item/default/preview.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | /**
 3 |  * Copyright © Magento, Inc. All rights reserved.
 4 |  * See COPYING.txt for license details.
 5 |  */
 6 | -->
 7 | 
 8 | <div class="pagebuilder-content-type type-container pagebuilder-homepage-item"
 9 |      attr="data.main.attributes"
10 |      ko-style="data.main.style"
11 |      css="Object.assign(data.main.css(), {'empty-container': contentType.children().length == 0})"
12 |      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
13 |     <render args="getOptions().template" />
14 |     <render args="childTemplate" />
15 | 
16 |     <div class="pagebuilder-display-label" html="function () { return displayLabel().toUpperCase(); }()"></div>
17 |     <div class="pagebuilder-empty-container" css="{visible: contentType.children().length == 0}" translate="'Empty Grid Item'">
18 |         <div class="pagebuilder-drop-indicator"></div>
19 |     </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/view/frontend/layout/default.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 9 |     <body>
10 |         <referenceBlock name="pagebuilder.widget.initializer">
11 |             <arguments>
12 |                 <argument name="config" xsi:type="array">
13 |                     <item name="homepage-grid" xsi:type="array">
14 |                         <item name="default" xsi:type="array">
15 |                             <item name="component" xsi:type="string">DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid/appearance/default/widget</item>
16 |                         </item>
17 |                     </item>
18 |                 </argument>
19 |             </arguments>
20 |         </referenceBlock>
21 |     </body>
22 | </page>
23 | 
24 | 


--------------------------------------------------------------------------------
/view/frontend/web/css/source/_module.less:
--------------------------------------------------------------------------------
 1 | // /**
 2 | //  * Copyright © Magento, Inc. All rights reserved.
 3 | //  * See COPYING.txt for license details.
 4 | //  */
 5 | 
 6 | .pagebuilder-homepage-grid {
 7 |     &:extend(.page-main);
 8 |     margin: 0 auto !important;
 9 |     padding: 0 20px !important;
10 |     display: grid;
11 |     grid-gap: 10px;
12 |     grid-template-columns: 1fr 1fr 1fr;
13 |     grid-template-rows: 270px 370px 270px;
14 | 
15 |     .pagebuilder-homepage-grid-item {
16 |         &:nth-child(1) {
17 |             grid-column: ~"2 / 4";
18 |             grid-row: 1;
19 |         }
20 |         &:nth-child(2) {
21 |             grid-column: 1 ;
22 |             grid-row: ~"1 / 3";
23 |         }
24 |         &:nth-child(3) {
25 |             grid-column: 2;
26 |             grid-row: 2;
27 |         }
28 |         &:nth-child(4) {
29 |             grid-column: 3;
30 |             grid-row: ~"2 / 4";
31 |         }
32 |         &:nth-child(5) {
33 |             grid-column: ~"1 / 3";
34 |             grid-row: 3;
35 |         }
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/js/content-type/homepage-grid-item/preview.js:
--------------------------------------------------------------------------------
 1 | define([
 2 |     'jquery',
 3 |     'underscore',
 4 |     'Magento_PageBuilder/js/content-type/preview-collection',
 5 | ], function ($, _, PreviewCollection) {
 6 |     'use strict';
 7 |     var $super;
 8 | 
 9 |     /**
10 |      * Preview Constructor
11 |      *
12 |      * @param parent
13 |      * @param config
14 |      * @param stageId
15 |      * @constructor
16 |      */
17 |     function Preview(parent, config, stageId) {
18 |         PreviewCollection.call(this, parent, config, stageId);
19 |     }
20 |     Preview.prototype = Object.create(PreviewCollection.prototype);
21 |     $super = PreviewCollection.prototype;
22 | 
23 |     /**
24 |      * Remove move, duplicate and remove options
25 |      *
26 |      * @returns {*}
27 |      */
28 |     Preview.prototype.retrieveOptions = function retrieveOptions() {
29 |         var options = $super.retrieveOptions.call(this, arguments);
30 |         delete options.move;
31 |         delete options.duplicate;
32 |         delete options.remove;
33 |         return options;
34 |     };
35 | 
36 |     return Preview;
37 | });
38 | 


--------------------------------------------------------------------------------
/view/adminhtml/web/css/source/_module.less:
--------------------------------------------------------------------------------
 1 | // /**
 2 | //  * Copyright © Magento, Inc. All rights reserved.
 3 | //  * See COPYING.txt for license details.
 4 | //  */
 5 | 
 6 | .pagebuilder-homepage-grid.pagebuilder-content-type.type-container {
 7 |     border: none;
 8 |     outline: none;
 9 | 
10 |     > .element-children {
11 |         display: grid;
12 |         grid-gap: 10px;
13 |         grid-template-columns: 1fr 1fr 1fr;
14 |         grid-template-rows: 270px 370px 270px;
15 | 
16 |         > .pagebuilder-content-type-wrapper {
17 |             height: 100%;
18 | 
19 |             &:nth-child(1) {
20 |                 grid-column: ~"2 / 4";
21 |                 grid-row: 1;
22 |             }
23 |             &:nth-child(2) {
24 |                 grid-column: 1 ;
25 |                 grid-row: ~"1 / 3";
26 |             }
27 |             &:nth-child(3) {
28 |                 grid-column: 2;
29 |                 grid-row: 2;
30 |             }
31 |             &:nth-child(4) {
32 |                 grid-column: 3;
33 |                 grid-row: ~"2 / 4";
34 |             }
35 |             &:nth-child(5) {
36 |                 grid-column: ~"1 / 3";
37 |                 grid-row: 3;
38 |             }
39 | 
40 |             .pagebuilder-homepage-item {
41 |                 height: 100%;
42 | 
43 |                 > .element-children {
44 |                     height: 100%;
45 |                 }
46 |             }
47 |         }
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Magento Page Builder - Homepage Grid
 2 | 
 3 | This module serves as an example for how you can create relatively complex content types within the new Page Builder framework. This module was created to show how we can easily rebuild the Luma sample content using Page Builder.
 4 | 
 5 | This module contains two content types, both with different purposes:
 6 | - Homepage Grid
 7 |     - This is responsible for housing all of the grid items to build up the final grid.
 8 |     - By design this content type can only contain grid items, and is fixed to having 5 children for our specific rigid grid.
 9 | - Homepage Grid Item
10 |     - This acts very much like a row or a column, housing the internal content and providing various background options.
11 |     - This can contain any content type available in the framework (providing their configuration settings allow it) to generate rich content.
12 |     
13 | ### Example
14 | Within this module we provide the master storage format contents for the luma homepage that's been presented alongside this module.
15 | 
16 | **Admin View:**
17 | ![Luma Homepage Admin](examples/luma_homepage_admin.png "Luma Homepage Admin")
18 | 
19 | **Storefront View:**
20 | ![Luma Homepage Storefront](examples/luma_homepage_storefront.png "Luma Homepage Storefront")
21 | 
22 | This example can be imported into any Magento 2.3+ instance with Page Builder installed alongside this module. This can be done by updating the entities content to that provided in `examples/luma_homepage.html`.
23 | 


--------------------------------------------------------------------------------
/etc/adminhtml/di.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 9 |     <virtualType name="AppearanceSourceHomepageGrid" type="Magento\PageBuilder\Model\Source\VisualSelect">
10 |         <arguments>
11 |             <argument name="optionsSize" xsi:type="string">large</argument>
12 |             <argument name="optionsData" xsi:type="array">
13 |                 <item name="0" xsi:type="array">
14 |                     <item name="value" xsi:type="string">default</item>
15 |                     <item name="title" xsi:type="string" translate="true">Default</item>
16 |                 </item>
17 |             </argument>
18 |         </arguments>
19 |     </virtualType>
20 |     <virtualType name="AppearanceSourceHomepageGridItem" type="Magento\PageBuilder\Model\Source\VisualSelect">
21 |         <arguments>
22 |             <argument name="optionsSize" xsi:type="string">large</argument>
23 |             <argument name="optionsData" xsi:type="array">
24 |                 <item name="0" xsi:type="array">
25 |                     <item name="value" xsi:type="string">default</item>
26 |                     <item name="title" xsi:type="string" translate="true">Default</item>
27 |                 </item>
28 |             </argument>
29 |         </arguments>
30 |     </virtualType>
31 | </config>


--------------------------------------------------------------------------------
/view/adminhtml/web/js/content-type/homepage-grid/preview.js:
--------------------------------------------------------------------------------
 1 | define([
 2 |     'jquery',
 3 |     'knockout',
 4 |     'Magento_PageBuilder/js/events',
 5 |     'underscore',
 6 |     'Magento_PageBuilder/js/content-type/preview-collection',
 7 |     'Magento_PageBuilder/js/content-type-factory',
 8 |     'Magento_PageBuilder/js/config',
 9 | ], function ($, ko, events, underscore, PreviewCollection, createContentType, pageBuilderConfig) {
10 |     'use strict';
11 | 
12 |     /**
13 |      * Preview Constructor
14 |      *
15 |      * @param parent
16 |      * @param config
17 |      * @param stageId
18 |      * @constructor
19 |      */
20 |     function Preview(parent, config, stageId) {
21 |         var self = this;
22 | 
23 |         PreviewCollection.call(this, parent, config, stageId);
24 | 
25 |         events.on("homepage-grid:dropAfter", function (args) {
26 |             if (args.id === self.contentType.id && self.contentType.children().length === 0) {
27 |                 // Once the grid is ready, let's add in our children
28 |                 self.populateGrid();
29 |             }
30 |         });
31 |     }
32 |     Preview.prototype = Object.create(PreviewCollection.prototype);
33 | 
34 |     /**
35 |      * Populate the grid with 5 children
36 |      */
37 |     Preview.prototype.populateGrid = function () {
38 |         var self = this;
39 |         var i;
40 | 
41 |         // Create 5 homepage grid items
42 |         for (i = 0; i < 5; i++) {
43 |             console.log(this.contentType);
44 |             createContentType(
45 |                 pageBuilderConfig.getContentTypeConfig("homepage-grid-item"),
46 |                 this.contentType,
47 |                 this.contentType.stageId
48 |             ).then(function (gridItem) {
49 |                 self.contentType.addChild(gridItem);
50 |             });
51 |         }
52 |     };
53 | 
54 |     /**
55 |      * Mark as not a standard container
56 |      *
57 |      * @returns {boolean}
58 |      */
59 |     Preview.prototype.isContainer = function () {
60 |         return false;
61 |     };
62 | 
63 |     return Preview;
64 | });
65 | 


--------------------------------------------------------------------------------
/view/adminhtml/ui_component/pagebuilder_homepage_grid_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form_with_background_attributes">
 9 |     <argument name="data" xsi:type="array">
10 |         <item name="js_config" xsi:type="array">
11 |             <item name="provider" xsi:type="string">pagebuilder_homepage_grid_form.pagebuilder_homepage_grid_form_data_source</item>
12 |         </item>
13 |         <item name="label" xsi:type="string" translate="true">Grid</item>
14 |     </argument>
15 |     <settings>
16 |         <deps>
17 |             <dep>pagebuilder_homepage_grid_form.pagebuilder_homepage_grid_form_data_source</dep>
18 |         </deps>
19 |         <namespace>pagebuilder_homepage_grid_form</namespace>
20 |     </settings>
21 |     <dataSource name="pagebuilder_homepage_grid_form_data_source">
22 |         <argument name="data" xsi:type="array">
23 |             <item name="js_config" xsi:type="array">
24 |                 <item name="component" xsi:type="string">Magento_PageBuilder/js/form/provider</item>
25 |             </item>
26 |         </argument>
27 |         <dataProvider name="pagebuilder_homepage_grid_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
28 |             <settings>
29 |                 <requestFieldName/>
30 |                 <primaryFieldName/>
31 |             </settings>
32 |         </dataProvider>
33 |     </dataSource>
34 |     <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
35 |         <settings>
36 |             <label translate="true">Appearance</label>
37 |             <additionalClasses>
38 |                 <class name="admin__fieldset-visual-select-large">true</class>
39 |             </additionalClasses>
40 |             <collapsible>false</collapsible>
41 |             <opened>true</opened>
42 |             <imports>
43 |                 <link name="hideFieldset">${$.name}.appearance:options</link>
44 |                 <link name="hideLabel">${$.name}.appearance:options</link>
45 |             </imports>
46 |         </settings>
47 |         <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
48 |             <argument name="data" xsi:type="array">
49 |                 <item name="config" xsi:type="array">
50 |                     <item name="default" xsi:type="string">default</item>
51 |                 </item>
52 |             </argument>
53 |             <settings>
54 |                 <additionalClasses>
55 |                     <class name="admin__field-wide">true</class>
56 |                     <class name="admin__field-visual-select-container">true</class>
57 |                 </additionalClasses>
58 |                 <dataType>text</dataType>
59 |                 <validation>
60 |                     <rule name="required-entry" xsi:type="boolean">true</rule>
61 |                 </validation>
62 |                 <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
63 |             </settings>
64 |             <formElements>
65 |                 <select>
66 |                     <settings>
67 |                         <options class="AppearanceSourceHomepageGrid" />
68 |                     </settings>
69 |                 </select>
70 |             </formElements>
71 |         </field>
72 |     </fieldset>
73 |     <fieldset name="background" sortOrder="20">
74 |         <field name="mobile_image">
75 |             <settings>
76 |                 <visible>false</visible>
77 |             </settings>
78 |         </field>
79 |     </fieldset>
80 |     <fieldset name="advanced">
81 |         <field name="margins_and_padding">
82 |             <argument name="data" xsi:type="array">
83 |                 <item name="config" xsi:type="array">
84 |                     <item name="default" xsi:type="string">{"margin":{"bottom":"10","left":"0","right":"0","top":"0"},"padding":{"bottom":"0","left":"0","right":"0","top":"0"}}</item>
85 |                 </item>
86 |             </argument>
87 |         </field>
88 |     </fieldset>
89 | </form>
90 | 


--------------------------------------------------------------------------------
/view/adminhtml/ui_component/pagebuilder_homepage_grid_item_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form_with_background_attributes">
 9 |     <argument name="data" xsi:type="array">
10 |         <item name="js_config" xsi:type="array">
11 |             <item name="provider" xsi:type="string">pagebuilder_homepage_grid_item_form.pagebuilder_homepage_grid_item_form_data_source</item>
12 |         </item>
13 |         <item name="label" xsi:type="string" translate="true">Grid Item</item>
14 |     </argument>
15 |     <settings>
16 |         <deps>
17 |             <dep>pagebuilder_homepage_grid_item_form.pagebuilder_homepage_grid_item_form_data_source</dep>
18 |         </deps>
19 |         <namespace>pagebuilder_homepage_grid_item_form</namespace>
20 |     </settings>
21 |     <dataSource name="pagebuilder_homepage_grid_item_form_data_source">
22 |         <argument name="data" xsi:type="array">
23 |             <item name="js_config" xsi:type="array">
24 |                 <item name="component" xsi:type="string">Magento_PageBuilder/js/form/provider</item>
25 |             </item>
26 |         </argument>
27 |         <dataProvider name="pagebuilder_homepage_grid_item_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
28 |             <settings>
29 |                 <requestFieldName/>
30 |                 <primaryFieldName/>
31 |             </settings>
32 |         </dataProvider>
33 |     </dataSource>
34 |     <fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
35 |         <settings>
36 |             <label translate="true">Appearance</label>
37 |             <additionalClasses>
38 |                 <class name="admin__fieldset-visual-select-large">true</class>
39 |             </additionalClasses>
40 |             <collapsible>false</collapsible>
41 |             <opened>true</opened>
42 |             <imports>
43 |                 <link name="hideFieldset">${$.name}.appearance:options</link>
44 |                 <link name="hideLabel">${$.name}.appearance:options</link>
45 |             </imports>
46 |         </settings>
47 |         <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
48 |             <argument name="data" xsi:type="array">
49 |                 <item name="config" xsi:type="array">
50 |                     <item name="default" xsi:type="string">default</item>
51 |                 </item>
52 |             </argument>
53 |             <settings>
54 |                 <additionalClasses>
55 |                     <class name="admin__field-wide">true</class>
56 |                     <class name="admin__field-visual-select-container">true</class>
57 |                 </additionalClasses>
58 |                 <dataType>text</dataType>
59 |                 <validation>
60 |                     <rule name="required-entry" xsi:type="boolean">true</rule>
61 |                 </validation>
62 |                 <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
63 |             </settings>
64 |             <formElements>
65 |                 <select>
66 |                     <settings>
67 |                         <options class="AppearanceSourceHomepageGridItem" />
68 |                     </settings>
69 |                 </select>
70 |             </formElements>
71 |         </field>
72 |     </fieldset>
73 |     <fieldset name="background" sortOrder="20">
74 |         <field name="mobile_image">
75 |             <settings>
76 |                 <visible>false</visible>
77 |             </settings>
78 |         </field>
79 |     </fieldset>
80 |     <fieldset name="advanced">
81 |         <field name="margins_and_padding">
82 |             <argument name="data" xsi:type="array">
83 |                 <item name="config" xsi:type="array">
84 |                     <item name="default" xsi:type="string">{"margin":{"bottom":"0","left":"0","right":"0","top":"0"},"padding":{"bottom":"10","left":"10","right":"10","top":"10"}}</item>
85 |                 </item>
86 |             </argument>
87 |         </field>
88 |     </fieldset>
89 | </form>
90 | 


--------------------------------------------------------------------------------
/view/adminhtml/pagebuilder/content_type/homepage_grid.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
 9 |     <type name="homepage-grid"
10 |           label="Grid"
11 |           component="Magento_PageBuilder/js/content-type-collection"
12 |           preview_component="DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid/preview"
13 |           master_component="Magento_PageBuilder/js/content-type/master-collection"
14 |           form="pagebuilder_homepage_grid_form"
15 |           menu_section="layout"
16 |           icon="icon-pagebuilder-row"
17 |           sortOrder="1"
18 |           translate="label">
19 |         <parents default_policy="deny">
20 |             <parent name="root-container" policy="allow"/>
21 |         </parents>
22 |         <children default_policy="deny">
23 |             <child name="homepage-grid-item" policy="allow"/>
24 |         </children>
25 |         <appearances>
26 |             <appearance default="true"
27 |                         name="default"
28 |                         preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/preview"
29 |                         master_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/master"
30 |                         reader="Magento_PageBuilder/js/master-format/read/configurable">
31 |                 <elements>
32 |                     <element name="main">
33 |                         <style name="background_color" source="background_color"/>
34 |                         <style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image" persistence_mode="write"/>
35 |                         <style name="background_position" source="background_position"/>
36 |                         <style name="background_size" source="background_size"/>
37 |                         <style name="background_repeat" source="background_repeat"/>
38 |                         <style name="background_attachment" source="background_attachment"/>
39 |                         <style name="text_align" source="text_align"/>
40 |                         <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
41 |                         <style name="border_color" source="border_color"/>
42 |                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
43 |                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
44 |                         <style name="justify_content" source="justify_content" persistence_mode="read"/>
45 |                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
46 |                         <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
47 |                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
48 |                         <attribute name="name" source="data-content-type"/>
49 |                         <attribute name="appearance" source="data-appearance"/>
50 |                         <attribute name="background_images" source="data-background-images"/>
51 |                         <css name="css_classes">
52 |                             <filter>
53 |                                 <class source="pagebuilder-homepage-grid"/>
54 |                             </filter>
55 |                         </css>
56 |                     </element>
57 |                 </elements>
58 |                 <converters>
59 |                     <converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
60 |                         <config>
61 |                             <item name="attribute_name" value="background_images"/>
62 |                             <item name="desktop_image_variable" value="background_image"/>
63 |                             <item name="mobile_image_variable" value="mobile_image"/>
64 |                         </config>
65 |                     </converter>
66 |                 </converters>
67 |             </appearance>
68 |         </appearances>
69 |     </type>
70 | </config>
71 | 


--------------------------------------------------------------------------------
/view/adminhtml/pagebuilder/content_type/homepage_grid_item.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
 9 |     <type name="homepage-grid-item"
10 |           label="Grid Item"
11 |           component="Magento_PageBuilder/js/content-type-collection"
12 |           preview_component="DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid-item/preview"
13 |           master_component="Magento_PageBuilder/js/content-type/master-collection"
14 |           form="pagebuilder_homepage_grid_item_form"
15 |           menu_section="layout"
16 |           icon="icon-pagebuilder-row"
17 |           sortOrder="1"
18 |           translate="label">
19 |         <parents default_policy="deny">
20 |             <parent name="homepage-grid" policy="allow"/>
21 |         </parents>
22 |         <children default_policy="allow"/>
23 |         <is_system>false</is_system>
24 |         <appearances>
25 |             <appearance default="true"
26 |                         name="default"
27 |                         preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/preview"
28 |                         master_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/master"
29 |                         reader="Magento_PageBuilder/js/master-format/read/configurable">
30 |                 <elements>
31 |                     <element name="main">
32 |                         <style name="background_color" source="background_color"/>
33 |                         <style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image" persistence_mode="write"/>
34 |                         <style name="background_position" source="background_position"/>
35 |                         <style name="background_size" source="background_size"/>
36 |                         <style name="background_repeat" source="background_repeat"/>
37 |                         <style name="background_attachment" source="background_attachment"/>
38 |                         <style name="text_align" source="text_align"/>
39 |                         <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
40 |                         <style name="border_color" source="border_color"/>
41 |                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
42 |                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
43 |                         <style name="justify_content" source="justify_content" persistence_mode="read"/>
44 |                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
45 |                         <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
46 |                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
47 |                         <attribute name="name" source="data-content-type"/>
48 |                         <attribute name="appearance" source="data-appearance"/>
49 |                         <attribute name="background_images" source="data-background-images"/>
50 |                         <css name="css_classes">
51 |                             <filter>
52 |                                 <class source="pagebuilder-homepage-grid-item"/>
53 |                             </filter>
54 |                         </css>
55 |                     </element>
56 |                 </elements>
57 |                 <converters>
58 |                     <converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
59 |                         <config>
60 |                             <item name="attribute_name" value="background_images"/>
61 |                             <item name="desktop_image_variable" value="background_image"/>
62 |                             <item name="mobile_image_variable" value="mobile_image"/>
63 |                         </config>
64 |                     </converter>
65 |                 </converters>
66 |             </appearance>
67 |         </appearances>
68 |     </type>
69 |     <type name="column">
70 |         <parents default_policy="deny">
71 |             <parent name="homepage-grid-item" policy="allow"/>
72 |         </parents>
73 |     </type>
74 | </config>
75 | 


--------------------------------------------------------------------------------
/examples/luma_homepage.html:
--------------------------------------------------------------------------------
 1 | <div class="pagebuilder-homepage-grid" data-content-type="homepage-grid" data-appearance="default" data-element="main" style="background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 0px;">
 2 |     <div class="pagebuilder-homepage-grid-item" data-content-type="homepage-grid-item" data-appearance="default" data-background-color-format="hex" data-element="main" style="background-color: rgb(252, 219, 39); background-position: left center; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 20px;">
 3 |         <div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main">
 4 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-image: url('{{media url=wysiwyg/top-right.png}}'); background-position: center center; background-size: contain; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 58.3333%; margin: 0px; padding: 10px; align-self: stretch;"></div>
 5 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="align-top" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 41.6667%; margin: 0px; padding: 10px 10px 10px 30px; align-self: flex-start;">
 6 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
 7 |                     <div>
 8 |                         <div>
 9 |                             <p><span style="font-size: 32px;">Even more ways to mix and match</span></p>
10 |                         </div>
11 |                     </div>
12 |                 </div>
13 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
14 |                     <div><span style="font-size: 20px;">Buy 3 luma tees and get a 4th free</span></div>
15 |                 </div>
16 |                 <div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; display: inline-block; margin: 15px 0px 0px; padding: 0px;">
17 |                     <div data-content-type="button-item" data-appearance="default" data-element="main" style="display: inline-block;"><a class="pagebuilder-button-link" href="" target="" data-link-type="default" data-element="link" style="text-align: left; margin: 0px; padding: 0px;"><span data-element="link_text">Shop Tees</span></a></div>
18 |                 </div>
19 |             </div>
20 |         </div>
21 |     </div>
22 |     <div class="pagebuilder-homepage-grid-item" data-content-type="homepage-grid-item" data-appearance="default" data-element="main" style="background-image: url('{{media url=wysiwyg/top-left.jpg}}'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 10px;">
23 |         <div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main">
24 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="align-top" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 75%; margin: 0px; padding: 25px 10px 10px 25px; align-self: flex-start;">
25 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
26 |                     <div><span style="font-size: 40px;"><strong>20% OFF</strong></span></div>
27 |                 </div>
28 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
29 |                     <div>
30 |                         <div><span style="font-size: 24px;">Luma pants when you shop today*</span></div>
31 |                     </div>
32 |                 </div>
33 |                 <div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; display: inline-block; margin: 15px 0px 0px; padding: 0px;">
34 |                     <div data-content-type="button-item" data-appearance="default" data-element="main" style="display: inline-block;"><a class="pagebuilder-button-link" href="" target="" data-link-type="default" data-element="link" style="text-align: left; margin: 0px; padding: 0px;"><span data-element="link_text">Shop Pants</span></a></div>
35 |                 </div>
36 |             </div>
37 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 25%; margin: 0px; padding: 10px; align-self: stretch;"></div>
38 |         </div>
39 |     </div>
40 |     <div class="pagebuilder-homepage-grid-item" data-content-type="homepage-grid-item" data-appearance="default" data-element="main" style="background-image: url('{{media url=wysiwyg/middle.jpg}}'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 10px;">
41 |         <div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main">
42 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 33.3333%; margin: 0px; padding: 10px; align-self: stretch;"></div>
43 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="align-top" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 66.6667%; margin: 0px; padding: 10px; align-self: flex-start;">
44 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
45 |                     <div>
46 |                         <p><span style="font-size: 32px;">Take it from Erin</span></p>
47 |                     </div>
48 |                 </div>
49 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
50 |                     <p><span style="font-size: 20px;">Luma founder Erin Renny shares her favorites!</span></p>
51 |                 </div>
52 |                 <div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; display: inline-block; margin: 15px 0px 0px; padding: 0px;">
53 |                     <div data-content-type="button-item" data-appearance="default" data-element="main" style="display: inline-block;"><a class="pagebuilder-button-link" href="" target="" data-link-type="default" data-element="link" style="text-align: left; margin: 0px; padding: 0px;"><span data-element="link_text">Shop Erin Reccomends</span></a></div>
54 |                 </div>
55 |             </div>
56 |         </div>
57 |     </div>
58 |     <div class="pagebuilder-homepage-grid-item" data-content-type="homepage-grid-item" data-appearance="default" data-element="main" style="background-image: url('{{media url=wysiwyg/bottom-right.jpg}}'); background-position: center bottom; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 20px;">
59 |         <div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main">
60 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="align-top" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.85); background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 100%; margin: 0px; padding: 20px; align-self: flex-start;">
61 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
62 |                     <p><span style="font-size: 32px;">Science meets performance&nbsp;</span></p>
63 |                 </div>
64 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
65 |                     <p><span style="font-size: 20px;">Wicking to raingear, Luma covers you</span></p>
66 |                 </div>
67 |                 <div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; display: inline-block; margin: 15px 0px 0px; padding: 0px;">
68 |                     <div data-content-type="button-item" data-appearance="default" data-element="main" style="display: inline-block;"><a class="pagebuilder-button-link" href="" target="" data-link-type="default" data-element="link" style="text-align: left; margin: 0px; padding: 0px;"><span data-element="link_text">Shop Performance</span></a></div>
69 |                 </div>
70 |             </div>
71 |         </div>
72 |     </div>
73 |     <div class="pagebuilder-homepage-grid-item" data-content-type="homepage-grid-item" data-appearance="default" data-element="main" style="background-image: url('{{media url=wysiwyg/bottom-left.jpg}}'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 40px 40px 20px 20px;">
74 |         <div class="pagebuilder-column-group" style="display: flex;" data-content-type="column-group" data-grid-size="12" data-element="main">
75 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 25%; margin: 0px; padding: 10px; align-self: stretch;"></div>
76 |             <div class="pagebuilder-column" data-content-type="column" data-appearance="align-top" data-element="main" style="justify-content: flex-start; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.85); background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; width: 75%; margin: 0px; padding: 20px; align-self: flex-start;">
77 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
78 |                     <div>
79 |                         <div><span style="font-size: 32px;">Twice around, twice as nice</span></div>
80 |                     </div>
81 |                 </div>
82 |                 <div data-content-type="text" data-appearance="default" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;">
83 |                     <div>
84 |                         <div><span style="font-size: 20px;">Find conscientious, comfy clothing in our eco-friendly collection</span></div>
85 |                     </div>
86 |                 </div>
87 |                 <div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" style="border-style: none; border-width: 1px; border-radius: 0px; display: inline-block; margin: 15px 0px 0px; padding: 0px;">
88 |                     <div data-content-type="button-item" data-appearance="default" data-element="main" style="display: inline-block;"><a class="pagebuilder-button-link" href="" target="" data-link-type="default" data-element="link" style="text-align: left; margin: 0px; padding: 0px;"><span data-element="link_text">Shop Erin Reccomends</span></a></div>
89 |                 </div>
90 |             </div>
91 |         </div>
92 |     </div>
93 | </div>
94 | <div data-content-type="row" data-appearance="contained" data-element="main">
95 | <div data-enable-parallax="0" data-parallax-speed="0.5" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;"></div>
96 | </div>


--------------------------------------------------------------------------------