Adding Callout modules onto a page; editing their content
VIDEO TRANSCRIPT:
The topic of this video is adding and working with callout modules.
This is a new feature added by the Office of External Affairs to help facilitate the addition of callouts without having to ask for help through the Help Desk. However, if you do have more complicated callout requirements, feel free to contact the Web Team for help.
To add callouts, simply click the insert module button here, select callout and then click OK.
You'll notice that there are quite a few options available for you to select.
Layout displays "row" and "right column".
Style will be for "block" or "border".
For Width, you have a few different options to select from.
It is always recommended to have consecutive callouts adding up to the sum of 100 percent.
For the purposes of this tutorial, we'll select 50 percent.
Then, choose a background color. We're going to use Bloomberg blue.
Next, we have titles and text.
The small title is optional.
The "large title" is required and is often the name of the page you are linking to but can be whatever is appropriate.
For instance, in our example, if we want to link to a child page called "our programs," we would enter that title here.
We'll then add some text below, such as, "Read about our programs regarding our center."
For link text, "Learn More" is the standard.
To find a link, simply click the Select Link icon here, and then navigate through the folder structure until you arrive at your desired link.
You can also add an image. Click the Select Link button, and use the folder structure to navigate your way to the image you would like displayed. You'll need to upload the image to the appropriate folder before working on the callout module.
Once you're done, click Save.
Check your progress by clicking the save and close button.
You can now see that we have our callout box with a "blocked" or "solid color", our title, descriptive text, linked text, and an image that links to the same folder.
Next, we'll add another callout module.
Click "Edit Page" which is located here.
Remember that this was a "blocked callout," so you'll have to select a similar one.
Click insert module, select the dropdown, choose "callout", and press "OK".
Just as we did before, we'll select "Row", "blocked" and because the width was at 50% before, we'll have to make sure that we select 50% again in order for the total width to add up to 100%.
Then we'll choose a different shade of blue.
Add a new title, such as "Meet Our Team." Add some descriptive text here.
Then, click on "Select Link". In this case, we'll use "Meet Our Staff".
Then click "Select Image", find the right folder, choose the image you'd like to add, click "select" and then "save".
Then press the save and close button.
We can now see a preview of the second callout module.
If you want to change how it looks, you can do so by clicking "edit page".
Right-click on that specified callout.
Choose the "callout option" in the pop-up menu and then change this to "bordered".
The style guide requires rows of callouts to have the same style.
Since we've changed that style from blocked to bordered we're going to do the same thing with this one.
Then click "Save and Close" and now we have a different style of callout.