Editing a Template
Whether you select one of your My Templates or import an Astro Template you will be entering the same Template Editor. We have advanced articles available that will go into detail of the editing, formatting, and design features each Element offers - these will be listed below. To start we will keep things simple.
This video covers the basics. As you read through the rest of this article you will learn about the more advanced design tools offered in your Template Editor.
What is an Element?
An Element is a mechanism for holding the content of your template. Since these are multi-media templates they require Elements that can contain multiple types of media - some are able to contain combinations of media.
There are 4 main types of Elements, each contain 3 variations:
- Image Elements
- My Logo Element
- Single Image Element
- Multiple Image Element
- Text Elements
- Headline Element
- Paragraph Element
- Multiple Column Text Element
- Image with Text Elements
- Image with Headline Element
- Image with Paragraph Element
- Multiple Images with Column Text Element
- Promo/Offer Elements
- Single Promo/Offer Element
- Multiple Promo/Offer Element
- Flyer Link
Additional Elements can be added to your Template by double clicking on the Element Icon located beside your Template.
All Elements can be Moved. Once they are added to the Template they can be dragged and dropped to wherever you wish them to be. Simply click on the Element on your Template, then without lifting your cursor, drag the Element where you want it to go, then release your cursor to drop it.
All Elements can be Edited by clicking on the body of the Element on the Template. i.e. To add an image to an Image Element click on the grey space where the image should go, or the picture that is currently taking up space in the Element.
All Elements have Element Settings. This is the grey gear icon located at the top right of the Element as it appears on the Template. We will cover what you will find under each Element's settings as we dive into the different types of Element.
Element Settings Location - Grey Gear Icon
All Elements can be Cloned. This is done by clicking the Clone Icon located beside Element Settings at the top right corner of the Element. This comes in super handy if you want to create an additional Element on your Template that has the same formatting as an existing Element. When you copy an Element it will place the clone just below the original Element. Once the clone is created you can edit it (add a different Image, Text, or Promo/Offer) or adjust its Settings (Padding, Alignment, Border, etc).
Clone Element Icon
I love using Clone if I want to add more Promo/Offer Elements to my Template right below the original. It saves time since I don't have to adjust the Padding or drag&drop Elements around my Template. Just make sure that you edit all copied Elements so you're not adding the same Offer/Promo to your Template twice.
All Elements can be Deleted from a Template. To delete an Element click on the X icon located beside Settings and Clone. Deletions are permanent and there is no Undo button, so be careful when you do this.
Delete Element Icon
Image Elements allow you to add images from the Astro Image Library to your Template.
Common Image Element Settings
These are the common settings for Image Elements, but there is some variance from Element to Element.
All Image Elements: To adjust the Size of your Image click on the image as it appears on your Template, then adjust the Max Width setting to either 100%, 75%, 50%, or 25%.
Max Width Settings
Logo & Single Image: To adjust the Alignment (whether it appears in the center, or to the right or left of your Template) click on the Element Settings (gear icon). There you will see a drop-down field for Alignment.
Logo Element Settings with Alignment
All Image Elements: To create some empty space around your Image add Padding. Padding can be added by either clicking on the Image, or clicking on the Element Settings (grey gear). To stay consistent, let's stick with Element Settings. Here you will see drop-down menus for the Left, Right, Top, and Bottom Padding.
Logo Element Settings with Padding
All Astro Templates will be pre-padded. Here are the common Padding Settings that I use, but feel free to play around and come up with your own.
- Logo Element - Left: 20px, Right:20px, Top:10px, Bottom: 10px
- Single Image Element (when used for a Title or Banner Image) - Left: 0px, Right: 0px, Top: 5px, Bottom: 5px
- Multiple Image Element - Left: 5px, Right: 5px, Top: 5px, Bottom: 5px (This creates 10px of Padding between images and 5px of Padding around the Element)
All Image Elements: To add color behind your image go to your Element Settings and edit the Background. (Foreground doesn't do anything on Image Elements since it only affects Text Color, and there is no Text in an Image Element). Background will only appear if there is blank space behind your element. This can be created by adding Padding, or it may already be there if your image doesn't span the entire width of your Template (or it's a square).
When clicking on a Background field you will see a Color Wheel and a Value Slider. If you wish to add the color you created to another field just copy/paste the color code (including the #) to the field/s.
Multiple Image Element Settings with Background
In this example we added a Background color to a Multiple Image Element with two columns. Remember, when editing a Multi-Element make sure that whatever you do for one column you do for the others (unless you want to create contrast).
Here's what it looks like on the Element.
Multiple Image Element with Background Color Applied
My Logo Element
The Logo you added to your Marketing Suite Settings
will be automatically inserted into this element; no need to click on the Element to add it. Logo Element Settings are basic and include Padding
, and Background
Single Image Element
Also known as the Title Image Element. In most Astro Templates these Elements will contain either a Title Image or a Banner Image.
Title Images (located just below your logo) are best suited as serving as the primary image when Posting a Campaign to Facebook
since they are sized at 1200x628 pixels. Banner Images (located above the collection of Promo/Offer Elements) serve to draw your customers attention to the meat of your Template.
To add an image to an Image Element click on either the blank Element or the Image that is currently housed in the Element. Once inside the Image Library you can select the folder you wish to explore by clicking on one of the buttons above the image preview. When you find an image you like, click on it and it will be added to your Element.
Single Image Elements can be converted into clickable buttons!
Click on the grey gear icon located at the top right of the Element. Type or paste the URL you wish the viewer to go to onto the field provided. Make sure to include the full URL. [Ex. https://www.astroloyalty.com/
com not astroloyalty.com
.] When in doubt, copy the address from your browser and paste it onto the field.
Single Image Element Settings with URL Added TIP: Send yourself a Preview of your Template to test your URL Link prior to sending the Template as a Campaign to your customers. These is a good practice to get into regardless of whether you've added links to your Template.
Multiple Image Element
This Element can contain anywhere from two to four images.
We recommend that you stick to two max if you are sending your Campaign as an App Notification or SMS Text, otherwise the images will appear very small when viewed on small screens.
The process of adding an image to this Element is the same as described for the Single Image Element - just click on the Element on the Template.
If you wish to add some Space (aka Padding) between the images click on the grey gear icon at the top right of the Element. Each column will have its own Right, Left, Top, and Bottom Padding. If you want to keep it simple, make all of them 5px for each column. This will create 5px of Padding to the top, bottom and left/right of the Element as a whole, and add 10px of Padding between the Images.
Alignment is adjusted by clicking on the individual images themselves. Your options include Left, Right, Center. Make sure that you click on each image to adjust its alignment in order to create symmetry in your Template.
Multiple Image Element Alignment
TIP: You can't go wrong with Center.
Text Elements allow you to add words to your Template. Formatting-wise, they will all look the same when filling them with content. To edit the content of a Text Element simply click on it to open the Text Editor.
Paragraph Text Element Text Editor View with Formatting Tools
Within the Text Editor you will have access to the following formatting tools:
- Bold, Italic, Underline
- Alignment - Left, Right, Center
- Font Type - 17 choices including Times New Roman, Georgia, Arial, Veranda, etc.
- Font Size
- Paragraph - drop-down that contains multiple Header Sizes and a Paragraph Size
- Formats - drop-down that contains several bonus formatting tools
- Bullet List
- Number List
- Decrease Indent
- Increase Indent
- Insert URL Link
- Remove URL Link
- Text Color
- Highlight Color
- And the treasured Undo button!
Common Text Element Settings
All Text Elements have Settings to adjust the Padding, Alignment, Foreground Color, and Background Color.
Astro Templates are all pre-padded for you. The most common Padding Settings for Text Elements are as follows:
- Headline Element - Left: 0px, Right: 0px, Top: 5px, Bottom: 5px
- Paragraph Element - Left: 25px, Right: 25px, Top: 5px, Bottom: 5px
- Multiple Column Element - Left: 5px, Right: 5px, Top: 5px, Bottom: 5px (This creates 10px of Padding between columns and 5px of Padding around the Element)
Background Color affects the entire background of image, whereas Foreground affects the color of the words.
To create colored Text on a colored Background, like the image above, click on the Element Settings (gear icon). There you will see where you can adjust the Foreground (the color of the Text) and the Background (the color behind and surrounding the text - this is different from a Highlight since it will cover the entire background of the Element rather than just the space surrounding the text). Click on the field and use the color wheel and value slider to create the color you want.
These are best suited for creating headlines or titles. Think one liners in a large font size.
You can also use your Element Settings (gear icon) to adjust the Size of your Headline. H1 is Largest, H4 is smallest. In the example above I used H2.
Also known as a Body Element. This is where you are going to add the message of your Campaign.
- To add a Hyper Link (aka website link), highlight the text that you wish to turn into a clickable link, then click the Insert Link icon (looks like a chain-link). Since you are able to send your Campaign via Email, SMS Text, App Notification, and Facebook you have the option to insert links to more than just webpages. On the Title Line you can add the name of what they will find when they click the link. When the viewer places their cursor over the hyperlink they will see what you type onto Title as a mini pop-up.
- Webpage Link - In the URL field type or paste the full URL, including the https://.
- Ex. https://www.astroloyalty.com/ -not> astroloyalty.com.
- Email Link - To create a clickable email link you will need to add a piece of code to the beginning of your email address on the URL field - mailto:
- Ex. mailto:firstname.lastname@example.org -not> email@example.com
- Phone Link - Yup, if your customers view your Campaign from a smartphone they can click on a phone link and call your store! To create this link you will need to add a piece of code before your phone number on the URL field - tel:+
- Ex. tel:+919-555-5555 -not> 919-555-5555
- To create a Colored Border around your Paragraph, click on the Element Settings (gear icon). There you will see four fields relating to the border. Each has a drop-down where you can select the width of the Border Line (Astro Templates all have 2px Borders), then beside that drop-down is a field where you can create the color of the Border using a color wheel and value slider. Color codes can be copy/pasted from one field to another to duplicate colors throughout your Template.
Multiple Column Text Element
You can create anywhere from two to four columns of text.
TIP: We recommend that you stick with two if you plan on sending your Campaign to smartphones since multiple columns undergo quit a squeeze on smaller screens.
- The number of Columns can be adjusted by clicking on the Element Settings (gear icon).
- To add Space between your columns (aka Padding) click on the gear icon and add the same pixel size to all Top & Bottom Padding fields. This will ensure that your columns are evenly spaced top to bottom. When adding Padding between the Columns keep in mind that whatever padding to add to the Right of Column 1 and the Left of Column 2 will be added together. In the image below I wanted there to be 10px of Padding on either side of my Element and 10px between the two columns.
- Click on one of the columns to edit the text within it. If you want your columns to appear the same length try to type the same number of characters (or similar) within each column. It doesn't have to be perfect, you should be able to eyeball it. If you need to make one side appear longer turn one paragraph into multiples.
Image & Text Elements
These Elements allow you to add either a paragraph or headline of text below or beside an image.
Common Image & Text Element Settings
All Image & Text Elements allow you to adjust the Padding, add a Colored Border, and edit the Foreground and Background Color. The Foreground will affect the color of the Text while the Background will appear behind the Text and the Image (if the image doesn't fill the whole frame).
Headline with Image Element
These are very useful for times where you want to include an Image or Logo beside your Headline.
- Depending on the size of the Image you are adding to your Element it may be necessary to adjust the Max Width to create a smaller version of the image. If I'm adding a Logo to my Element I like apply a Max Width of 50%.
- The Alignment settings for the Image can be found by clicking on the image itself. This will allow you to choose what side of the page you want the image to appear on, Left or Right. (This is the drop-down above Max Width in the view above.)
- The Alignment settings for the Text is found in the Element Settings (gear icon). Here you have two Alignment settings. One for Left, Right, or Center which will affect the Text itself. The other for Top, Bottom, Middle which will affect how the grouping of Text appears on the headline.
- These Elements look best with Padding applied. This pushes the image closer to the Headline and centers it more on your page. I tend to max the Left and Right Padding at 25px and add 10px of Padding to the Top and Bottom.
- If a Border is added it will appear around the outside of the Element.
- Foreground will affect the color of the Text while the Background will affect the color behind the Text and Image.
Here's an example of an Headline with Image Element will all Settings applied and the Image at 50% Max Width and Align Right (adds image to the Right of the Text).
Example of finished Headline with Image Element Example of completed Headline Element Settings
Single Image with Text Element
This Element allows you to add a Paragraph of Text beside an Image.
- The Settings of this Element are very similar to the Headline with Image Element covered above. Padding, Borders, Foreground and Background are all the same. The only difference is Text Alignment. Since you are dealing with a Paragraph of Text rather than a Headline there is no Top/Bottom/Middle settings, only Left/Right/Centered.
- If Borders are applied they will appear around the entire Element just like they do for the Headline with Image Element.
- This Element will appear as two columns, one column contains your image and the other contains your Text. If your paragraph extends longer than the height of the Image it will extend past the image.
Text will extend past the length of the image as its own column
- The Max Width of the Image will affect the width of the Text Column. Adjusting the Max Width of a larger image to 50% or below will increase the available size of your Text Column.
- When applying Padding to the Element you can either make all settings the same, or you can make the Right the same as the Left and the Top the same as the Bottom.
- To add Padding between the Image and the Text, click on the Image itself and adjust its Padding. You can either add the same number to all fields, or edit the field that addresses the Padding facing the Text. In this example, since the Image is to the Right of the Text I added Padding to the Left.
Add Padding to the Opposite Side of the Align Setting to create Space between the Text and Image Example of a completed Single Image with Text Element
In the example above the Settings are as follows: Max Width 50%, Image Align: Right, Image Padding: Left 5px, Text Alignment: Left, Element Padding: 5px T/B/L/R, No Foreground or Background, No Borders.
Multiple Image with Text Element
This Element will create multiple columns with the Images above the Paragraph of Text.
This Element can contain anywhere from Two to Four Columns. We recommend sticking to Two columns max so the Element looks legible on smaller phone screens.
- Image Alignment is adjustable by clicking on the Image itself. From here you can choose Left/Right/Centered. This will affect how the Image appears above the Text below it. Centered is typically the ideal setting here.
- Max Width will affect the Size of the Image above the Text but will not influence the width of the Text Columns.
- If Borders are applied to all fields it will create an outline around the individual columns and between the Image and Text. You are able to create a different color border for each Column. To create a uniform Border choose the same number for all Fields.
Example with all Borders applied
- Padding can be applied to create space around and between the columns. The Top and Bottom Padding for all columns should always be the same. The Left and Right Padding for each column will create the space between the columns - ex. If you make Column 1 Left: 5px and Column 2 Right: 5px you will create 10px of Padding between your two columns.
Example of a Multiple Image with Text Element
In the Example image above the images are Centered and I added Padding to create 10px to the left and right of the Element and 10px between the two columns and 5px to the top and bottom.
These Elements allow you to add either specific Offers and My Promotions to your Template, or add Button Links to take your customers to your My Astro Webpage
Single & Multiple Promotion/Offer Elements allow you to add any Offer you are currently enrolled in to your Template - regardless of whether the Offer is currently live. This allows you to give your customers a sneak-peek of next month's Offers before they active.
Make sure that you inform your customers that you are giving them a preview of what's to come when sharing future Offers on your Campaign. This can be done by adding a Headline Element.
All Offers will include the date range during which they are available below them, and your My Astro Webpage will only show Offer details of Active Offers.
I have found that in order to keep things simple I only add Padding to the Top and Bottom of these Elements, if that. These are by far the simplest Elements to format.
To add an Offer or My Promotion to this Element click on the red icon to the top right of the Element - Edit Element Programs.
Add Program to Single Promo/Offer Element
This will create a pop-up with a drop-down menu that will allow you to choose your Program. Your Active My Promotions will appear under Choose a Promotion, and your Enrolled Offers will appear under Choose an Offer.
When Adding a My Promotion to a Single Offer Element it will include the Title
, the Full Description
you wrote into the Description Field while creating the My Promotion, and the Dates the Promotion is Valid
. Below the Title will be a link that will generate a Barcode
for your customer. This will come into play when they come by your store to redeem the Promotion
. Below the Valid Dates
there is a link that when clicked will take them to your My Astro Webpage so they can view the Promotion there.
A My Promotion added to a Single Promo/Offer Element
The Image and Text is Editable by clicking on it, just like you would to edit any other element. For instance, if you do not plan on redeeming the Promotion in Astro and you just created the My Promotion to market your deal, you can remove the Promotion Code Link from the description.
When adding an Offer to a Single Promo/Offer Element the details will appear a little differently. The Offer Image will, in most cases, explain the details of the Offer. The Brand Name will be in bold above the Description. The Description will consist of the Pet Owner Description as written by the brand. Below will show the Offer Valid dates and a link your customer can click for More Details. This will take them to the Offer Details on your My Astro Webpage.
An Offer added to a Single Promo/Offer Element
You are able to Edit the Text and change the Image if you so choose. This is not recommended though since the messaging was written by the brand themselves. However, if you feel the need to edit, we recommend adding to what's there rather than removing and replacing their chosen wording.
This creates a Column style Element where the Images appear above the Text.
This Element can contain anywhere from Two to Four Columns. We recommend sticking to Two columns max so the Element looks legible on smaller phone screens.
Clicking the red icon to the top right of the Element - Edit Element Programs, will generate a pop-up with multiple drop-downs corresponding to the number of Columns in your Element.
Adding Programs to a Multi-Promo/Offer Element w/ 2 Columns
The Full Description will be omitted from these Elements and replaced with a clickable link in order to create uniformity in formatting.
Max Width and Padding are handled automatically by the Element, there's no need to adjust even when adding a new element to the Template.
In this example we added a My Promotion beside an Offer. This way you can see how the formatting comes into effect. Rather than have you battle with trimming Descriptions to create a more uniform look, we omitted them entirely and replaced them with links to your My Astro Webpage.
My Promotion added to a Multiple Promo/Offer Element
The Text will include the Brand Name in bold. Below it will show the Offer Valid Dates and the link to the Offer Details on your My Astro Webpage.
An Offer added to a Multiple Promo/Offer Element
Flyer Link Element
Left-Click on the Button to Edit the Button's appearance. Now you can choose a different style Offer Link from the options listed. Click on the Button image you want.
To create an Adoption Flyer Button Left-Click on the Button on your Template. Then choose one of the Adoption Button options listed.