Make engaging content with Enonic’s landing page editor

Everyone working with digital content nowadays expects an intuitive, drag-and-drop visual interface. Long gone are the days with manually coding HTML pages for each piece of content on your website. Also gone are the early attempts at offering a visual CMS, with immense complexity and more buttons and options than stars on the night sky.

Content Studio is the visual user interface of the headless CMS Enonic, and provides a modern web editor experience with everything you can expect: Sleek and neat visual design, in-context previewing, content tree structure, drag-and-drop functionality, responsive design, WYSIWYG, and fast performance.

In this short guide, we’ll show you how to easily build a landing page in Enonic .

Quick intro to Content Studio

Content Studio consists of two work spaces—Content Navigator and Content Editor.

Content Navigator, also known as "browse view" or "the grid," is where you get an overview of all your content and organize it. Here you can enjoy features like:

• Tree navigation
• Previews
• Options for content items:
  • Create
  • Move
  • Duplicate
  • Sort
  • Archive/delete

Content Editor, also known as "edit view," is where you actually make blog posts, assemble landing pages, and edit images. This workspace features:

• Visual page builder
• Editable forms
• Components
  • Layouts
  • Rich text
  • Parts
  • Fragments

How to create a landing page

This is how you create a landing page from scratch in Content Studio:

1. Choose appropriate location in Content Navigator

2. Create new landing page, assign display name, and save

3. Right-click in the editor/preview and choose "customize page"

4. Right-click and insert layout. Or: open the Context Panel in the upper right, "Insert," and drag and drop layout

5. Choose layout form (2 columns, 3 columns, etc.)

6. Insert component (part, rich text, or fragment) into layout

7. Edit the component

8. Reorder components and publish page. Voilà!

Read also: Responsive content management in Enonic »

What are components?

The rich text component in the landing page builder features a rich text editor. This means you can create engaging content with every feature you expect from a word processor—including formatting, text alignment, tables, images, videos, macros, etc.

While the purpose of the rich text component should be self-explanatory, layouts, parts, and fragments may require an explanation.

Layouts and parts

Layouts and parts are configuration and code built by your developers and put into Enonic. What these consist of is entirely up to your digital team and developers—it all depends on the needs of your organization and what specific features you have requested.

A healthcare provider might for instance require parts for showing diagnoses, medical facts, and treatments, while a food vendor might need something else entirely, like a part for browsing ingredients, showing recipes, or an order button.

A part can thus be anything your developers can build—like a list showing your most recent blog posts, author profile, button, call to action, contact list, quote, price list, recipe, calculator, social sharing, or whatever else you might need.

A layout can be any page element organization you want, like one, two, three, or more columns. The layout component also lets you configure e.g. background color or the relative size between the columns—a 2-column layout may for instance be organized as 50-50, 30-70, etc.

Don’t forget to consult our Content Studio documentation »

Fragments

Fragments are reusable components, i.e. a preconfigured part or layout with such parts. Say you create an infobox you may want to reuse in future pages, with the infobox consisting of a 2-column layout—an image to the left and text to the right.

In Content Studio you can right-click a component and pick the option “Save as Fragment.” Now the predefined components are stored and can be inserted into any other page by inserting a fragment component and browsing for the relevant one.

If you insert a fragment into your current landing page and want to change it, you can detach it from the original and return to the initial setup with fully customizable layout and parts on the page.

***

Building and maintaining landing pages in Enonic is a breeze, as it should be. Just use our logical and neat Content Navigator to decide where to create a landing page. Then you can start organizing the page with our intuitive components system, dragging and dropping layouts, rich texts, parts, and fragments at will until you have it all perfected.

First published 21 August 2019, updated 5 December 2022.