How to Add an Infobox

Infoboxes are separate content boxes comprised of different sections called segments. There are three different formats for infoboxes – stack, slider and accordion. Once created and published, an infobox can be inserted into a story.

Creating an Infobox:  

1. Click on “Add Infobox” under the Infoboxes tab on the left navigation bar in the WordPress dashboard.
2. Give the infobox a title and click on the “Save Draft” button that appears below the title field. Note that this must be completed first in order to create and design your infobox. 
3. Once a draft has been saved, select the Infobox Format (stack, slider or accordion) you want from the list on the right-hand side. 
4. If you’d like, click on the “Add Infobox Byline” link to add a byline for the infobox. This will link the infobox to the creator’s staff profile. 
5. Click on the Add a Segment button to add a new section or segment to your infobox. Infobox segments can include a heading, text and video/audio. Repeat these steps to add as many segments as needed. Infobox segments can be rearranged by using the arrows in the upper right-hand corner of the segment and clicking and dragging. Infobox segments can be deleted by clicking on the red “X” icon in the upper righthand corner of the segment. 
6. Edit the general appearance of the infobox using the “Infobox Design” box on the right-hand side of the screen. 
7. When finished, preview and/or publish your infobox. An infobox must be published before it can be added to a story.  

Adding an Infobox to a Story:

1. Follow the steps above to create and publish your infobox first. An infobox must be published before it can be added to a story.  
2. While adding/editing a story, place your cursor in the place you’d like the infobox to go. Usually, it works best to press enter, giving the infobox its own line in the text editing field. 
3. Click the SNO Add Story Element button above the text editing window.
4. A pop-up window will give you all of the different story element options. Select the "Infobox" option.
5. Select the infobox you would like to embed and click the “Insert” button in the right hand corner of the window.
6. A line of short code will now show up in your story.
7. Click Update/Publish and go to view the story to see how your infobox looks to a visitor. If you’d like to make any changes to the infobox appearance, you will need to edit and update the infobox using the Infobox tab on the on the left navigation bar in the WordPress dashboard.