Layouts Example

Next.js Marketing Examples

Home A/B Tests Redirects Layouts Personalization

Layouts

Layouts is drag-n-drop experience for Marketers to control the layout of their pages. Layouts is installed from the Zesty Marketplace and setup in next.js with an npm package React Auto Layout by Zesty.io

Code Example with Custom Components

1
2import React from "react";
3 
4import { AutoLayout } from "@zesty-io/react-autolayout";
5import { CustomTextarea } from "./CustomTextarea";
6import { CustomColumn } from "./CustomColumn";
7import { CustomRow } from "./CustomRow";
8 
9export default function Page({ content }) {
10    <AutoLayout content={content} components={{
11        "wysiwyg_basic": CustomTextarea,
12        "text": CustomText,
13        "column": CustomColumn,
14        "row": CustomRow,
15        "design": CustomDesign,
16        "link": CustomLink   
17    }} />
18}
19