How to customize your article's layout in BBCode & Formatting Knowledge Base | World Anvil

How to customize your article's layout

Formatting your articles on World Anvil doesn't just make your content prettier, but also easier to understand—for your readers or players, and also for yourself. Having a clear, readable layout helps you find your information even quicker. This guide will give you some tips and tools to improve your article layout on World Anvil.

   

1. Use the article sections

When you open the article editor, the Article Introduction box appears at the top, and below you can find several optional text boxes with prompts. You’re probably used to writing everything there.

 

But using other article Sections can help you customize and segment your article, and give hierarchy to your information. You can find these in the Sections tab.

 

 

Sidebar sections

Anything you write in these text boxes will appear in the sidebar. The “Content Panel” fields appear inside a highlighted box, while the other two appear above and below that panel. This screenshot shows where each text field will appear:

 

 

The Content Panel is a great way to add quick information, e.g. the number of inhabitants in a city, or the age of a character. Article templates already come with some predefined fields for this, but you can also create your own, which match them! Use the code --KEY::VALUE-- and replace KEY for the field name (e.g. “Age”) and VALUE for the field’s value (e.g. “3 million”).

 

If you have access to customizable templates, you can add extra key values as standard additions to your templates. For example, if the percentage of magic users in a city is important in your world, you can add it to your custom template.

 

Footer sections

These sections appear at the very bottom of the article. The full-width footer (Guild only) will take up the full width of the page, including the sidebar space: this is a great place to embed larger elements, like Family Trees, Content Trees, Whiteboards, which look better in a full-width space.

 

Finally, the Author’s Notes field doesn’t appear inside the article—instead, it will be at the top of the comments box. Use this to talk directly to your readers, e.g. ask them if they have questions, or what they want you to write about next.

 

Header sections

This will appear below the article title but above the article’s introduction text. It’s a great place to write taglines, mottos, or give credit to the article’s inspirations or co-authors).

 

2. How to Format your text on World Anvil

You’re already familiar with bold, underlined, and italic text, as well as the different ways the text can be aligned (left, right, center)—you can control this with the button toolbar in the article editor. Here are some additional text formatting options you can generate with BBCode:

BBCode
Result
 
[s]Use strikethrough text to cross out the text between the tags.[/s]
Use strikethrough text to cross out the text between the tags.
 
Use [redacted:4] to insert black boxes symbolizing redacted text. The number inside the tag is the number of characters: [redacted:10]
Use ████ to insert black boxes symbolizing redacted text. The number inside the tag is the number of characters: ██████████
 
[small]Small text[/small] can be useful for footnotes or image footers, but also for more creative uses like a character [small]whispering[/small].
Small text can be useful for footnotes or image footers, but also for more creative uses like a character whispering.
 
You can also use [sup]superscript[/sup] and [sub]subscript[/sub].
You can also use superscript and subscript.
 
[dc]T[/dc]his tag will let you have a drop cap: a bigger letter to have a fancier opener to your article. It looks best with a paragraph that’s at least 3 lines long.
This tag will let you have a drop cap: a bigger letter to have a fancier opener to your article. It looks best with a paragraph that’s at least 3 lines long.
 
[tooltip:This is a tooltip - great for additional explanations!]You can add tooltips that appear when the reader mouses over the text.[/tooltip]
You can add tooltips that appear when the reader mouses over the text.
 
[color:red]For Grandmasters of the Guild, use this to change the color of the text.[/color] [color:#0000FF]You can also use Hex color codes,[/color] [color:#0000FF90]including opacity (this is at 70%).[/color]
For Grandmasters of the Guild, use this to change the color of the text. You can also use Hex color codes, including opacity (this is at 70%).
 

There are many more BBCode formatting options available—check out the full list of BBCode tags for more details.

 

3. Add quotes, alouds and boxed text on World Anvil

Both quotes and alouds are great to break up walls of text in your articles. They’re excellent for introducing a new concept to your readers and players, too. If you’re a guild member, you can also use customized containers.

BBCode
Result
 
[quote]Use this to display quotes in your articles.|This is the author[/quote]
Use this to display quotes in your articles.
— This is the author
 
[aloud]This text will be highlighted in a box. In an RPG world, you can use this to display text meant to be read aloud by the GM.[/aloud]
This text will be highlighted in a box. In an RPG world, you can use this to display text meant to be read aloud by the GM.
 
[spoiler]Want to hide some text from your article (but still make it accessible)? Use spoiler buttons!|Name of the button (click me!)[/spoiler]
Name of the button (click me!)
Want to hide some text from your article (but still make it accessible)? Use spoiler buttons!
 
[container:example]This is a container using custom CSS. If you’re a Grandmaster of the Guild, you can use them.[/container]
This is a container using custom CSS. If you’re a Grandmaster of the Guild, you can use them.
 

Guild members can use CSS to customize, or even completely change, how these blocks look.

 

4. Change the layout of your content

Clear article layout can help readers (and you) parse your articles more easily. But layout can also have meaning—if your content is in two parallel columns, your brain will see them as equal. Columns and other layout tricks are also great for breaking up a wall of text, making it easier to read.

 

Columns

To create columns on World Anvil, you will need to use BBCode. This is an example of a two-column layout:

 
[row]
[col]
This is the left column.
[/col]
[col]
This is the right column.
[/col]
[/row]
 

This is how it will look (the background color is not part of this):

 
This will appear on the left.
This will appear on the right.
 

In this example, the [row] [/row] tags define the row—all columns always need to go inside a pair of row tags. Then, each [col] [/col] pair defines one of the columns, which are created from left to right, top to bottom. You can add as many columns inside a row tag as you want, but they will always be displayed in rows of two.

 

If you want to create rows of three columns, use the [col3] [/col3] tags:

 
[row]
[col3]
This is the left column.
[/col3]
[col3]
This is the middle column.
[/col3]
[col3]
This is the right column.
[/col3]
[/row]
 
This will appear on the left.
This will appear in the middle.
This will appear on the right.
 

Three columns is the maximum you can have displayed in a row—tags like [col4] don’t exist. However, if you’re a Grandmaster of the Guild, you can use containers to further customize columns by using the Bootstrap grid system (refer to the official Bootstrap documentation for details).