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.
Contents
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:
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.
Use this to display quotes in your articles.
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:
[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):
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:
[col3]
This is the left column.
[/col3]
[col3]
This is the middle column.
[/col3]
[col3]
This is the right column.
[/col3]
[/row]
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).
