Building Content Pages

To demonstrate Content Page capabilities, create a Landing Page for a space shuttle tour based on this design:

Figure 1: You have lots of flexibility when arranging Fragments on a page.

Creating a Content Page

To create the page, follow these general steps:

1. Add the Fragments you need to define the basic structure of the page.
2. Edit the text for the current page.
3. Edit the images.
4. Publish the page.

You’ll complete this process next.

1. From Site Administration for your Site, go to Site Builder → Pages.

2. Click the () and select Content Page.

3. Set the Name as Space Landing Page and click Save.

   Now you’re in Content Page creation. As you work, a draft of the page is automatically saved, but you must click Publish to make it available for use.

4. Open Sections → Basic Sections and drag a Banner Center Fragment onto the page.

5. Open Section Builder → Layouts and add a 2 Column layout below that.

6. Open Basic Components.

7. Add a Card to the left column of the layout.

8. Add a Paragraph to the right side, and then an Image below that inside the same column.

Figure 2: You have lots of flexibility when arranging Fragments on a page.

Now that the structure is defined, start editing the text and images.

1. Click in each text box and edit the text to be relevant to your goal of directing potential customers to space shuttle tours.

   

   Figure 3: Edit the text and formatting as you see fit.

2. Click on the main banner image, and then on the icon.

3. Select one of the many space flight images that are surely filling up your Documents and Media library, upload a new one, or specify a URL.

Figure 4: Add some images, and the big picture comes together.

Anytime during Fragment creation, you can remove, duplicate, or configure the Fragment.

Figure 5: Add some images, and the big picture comes together.

Configuring a Fragment lets you modify the default options for a provided Fragment. This also lets you duplicate a Fragment and configure duplicates differently, so you can reuse base Fragments instead of developing new ones. When duplicating a Fragment, its configuration and editable elements are also copied.

Note: Fragment configuration and duplication are available in Liferay DXP 7.2 SP1+ and Liferay Portal GA2+.

This is looking good so far, but the one difference between the design mockup and the final result is that the background was black for the original. To finish it up, change the background color for the section to black.

1. Click on the bottom Section and some additional icons will appear.

   

   Figure 6: You can change the background color, image, or edit spacing and padding for a section. You can also remove it.

2. Click on Background Color , and select Black.

3. Finally, publish your page.

In just a few minutes, you used the power of Content Pages and Fragments to go from nothing to perfectly recreating a page design. To take it to the next level, head over to the Segmentation and Personalization guide.