Skip to content

How do I add buttons in the Drag & Drop Email Editor?

← Editing Items: Drag & Drop Email Editor
Do you want to increase your email click rates and encourage your subscribers to act on your links? You can by adding CTA (call-to-action) buttons to your e-blasts! Choose the jump start method or skip to dive in deeper and get a few pro tips. 


Jump start:


If your template shows a button placeholder, just click on it and the button settings will open. Pop in your link URL, come up with a label, make it fancy (or not) and you’re done!  

Pro tip! Using first and second-person pronouns like “me” and “my” or “you” and “yours” will help your email recipients to imagine themselves using your library. For example: “Tell me more”, “Take me there”, “Claim your seat”, “Get my library card”.


Pro tip! Quickly adjust the styling of all the buttons in the template at once by going to the Appearance tab and then selecting Button. Adjust the button color, font color, text style, and more. 



Deeper dive


Insert new Button Block: Drag and drop a Button Block into an existing Structure in the e-blast. Click on it to open the Button settings menu. 






Link: Enter the URL of where you want viewers to be directed when they click on this image. Use the Site drop-down menu to select the type of link you want to include. To link to a book in your catalog, an e-resource, or uploaded file, click the Additional Link Options button.
 
NOTE: When linking to a book in your catalog, catalog holdings information will be displayed if your library has On The Shelf (OTS). For libraries not using OTS, to ensure you are linking to the copy owned by your library, search by ISBN.  


Button Label: Enter the text for your button.

Pro tip! Create compelling CTA (call-to-action) labels for your buttons. A CTA is a word or phrase used to tell someone exactly what action to take and how to take it. It also implicitly provides the motivation for the recipient to take action. E.g., “Take me there”, “Watch now”, “Download”, “Learn more”.


Text style: Use the drop-down menus to select a font and font size for your button label. To select Bold and/or Italics, click the corresponding button.


Button color: To set the color of the button, click in color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Highlighted button color: To set the color of the button when highlighted on mouse hover, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Text color: To set the color of the text, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.

Pro tip! Think high contrast when choosing colors for your text and backgrounds. Test out color combinations with an online contrast analyzer like Contrast Checker.


Highlighted text color: To set the color of the text when the button is highlighted on mouse hover, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Background color: To change the background color, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Border radius: The border radius is the rounding of the edges of the button. To adjust the border radius, use the + and – controls or enter a numerical value.


Alignment: To align the button within the container, select left, center, or right alignment.

Pro tip! Some elements look good on desktop devices when center-aligned but may not look as good on mobile devices. You may want to set different alignments for certain elements on mobile and desktop devices. Click the Device Preview icon to see how your email will look on desktop and mobile devices. 




Button with icon: To add an icon image to the button, click to toggle on.

NOTE: This feature is not supported for Windows Outlook 2002, 2007, 2010, 2013, 2016, 2019. 
  • Align – Choose whether you want the icon to the right or left of the button label.

  • Icon – Click and the LibraryAware Image Selector will open. Search for and select an icon image from our extensive library, upload an icon image from your computer, or use an icon image URL. Click Select.

  • Size – Adjust the height and width of the icon using the + and – controls.

  • Icon indent – Adjust the indent between the icon and the button label using the + and – controls.


Adjust to width: To increase the width of the button to fill the width of the Container, click to toggle on.


Border: To set the color of each border, click the color boxes. Enter a color hex code, use one of the preselected colors, or use the color picker.

Use the + and – controls to adjust the size of the border for each edge. Leave at 0 for no border.

Pro tip! Create a dimensional effect by adding only a bottom border in a darker color than the button. 



Highlighted border color: To set the color of the border when the button is highlighted on mouse hover, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.

Use the Common drop-down to select the highlighted border style.


Internal padding: Padding refers to the margin around images or text. To add internal padding between the text and edges of the button, use the + and – controls to adjust the padding for each edge.


External padding: To add external padding around a button, use the + and – controls to adjust the padding for all edges.

To adjust the padding for each edge separately, click More to toggle on.

Click the mobile icon to adjust padding for the mobile version.

Pro tip! Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use padding for containers and structures to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it may make those elements less attractive. So, you may want to remove padding for mobile devices. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.


Add anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an Anchor link to the video thumbnail, click to toggle on Add an anchor link and enter a name for the Anchor. 

Next, click on the Block that you would like linked to this anchor.
  • To link a piece of text in a Text Block, highlight it and click the Change Link icon on the formatting toolbar. In the settings menu, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.

  • To add the link to other Blocks, in the settings menu for that Block, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
 
NOTE: Anchor links are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails. 


Hide element: To hide a button from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.

Pro tip! There are a few reasons why you might need this option. For example, you may want to hide some elements on mobile devices to avoid horizontal scrolling, which could happen if you apply a large font size to the text. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.


Include in: By default, the button will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting. 


Delete: To delete a Button Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click the tab then the trash can icon. 



Feedback and Knowledge Base

(thinking…)