Infoboxes can be edited in two basic ways: visually or via source editor mode.
The default Infobox Builder is used for basic infobox creation and visually editing an infobox. It is likely that more complex changes and customization will require Infobox source edit mode.
Visual infobox editor[]
Editor sidebar functions
The Infobox Builder (located at Special:InfoboxBuilder) is the default editor for Portable Infoboxes. It loads when creating a new infobox template, or editing infobox templates without complex tags. To use it, you must also select the "Infobox" template classification when editing the infobox.
At the top of the editor pane is the name of your template. If you started with Special:InfoboxBuilder rather than the Visual Editor, it will say "Untitled Infobox Template" here. You may click on it and give it a name, or it will prompt you for a name when you attempt to publish the infobox.
On the left side of the editor pane, there is a preview of the infobox template. The sidebar on the right contains buttons for adding new items. Titles, headers, images, and data rows are supported.
The infobox preview's items can be configured by clicking on them and using the options pane in the right sidebar. The items can also be rearranged by dragging them around. To remove an item, click on it and use the trash can button on the right.
There are 4 types of items in the visual infobox editor. The following table provides their full information.
| Element Name | Information | Options | Has input field |
|---|---|---|---|
Title<title>
|
It provides the title of the infobox in an article. This is typically the article's name, but doesn't have to be. | Article Name: If this option is checked, the infobox title will automatically default to the article's name. | No |
Image<image>
|
It is a placeholder for an image or video, which is manually added to the infobox on an article page. The image takes the same width as the other infobox elements, except on desktop view when an inserted image is smaller than the infobox width. A caption field will be automatically added to image elements if they are present when the infobox is published. | None | No |
Row<data>
|
It provides a data row with a label. For example, the label could be something like "Eye Color", while the output on an article page could be "Brown" or "Blue". | None | Yes |
Section Header<header>
|
It organizes the infobox into sections. The Header input field can be used to specify the name of the section (e.g., Physical Description). Each row added under a header will automatically be a part of its section. | Collapsible: If this option is checked, users will be able to close and open sections when the infobox is displayed on an article page. | Yes |
Publishing your infobox[]
When you are satisfied that the infobox is organized the way you want it and has fields for all the data items and images it might display, click the Publish button in the upper-right corner. If you haven't given your infobox a name, it will prompt you to do so before it is published. Once published, you will see the template page for your new infobox. It will have an example of how to use the template in a Source editor and an empty infobox that will show only those fields that have default values (like the title if you selected that option).
Remember, infobox data fields are not displayed until they are given a value on an article page, and section headers will not display unless at least one of the data items in that section is visible. To see your infobox in action, add it to an article and give it some data and/or images to display. You may add an infobox using either the Visual Editor or one of the Source editors.
Infobox source edit mode[]
Click this to enter source edit mode
The source edit mode for infoboxes acts very similar to the source edit mode for the general classic editor. In either source editor, you will see the actual XML tags used by portable infoboxes and more complex infoboxes may be created. The source editor supports syntax highlighting.
- For a detailed list of all the standard options available for portable infoboxes, including samples of wikitext to use and their HTML output, see Help:Infoboxes/Tags
- For detailed information about how to use CSS to theme an infobox, including detailed guides, see Help:Infoboxes/CSS
- Portability Hub: Guides, examples, and personal mentoring for migrating, customizing, and theming your infoboxes