Hey There,
I have just started using Eleventy and Netlify together to build some static sites. I wanted to emulate a “page builder” for the pages, so users will be able to choose elements from a list and populate those fields. With the lists widget I also notice you can drag and drop different sections for order.
What is the best way to set this up or is it even possible with the list widget currently. Can you use components for these sections and still have the drag and drop working? Is there a better way to setup the structure?
Below you will find the pages section for config.yml
- name: "pages"
label: "Page"
folder: "pages"
create: false # Change to true to allow editors to create new pages
slug: "{{slug}}"
fields:
- { label: "Title", name: "title", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" }
- { label: "Permalink", name: "permalink", widget: "string" }
- label: "Navigation" # https://www.11ty.dev/docs/plugins/navigation/
name: "eleventyNavigation"
widget: "object"
fields:
- { label: "Key", name: "key", widget: "string" }
- { label: "Order", name: "order", widget: "number", default: 0 }
- label: "Page Layout"
name: "page_layout"
widget: "list"
types:
- label: "Body Section"
name: "body_section"
widget: "object"
fields:
- { label: "Body Updated", name: "body_updated", widget: "string" }
- label: "Left Align"
name: "left_align"
widget: "object"
fields:
- { label: "Left Align Image", name: "left_align_image", widget: "image" }
- { label: "Left Align Title", name: "left_align_title", widget: "string" }
- { label: "Left Align Body", name: "left_align_body", widget: "markdown" }
- { label: "Left Align Link", name: "left_align_link", widget: "string" }