The Teaser Link box icon in your WYSIWYG will allow you to embed a container within the body of your content that can include an image, title, and a brief amount of text.
Create a Teaser Link box
- Insert your mouse in your content where you want your Teaser link to appear.
- In your WYSIWYG icon bar, click on the Teaser Link box icon:
- A Teaser Links Options dialog box will appear requesting a URL. This can be an internal or external URL. If external, be sure to add the appropriate http:// or https:// before the web address. If it's an internal link, type or paste it in, starting with the / sign. Click OK to continue.
- You'll be returned to your WYSIWYG where a box will have been inserted into your text that you can now edit:
- Adding the image. The image is optional. If you do include the image, it needs to be pre-prepared for this space, sized exactly as 135px by 135px.
- Double-click on the grey image box with the dimension.
- In the Edit Image dialog box:
- select your image
- add alternative text
- assign its alignment on the page
- click the checkbox to include a caption field. Note: you will add the caption back on the page, not directly in the Edit Image box
- Click Save to continue.
- Title. Enter a title or phrase for your Teaser Link.
- Content. Enter a brief content section to a maximum of 200 words or 1400 characters. Exceeding this amount will cause your entire page to break.
- Caption. The field will appear directly beneath your image, if included, styled italicized light gray text. Click in this field and begin typing.
Updating the Link box's URL
At some point you may need to edit or replace the original URL you added to your Link box. While in Edit mode for your page, double-click in any of the box's spaces other than the title, content, or image box sections to bring up the URL field.
Example of a completed Teaser Link box
This is an example of a finalized Teaser Link advertising the Davis Farmers Market. A link is embedded and a hover effect underlines the text and triggers a background color change to indicate a clickable area.