@myissue/vue-website-page-builder
Version:
Vue 3 page builder component with drag & drop functionality.
48 lines (47 loc) • 6.35 kB
JSON
[
{
"html_code": "<section data-componentid=\"0bc7406f-472e-4889-85fc-8ef3c263ac5e\"><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
"id": "0bc7406f-472e-4889-85fc-8ef3c263ac5e",
"title": "Header H2"
},
{
"html_code": "<section data-componentid=\"44244178-e183-4439-8150-6a2fdb2dfb72\">\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
"id": "44244178-e183-4439-8150-6a2fdb2dfb72",
"title": "Text"
},
{
"html_code": "<section data-componentid=\"5515d33a-b0ce-4150-b775-2f00cf7118c9\">\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
"id": "5515d33a-b0ce-4150-b775-2f00cf7118c9",
"title": "3 Vertical Images"
},
{
"html_code": "<section data-componentid=\"4a96e0ed-b74c-4d9d-bcdb-aa7dcb794712\"><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>The web builder for stunning pages</h3></div></div></div></section>",
"id": "4a96e0ed-b74c-4d9d-bcdb-aa7dcb794712",
"title": "Header H3"
},
{
"html_code": "<section data-componentid=\"79f6665b-9179-448d-ae87-1eddc9d8e5ed\">\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.</p></div>\n </div>\n </div>\n </section>",
"id": "79f6665b-9179-448d-ae87-1eddc9d8e5ed",
"title": "Text"
},
{
"html_code": "<section data-componentid=\"2310d49a-dda0-48ac-811a-795e48c18d06\">\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\"> </div> </div> </div> </div>\n</section>",
"id": "2310d49a-dda0-48ac-811a-795e48c18d06",
"title": "2 Vertical Images"
},
{
"html_code": "<section data-componentid=\"7cb6af83-f761-4044-a0cf-d6224fa01cab\"><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>Just publish it with Vue</h3></div></div></div></section>",
"id": "7cb6af83-f761-4044-a0cf-d6224fa01cab",
"title": "Header H3"
},
{
"html_code": "<section data-componentid=\"04c007ed-f4c9-4a63-a38c-4cb2e4c949d6\">\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div class=\"\"><p>The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size.<br>Clean. Fast. Intuitive. Not everything powerful has to look complicated.</p></div>\n </div>\n </div>\n </section>",
"id": "04c007ed-f4c9-4a63-a38c-4cb2e4c949d6",
"title": "Text"
},
{
"html_code": "<section data-componentid=\"204ce730-ce82-4a9a-88e6-da431bb76c38\">\n <div class=\"py-4\">\n <div class=\"mx-auto max-w-7xl w-full pt-6 pb-6\">\n <div id=\"youtube-video\" class=\"w-full aspect-video p-4\">\n\n <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"w-full aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n </iframe>\n </div>\n </div>\n </div>\n </section>",
"id": "204ce730-ce82-4a9a-88e6-da431bb76c38",
"title": "YouTube Video"
}
]