Add a Chaptered Page
SWT

SJU Web Team

Created Apr 17, 2025

Add a Chaptered Page

159
    d

Add a Chaptered Page

8 Steps
1

Click on Manage

Click on Manage
2

Click on Content

Click on Content
3

Click on Add content

Click on Add content
4

Click on Chaptered Page

Click on Chaptered Page
5

Select your site's theme

Select your site's theme
6

Type the title of your page

Type the title of your page
7

Click on Add Chapter

Click on Add Chapter
8

Type the name of your first Chapter title.

You don't have to use numbers or do anything else. The site is programmed to know where to go.

Type the name of your first Chapter title.

#

Adding a WYSIWYG to Your Chapter

5 Steps
9

Add a component to your chapter. Let's add a WYSIWYG.

Note: Because chaptered pages are information-rich with the majority of the page content as text, the WYSIWYG will be your go to component for chaptered pages.

Add a component to your chapter. Let's add a WYSIWYG.
10

Type in the contents of your WYSIWYG

You don't need to add a heading since the chapter heading will already be there.

Type in the contents of your WYSIWYG
11

To add another chapter, click Add Chapter

To add another chapter, click Add Chapter
12

Type the chapter title

Type the chapter title
13

Enter your content

Enter your content

#

Adding an Accordion

9 Steps
14

Click on Add Chapter

Click on Add Chapter
15

Type the title of this page section.

This will go above your group of accordions.

Type the title of this page section.
16

Select Add Accordions from the component selector.

Select Add Accordions from the component selector.
17

Enter a title and anchor text for your accordion item.

The Title will be the text appearing directly prior to your first accordion. Entering the anchor term will allow you to go directly to the accordion within a chapter from a link, rather than just the chapter title.

Enter a title and anchor text for your accordion item.
18

Click on Add Accordion

Each expanding and collapsing panel of your accordion section will be its own Accordion Block.

Click on Add Accordion
19

Enter the title of your accordion

The Title of the Accordion will be red text that is always visible on the page regardless of whether the accordion panel is open or closed.

Enter the title of your accordion
20

Enter accordion content.

Enter accordion content.
21

Click on Add Accordion to add another

Click on Add Accordion to add another
22

Type in the title of your second accordion and enter content.

Type in the title of your second accordion and enter content.

#

Adding a 50-50 Split CTA Inside an Accordion

4 Steps
23

Click on Add Accordion

Click on Add Accordion
24

Type thge name of your next accordion,

Type thge name of your next accordion,
25

Add some text.

Add some text.
26

Click on the arrow next to "Add 50-50 Split CTA"

That's right! You can add components inside an Accordion Block. In this case, just add a 50-50 Split CTA.

Click on the arrow next to "Add 50-50 Split CTA"

#

Adding a Link List

13 Steps
27

Click on Add Text Block + Link Listing

Click on Add Text Block + Link Listing
28

Leave the editor blank for now

This component will present a series of text links across two columns.

Leave the editor blank for now
29

Type in the path name of your first link

Type in the path name of your first link
30

Type the name of your link

Type the name of your link
31

Click on Add another item to add another link

Click on Add another item to add another link
32

Type the path name

Type the path name
33

Type the link text

Type the link text
34

Click on Add another item

Click on Add another item
35

Type the path name

Type the path name
36

Type the link text

Type the link text
37

Click on Add another item

Click on Add another item
38

Type the path name

Type the path name
39

Type the link text

Four accordion blac ks should be good enough to get the hang of making accordions,

Type the link text

#

Set the URL Alias

5 Steps
40

To set the URL of your page Click on URL alias

We're almost ready to view the page, but first, we need to set the URL Alias.

To set the URL of your page Click on URL alias
41

Uncheck Generate automatic URL alias

Uncheck Generate automatic URL alias
42

Type in your path name

Remember, it should follow the pattern that other pages on your site follow.

Type in your path name
43

Click on Save

Click on Save
44

Review your page

So far our page has 2 WYSIWYG Chapters and an Accordion Chapter.

Review your page

#

Adding a Chapter to a Chaptered Page

6 Steps
45

Let's add a chapter. Click on Edit

Let's add a chapter. Click on Edit
46

Click on Add Chapter

Click on Add Chapter
47

Type in name of your Chapter in the Title input

Type in name of your Chapter in the Title input
48

Click on Add WYSIWYG

Click on Add WYSIWYG
49

Type your text

Type your text
50

Click on Collapse because we're going to do something new

Click on Collapse because we're going to do something new

#

Reordering Chapters

5 Steps
51

Reeorder Chapters by clicking and dragging the Change Order icon.

Reeorder Chapters by clicking and dragging the Change Order icon.
52

Click on the Change Order icon.

Click on the Change Order icon.
53

Drag the arrow up to where you want to put the chapter

Drag the arrow up to where you want to put the chapter
54

Click on Save

What results is a reordered page.

Click on Save
55

Preview your page and see that the chapter has moved up

Preview your page and see that the chapter has moved up

#

Removing a Chapter

3 Steps
56

Let's say we want to remove a chapter. Click Edit.

Let's say we want to remove a chapter. Click Edit.
57

Identify the chapter you want to remove and click on the three dots on the far right.

Identify the chapter you want to remove and click on the three dots on the far right.
58

Click on Remove in the dropdown

When you select this option, be careful because it can be tricky to get your content back.

If you haven't saved a draft or published yet, refresh your browser, and your old chapter will appear. You will lose your unsaved changes. You can also revert the page to an earlier revision, but you will lose whatever your most recent changes are. Alternatively, uyoui can reach out of us and we can try to help you.,

Click on Remove in the dropdown

#

Duplicating Chapters

7 Steps
59

Now let's find a Chapter to duplicate! Hit the three dots on another.

Now let's find a Chapter to duplicate! Hit the three dots on another.
60

Click on Duplicate

Duplicating a chapter is often a faster way to create a new chapter than starting from scratch. This is especially true for certain components, such as Accordions. Here, we're just duplicating a plan vanilla WYSIWYG.

Click on Duplicate
61

Type "Our duplicated WYSIWYG"

Type "Our duplicated WYSIWYG"
62

Click on Edit

Click on Edit
63

Now you can edit the contents of the duplicated chapter

ALL content from the cloned chapter will be in your new chapter until it is removed or written over.

Now you can edit the contents of the duplicated chapter
64

Click on Save

Click on Save
65

And preview your newly created chaptered page!

And preview your newly created chaptered page!
Well done!
Create how-to guides like this in a snap. Get Tango now.