• Are you a partner? Please find our certification tracks on our legacy Academy.

Contentstack End User Training (EUT)

Course Home
1. Headless and Composable Contentstack
5m 35s
2. Organization and Stacks
7m 45s
3. Building the Content Structure
5m 45s
4. Content Type Classification
14m 20s
5. Labels
6m 15s
6. Fields
4m 50s
7. Single Line Textbox Field
3m 45s
8. Multi-Line Textbox Field
2m 45s
9. URL Field
1m 50s
10. Number Field
2m 10s
11. Boolean Field
2m 45s
12. Date Field
2m 45s
13. File Field
1m 45s
14. Link Field
2m 45s
15. Select Field
1m 45s
16. Reference Field
1m 45s
17. Group Field
5m 25s
18. Modular Blocks Field
4m 27s
19. Global Field
2m 40s
20. HTML-based Rich Text Editor Field
3m 05s
21. JSON Rich Text Editor Field
3m 25s
22. Field Visibility Rules
2m 10s
23. Building the Content
1m 15s
24. Assets
7m 45s
25. Assets Exercise
6m 10s
26. Entries
8m 34s
27. Entries Exercise
8m 44s
28. Versioning
4m 10s
29. Localization
4m 45s
30. Environments
3m 14s
31. Live Preview
4m 47s
32. Publishing
2m 05s
33. Publish Queue
4m 50s
34. Releases
7m 22s
35. Understanding the Management Tools
6m 20s
36. Workflows
3m 10s
37. Tasks
5m 50s
38. Publish Rules
14m 35s
39. Comments and Discussions
4m 10s
40. EUT Summary
0m 45s

Live Preview

Live Preview allows content managers to preview content without publishing it to an environment or saving the changes made. The content changes you make reflect in the preview pane in real-time.

You can also preview your content changes across multiple channels, such as mobiles, tablets, and desktops. This flexibility allows you to ensure website content looks precisely how you intended and thus helps achieve omnichannel content delivery.

CSendUserTraining_L31_img-1.png

Video: Contentstack's Live Preview

The following video demonstrates the Live Preview feature.

Understanding with an example

Content managers always preview their content before deploying it on production. With the Live Preview feature, you can edit your content and view the changes you make in real-time without saving or publishing to a live website.

To do this, perform the following steps:

  • Once the developer has configured Live Preview for your stack, you can preview entry content across all entries of your stack. Click on the Live Preview icon in the right sidebar of the entry editor page to open the preview window for your entry.

  • While hovering over blocks in the preview pane, you will see an Edit button. If you need to edit any block, click on this edit button to be redirected to the corresponding field on your entry page.

  • If a block of content is referenced from another entry, when you click the Edit button, you will be redirected to the corresponding field within the specific entry. Make changes to the field and watch them reflect in the preview pane in real-time.

  • Once you know the changes, you can publish your content to the production site.

We will be looking into publishing in the upcoming episodes.

Potential Use Case:

  • Live Preview is an excellent feature for editors to preview content changes hassle-free and quickly while editing any field content in a side-by-side panel without saving and publishing to reduce overall time to audit changes.

  • Live Preview also allows some amount of device specific previews like Desktop and Mobile view.

Quick Tips:

  • Live Preview feature can be configured for websites build with Contentstack's REST APIs integration and does not work for websites that use a third-party website builder or CMS to generate HTML.

  • Currently Live Preview not compatible with native mobile applications and the preview websites must be hosted over HTTPS.

  • You can configure tight User Access and Roles around Live Preview to decide what user role have permission to a specific environment or language in which the entry has been published to access to Live Preview.

Further Reading