Turn your design into Slices

Create Your First Slice

Transcript

[00:00] Let's model our first website section as a Slice.

[00:02] Click 'Slices' in the left-hand side menu, then click 'Create One' to start building your first Slice. Give your Slice the name 'TextSlice'.

[00:10] This is the API ID for the Slice. You should always give Slices names representative of their structure, not the content. So 'RelatedProducts', not 'RelatedTractors'.

[00:21] You'll notice the default selection for the target library is 'slices'; this is where the files for this Slice will live in your Next.js project.

[00:29] Slice Machine will create a folder for the 'TextSlice' in your Slices library. The folder includes a component file where you can code your Slice component.

[00:37] Now add a Rich Text field to your slice called 'Text Field'. Edit the settings on the field to 'Allow Multiple Paragraphs'. Then click 'Save the File System'.

In Slice Machine:

  • Create a Slice called 'TextSlice'
  • Add a Rich Text field called 'Text Field'
  • Edit the settings on the field to 'Allow multiple paragraphs'
  • Click 'Save to File System'

Answer to continue

Quiz banner

Does your slice have a rich text field with multiple paragraphs?

Did you save your work?