These Help Guides provide you with detailed instructions, tutorials, and tips on how to use Fred® effectively. If you need assistance, this is the place to go for answers.
Fred® – Introduction
The Fred® email designer provides you with a drag-and-drop interface for designing professional, responsive HTML emails without any coding knowledge. It enables you to create visually appealing and effective email campaigns that look great on all devices and email clients. Fred® is designed to make email creation accessible to everyone, regardless of technical expertise. It streamlines the email design process, saving you time and effort while empowering you to deliver impactful campaigns.
The Fred® dashboard is your control center for creating, managing, and optimising your email marketing efforts. Make the most of its features to streamline your workflow and achieve your campaign goals. The sections within Fred's dashboard consists of: My Shared Data, My Template Designs, Compliance Guidelines, Canvas Controls, Design Modules, Styling Controls and Preview & Export.
The four essential sections to create an email design within Fred® are:
Compliance Guidelines apply to the outer header and footer elements of the email to help with CAN-SPAM, GDPR, PECR, CCPA and CASL compliance.
Canvas Controls applies to the entire inner design of the email, set the design width and margins, background colours, CSS styles and much more.
Design Modules have two types of elements, Container Rows and Content Blocks, these are used to build the main structure of your email design.
Styling Controls has four major elements, Rows, Columns, Blocks & Cells. The main content and overall design of your email are built using these elements. They allow you to add images, text, buttons, and more, each with their own settings. You can add, remove, copy, and move these elements independently of each other, providing you with many design options. When editing any of these elements, the left-side panel automatically switches to a property panel for the selected content element, making it easy to customise.
If you need additional assistance or have further inquiries, simply log in and click the account icon to contact us via the support ticket tab.
Understanding the Structure, Design and Flexibility of Fred®
Navigate through Fred® to gain knowledge of how each section works. Simply click on any of the headings below to open the section and its tabbed content.
This is where you will find all your pre-saved data element settings and dynamic content tags within your email design.
Fred's My Shared Data settings are very useful to build a coherent design very quickly, there's no need to spend time with recreating the same layouts, content or links, allowing you to reuse them multiple times within all your email designs.
Easily add dynamic content using supported data tags from your current email marketing application and use them in your email design within Fred.
Make sure you use the correct data field name and both delimiter input boxes from your email marketing application, as Fred will use these fields to build the data tag. The Delimiter only needs to be filled in once, as multiple Delimiters are not supported.
When using dynamic data fields within your design a list of Predefined Datafield Names are displayed, all ready for you to insert them into your design.
Navigation: Fred > My Shared Data > Data Fields
How to set data field delimiters?
Use the supported data field delimiter characters from your current email marketing application.
1) Enter the delimiter character(s) for the opening input box.
2) Enter the delimiter character(s) for the closing input box.
Note: Do not click the save icon, as any delimiter changes are automatically saved. The Delimiter only needs to be filled in once, as you can not have different delimiter's for separate data fields.
How to create a data field?
Use the supported data tag field names from your current email marketing application.
1) Enter the tag name(s) in the datafield name input box.
2) Click the save icon.
How to edit an existing data field?
1) Click the drop down box and select the desired data field from the list, the fields will populate for you to edit.
2) Update the datafield name with the changes you wish to make.
3) Click the save icon.
How to insert dynamic data into your email design?
You'll need to open the email design you wish to edit.
1) Within any Content Text Block, position your cursor where you would like the tag to be placed.
2) Within the editor tool bar across the top select the Data Field icon, the data field box will appear.
3) Click on the search pulldown icon to show your predefined datafields and select the data tag you wish to insert.
4) Select how you would like your required data tag to be formatted and you're done! Your chosen data tag will then be inserted into your content.
Note: Remember wherever you position your cursor, the data tag will be placed.
How to delete an existing data field?
1) Click the drop down box and select the desired data field from the list.
2) Click the delete red cross icon and a confirmation alert will show, just click confirm to delete.
How to reset all the data fields to start again?
1) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL data fields within this section.
When designing an email, you may find that you are repeating some design elements like, sign-off footers, shopping layouts, banners, social media icons, or video elements... and more.
So to assist and to speed up designing, we've added the shared Element feature, which allows you to save numerous elements like containers, blocks, text & buttons. Once you've saved your specific element, you can then reuse them multiple times, making email designing a breeze.
When you've created a shared Element, a list of Element names is displayed when inserting them into your design. The number of shared Elements is never-ending, making email designing endless!
Navigation: Fred > My Shared Data > Elements
How to create a default element?
Ensure you've selected the part of the email design you wish to save.
1) Within the left-hand column under Styling Controls, just select the type of element (row, block, or cell), or you can just highlight a button element itself.
2) Then click the save icon underneath. Fred will then automatically take you to the Elements section within My Shared Data.
3) Type in your default element name.
4) Click the save icon.
How to rename an existing default element?
1) Click the relevant drop-down menu you wish to rename (Containers, Blocks, Text, or Buttons) and select the desired default element from the list.
2) A new text field above will automatically populate with your option. Now update the element name with your changes.
3) Click on the save icon.
How to use a default Container or Block element?
1) Click the relevant pull-down box and select the default element you wish to use. A new icon will appear to the right of the pull down & a preview will appear showing the element selected.
2) Click and drag the arrow icon to the position where you require the new element to be placed, and let go!
How to use a default Text or Button element?
1) Click the relevant pull-down menu and select the default element you wish to use. A new icon will appear to the right of the pull down & a preview will appear showing the element selected.
2) Click that new copy icon.
3) Go to your required position within any cell in your design.
4) Click the paste icon located in the left-hand column. An alert will appear giving you options of how you would like to paste the element; select one option, this will then paste it into your desired position. You're done!
How to delete a default element?
1) Click the drop-down box and select the desired default element from the list.
2) Click the delete red cross icon. A confirmation alert will show; just click confirm to delete.
How to reset all the element settings to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL element settings within this section.
Managing your images when creating multiple email campaign designs can be frustrating as it can mean you trawling through hundreds of images just to find the ones you want, and in some cases you may have multiple copies of the same images.
Fred allows you to upload and manage your Images easily & all in one place. Fred's Image Manager helps to keep everything organised, by using collections & tags, making it easier to search. You can reuse them multiple times & in any email design.
All images for email designs must be uploaded into Fred, either through the content editor when designing or through the image manager directly.
Navigation: Fred > Shared Data Settings > Images
How to access the image manager?
1) Click the open image manager icon; the image manager will then open.
2) You now have access to view, organise, edit & delete your existing images, or you can upload new images from here too.
3) Once you are done, click the exit icon in the top right to take you back to your email design.
Note: For more details on organising your images, please go to the Image Manager section.
How to upload bulk images into the image manager?
1) Click the upload images icon; the image manager will then open.
2) You can now drag & drop your image(s) straight into the manager, or you can click the Browse link and navigate to your image(s) within your device.
3) Once you are done, click the exit icon and you'll see your image(s) ready to use within your email design.
4) Click the exit icon, again in the top right to take you back to your email design.
Note: For more details on organising your images, please go to the Image Manager section.
How to upload and add an image when editing an email?
You have two options available based on whether you are uploading a new image or you already have an image loaded into the image manager.
1) In cell mode, make sure to place your flashing cursor where you want your image to go.
2) Within the Toolbar across the top, click the upload images icon; this will open the Image Manager.
First Option - Using a New Image:
3) At the bottom of the assets area, click the Upload Images icon. This will now change so you can drag & drop your image(s) straight into the manager, or you can click the browse link and navigate to your image(s) within your device.
4) Once done, click the close upload icon, and you'll see all your image(s) ready to use.
5) Hover over the image you want to use, click the 'Plus' icon to insert your chosen image into your email design. Your image has now been placed into your email design.
Second Option - Using an Uploaded Image:
6) After step 2, simply browse through all the images within the image manager to find your required image. Then repeat step 5.
Note: Remember to click the Save Template icon at the top of the left panel, so you don't lose your work.
How to replace an existing image within a content block?
1) In cell mode, select the image you wish to change; the image toolbox will appear.
2) Within the image toolbox, click the two-way arrow icon; this will open the Image Manager.
3) Navigate to your chosen image & hover over the replacement image, click the 'Plus' icon to insert that image into your email design.
4) Your image has now been replaced.
How to organise my images within the image manager?
Please go to the Image Manager section and learn how to organise, delete or edit your existing Images for ease of use.
Create and manage your most common links using our shared Links feature. This helps to cut down on time from recreating the same links and reduce typing errors.
This feature enables you to re-use your shared Links multiple times within your email designs and is perfect for repetitive links, like websites, webpages, videos, or social media links.
When using the shared Links feature, a list of link names is displayed when inserting a link into your email design.
Navigation: Fred > My Shared Data > Links
How to create a link setting?
1) Enter a new name in the link name input box.
2) Enter your URL in the web page URL input box.
3) Click the save icon.
How to rename an existing link setting?
1) Click the 'existing links' drop-down box and select the desired link setting from the list; the fields will populate for you to edit.
2) Update the link name or web page URL with the changes you wish to make.
3) Click the save icon.
How to use an existing link within a Text Block?
1) Highlight the text where you would like the link to go.
2) Within the editor bar across the top, select the Insert Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once complete, click Insert.
How to use an existing link within a Button Element?
1) Click the text within the desired button element so that the flashing cursor and button options appear.
2) Select the Edit Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once done, click Update.
How to use an existing link with an Image Element?
1) Click the image so that the image options appear.
2) Select the Insert Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once done, click Insert.
How to delete a link setting?
1) Click the relevant drop-down menu and select the desired link setting from the list.
2) Click the delete red cross icon. A confirmation alert will show; just click confirm to delete.
How to reset all the link settings to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL link settings within this section.
Fred allows you to upload and manage your PDFs easily & all in one place. They are used in the very same way as the shared Links feature, meaning you can reuse them multiple times & in any email design.
When using the shared PDF document feature, a list of PDF and link names is displayed when inserting a PDF document link into your email design.
Navigation: Fred > My Shared Data > PDF Documents
How to create a PDF document setting?
1) Enter in your new PDF file name in the PDF name input box.
2) Click the Choose File button. This will then open up a new window; navigate to your required PDF, select the document you wish to upload, and click Open.
3) Once completed, click the save icon.
How to rename an existing PDF document setting?
1) Click the 'existing links' drop-down box and select the desired PDF document setting from the list; the fields will populate for you to edit.
2) Update the PDF name with your changes.
3) Click the save icon.
How to use an existing PDF Document setting within a Text Block?
1) Highlight the text where you would like the PDF link to go.
2) Within the editor bar across the top, select the Insert Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the PDF link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once complete, click Insert.
How to use an existing PDF document setting within a Button Element?
1) Click the text within the desired button element so that the flashing cursor and button options appear.
2) Select the Edit Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the PDF link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once done, click Update.
How to use an existing PDF document setting within an Image Element?
1) Click the image so that the image options appear.
2) Select the Insert Link icon.
3) Within the link box, click the Choose Link magnifier in the top left and select the PDF link you wish to use. The empty fields will auto-fill, which you can then also edit.
4) Once done, click Insert.
How to delete a PDF document setting?
1) Click the relevant drop-down box and select the desired PDF link setting from the list.
2) Click the delete red cross icon. A confirmation alert will show; just click confirm to delete.
How to reset all the pdf document settings to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL pdf document settings within this section.
This is where you can build & manage your own flexible email template library. Any new or previously saved email template designs will be stored here.
The My Template Designs section is extremely useful and makes it very simple to use any pre-designed email Template Designs, so you can re-use, copy & edit them multiple times. With quick access to saved revisions and easy loading, this makes undo's & redo's a doddle!
Easily create your own responsive email template designs within Fred without writing a single line of code. You can store an unlimited number of template designs that you create, and you can then re-use, copy & update them as many times as you wish.
When selecting a template to use, a list of saved template designs is displayed for you to choose from.
Every time your email template is saved, a new revision is created, making a short timeline of 10 revisions. You can easily undo or redo your work by re-loading one of those 10 recent saves. Making redo's a breeze!
When your account becomes inactive for 120 minutes, Fred automatically saves your email template 5 minutes before it times out. This save is inclusive of the 10 revisions.
Navigation: Fred > My Template Designs
How to start and create/save a new email template?
Fred automatically opens/creates a new blank template ready for you to start straight away.
1) In the template name input box, type over the existing 'untitled' name with your new template name.
2) Click the save icon & you're ready to start building your email design.
Note: You can either use elements from My Shared Data or start building your design from scratch, see Design Modules.
How to edit an existing email template?
1) Click the 'existing template' drop-down box and select the desired template from the list.
2) Fred will open the template, and you will see the template name appear in the template name input box.
3) After making the necessary changes to the template and/or the template name, just click the save icon.
Note: Every time you click save, a new revision will have been automatically created.
How to re-load an existing email template revision?
You must be in an existing template for this feature to show.
1) Click the 'previous revisions' drop-down box and select the desired date and time from the list. Fred will auto-load the saved revisions.
2) Once you are happy with the changes, click the save icon.
Note: You can select each of the 10 revisions and redo/undo them as many times until you're happy. Just remember to save your work once you've finished, as the template will not change until it's saved.
How to copy an existing email template?
1) Click the 'existing template' drop-down box and select the desired template from the list. Some new icons will appear to the right of the pull down & your template will open.
2) Click the new copy icon. An alert will appear confirming your wish to clone the template, click proceed.
3) Your template has been cloned & auto-saved the new 'untitled' template.
4) Rename your new template, make your changes and click the save icon.
How to delete an existing email template?
1) Click the existing templates drop-down box and select the desired template from the list. Your template will auto-load.
2) Click the delete red cross icon, and a confirmation alert will show. Just click confirm to delete.
Note: When you delete a template, both the design & any revisions will be deleted too.
How to close/exit from an existing email template?
1) Make sure you have saved your work first; otherwise, you will lose what you have done so far.
2) Click the small black arrow icon at the very top right of the left menu.
3) A notification will appear as a reminder to save, click proceed.
Note: If you Exit without saving your template, you will lose any changes you made.
This is where you will find all your Compliance Guidelines for each of your email designs. You can create a standardised compliance setting to use repeatedly, or you can have different compliance settings for multiple email templates. Fred's Compliance Guidelines has three parts: Compulsory Header, Compulsory Footer, and Data Field Mapping. They are extremely useful and easy when building a CAN-SPAM, GDPR, PECR, CCPA and CASL Compliant email.
Certain parts of the Compliance Guideline settings are inherited by the My Shared Data & Canvas Control sections. For example, the more statements you add, the more Data Field Mappings appear and are required. These are all populated from the My Shared Data > Data Fields section.
Fred has a compulsory header section of content which is added to the top of your template. This helps your contacts who have trouble viewing your email campaign and prompts them to receive your email without any hindrance to their inbox. You can manage the layout by selecting pre-defined text and styles for maximum visibility.
This compulsory header section is automatically enabled; however, should you wish to create your own, simply disable it and use Design Modules & My Shared Data > Data Fields within the main body of the template.
Any {datafields} used will be replaced with your profile and subscribers' data when an email is sent.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Compliance Guidelines > Compulsory Header
What is a web version and how do I change the statement?
The web-version of an email is a feature that offers recipients the ability to open an HTML version of the email and view it as a webpage if it does not display correctly in an email client. Fred automatically includes a selected statement for you; this can be easily changed.
1) Click the 'Web Version' drop-down box and select the desired statement from the list. You will see the statement within your email template change.
What is a safe sender, and how do I include or change the statement?
A safe sender is an email address you would like to receive email from directly and without further obstruction to your inbox.
1) Click the 'Safe Sender' drop-down box and select the desired statement from the list. You will see the statement within your email template change.
Note: You will also notice that a new Data Field Mapping option for this statement has appeared.
How do I change the alignment of the header section?
1) Click the 'Align Header' drop-down box and select the desired option from the list. You will see the statement within your email template change alignment.
How to make the background and the canvas colour match?
1) Simply click the 'Flood Background' tick box, so that the box is now checked. You will automatically see the header background colour change.
Note: The background colour is inherited from the canvas section.
My background colour is dark; how do I make the text colour lighter?
1) Simply click the 'Text Colour' tick box, so that the box is now empty. You will automatically see the header background colour change.
Note: The text colour is inherited from the canvas section.
How to disable the header section, so I can create my own version?
1) Simply click the Enable tick box, so that the box is now empty. You will automatically see the header section & corresponding mapping disappear.
You can now create your own section within the main body of the template, by using the Building Blocks and then linking the Data Field tags you've created.
Once you have created your own Data Field Tags you also need to be able to use them. Fred has added this mapping section so you can manage how they are used within your compulsory header & footer.
This data field mapping section is automatically populated from the My Shared Data. Click the link to see how to use My Shared Data > Data Fields
Any {datafields} used will be replaced with your profile and subscribers' data when an email is sent.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Compliance Guidelines > Data Field Mapping
What is data field mapping, and how do I use each option?
Data field mapping enables you to link your subscriber attributes to customise your compliant email content. Fred automatically inherits any data fields created within the my shared data section, ready for you to start matching them.
1) Click the 'web version' drop-down box and select the desired data field from the list.
2) Click the 'unsubscribe' drop-down box and select the desired data field from the list.
3) Click the 'preferences' drop-down box and select the desired data field from the list. Carry on down your list, should you have more data field mapping options available.
How do I add more data field mapping options?
This is automatically assigned from the Compulsory Footer section. They then become visible depending on the statements you choose, ready for you to start matching them.
1) Within the compulsory footer section, click any of the tick boxes from the list of statements.
2) Fred will automatically display any new Data Field Mapping option/s, depending on the statement/s you select.
3) Click the new data field mapping drop-down box and select the desired data field from the list.
Note: Any new data field mapping options will become visible in order of relevance.
How to reset all the data field mapping fields to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL data field mapping fields within this section.
How do I create a new data field or edit an existing one?
This is where you begin designing your email; it all starts with a blank canvas... From here, you can control the main email Canvas Controls like the design, text & style elements. The Canvas Control section is extremely easy to use and versatile, making brand matching a cinch. You can save each element, allowing you to reuse them multiple times, or you can have a unique design every time; the possibilities are endless!
Fred also includes features like; Design Guide Lines, helping you to physically layout and design your email, and Accessibility (WCAG), which makes it easy for everyone to receive and understand your email communication, and have the opportunity to become a fan of your product, service, or brand.
Here you can control the canvas flood and design background colours. Canvas flood means the outer background colour, and canvas design means the main area where all your content goes. When the compliant header & footer sections are enabled, the Flood Colour is inherited when the Flood Background attributes are selected.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Controls > Background Colours
How do I change the background colour of the email canvas area?
1) Click anywhere within the flood colour hexadecimal (hex) box; the colour picker selection box will appear.
2) Select your desired colour by clicking and dragging your cursor anywhere within the colour picker box. Once you release your mouse, the new colour will be selected & shown immediately. You can also use the light to dark scroll bar to define your colour.
3) Once done, to close the colour picker simply click anywhere on screen.
Note: This colour is used to flood your header & footer sections. Please go to the Compliance Guidelines section for more details.
How do I change the background colour of the main email design area?
1) Click anywhere within the design colour hexadecimal (hex) box; the colour picker selection box will appear.
2) Select your desired colour by clicking and dragging your cursor anywhere within the colour picker box. Once you release your mouse, the new colour will be selected & shown immediately. You can also use the light to dark scroll bar to define your colour.
3) Once done, to close the colour picker simply click anywhere on screen.
How to reset all the background colour elements to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL background colour elements within this section.
Here you can control the main design element design width. The email width can be adjusted at any time. However, when the width is reduced, Fred re-calculates the size of the design, and any elements, down to their minimum possible size. So, therefore, each cell, block, column, and row may need adjusting after down-sizing.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Controls > Design Width
How can I increase the email width?
1) Hover, click and drag the slider to expand your email design to the required width, then release.
Note: You may need to adjust some element contents when reducing the email design size.
How can I reduce the email width?
1) Hover, click and drag the slider to reduce your email design to the required width, then release.
Note: You may need to adjust some element contents when reducing the email design size.
Here you can control the main design element design margins. By applying a margin around the outside of the design area, thus separating the outer background from the email design, you will reduce the inner width of the main design area and all affected elements.
The red line beside each spinner box represents one margin element: left, top, bottom & right.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Controls > Design Margins
How to add a margin around the whole email design?
1) Click the up or down arrow beside each of the desired margin spinner boxes; this will increase or decrease the margin by one pixel.
Note: For quickness, you can simply type in your required number into each of the margin spinner boxes directly. You can increase each margin element to a maximum of 20 pixels.
How to reset all the design margin fields to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL design margin fields within this section.
These settings are applied to all existing & new text blocks once they are dropped into the design area. If you have manually edited an existing text element already in the template, you will need to trash/delete your restyle for these defaults to take effect.
When the template is emailed, these defaults will also style the content where manual element styling has not been applied.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Controls > CSS Shared Styles
How do I change the text heading elements H1, H2 or H3?
These settings are applied to all content building blocks using the heading element, once they are dropped into your email design area. If you restyle any heading element after a content block has been placed, Fred will automatically update that block.
1) Click the desired heading element H1, H2, or H3. The corresponding heading box will appear.
2) Update the heading element with the changes you wish to make. You will see a quick preview of the heading element as you change the: text colour, bold, italics, underline, text alignment, line-height, font family, font size, and text capitalisation.
3) Click the cross symbol in the top right-hand corner once you've done, as this will auto-save.
OR
4) Click the trash icon to clear that section and start again.
Note: Fred will not change/update any heading element which has been manually edited within the email design area.
How do I set the body text, so I don't have to keep editing it?
These settings are applied to all content building blocks containing text element, once they are dropped into your email design area. If you restyle any text element after a content block has been placed, Fred will automatically update that block.
1) Click the body text element. The body content text box will appear.
2) Update the body text element with the changes you wish to make. You will see a quick preview of the text content element as you change the: text colour, bold, italics, underline, text alignment, line-height, font family, font size, and text capitalisation.
3) Click the cross symbol in the top-right hand corner once you've done, as this will auto-save.
OR
4) Click the trash icon to clear that section and start again.
Note: Fred will not change/update any body text element which has been manually edited within the email design area.
How do I set the text link element, so the format is the same every time a link is created?
These settings are applied to all new text links which are created within your email content area. If you restyle any text link element after adding a text link in your content area, Fred will automatically update that link accordingly.
1) Click the body link element. The body link box will appear.
2) Update the body link element with the changes you wish to make. You will see a quick preview of the text link element as you change the: text colour, bold, italics, underline, text alignment, line-height, font family, font size, and text capitalisation.
3) Click the cross symbol in the top right-hand corner once you've done, as this will auto-save.
OR
4) Click the trash icon to clear that section and start again.
Note: Fred will not change/update any text link within your content which has been manually edited using the email content editor.
How to change a heading to use the default heading tag within your email content?
This is for headings which have been set and manually changed using the text editor.
1) Within your Content Text Block, highlight the heading where you would like the settings of the heading tag to be applied/updated.
2) Within the editor toolbar across the top, select the Clear Formatting icon, and select the Remove All option; you will see the format be cleared.
3) Then, within the same toolbar across the top, select the Heading Tag icon, select the Tag you wish to use, you will see the changes update immediately.
How to change a paragraph or text to use the default heading tag within your email content?
1) Within your Content Text Block, highlight the text where you would like the heading to be used.
2) Within the editor toolbar across the top, select the Paragraph Format icon and select the format you wish to use; your chosen format will then update immediately.
How to change a link in your text to use the default link setting?
This is for links which have been set and manually changed using the text editor.
1) Within your Content Text Block, click/highlight the link where you would like the settings of the link tag to be used & updated.
2) Within the editor toolbar across the top, select the Clear Formatting icon; you will see the changes update immediately.
How to reset ALL the CSS shared style elements to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL CSS shared style elements within this section.
These settings are applied to all existing & new design modules, once they are dropped into the main template design area. Unless, you have manually edited an existing design module already within the main design area, in which case you will need to click the Update Direct Styling toggle button BEFORE any changes are made, for the default styles to take effect.
When the template is emailed, these defaults will style the design modules as desired.
Note: Once you"ve finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Controls > Inline Common Styles
How do I change the spacer element height within the container & content blocks so it's the same every time?
These settings are applied to the spacer building blocks, once they are dropped into your email design area. If you change these default row or block spacer elements after a spacer block has been placed, Fred will automatically update that block.
1) Click the desired spacer element, Row Spacer or Block Spacer. The corresponding spacer element box will appear.
2) Update the spacer height by clicking & holding your mouse to slide the numerical bar to the figure you wish to use. If you have any spacer blocks within your template, you will see them update as you change/move the sliding bar.
3) To make ALL your manually edited spacer elements update, click the Update Direct Styling toggle button to 'ON' before you make any changes; otherwise, those changes will not update.
4) Click the cross symbol in the top right-hand corner once you've done.
OR
5) Click the trash icon to reset the figures and start again.
Note: Fred will not change/update any spacer element which has been manually edited within the main email design area, unless you click the Update Direct Styling toggle button BEFORE any changes are made.
How do I set the borders for the building blocks so it's consistent every time?
These border settings can be applied to the Row, Column, Block, or Cell of each building block, once they are dropped into your email design area. If you change these default settings after a building block has been placed, Fred will automatically update that block accordingly.
1) Click the desired border setting you wish to change, Row Border, Column Border, Block Border, or Cell Border. The corresponding border box will appear.
2) Update the border element with the changes you wish to make. You will see a quick preview of the border element as you change the settings: border left, top, bottom & right elements, border style, and border colour. If you have any building blocks within your template, you will see them update as you change each setting.
3) When updating these border settings, some cells may not have enough room. Therefore an 'Alert' will appear; you can either select strict to apply the exact borders where possible OR select flexible to apply various borders up to the figure where possible. Please select one option, or simply cancel.
4) To make ALL your manually edited border setting/s update, click the Update Direct Styling toggle button to 'ON' before you make any changes; otherwise, those changes will not update.
5) Click the cross symbol in the top right-hand corner once you've done.
OR
6) Click the trash icon to reset the figures and start again.
Note: Fred will not change/update any border setting which has been manually edited within the main email design area, unless you click the Update Direct Styling toggle button BEFORE any changes are made.
How do I set the paddings to my building blocks so it's the same every time I add one to my template?
These padding settings can be applied to the Row, Column, Block, or Cell of each building block, once they are dropped into your email design area. If you change these default settings after a building block has been placed, Fred will automatically update that block accordingly.
1) Click the desired padding setting you wish to change, Row Padding, Column Padding, Block Padding, or Cell Padding. The corresponding padding box will appear.
2) Update the padding element with the changes you wish to make. You will see a quick preview of the padding element as you change the settings: padding left, top, bottom & right elements, padding style, and padding colour. If you have any building blocks within your template, you will see them update as you change each setting.
3) When updating these padding settings, some cells may not have enough room. Therefore an 'Alert' will appear; you can either select strict to apply the exact padding where possible OR select flexible to apply various paddings up to the figure where possible. Please select one option, or simply cancel.
4) To make ALL your manually edited padding setting/s update, click the Update Direct Styling toggle button to 'ON' before you make any changes; otherwise, those changes will not update.
5) Click the cross symbol in the top right-hand corner once you've done.
OR
6) Click the trash icon to reset the figures and start again.
Note: Fred will not change/update any padding setting which has been manually edited within the main email design area, unless you click the Update Direct Styling toggle button BEFORE any changes are made.
How do I set the background colour to my building blocks so it's the same every time I add one to my template?
These background colour settings can be applied to the Row, Column, Block, or Cell of each building block, once they are dropped into your email design area. If you change these default settings after a building block has been placed, Fred will automatically update that block accordingly.
1) Click the desired background setting you wish to change, Row Background, Column Background, Block Background, or Cell Background. The corresponding background box will appear.
2) To activate the colour setting, click the transparent colour block, then click again to open the colour picker box.
3) Select your colour by either typing your known Hex (#) colour or by moving the cross within the colour picker and the brightness gradient slider. If you have any building blocks within your template, you will see them update as you change the colour setting.
4) To make ALL your manually edited background colour setting/s update, click the Update Direct Styling toggle button to 'ON' before you make any changes; otherwise, those changes will not update.
5) Click the cross symbol in the top right-hand corner once you've done.
OR
6) Click the trash icon to reset the figures and start again.
Note: Fred will not change/update any background colour setting which has been manually edited within the main email design area, unless you click the Update Direct Styling toggle button BEFORE any changes are made.
How to reset ALL the inline common style elements to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL inline common style elements within this section.
Here you can control the settings for Accessibility for the visually impaired (WCAG) & visually highlight the email Design using Guide Lines, helping you to build your emails.
These settings highlight and display any area which may cause possible difficulties, giving you advice on potential problems and to display design guidelines to visually help build a template.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Canvas Control > General Settings
What is accessibility, and how do I enable/disable it?
This nifty feature indicates possible difficulties for the visually impaired by analysing your content, which includes contrast ratios between the foreground and background colours, issues with font sizes, type of font styles being used, and lots more!
There are three levels of conformity: A - Single A (low range), AA - Double A (mid-range), and AAA - Triple A (high range). Conformance at higher levels indicates conformance at lower levels. For example, by conforming to AA, your email meets both the A and AA conformance levels. As level A does not achieve broad accessibility for many situations, Fred only reports on the two highest levels for your email designs.
1) Click the WCAG toggle button to turn on/off accessibility mode.
2) When active, a coloured border highlights all WCAG issues within your email design. You can then hover over each cell to display the quick view WCAG box explaining the issue raised.
Note: This feature is optional; meaning you can decide whether you wish to adjust your design, reducing the number of potential issues, thus, giving better accessibility or simply do nothing. It's your choice.
How to change the colour of the active accessibility borders?
You do not need to activate the accessibility mode to change this setting; however, when activated, you will see the colour update as you edit these borders.
1) Within the hexadecimal (hex) box, click anywhere within the hex code. The colour picker selection box will appear.
2) Select your desired colour by clicking or dragging your cursor anywhere within the colour picker box. You can also use the light to dark scroll bar to the left of it.
3) Once your colour has been selected, to close the colour picker, simply click anywhere on screen.
What are design guide lines, and how do I disable/enable them?
This feature displays row, column, and block guide lines to visually help build your email design. These guide lines are useful for laying out your building blocks and making them symmetrical, as they show you the physical element and any space/padding around each.
These design guide lines appear by default and are displayed as fine dots. They are not part of your design and will not appear when you send an email preview or live campaign.
1) Click the Design Guide Lines toggle button to turn off/on the guide lines.
2) When active, a fine coloured dotted border defines all the elements within your email design, showing any physical spacing.
How to change the colour of the design guide lines?
You can easily edit the colour of these design guide lines. You do not need to have the guide lines activated to change this setting; however, when activated, you will see the colour update as you edit these guide lines.
1) Within the hexadecimal (hex) box, click anywhere within the hex code. The colour picker selection box will appear.
2) Select your desired colour by clicking or dragging your cursor anywhere within the colour picker box. You can also use the light to dark scroll bar to the left of it.
3) Once your colour has been selected, to close the colour picker, simply click anywhere on screen.
How to reset ALL the general setting elements to start again?
1) Click the trash icon along the border of this section. This clears any changes you made and resets everything.
Note: This will reset ALL general setting elements within this section.
This is where you start your email framework. You use drag-and-drop design elements to quickly build your layout. There are two types of Design Modules available Container Rows and Content Blocks. These design elements are modular, responsive, customisable, and are very easy and simple to build with.
These Design Modules offer pixel-perfect column, padding & margin settings, allowing you to create precise email designs. Once they're placed, they will auto-adjust to the row/column width available, so you can add a variety of elements like; images, text blocks, buttons, social links, and much more. You'll be creating beautiful campaigns, automation emails, and templates without using a single line of HTML code, in no time!
Here you can find different types of container rows to insert into your email design. Container rows are rows made up of structural units that define the horizontal composition of a section of the email design by using columns. A container row can include one to six columns. Using more than one column allows you to put different content block elements side by side.
Every container row element has its own row settings, giving you the same flexibility as achieved with any hand-coded email. For example, you can select a background colour for the entire row, only the message area, or a specific column within it.
A container row element is required before any content block elements can be dropped within your email design. Once placed, container rows will auto-adjust in to the set email design width, and they can also be reordered as and when required. You can also create your own custom saved container rows.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Design Modules > Container Rows
How do I use the container rows when designing my email layout?
There are two types of container rows: column elements and a spacer element. A column row element includes either one to six columns. A spacer row element consists of one empty row with a blank .PNG image; this gives you control to pre-define its exact pixel height.
You can use as many or as few container rows as you wish within your email layout, but they can only be stacked on top of one another. Once placed, container rows can be reordered as and when required.
1) Click and drag your chosen container row element across into the design area. You will see a 'greyed-out' area which will indicate where you can drop your container row element, then simply release your mouse button. By moving your cursor into an existing container row and moving your mouse to the top or bottom, you will determine where it can be dropped.
2) Once dropped, your new container row element will be inserted, and you are now ready to add your desired content block elements.
3) To cancel a drop once selected and 'mid-drag', just release the mouse button anywhere outside of the design area.
How do I move or delete a container row within my email design?
Here you will find different types of content blocks you can use within your email design. Content Blocks are blocks made up of structural units that define the horizontal and vertical composition of a section of the email design by using columns, rows, and cells. A block can have up to two column elements and two row elements, each with its own cell elements. Using more than one column allows you to put different types of content block elements side by side.
Every Content Block element has its own block settings, giving you the same flexibility as achieved with any hand-coded email. For example, you can select a background colour for the entire row, only the message area, or a specific column within it.
Before any content block elements can be dropped within your email design, a container row element must be placed within your email design area first. Once a Content Block element has been placed, it will auto-adjust in to the set width of that Content Container Column, and they can also be moved as and when required. You can also create your own custom saved blocks.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Design Modules > Content Blocks
How do I use the content blocks within my email design?
There are seven types of content block elements and a spacer block element. Content block elements consist of row, column, and cell elements. A spacer block element consists of one empty row, column, & cell with a blank .PNG image; this gives you control to pre-define its exact pixel height.
A content block element is used to insert text, images, buttons, etc., and can only be dropped into containers. Once placed, you can have as many content blocks as you wish within your containers & email layout, plus they can be moved around any part of the design area, including different containers. You can also create your own custom saved blocks and cells.
1) Click and drag your chosen content block element across into the design area. You will see a 'greyed-out' area which will indicate where you can drop your block element, then simply release your mouse button. If there are existing content blocks, by moving the cursor into the top or bottom of the block area, you will determine where it can be dropped.
2) Once dropped, your new block element will be inserted, and you are now ready to add your desired email content (eg., text, images, buttons, social links, and more).
3) To cancel a drop once selected and 'mid-drag', just release the mouse button anywhere outside of the design area.
How do I move or delete a content block within my email design?
The Styling Controls section is where you edit each aspect of the Design Modules within your email design. There are four Element Modes which you can control, they are: Row, Column, Block & Cell. Different Styling Controls will display depending on which Design Module and Mode is selected.
These Styling Controls are inherited by the Design Module & Canvas Control sections. For example, the font family which is set in the Canvas Controls > CSS Shared Styles is used everywhere within your email design, except where you've used a custom setting within the design toolbar. This feature is very useful to build a coherent design very quickly.
When saving your design elements for future use, see My Shared Data > Elements, each design element is saved on a hierarchy basis. This means you can save the Block Element on its own, or if you save a Row Element, all the other design elements within it are saved too. Fred is extremely versatile and simple to use, making your email design possibilities never-ending!
Once you've placed your container row design modules into your email design, you then have the option to customise the row element. Depending on the type of container row module used, the styling controls are shown for that row element will vary. Each of the container rows is made up of structural units that define the horizontal composition of a section of the email design by using columns. A row can include one to six columns. Using a container row module of two columns or more allows you to put different content block design modules side by side.
Every row element has its own styling controls: Column Widths, Borders, Padding, Background & Fluidity, each giving you the freedom and flexibility as achieved with any hand-coded email.
A container row module is required before any content block modules can be dropped. Once placed, the whole row element can be moved and reordered as and when required, within your email design area. You can also create your own custom saved container row elements.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode
How to select the row mode within an email design?
Each and every container design module has a main row element. Every time you select an element within your email design area, Fred will automatically be set on Cell mode so that you can edit its contents easily.
1) Click anywhere within your email design area. You will see the selected row highlighted within your design.
2) Select the Row mode within the element bar of the styling controls.
Note: From here you have access to many editable options. Please see below.
How to save a row element for future use?
Be sure you've selected the row element you wish to save.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the save icon underneath the element bar. Fred will then automatically take you to the My Shared Data > Elements section.
3) Type in your preferred element name.
4) Click the save icon. You will now be able to use this saved row for future email designs.
You can move your row element at any point when building your email design.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Underneath the element bar, click and drag the move arrow icon across into the design area.
3) By moving your cursor, you will see that the row has now disappeared, and your cursor is now an arrow with a document icon. Now hover this row into the new position within your email design; you will see a 'greyed-out' area, indicating it can be dropped.
4) Release your mouse to drop your row in its new position; you will instantly see that your row has moved within your email design.
5) To cancel a drop once selected and 'mid-drag', just release the mouse button anywhere outside of the main email design area.
Note: You can repeat this process as many times as you wish, until you are happy.
How to copy a row element within an email design?
Copying a row element can make designing your email template much quicker, especially if you have multiple rows of the same design layout.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the copy icon underneath the element bar. Fred will automatically copy the whole row element.
3) You will find any duplicated row element at the bottom of your design area, ready for you to edit and/or move as required.
Note: please see instructions on how to move the row element, above.
How to delete a row element within an email design?
You can delete a row element at any time whilst building your email design, should you wish to.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Click the cross icon underneath the element bar, to delete the row.
3) A notification box will appear; click the Proceed option button to confirm the row deletion; this will then delete the entire selected row. If you click the Cancel option button, this will cancel the deletion & close the deletion request.
Note: Once a deletion request has been actioned, it is permanent, meaning it can NOT be undone.
Row Column Widths
Fred uses pixel-perfect column width input boxes for two or more column elements, so you can manually set the sizes for each column you have. Fred automatically calculates the total width of your email design area and deducts the unset border widths or paddings, giving you the total amount available for each column.
Column resizing for container rows can be a complicated process depending on the complexity of the design, as every cell in every block is considered before the resize. Resizing is therefore calculated on the constraints of the design but should never exceed the maximum width.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode > Row Column Widths
How to edit the column sizes within a row element?
When typing your column figures for 2 or more columns, Fred gives you the option to decide where the difference is distributed between the columns.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Under column widths, click one of the column width input boxes and type in your desired column width figure.
3) You will notice a little arrow(s) will appear at the side of the active input box; simply click on the desired arrow to allocate which side the difference of the old figure goes/comes from (depending on whether the number is greater or smaller than the original). Your columns will update immediately.
Note: You can repeat the above actions for each column until you're happy you've got them set correctly.
What are the figures underneath the column widths for?
When you move your mouse within your email design, you will see the figures constantly change. These figures give you an accurate size and/or position of your cursor so you can determine what figures you will need for your column sizes.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) The relative positions are giving you precise new column width values, depending on where & how you move your cursor. Moving from left to right expands the left column, and right to left expands the right column, giving you new values to pinpoint exactly what pixels you may need for the column width you require. XXX relates to the other column to be affected, and ??? means the minimum limit has been reached for that column.
3) The original figures are always shown should you wish to reset the column widths to their original sizes, before any resizing was applied.
4) The cursor position provides visual assistance with the current position of your cursor, from the top left corner within the active email design area. This is very useful should you need to know what the height or width of an area within the specific row column element.
Row Borders
Row borders are solid coloured lines that are applied to the outside edge of a row element, using the colour picker, hexadecimal or RGB values. You can add a border around all sides, multiple sides or a single side of a row element. There are several different border styles you can use; Solid, Dashed, Dotted, Double Lines or Groove Lines, but you can only use one style per row border element. The maximum size of any one row border is 8 pixels in thickness.
When applying a border around a row element within the email design, it will automatically reduce the inner width of that row element and it may affect the width of any contained elements within that row.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode > Row Borders
How to add a border within a row element?
The red line within the border spinner boxes represents each border element; left, top, bottom & right.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the border style preview button to open the border style preview box and select the required border style; solid, dashed, dotted, double or a groove border, then click away to apply the change.
3) Click the border color input field to open the color picker selection box, either a colour can be selected or a HEX / RGB value can be entered directly in the input field. Click away to finish.
4) Click the up or down arrow beside each of the desired border spinner boxes, this will increase or decrease the border by one pixel. Alternatively directly enter a number and click away to apply the change.
Note: For the double or groove borders to show you need a border value of 2 pixels or more.
How to reset all the row border elements to start again?
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL row border elements within this section.
Row Padding
Row padding is used to create space around the inside edge of the row element's content, using the numbered spinner boxes. You can add a padding around all sides, multiple sides, or a single side of a row element. The maximum size of any one row padding side is 20 pixels thick.
When applying a padding around a row element within the email design, it will automatically reduce the inner width of that row element and it may affect the width of any contained elements within that row.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode > Row Padding
How to add a padding within a row element?
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the up or down arrow beside each of the padding element spinner boxes. The red line represents each padding element (left, top, bottom & right); this will increase or decrease by one pixel. Alternatively, directly enter a number and click away to apply the change.
How to reset all the padding row elements to start again?
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL row padding elements within this section.
Row Background
Applying background colours and images can really add to the look and feel of an email campaign. Fred has two row background elements that can be added: Colour & Image. Using both of these to promote specific areas in your email design can liven up your subscriber's experience.
Row background colours are solid colours that are applied to the background of a row element, using the colour palette, hexadecimal, or RGB values. Ensure that it contrasts well with any cell elements that you use, making sure they are visible. If using in conjunction with a row background image, make sure to colour match it with that image.
Row background images are images that are applied to the background of a row element, meaning they are more often subtle and complementary to the other contents in that section. The major benefit of using background images is they allow you to place additional content on top of them. Unlike hero images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space. Using text on top of a background image, instead of including that text as part of the image, means your message is readable when images are turned off.
While row background images are supported in most email clients, they are still NOT fully supported by all; they can also be affected by mail client image blocking. Therefore, we suggest you always set a background colour, similar in colour to your image, as a fallback option.
Navigation: Fred > Styling Controls > Row Element Mode > Row Background
How to add a background colour within a row element?
As standard, there is no background colour set on any row element.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Double click the background colour input field to activate & open the colour palette selection box. From here a colour can be selected, or a HEX / RGB value can be entered directly into the input field. Click away to finish.
Note: To apply a transparent colour or to unset the background, simply delete all of the value in the input field and click away to apply the change.
How to add a background image within a row element?
You have two options for this feature based on whether you are uploading a new image or you already have an image loaded into the image manager.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
First Option - Using a New Image:
2) Click the upload image button and browse your computer for your image, then click open to complete the upload.
3) Once uploaded, click the close button for the browse option and search through the image manager for your uploaded image.
4) Hover over the image and click the insert Plus icon to use that image. The selected image will now automatically be inserted directly into the background of your row element.
Second Option - Using an Uploaded Image:
5) After step 1, click the select image button and browse through the image manager for your required image. Then repeat step 4.
How to customise a background image within a row element?
Once an image has been inserted into the row element, more settings will appear, giving you a selection of options to choose from.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) You can select a repeat option to tile the background image over the row element by width, height, or both.
3) Select a position option to move the background image to that location within the row element.
4) Select a size option to stretch the background image over the entire row element, or you can limit it by width/height or keep it at the original size.
Note: When selecting your options, you will notice that some will not work togther. Therefore, the settings will automatically reset depending on your selection; this is normal.
How to reset all the row background elements to start again?
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL row background elements within this section.
Row Fluidity
Fred's standard responsive reaction is to start stacking row columns singularly on widths below the email design. So, if you have an email design of 600px and you have a row of 4 columns, as soon as the email design is reduced to 599px the last column would stack under so you would have a row of 3 columns with one column underneath. This would continue down depending on your viewing device.
Under the Fluidity controls you have the option to customise how the container row element reacts, when triggered. You have four options available; you can decide whether you want your row columns to shrink by a percentage before reacting & stacking, or you can stack all columns straight away, or you can have both the shrink by percentage and then stack all the columns, or simply leave the settings as standard.
Certain fluidity options can be applied to a container row, column and block elements only. Depending on what containers you've used within your design depends on what fluidity options will be shown.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode > Row Fluidity
How to customise the responsive reaction of the row column element?
These settings are extremely useful for smaller screens, tablets & mobiles as they allow you to manipulate how each row reacts.
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) To change from the standard reaction, click the shrinkage pulldown menu to set the percentage on column widths. All container row columns will shrink by that selected percentage on widths below the email design before stacking.
3) To make all the container row columns stack immediately on widths below the email, simply select the stack all tick box.
Note: Whilst these setting are very useful, unfortunatley they may NOT be supported for certain devices, so in those instances they will revert to the default actions.
How to reset all the fluidity elements to start again?
1) After clicking in your design, select the row mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL row fluidity elements within this section.
Row Spacer
Sometimes you may want a space bigger than a padding between two elements and across your whole email width. You can do this by adding a row spacer element. You will not need to change the element bar, as this row spacer element can only be applied in row element mode. This row spacer element has its own styling controls: Height and Design Visibility.
This row spacer element is a row container module, so it does not need any other row container module before being dropped. Once placed, the row spacer element can be moved, copied, and deleted as and when required. You can also create your own custom saved row element.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Row Element Mode > Row Spacer
How to change the height of the spacer within a row element?
1) After clicking the spacer element in your design, the row mode within the element bar of the styling controls will be activated (col, block & cell modes will be deactivated).
2) Click and drag the slider to expand the spacer to your desired height, then release. This will increase or decrease its size by two pixels, the lowest being 10 pixels, the highest being 30 pixels. You will see this spacer change immediately within your design.
3) Click the spacer pattern icon; you can toggle between on and off. So you can show the spacer pattern to keep it visible or hide it and have it as a blank space, within your email design.
How to reset all the row spacer elements to start again?
1) After clicking the spacer element in your design, the row mode within the element bar of the styling controls will be activated (col, block & cell modes will be deactivated).
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL row spacer elements within this section.
Each container row design module includes anything from one to six column elements. Using a container row module of two or more columns allows you to put different content block modules side by side. Once you've placed your design modules into your email design, you then have the option to customise each and every column element within it. Depending on the type of design modules used depends on how many column elements are displayed and what styling controls are available for those column elements.
Each column element has its own styling controls of; Borders, Padding, Background & Fluidity, each gives you the freedom and flexibility as achieved with any hand-coded email. Once a specific container row module has been added you can NOT add or delete an entire column element. Meaning, if you need to expand the amount of columns you have, you will need to select another container row module & move the inner blocks or cell elements over to it.
Once a content block module has been placed within a column element, you can move and reorder your whole column(s), within the same container row module. Whilst you can NOT delete a column, you can delete all the contents within it, allowing you to start again. You can also create your own custom saved column elements.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Column Element Mode
How to select the column mode within an email design?
Each and every container design module has a main column element, these can be anything from one to six column elements. Everytime you select an element within your email design area, Fred will automatically be set on Cell mode so that you can edit it's contents easily.
1) Click anywhere within your email design area. You will see the selected row highlighted within your design.
2) Select the Column mode, shown as 'Col' within the element bar of the styling controls. You will see your column elements being represented by the numbered buttons under the element bar, your first/selected column will be shown in orange. The amount of columns shown is dependent on the container row module you've selected and used.
Note: From here you have access to many editable options. Please see below.
How to switch between column elements?
You can only switch between your column elements if you have used a container row module of two or more columns.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, you will see that the first column is already selected, shown in orange, and highlighted within your design.
3) Click between any of the numbered column buttons to switch between each column element. The newly selected column will be shown in orange and will be highlighted within your design.
Note: The amount of columns shown is dependent on the container row module you've selected and used.
How to move and reorder column elements?
You can only reorder your column elements if you have used a container row module of two or more columns.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element you wish to move, shown in orange. You will also see the selected column highlighted within your design.
3) Now Click and drag that selected column button over the numbered column button you wish to switch. You will see the new selected numbered column button change to a red dashed outline, indicating it can be dropped.
4) Release your mouse to drop your column in it's new position, you will instantly see that your columns have changed within your email design.
5) To cancel a drop once selected and 'mid-drag', just release the mouse button anywhere outside of the numbered column button area. You will see the cursor change to a black 'no drop' symbol.
Note: Repeat this process until you have the correct column order. The amount of columns shown is dependent on the container row module you've selected and used within your design area.
How to save a column element for future use?
You can save a whole column element if, however, you have used a one-column container row element, then you will NOT see any numbered column buttons, so please skip step 2.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to be saved, shown in orange. You will also see the selected column highlighted within your design. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the save icon underneath the element bar. Fred will then automatically take you to the My Shared Data > Elements section.
4) Type in your preferred element name.
5) Click the save icon. Now you'll be able to use this saved column for future email designs.
How to copy a column element within an email design?
You cannot physically copy and create a new column element, but you can duplicate all of the contents within a column.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, simply click the numbered column button to select the column element to be copied, shown in orange. You will also see the selected column highlighted within your design. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the copy icon underneath the element bar. Fred will automatically copy the whole contents of the column element.You will see all the duplicated column elements at the bottom of the selected column, ready for you to edit and/or move as required.
Note: The amount of columns shown is dependent on the container row element you've selected and used.
How to delete a column element within my email design?
You cannot physically delete a column element, but you can empty the whole column contents, should you wish to.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, simply click the numbered column button to select the column element to be emptied, shown in orange. You will also see the selected column highlighted within your design. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the bin icon underneath the element bar, this will delete ALL of the contents in that column.
4) A notification box will appear; click the Proceed option button to confirm the column deletion, this will then delete the entire selected column contents. If you click the Cancel option button this will cancel the deletion & close the deletion request.
Note: Once a deletion request has been actioned it is permanent, meaning it can NOT be undone.
Column Borders
Column borders are solid coloured lines that are applied to the outside edge of a column element, using the colour picker, hexadecimal or RGB values. You can add a border around all sides, multiple sides or a single side of a column element. There are several different border styles you can use; Solid, Dashed, Dotted, Double Lines or Groove Lines, but you can only use one style per column border element. The maximum size of any one column border is 8 pixels in thickness.
When applying a border around a column element within the email design, it will automatically reduce the inner width of that column element and it will affect the width of any contained elements within that column.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Column Element Mode > Column Borders
How to add a border within a column element?
The red line within the border spinner boxes represents each border element; left, top, bottom & right.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the border to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the border style preview button to open the border style preview box and select the required border style; solid, dashed, dotted, double or a groove border, then click away to apply the change.
4) Click the border color input field to open the color picker selection box, either a colour can be selected or a HEX / RGB value can be entered directly in the input field. Click away to finish.
5) Click the up or down arrow beside each of the desired border spinner boxes, this will increase or decrease the border by one pixel. Alternatively directly enter a number and click away to apply the change.
Note: For the double or groove borders to show you need a border value of 2 pixels or more.
How to reset all the column border elements to start again?
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, click the numbered column button to select the column element you wish to remove the border elements from, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the trash icon along the border of this section, this clears any changes you made and resets everything for this column.
Note: This will only reset the column border elements for the column you have selected. If you have two or more columns, you will have to repeat these steps for each column.
Column Padding
Column padding is used to create space around the inside edge of the column element's contents, using the numbered spinner boxes. You can add a padding around all sides, multiple sides, or a single side of a column element. The maximum size of any one column padding side is 20 pixels thick.
When applying a padding around a column element within the email design, it will automatically reduce the inner width of that column element and it will affect the width of any contained elements within that column.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Column Element Mode > Column Padding
How to add a padding within a column element?
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the border to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the up or down arrow beside each of the padding element spinner boxes. The red line represents each padding element (left, top, bottom & right); this will increase or decrease by one pixel. Alternatively, directly enter a number and click away to apply the change.
How to reset all the column padding elements to start again?
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the border to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the trash icon along the border of this section; this clears any changes you made and resets everything for this column.
Note: This will only reset the column padding elements for the column you have selected. If you have two or more columns, you will have to repeat these steps for each column.
Column Background
Applying background colours and images to columns can really add to the look and feel of an email design. Fred has two column background elements that can be added: Colour & Image. Using both of these to promote a specific column in your email design can liven up your subscriber's experience.
Column background colours are solid colours that are applied to the background of a column element, using the colour palette, hexadecimal, or RGB values. Ensure that it contrasts well with any cell elements that you use, making sure they are visible. If using in conjunction with a column background image, make sure to colour match it with that image.
Column background images are images that are applied to the background of a column element, meaning they are more often subtle and complementary to the other columns and contents in that section. The major benefit of using background images is they allow you to place additional content on top of them. Unlike hero images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space. Using text on top of a background image, instead of including that text as part of the image, means your message is readable if images are turned off.
While column background images are supported in most email clients, they are still NOT fully supported by all. They can also be affected by mail client image blocking. Therefore, we suggest you always set a background colour, similar in colour to your image, as a fallback option.
Navigation: Fred > Styling Controls > Column Element Mode > Column Background
How to add a background colour within a column element?
As standard, no background colour is set on any column element.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the background colour to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Double click the background colour input field to activate & open the colour palette selection box. From here, a colour can be selected or a HEX / RGB value can be entered directly into the input field. Click away to finish.
Note: To apply a transparent colour or to unset the background, simply remove the value in the input field and click away to apply the change.
How to add a background image within a column element?
You have two options for this feature based on whether you are uploading a new image or you already have an image loaded into the image manager.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the background image to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
First Option - Using a New Image:
3) Click the upload image button and browse your computer for your image, then click open to complete the upload.
4) Once uploaded, click the close button for the browse option and search through the image manager for your uploaded image.
5) Hover over the image and click the insert Plus icon to use that image. The selected image will now automatically be inserted directly into the background of your column element.
Second Option - Using an Uploaded Image:
6) After step 2, click the select image button and browse through the image manager for your chosen image. Then repeat step 5.
How to customise a background image within a column element?
Once an image has been inserted into the column element, more settings will appear, giving you a selection of options to choose from.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the background colour to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Select a repeat option to tile the background image over the column element by width, height, or by both. By default, a background image is set as none (no-repeat) within an element.
4) Select a position option to move the background image so it sets a starting location of the image, within the column element. By default, a background image is placed at the top-left corner of an element.
5) Select a size option where you can stretch the background image to cover the entire column element, contain it by width/height or keep it at the original size, ensuring the proportions are maintained. By default, a background image is set as auto (original size) within an element.
Note: When choosing each option, you will see the background image automatically change within your design. You will also notice that some options will not work together, and the settings will automatically reset, depending on your selection.
How to reset all the column background elements to start again?
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the background colour to, shown in orange. (If you only have one column in your design, then please ignore and move to the next step).
3) Click the trash icon along the border of this section; this clears any changes you made and resets everything for this column.
Note: This will only reset the column background elements for the column you have selected. If you have two or more columns, you will have to repeat these steps for each column.
Column Fluidity
Fred's standard responsive reaction is to start stacking columns singularly on widths below the email design. So, if you have an email design of 600px and you have a row of 4 columns, as soon as the email design is reduced to 599px the last column would stack under so you would have a row of 3 columns with one column underneath. This would continue down depending on your viewing device.
Using the Fluidity controls, you have the option to customise how each column element reacts when triggered. You have one responsive and two general appearance options for each column element.
Fixed height is a general appearance option; it locks the columns' height equal to the tallest column in the row element. This works well when using coloured backgrounds on the columns.
Vertical align is a general appearance option; it works in conjunction with the fixed height option. It aligns all the block elements within each column.
Stack fluid is a responsive option; it controls all the block elements within each column, once your container rows responsive reaction has triggered.
Certain fluidity options can be applied to container row, column, and block elements only & depending on what containers you've used within your design depends on what fluidity options will be shown.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Column Element Mode > Column Fluidity
How do I lock the height of a column element?
These settings are good for visualising a uniform design when you have two or more column elements, as you can manipulate how each column renders. If you only have one column in your design, then this feature is not available.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element you wish to lock, shown in orange.
3) Select the fixed height tick box to make the column lock to the equal height as your tallest column. This option works well when all columns are set, so that they are all equally aligned.
4) Now choose how you would like your contents within the column to react, select either; top, middle or bottom.
Note: You can repeat the above actions for each column until you're happy.
How to customise the responsive reaction of the column element?
These settings are extremely useful for smaller screens, tablets & mobiles as they allow you to manipulate how each column reacts. If you only have one column in your design, then this feature is not available.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to customise the responsiveness, shown in orange.
3) To change from the standard reaction, click the stack fluid pulldown menu to select how you would like contents within the column to react, once triggered.
Note: You can repeat the above actions for each column until you're happy. Whilst these settings are very useful, unfortunately, they may NOT be supported for certain devices, so in those instances, they will revert to the default reactions.
How to reset all the column fluidity elements to start again?
If you only have one column in your design, then this feature is not available.
1) After clicking in your design, select the column mode within the element bar of the styling controls.
2) Under the element bar, select the numbered column button of the column element to add the background colour to, shown in orange.
3) Click the trash icon along the border of this section; this clears any changes you made and resets everything for this column.
Note: This will only reset the column background elements for the column you have selected. You will have to repeat these steps for each column element.
Once you've placed your content block design modules into your email design, you will then have the option to customise each block element. Depending on the type of content blocks being used depends on what options are available and shown for each block element. Each of the block elements are made up of structural units that define the horizontal and/or vertical composition of a section of the email design by using rows and/or columns. A block can include one to two columns and/or one to two rows. To place two or more block elements side by side you will need to use two or more container row elements.
Every block element has its own styling controls; Column Widths, Borders, Padding, Background & Fluidity, each gives you the freedom and flexibility as achieved with any hand-coded email.
A container element is required before any content block elements can be dropped. Once placed, the block element can be moved/reordered as and when required. You can also create your own custom saved block elements.
Note: You must remember to periodocially click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode
How to select a block element within an email design?
Each and every content block module has a main block element. Everytime you select a section within your email design area, Fred will automatically be set on Cell Element so that you can edit it's contents easily.
1) Click anywhere within your email design area. You will see the selected cell highlighted within your design.
2) Select the Block mode within the element bar of the styling controls.
Note: From here you have access to many editable options. Please see below.
How to save a block element for future use?
Be sure you've selected the block element you wish to save.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the save icon underneath the element bar. Fred will then automatically take you to the My Shared Data > Elements section.
3) Type in your preferred element name.
4) Click the save icon. You will now be able to use this saved block for future email designs.
How to move a block element within an email design?
You can move your block element at anytime, whilst building your email design.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Underneath the element bar, click and drag the move arrow icon across into the design area.
3) By moving your cursor you will see that the row has now disappeared and your cursor is now an arrow with a document icon. Now hover this block into the new position within your email design, you will see a 'greyed-out' area, indicating it can be dropped.
4) Release your mouse to drop your block in it's new position, you will instantly see that your block has moved within your email design.
5) To cancel a drop once selected and 'mid-drag', just release the mouse button anywhere outside of the main email design area.
Note: You can repeat this process as many time as you wish, until you are happy.
How to copy a block element within an email design?
Copying a block element can make designing your email template much quicker, especially if you need multiple blocks using the same design format.
1) After clicking in your design, select the block mode within the element bar of the styling controls. You will see the selected block highlighted within your design.
2) Click the copy icon underneath the element bar. Fred will automatically copy that whole block element.
3) You will find any duplicated block element at the bottom of the column element within it's container row, ready for you to edit and/or move as required.
Note: Please see instructions on how to move the block element, above.
How to delete a block element within an email design?
Should you need to you can delete a whole block element at anytime, whilst building your email design.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the cross icon underneath the element bar, to delete the block.
3) A notification box will appear, click the Proceed option button to confirm the block deletion, this will then delete the entire selected block. If you click the Cancel option button this will cancel the deletion & close the deletion request.
Note: Once a deletion request has been actioned it is permanent, meaning it can NOT be undone.
Block Column Widths
Fred uses pixel-perfect column width input boxes for any two-column block elements, so you can manually set the sizes for each column you have in block mode. Fred automatically calculates the total width of your email design area and deducts the unset border widths or paddings, giving you the total amount available for each column. Depending on what content block you've used within your design depends on whether you will have any column width settings within the block mode.
There are 5 different content blocks which gives you two columns to customise in block mode. Column resizing for certain content blocks can be a complicated process depending on the complexity of the design, as every cell in every block is considered before the resize. Resizing is therefore calculated on the constraints of the design but should never exceed the maximum width. Fred is intelligent that you will never go over the maximum size of your email design.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode > Block Column Widths
How to edit the column sizes within a block element?
For two block columns, Fred uses pixel-perfect column width input boxes so you can manually set the sizes for each column you have. When typing your column figures for your block columns, Fred gives you the option to decide where the difference is distributed between the columns. Resizing is calculated on the constraints of the design and should never exceed the maximum width, so your columns will always equal the total size available for your block column element.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Under column widths, click one of the column width input boxes and type in your desired column width figure.
3) You will notice a little arrow will appear at the side of the active input box; simply click on the arrow to allocate where the difference of the old figure goes/comes from (depending on whether the number is greater or smaller than the original). Your columns will update immediately.
Note: You can repeat the above actions for each column until you're happy you've got them set correctly.
What are the figures underneath the block column widths used for?
When you move your mouse within your email design, you will see the figures constantly change. These figures give you an accurate size and/or position of your cursor so you can determine what figures you will need for your block column sizes.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) The relative positions give you precise new column width values, depending on where & how you move your cursor. Moving from left to right expands the left column, and right to left expands the right column, giving you new values to pinpoint exactly what pixels you may need for the column width you require. XXX relates to the other column to be affected, and ??? means the minimum limit has been reached for that column.
3) The original figures are always shown should you wish to reset these block column widths to their original sizes, before any resizing was applied.
4) The cursor position provides visual assistance with the current position of your cursor, from the top left corner within the active email design area. This is very useful should you need to know what the height or width of an area within the specific block column element.
Block Borders
Block borders are solid coloured lines that are applied to the outside edge of a whole block element, using the colour picker, hexadecimal or RGB values. You can add a border around all sides, multiple sides or a single side of a block element. There are several different border styles you can use: Solid, Dashed, Dotted, Double Lines or Groove Lines, but you can only use one style per block border element. The maximum size of any one block border is 8 pixels in thickness.
When applying a border around a block element within the email design, it will automatically reduce the inner width of that block element and it may affect the width of any contained elements within that block.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode > Block Borders
How to add a border within a block element?
The red line within the border spinner boxes represents each border element: left, top, bottom & right.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the border style preview button to open the border style preview box and select the required border style: solid, dashed, dotted, double, or a groove border, then click away to apply the change.
3) Click the border colour input field to open the colour picker selection box. Either a colour can be selected or a HEX / RGB value can be entered directly in the input field. Click away to finish.
4) Click the up or down arrow beside each of the desired border spinner boxes; this will increase or decrease the border by one pixel. Alternatively, directly enter a number and click away to apply the change.
Note: For the double or groove borders to show, you need a border value of 2 pixels or more.
How to reset all the block border elements to start again?
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL block border elements within this section.
Block Padding
Block padding is used to create space around the inside edge of the whole block element's contents, using the numbered spinner boxes. So, if you have a block element with two columns within it, then the padding will only be applied to the outside edge and not per column. You can add padding around all sides, multiple sides, or a single side of a complete block element. The maximum size of any one block padding side is 20 pixels thick.
When applying padding around a complete block element within the email design, it will automatically reduce the inner width of that block element and will affect the width of any contained elements within that block.
Navigation: Fred > Styling Controls > Block Element Mode > Block Padding
How to add padding within a block element?
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the up or down arrow beside each of the padding element spinner boxes. The red line represents each padding element (left, top, bottom & right); this will increase or decrease by one pixel. Alternatively, directly enter a number and click away to apply the change.
How to reset all the padding block elements to start again?
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL block padding elements within this section.
Block Background
Applying background colours and images to blocks can really add to the look and feel of an email design. Fred has two block background elements that can be added: Colour & Image. Using both of these to promote a specific block in your email design can liven up your subscriber's experience.
Block background colours are solid colours that are applied to the background of a complete block element, using the colour palette, hexadecimal, or RGB values. Ensure that it contrasts well with any cell elements that you use, making sure they are visible. If using in conjunction with a block background image, make sure to colour match it with that image.
Block background images are images that are applied to the background of a complete block element, meaning they are more often subtle and complementary to the other blocks and contents in that section. The major benefit of using background images is they allow you to place additional content on top of them. Unlike hero images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space. Using text on top of a background image, instead of including that text as part of the image, means your message is readable if images are turned off.
While block background images are supported in most email clients, they are still NOT fully supported by all. They can also be affected by mail client image blocking. Therefore, we suggest you always set a background colour, similar in colour to your image, as a fallback option.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode > Block Background
How to add a background colour within a block element?
As standard, no background colour is set on any block element.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Double click the background colour input field to activate & open the colour palette selection box. From here, a colour can be selected or a HEX / RGB value can be entered directly into the input field. Click away to finish.
Note: To apply a transparent colour or to unset the background, simply delete all of the value in the input field and click away to apply the change.
How to add a background image within a block element?
You have two options for this feature based on whether you are uploading a new image or you already have an image loaded into the image manager.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
First Option - Using a New Image:
2) Click the upload image button and browse your computer for your image, then click open to complete the upload.
3) Once uploaded, click the close button for the browse option and search through the image manager for your uploaded image.
4) Hover over the image and click the insert Plus icon to use that image. The selected image will now automatically be inserted directly into the background of your block element.
Second Option - Using an Uploaded Image:
5) After step 1, click the select image button and browse through the image manager for your chosen image. Then repeat step 4.
How to customise a background image within a block element?
Once an image has been inserted into the block element, more settings will appear giving you a selection of options to choose from.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) You can select a repeat option to tile the background image over the block element by width height or by both.
3) Select a position option to move the background image to that location within the block element.
4) Select a size option to stretch the background image over the entire block element or you can limit it by width/height or keep it at the original size.
Note: When selecting your options you will notice that some will not work togther, therefore the settings will automatically reset depending on your selection, this is normal.
How to reset all the block background elements to start again?
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL block background elements within this section.
Block Fluidity
Fred gives you the option of using the Fluidity controls when you use a two or more column block element. This means you can customise how each block's content reacts when the responsive action is triggered. The stack content fluidity control gives you four options: left align, right align, center, or simply leave the settings as default.
Certain fluidity options can be applied to a container row, column, and block elements only. The fluidity options shown will depend on the containers you've used within your design.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode > Block Fluidity
How do I customise the responsive reaction of the block element?
These settings are extremely useful for smaller screens, tablets & mobiles as they allow you to manipulate the reaction of the content for each block element.
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) To change from the default reaction, click the stack content pulldown and select the alignment for the block element. All the contents within that block element will change alignment to your selected option, once the responsive action is triggered within the email design.
Note: Whilst these settings are very useful, unfortunately, they may NOT be supported for certain devices, so in those instances they will revert to the default actions.
How to reset the block fluidity element to start again?
1) After clicking in your design, select the block mode within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL block fluidity elements within this section.
Block Spacer
Sometimes you may want a space bigger than a padding inbetween two block elements within your email design. You can do this by adding a block spacer element. This spacer element will automatically fill the width of its container column element. You will not need to change the element bar of the styling controls, as this block spacer element can only be applied in block element mode. This block spacer element has its own styling controls: Height and Design Visibility.
A container element is required before this spacer content block can be dropped. Once placed, the block spacer element can be moved, copied, and deleted as and when required. You can also create your own custom saved block element.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Block Element Mode > Block Spacer
How to change the height of the spacer within a block element?
1) After clicking the spacer element in your design, the block mode within the element bar of the styling controls will be activated (cell mode will be deactivated).
2) Click and drag the slider to expand the spacer to your desired height, then release. This will increase or decrease its size by two pixels, the lowest being 10 pixels, the highest being 30 pixels. You will see this spacer change immediately within your design.
3) Click the spacer pattern icon; you can toggle between on and off. So you can show the spacer pattern to keep it visible or hide it and have it as a blank space within your email design.
How to reset the block spacer element to start again?
1) After clicking the spacer element in your design, the block mode within the element bar of the styling controls will be activated (cell mode will be deactivated).
2) Click the trash icon along the border of this section; this will clear any changes you made and reset everything.
Note: This will reset ALL block spacer elements within this section.
Each block element has a cell element. The number of cell elements shown for the block depends on the type of building block used. The cell element is the final structure of the email design; it is where all your email content is placed. Every time you select a section within your email design area, Fred will automatically be set on cell mode so that you can edit its contents easily. However, if you have selected block mode, this will always be set until you select another mode. Once a specific content block module has been added, you can NOT add or delete the actual cell element. This means that if you need to expand the number of cells you have, you will need to select another content block and/or container row module & move the inner blocks or cell elements over to it.
Each cell element is customisable with its own settings, from Column Sizes, Borders, Padding & Background controls, each giving you the freedom and flexibility as achieved with any hand-coded email.
A content block element is required for a cell element to be present. Once placed, the cell element can be edited, moved, and copied as and when required. Whilst you can NOT delete a cell element, you can delete, cut, copy, and paste the contents of the cell. You can also create your own custom saved cell contents.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Cell Element Mode
How to select a cell element within an email design?
Every time you select a section within your email design area, Fred will automatically be set on Cell Element so that you can edit its contents easily. Unless you've selected block mode, then you will always be on that mode until you click another mode.
1) Click anywhere within your email design area. You will see the selected cell highlighted within your design.
2) You will also see the cell mode, shown in orange, within the element bar of the styling controls. If you are on block mode, just select the cell mode.
Note: From here, you have access to many editable options. Please see below.
How to save a cell element for future use?
This feature is saving everything contained within the cell element.
1) After clicking in your design, check the cell mode is selected within the element bar of the styling controls.
2) Click the save icon underneath the element bar. Fred will then automatically take you to the My Shared Data > Elements section.
3) Type in your preferred element name.
4) Click the save icon. You will now be able to use this saved cell for future email designs.
How to move the whole cell content within an email design?
Whilst you can't physically move a cell, you can cut & paste all the contents within it.
1) After clicking in your design, check the cell mode is selected within the element bar of the styling controls.
2) Click the cut icon underneath the element bar; this will empty all the contents from within the cell.
3) In your email design, select where you would like to move your content to.
4) Click the paste icon underneath the element bar, to paste the content.
5) A notification box will appear, asking how you would like the contents to be placed. Click your chosen option; Fred will then place your content as required.
How to copy the whole cell content within an email design?
You can copy your cell content at any time, whilst building your email design.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the copy icon underneath the element bar, to copy everything within the cell contents.
3) In your email design, select where you would like to copy your content to.
4) Click the paste icon underneath the element bar to paste the content.
5) A notification box will appear, asking how you would like the contents to be placed. Click your chosen option; Fred will then place your content as requested within that cell element.
How to delete a cell element within an email design?
Whilst you can't physically delete a cell, you can delete the whole cell contents at any time.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the bin icon underneath the element bar to delete all the contents from within the cell.
3) A notification box will appear; click the Proceed option button to confirm the cell content deletion; this will then delete the selected content. If you click the Cancel option button, this will cancel the deletion & close the deletion request.
4) Within your email design, you will see that the cell has now been emptied.
Note: Once a deletion request has been actioned, it is permanent, meaning it can NOT be undone.
Cell Borders
Cell borders are solid coloured lines that are applied to the outside edge of the whole cell element, using the colour picker, hexadecimal or RGB values. You can add a border around all sides, multiple sides or a single side of a cell element. There are several different border styles you can use; Solid, Dashed, Dotted, Double Lines or Groove Lines, but you can only use one style per cell border element. The maximum size of any one cell border is 8 pixels in thickness.
When applying a border around a cell element within the email design, it will automatically reduce the inner width of that cell element and it may affect the width of any contents within that cell.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Cell Element Mode > Cell Borders
How to add a border within a cell element?
The red line within the border spinner boxes represents each border element; left, top, bottom & right.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the border style preview button to open the border style preview box and select the required border style; solid, dashed, dotted, double or a groove border, then click away to apply the change.
3) Click the border color input field to open the color picker selection box, either a colour can be selected or a HEX / RGB value can be entered directly in the input field. Click away to finish.
4) Click the up or down arrow beside each of the desired border spinner boxes, this will increase or decrease the border by one pixel. Alternatively directly enter a number and click away to apply the change.
Note: For the double or groove borders to show you need a border value of 2 pixels or more.
How to reset all the cell border elements to start again?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL cell border elements within this section.
Cell Padding
Cell padding is used to create space around the inside edge of the whole cell element's contents, using the numbered spinner boxes. So, if you have a block element with two columns within it, then the padding will only be applied to the inside edge of the selected cell of that column. You can add padding around all sides, multiple sides, or a single side of a complete cell element. The maximum size of any one cell padding side is 20 pixels thick.
When applying padding around a complete cell element within the email design, it will automatically reduce the inner width of that cell element and will affect the width of any contained content within that cell.
Navigation: Fred > Styling Controls > Cell Element Mode > Cell Padding
How to add padding within a cell element?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the up or down arrow beside each of the padding element spinner boxes. The red line represents each padding element (left, top, bottom & right); this will increase or decrease by one pixel. Alternatively, directly enter a number and click away to apply the change.
How to reset all the padding cell elements to start again?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the trash icon along the border of this section; this clears any changes you made and resets everything.
Note: This will reset ALL cell padding elements within this section.
Cell Background
Applying background colours and images to cells can really add to the look and feel of an email design. Fred has two cell background elements that can be added: Colour & Image. Using both of these to promote a specific cell in your email design can liven up your subscriber's experience.
Cell background colours are solid colours that are applied to the background of a complete cell element, using the colour palette, hexadecimal, or RGB values. Ensure that it contrasts well with any cell elements that you use, making sure they are visible. If using in conjunction with a cell background image, make sure to colour match it with that image.
Cell background images are images that are applied to the background of a complete cell element, meaning they are more often subtle and complementary to the other cells and contents within it. The major benefit of using background images is they allow you to place additional content on top of them. Unlike hero images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space. Using text on top of a background image, instead of including that text as part of the image, means your message is readable if images are turned off.
While cell background images are supported in most email clients, they are still NOT fully supported by all. They can also be affected by mail client image blocking. Therefore, we suggest you always set a background colour, similar in colour to your image, as a fallback option.
Note: You must remember to periodically click the template save button at the very top before carrying on or exiting from the email template.
Navigation: Fred > Styling Controls > Cell Element Mode > Cell Background
How to add a background colour within a cell element?
As standard, no background colour is set on any block element.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Double click the background colour input field to activate & open the colour palette selection box. From here, a colour can be selected or a HEX / RGB value can be entered directly into the input field. Click away to finish.
Note: To apply a transparent colour or to unset the background, simply delete all of the value in the input field and click away to apply the change.
How to add a background image within a cell element?
You have two options for this feature based on whether you are uploading a new image or you already have an image loaded into the image manager.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
First Option - Using a New Image:
2) Click the upload image button and browse your computer for your image, then click open to complete the upload.
3) Once uploaded, click the close button for the browse option and search through the image manager for your uploaded image.
4) Hover over the image and click the insert Plus icon to use that image. The selected image will now automatically be inserted directly into the background of your cell element.
Second Option - Using an Uploaded Image:
5) After step 1, click the select image button and browse through the image manager for your chosen image. Then repeat step 4.
How to customise a background image within a cell element?
Once an image has been inserted into the cell element, more settings will appear giving you a selection of options to choose from.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) You can select a repeat option to tile the background image over the cell element by width height or by both.
3) Select a position option to move the background image to that location within the cell element.
4) Select a size option to stretch the background image over the entire cell element or you can limit it by width/height or keep it at the original size.
Note: When selecting your options you will notice that some will not work togther, therefore the settings will automatically reset depending on your selection, this is normal.
How to reset all the cell background elements to start again?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Click the trash icon along the border of this section, this clears any changes you made and resets everything.
Note: This will reset ALL cell background elements within this section.
When you've finished designing your email, this is the last section where you convert your design and send your preview email for proofing. There are four sections to complete: Design Mode, Preview Mode, Email Broadcast & Preview & Export. Each section gives you an overview and builds your email. Once complete, Fred's unique coding is then compiled and converted into HTML, ready for your email service provider to use.
With Fred's Preview Mode features, you'll see exactly how your email design reacts in different viewing portals. This gives you the option to then re-edit your email design based on what you've seen, should you need to.
This is where you control the different design modes when creating and editing your email designs: HTML Design Version & Plain Text Version. When creating your email designs within Fred, the HTML Design version is automatically selected, ready for designing.
Although HTML makes emails beautiful, plain text makes them functional. In addition to helping prevent your emails from getting caught in the spam filter, a plain text version of your email will allow everyone to see your message, regardless of email client or settings.
The multi-part mime emails send both HTML and Text versions of the email content. Although you can edit both versions, the text content must be a carbon copy of one another. You must always send multi-part emails to maximise delivery and recipient engagement.
Note: Once you've finished changing this section, always remember to click the template save button at the very top throughout designing and before exiting from the email template.
Navigation: Fred > Preview & Export > Design Mode
How can I change the format of the email so I can create a plain text version?
The plain text format is a means to send an unformatted copy of an email, without images or styles, that will be readable by everyone.
Once you've created your HTML version email, you can switch between the HTML design and plain text versions, should you need to edit any parts.
1) Click the Plain Text button to switch to the plain text version.
2) On the first time clicking the Plain Text button, Fred will automatically fetch all the data from your HTML Design version.
3) Once loaded, you will see that Fred has created rows. These rows are created from each of your content cells within your HTML Design, ready for you to check & edit.
How do I edit the text within the plain text version?
You may wish to adjust some text to make it easier to read; we do recommend this. However, please remember that both of these versions should be a 'carbon copy' as best you can. Just remember that this is plain text, so it's exactly that, meaning you do not have a text editor like on the HTML version. No images or text styling, just plain text!
1) Click anywhere within each of the text rows to edit the text; you can edit as much or as little as you like. You can even remove the row spaces using your delete button on your keyboard or hitting enter to replace them. How it looks is your choice.
How do I move, delete or merge a row within the plain text version?
When editing the plain text, you may need to move, merge, or even delete the rows, making them easier to read and understand.
1) To move a row, click & drag the up/down arrow beside the row you wish to move, then move that row to where you want it to go; you will see an empty space, then release your mouse button.
2) To delete a row, highlight all of the text within the row, then press the delete button on your keyboard. Fred will delete the text and the empty row. Once you've deleted a row, you cannot get it back without resetting it. See the next question below.
3) To merge a row, highlight all of the text within the row, then hold Ctrl + press the 'x' button on your keyboard to cut the text. The empty row will be deleted, then hold Ctrl + press the 'v' button on your keyboard to paste the text where you want it to go.
How to reset the plain text version & start again?
If you make any deletions by mistake or you simply wish to start again, this can be reset within Fred.
1) Click the Refresh button at the very top. Fred will re-fetch all the data from within your HTML version so you can start again.
Note: This will delete any changes & reset ALL the data within the plain text version.
How to exit/close the plain text design mode?
You must close the plain text design mode before being able to use any other functions.
1) Click the HTML Design button; any changes you made within the plain text design mode will be auto-saved on exit.
Note: Remember to click the template save button at the very top, throughout designing your email template.
Here you can preview the different devices and see what your HTML Design will look like. You have over 30 different sizes, including Portrait & Landscape orientations to choose from, plus you can disable your images too.
Fred's infrastructure has been designed and vigorously tested using a multitude of processes and programs. So this preview mode is to show you a Live representation of how your design will react, when being shown using different viewing portal sizes.
Note: Once you've finished previewing your design, you do not need to save the email template.
Navigation: Fred > Preview & Export > Preview Mode
How to start the preview mode & view in various device sizes?
As soon as you select a reactive viewport size Fred re-calculates the size of the email design and will display an active virtual representation of that HTML design size. The size can be changed/switched multiple times and at any time.
1) Click the mobile device viewport pulldown and select a size from the list of options. To change the size for a different viewport device, simply select another option from the pulldown list.
2) Once selected, the HTML Design will change, and you will see a virtual preview displaying the size selected.
How to change the viewport orientation?
As well as having several device sizes to choose from, you also have an option to change the orientation for each size too.
1) Click the radio button to select the landscape mode; to change back, just select the portrait mode.
2) Once selected, you will see the virtual preview change the orientation.
How to see the preview mode without images being shown?
Disabling images will show you how subscribers will see your email design before they download any imagery. This gives you an option to design your email around what they see and if you need to adjust your design or add in any missing image tags.
1) Select the Image Block Simulator tick box to disable the images; to activate them, simply un-select the tick box. 2) Once selected, you will actively see the viewport change, and all images will be disabled. The Images will be replaced with any 'Alt Tags' which you may have set.
Note: Should you wish to update any image alt tags, this is done when editing your email; go to the Content Toolbar > Images section for more details.
How to clear and close the preview mode?
You must close the preview mode before being able to use any other functions.
1) Click the HTML Design or Plain Text buttons within the Design Mode area above it; this will then cancel out of the preview mode.
Note: This will delete any changes & reset ALL fields used within the preview.
Good email subject lines can make a powerful impact on your readers. However, whilst they can make your email campaign, they can also break it too, so be sure to get it right!
The subject line in an email broadcast is the single line of text which email recipients see first when they receive your email in their inbox. This one line of text can often determine whether an email is opened or simply gets sent straight in to the bin.
Email clients on the cloud are being used more often. This means that a reinforced subject line can be added. This additional text will be displayed after the subject line in most email clients, and can be used to reinforce the subject line or show the content contained within it.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Preview & Export > Email Broadcast
How to add a subject line?
Good subject lines are more often personal or descriptive, compelling the subscriber to open and read your email content. Whatever your approach, it's important to keep your audience in mind as your email is competing with hundreds of other emails in your subscriber's inbox.
1) Click and type your subject line within the textarea, as required. Keep it short, be descriptive & limit punctuation.
Note: To avoid spam filters, minimise the use of exclamations or writing in CAPS. You can have up to 100 characters.
How to add a reinforce subject line?
The reinforce subject line works in conjunction with your main subject line, as it's the first line of text that appears after the subject line. This is especially important for mobile devices, where the reinforced subject line is normally shown. The reinforced subject line provides an additional opportunity to increase your open and click-through rates.
1) Click and type a short sentence within the textarea, to reinforce the main subject line. Keep it fresh, describe benefits & be compelling enough to motivate readers.
Note: Try to avoid spam filters & limit the use of writing in CAPS. You can have up to 100 characters.
How to clear ALL the email broadcast elements to start again?
1) Click the trash icon along the border of this section This clears any changes you made and resets everything.
Note: This will reset ALL email broadcast elements within this section.
Different email clients display HTML coding differently, so we've built Fred with that in mind, meaning we avoid unpleasant email design surprises and have adapted Fred's coding for all email design eventualities. Although Fred has been vigorously tested, we still recommend you test your design before you send any live email campaign for your own peace of mind.
How do I send myself a preview of the email design?
This is the perfect opportunity to make sure everything is as it should be & a great way to send a copy to your team members, should you need any approval.
1) Make sure that the attachment pull-down box is showing the option 'none - email only'.
2) Click the send preview button to receive your campaign email preview via email. It will take a few minutes for Fred to compile and convert the email design.
How do I download the HTML email design and images?
Once you're happy with the design & you've got approval to send an email campaign you'll need Fred's HTML code, and you also have the option to download all image assets too. Once unzipped/extracted, these can then be used to import directly into your email service provider for sending an active campaign.
1) Click the attachment pull-down box; you will see several options to choose from, namely Zip (Windows) and Tar (Mac/Linux).
2) Select one of the options to download to your desktop, as you will then use these files to upload them to your email service provider.
3) Then Click the send preview button; you will receive an email of the campaign email preview with an attachment.
Note: Depending on the option you chose, the attachment will include the fluid responsive email design's HTML code, a text version of the email, plus all images and PDF assets. For details on how to import your HTML & assets into your email service provider, please refer to their help guides.
After you've added your Design Modules and placed your text content into your cell element, the Content Toolbar is where you edit your text, including inserting images, links, buttons, and lots more... In fact, the toolbar gives you convenient access to all its features, through buttons and dropdowns that you can use to format, manage, insert, and change all aspects of your content quickly and easily.
There are eleven types of features that you can control. They are: tag styles, inline styles, links, images, buttons, quotations, special characters, data fields, select content, remove formatting, and undo/redo formatting. The Content Toolbar is intelligent, which means depending on what you have clicked (content, links, buttons, and images), it will determine what is shown, as not all of the toolbar will be required.
With Fred®, our Content Toolbar has been created similarly to that of a standard text editor (also known as a text formatting bar or ribbon), making it easier to recognise and use. The toolbar contains a set of icons that provide the most commonly used commands & controls that perform actions relevant to the current view. These controls work collectively and independently from the main panel on the left.
Tag Styles are one of the most basic and common text formats available. These are: Bold, Italics, Underline and Strikethrough, also included are Heading Tags, Bullets and Horizontal Lines.
You can set default 'fall-back' styles for the main content, each of the top 3 heading tags or your links within the Canvas Controls > CSS Shared Styles section, every time time you clear or remove any manual styling your default styles will be used. Setting your default styling is exceptionally useful, especially if an email client doesn't load in a manual font, as the default font will be shown.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Content Toolbar > Tag Styles
BOLD - Tag Style Button (Shortcut: Ctrl/Cmd + B)
Applies or unapplies the bold style tag when clicked.
How to use the bold tag style button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the bold styling.
3) Within the content toolbar across the top, select the bold tag styling icon; this will toggle the style on or off; you will see the text change immediately within your email design.
Note: You may need to click the style tag again to update all of the highlighted selection.
Italic - Tag Style Button (Shortcut: Ctrl/Cmd + I)
Applies or unapplies the italic style tag when clicked.
How to use the italic tag style button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the italic styling.
3) Within the content toolbar across the top, select the italic tag styling icon; this will toggle the style on or off; you will see the text change immediately within your email design.
Note: You may need to click the style tag again to update all of the highlighted selection.
Underline - Tag Style Button (Shortcut: Ctrl/Cmd + U)
Applies or unapplies the underline style tag when clicked.
How to use the underline tag style button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the underline styling.
3) Within the content toolbar across the top, select the underline tag styling icon; this will toggle the style on or off; you will see the text change immediately within your email design.
Note: You may need to click the style tag again to update all of the highlighted selection.
Strikethrough - Tag Style Button
Applies or unapplies the strikethrough style tag when clicked. Usually used to cross-out your text (e.g. when adding a cheaper price).
How to use the strikethrough tag style button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the strikethrough styling.
3) Within the content toolbar across the top, select the strikethrough tag styling icon; this will toggle the style on or off; you will see the text change immediately within your email design.
Note: You may need to click the style tag again to update all of the highlighted selection.
Headings - Tag Style Dropdown
Applies or unapplies the heading style tags when selected. Use the pulldown to switch between multiple heading style tags; the resulting look of your H1, H2 & H3 headings will be determined by the styles set in the Canvas Controls > CSS Shared Styles. In addition, all headings can be manually styled using the toolbar.
How to use the headings tag style dropdown?
Once you select this style, you will instantly see the changes within your email design.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the heading styling.
3) Within the content toolbar across the top, select the heading tag styling icon; a dropdown will appear.
4) Select your required heading tag style; you will see the text style change immediately. Any previous styling will be updated by your default heading tag style; you can also add manual styling to your selected heading text.
5) To remove any heading tag style, repeat steps 2 & 3, then select the triple-dash option at the top of the list. This will only remove the selected default styling, any manually selected styling will still remain.
Note: To update your default heading (1, 2 & 3) tag styling, go to the CSS Shared Styles tab within the canvas controls section.
Lists - Tag Style Dropdown
Applies or unapplies a Bulleted or Numbered list style tags when selected. Use the pulldown to switch between multiple list style tags. Bulleted is used for any unordered lists, and Numbered is used for any ordered lists.
How to use the lists tag style dropdown?
Once you select this style you will instantly see the changes within your email design.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add (or remove) the lists styling.
3) Within the content toolbar across the top select the lists tag styling icon, a dropdown will appear.
4) Select your required lists tag style, you will see the text style change immediately.
5) To remove the lists styling, repeat steps 2 & 3, then select the triple-dash option at the top of the list.
Note: If the lists tag styling icon is 'greyed-out', this means that you have a text alignment active. You will need to remove the alignment of the text for the icon to become visible, then you can re-align the text.
Horizontal Line - Tag Style Button
Applies the horizontal line style tag when clicked. Usually added to break up content on a page (e.g., when changing a topic).
How to use the horizontal line tag style button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, place your flashing cursor where you would like to add the horizontal line styling.
3) Within the content toolbar across the top, select the horizontal line tag styling icon; you will see the horizontal line style immediately.
4) To remove the horizontal line styling, place your cursor underneath (or above) the horizontal line. Then press your backspace (or delete) button on your keyboard.
Inline Styles are some of the most common and recognised formatting available. These are: Font Family, Font Size, Line Height, Font Colour and Text Alignment.
You can set default 'fall-back' styles for the main content, each of the top 3 heading tags or your links within the Canvas Controls > CSS Shared Styles section, every time time you clear or remove any manual styling your default styles will be used. Setting your default styling is exceptionally useful, especially if an email client doesn't load in a manual font, as the default font will be shown.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Content Toolbar > Inline Styles
FONT FAMILY - Inline Style Dropdown
Dropdown list of font family styles to apply to text when selected. Use the pulldown to switch between multiple font family styles. The first 14 styles are default fonts and the other 10 are Google standard fonts.
How to use the font family inline style dropdown?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add (or remove) the font family style.
3) Within the content toolbar across the top select the font family styling icon, a dropdown will appear.
4) From the list, select your required font family style, you will see the text style change immediately. This will update any default font family you have set.
5) To remove the font family style, repeat steps 2 & 3, then select the triple-dash option at the top of the list. This will remove the manual font family and replace it with your default styling.
Note: To update your default font family styles go to the CSS Shared Styles tab within the canvas controls section.
FONT SIZE - Inline Style Dropdown
Dropdown list to increase or decrease the font size of the text when selected. Use the pulldown to switch between multiple font sizes.
How to use the font size inline style dropdown?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add (or remove) the font size style.
3) Within the content toolbar across the top select the font size styling icon, a dropdown will appear.
4) From the list, select your required font size style, you will see the text style change immediately. This will update any default font size you have set.
5) To remove the font size style, repeat steps 2 & 3, then select the triple-dash option at the top of the list. This will remove the manual font size and replace it with your default styling.
Note: To update your default font size styles go to the CSS Shared Styles tab within the canvas controls section.
LINE HEIGHT - Inline Style Dropdown
Dropdown list to increase or decrease the line height of the text when selected. Use the pulldown to switch between multiple line heights.
How to use the line height inline style dropdown?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add (or remove) the line height style.
3) Within the content toolbar across the top select the line height styling icon, a dropdown will appear.
4) From the list, select your required line height style, you will see the text style change immediately. This will update any default line height you have set.
5) To remove the line height style, repeat steps 2 & 3, then select the triple-dash option at the top of the list. This will remove the manual line height and replace it with your default styling.
Note: To update your default line height styles go to the CSS Shared Styles tab within the canvas controls section.
CONTENT COLOUR - Inline Style Button
Applies or unapplies the text colour and text background colour styles when selected. Use the colour palette selection box to choose between your text & backgound text colours.
How to add a text colour & text background colour inline styles?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to add (or remove) the font colour styling.
3) Within the content toolbar across the top select the font colour styling icon, this will open the colour styling box,
First Option - Changing the Text Colour.
4) Make sure the text colour styling icon is selected.
5) Use the colour palette selection box to pick your text colour or a HEX / RGB value can be entered directly in to the input field.
6) Click the update button to apply the colour. You will see the text change immediately within your email design.
Second Option - Adding a Text Background Colour.
7) Repeat steps 1-3, if you have manually set a font colour, you will notice that the font colour styling icon will now show the colour of your chosen text.
8) Click the text background colour styling icon to switch the colour pallette selection box. Then repeat from step 5.
9) To remove the text colour or the text background colour styling, repeat steps 2 & 3, then select the required colour styling icon for either the text or background colour. Click the trash icon; this will remove the manual colour styling and replace it with your default style colours.
Note: To update your default content colour styles, go to the CSS Shared Styles tab within the canvas controls section.
ALIGN TEXT - Inline Style Dropdown
Dropdown list of align text styles to apply to text when selected. Use the pulldown to switch between multiple text alignments.
How to use the align text inline style dropdown?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add (or remove) the text align style.
3) Within the content toolbar across the top select the align text styling icon, a dropdown will appear.
4) From the list, select your required align text style, you will see the text style change immediately. This will update any default text alignment you have set.
5) To remove the align text style, repeat steps 2 & 3, then select the triple-dash option at the top of the list. This will remove the manual text alignment and replace it with your default styling.
Note: To update your default align text styles go to the CSS Shared Styles tab within the canvas controls section.
The link feature lets you insert hyperlinks into your content and provides a toolbox to edit them. Thanks to Fred®, any typed or pasted URLs and email addresses automatically turn into working links. Once a link is created, clicking that link opens the link toolbox which lets you, style the whole link, open the link, edit the existing link or unlink (remove) them with a quick click!
You can set default 'fall-back' styles for the main content, each of the top 3 heading tags or your links within the Canvas Controls > CSS Shared Styles section. Every time time you clear or remove any manual styling, your default styles will be used. Setting your default styling is exceptionally useful, especially if an email client doesn't load in a manual font, as the default font will be shown.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Content Toolbar > Links
INSERT LINK - Tag Button (Shortcut: Ctrl/Cmd + K)
Applies a link when clicked. Used to link text to a web page, email address, PDF document, or other file types.
How to use the insert link tag button?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, highlight the text where you would like to insert a link.
3) Within the content toolbar across the top, select the insert link tag icon. This will automatically create an empty link, and the edit link toolbox will open. You will see the text change, using your default link styling.
4) Within the link toolbox, type your required link into the URL field, making sure you replace the hash symbol (#) & include the entire URL (for example, https://fred.london/help-guides).
5) You can also edit the text of the link by typing into the Text field; this now has your original highlighted text displayed.
6) Once you're done, click the update button and click away from the link. You will see any text edits change in your design.
Note: To update your default link tag styling, go to the CSS Shared Styles tab within the canvas controls section.
How to use the text link underline?
Using the link toolbox will style the whole link collectively. If you only want a part of the link to be styled, then you need to use the content toolbar at the top (see how below).
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click anywhere within the text link; this will instantly open the link toolbox.
3) Click the style icon button; a dropdown will appear.
4) From the list, select your required underline text style: No underline, Underline, Use Defaults. The whole text link style will change immediately; just click away from the link, and you're done.
Note: Using the link toolbox or the content toolbar will override any default text link styles you have set. To update your default link tag styling, go to the CSS Shared Styles tab within the canvas controls section.
How to check my link is working within the text link?
This is a great little feature, as you can check to see if the URL or email address you've made actually works before you export your design.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click anywhere within the text link; this will instantly open the link toolbox.
3) Click the open link icon button; a new browser tab will open. If your link is working, your URL will show; if it doesn't work, then you'll see an error.
4) Once checked, you'll need to go back to your design. If the link is working, just click away from the link. If it's not working, then you can click the edit link icon button (see next question below).
Note: A new browsing tab will open, whilst keeping Fred open in the background. So you will need to switch back to your original browsing tab.
How to edit the text or link within a text link?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click anywhere within the text link; this will instantly open the link toolbox, and your link will be highlighted within your design.
3) Click the edit icon button; the edit link toolbox will appear.
4) Within the link toolbox, edit your link by typing into the URL field, making sure you include the entire URL (for example, https://fred.london/help-guides).
5) If you've created a default link, use the search icon dropdown and select your link from the list.
6) To edit the link text, simply type into the Text field; you can have from one word to a whole sentence.
7) Once you're done, click the update button and click away from the link. You will see any text edits change in your design.
Note: This will over-ride any default text link styles you have set. To update your default link tag styling, go to the CSS Shared Styles tab within the canvas controls section. To add a default link, go to the Links tab within the my shared data section.
How to style part of the text link?
To give you greater flexibility when styling your text link, using the content toolbar instead of the link toolbox, you can specifically style different parts of the same link.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click and highlight part of the text within the link (this will instantly open the link toolbox, just ignore it for now).
3) Within the content toolbar across the top, select your required styling icon button, for instance, the underline button; you will see the link change immediately, and only your highlighted selection will have changed.
4) Now within the link toolbox, click the edit link icon button; this will open the edit link toolbox.
5) You will now see that the link text has been split. This is so you can edit each of the styled text parts separately.
6) If you've edited anything within the toolbox, click the update button; otherwise, just click away from the link, and you're done.
Note: Using the link toolbox or the content toolbar will over-ride any default text link styles you have set. To update your default link tag styling, go to the CSS Shared Styles tab within the canvas controls section.
How to remove a text link?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click anywhere within the text link; this will instantly open the link toolbox.
3) Click the unlink icon button; this will remove the link and any default link styling. Your text for the link will remain, and any manual styling you may have added will also remain.
This image feature lets you insert images anywhere within your email design. Using the insert image option will automatically open the image manager, allowing you to select and insert, upload, manage, or edit your images when needed. Thanks to Fred®, once you've inserted your image, you will have an image toolbox appear which lets you replace your image, edit the image, set an alignment, add a link, add Alt text, resize the image, add an image padding, view your image information, or delete the image altogether!
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Content Toolbar > Images
INSERT IMAGE - Tag Button (Shortcut: Ctrl/Cmd + K)
Places an image file when clicked. Allows you to select and place an image file anywhere within your email design.
How to use the insert image tag button?
There are two options, depending on if you're uploading a new image or using one already in the image manager.
1) Click within your design and ensure the cell mode is selected in the element bar. Position your cursor where the image should be placed.
2) In the content toolbar at the top, click the insert image tag icon to open the image manager.
First Option - Using a New Image:
3) Click the Upload Images icon at the bottom of the assets area. Drag & drop images or browse your device to select them.
4) Click the image upload close icon once finished, and your images will be available.
5) Hover over the desired image and click the 'Plus' icon to insert the image into your email design.
Second Option - Using an Uploaded Image:
6) After step 2, find your image in the image manager. Then repeat step 5.
Note: Remember to click the Save Template icon at the top of the left panel so you don't lose your work.
How to replace an existing image?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you wish to edit. This will instantly open the image toolbox.
3) Click the two-way arrow icon in the toolbox to open the Image Manager.
4) Find your chosen image, hover over it, and click the 'Plus' icon to replace the old image in your email design.
5) Your image has now been replaced, just click away from the image and you're done.
Note: If you want to replace your image with a new image, just follow the same steps as inserting a new image (see previous question above).
How to edit an image?
Using this feature will open the image editor screen.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you wish to edit. This will instantly open the image toolbox.
3) Click the image edit icon button, the image editor screen will appear.
4) From here you can make lots of changes to your image, like: Annotate, Crop, Finetune, Decorate, Filter, Resize and Sticker. Once done, just exit the image manager, click away from the image and you're done.
Note: To find out more about editing images within the image editor, please go to the Image Editor section.
How to change the alignment of an image?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click on the image you wish to change the alignment. This will instantly open the image toolbox.
3) Click the align icon button; a dropdown will appear.
4) From the list, select your required image alignment style: Block Left, Block Center, Inline, Inline Left, Inline Right, Inline All Top, Inline All Middle, Inline All Bottom. The whole image will change immediately, just click away from the image and you're done.
How to add a link to an image?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you wish to add a link to. This will instantly open the image toolbox.
3) Click the link icon button; the link editor will appear.
4) Within the link toolbox, simply type in your link address into the URL field, making sure you include the entire URL (for example, https://www.fred.london/help-guides).
5) If you've created a default link, use the search icon dropdown and select your link from the list.
6) Once you're done, simply click the insert button and click away from the image. Once you add a link to an image the add link icon within the image toolbox will be replaced with three new icons. Please see the following questions to find out more.
Note: To find out how to pre-save your URL's, simply go to the Links tab within the My Shared Data section.
How to check my link is working within the image link?
This is a great little feature, as you can check to see if the URL or email address you've added actually works before you export your design.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click the image with the link you want to check; this will instantly open the image toolbox.
3) Click the open link icon button, a new browser tab will open. If your link is working your URL will show, if it doesn't work then you'll see an error.
4) Once checked, just close the new browser tab. If the link is working just click away from the image and you're done. If it's not working then you can click the edit link icon button (see next question below).
Note: A new browsing tab will open, whilst keeping Fred open in the background. So you will need to switch back to your original browsing tab.
How to edit the link within an image?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content, click the image with the link you want to edit; this will instantly open the image toolbox.
3) Click the edit icon button; the edit link toolbox will now appear.
4) Within the link toolbox, edit your link by typing into the URL field, making sure you include the entire URL (for example, https://www.fred.london/help-guides).
5) If you've created a default link, use the search icon dropdown and select your link from the list.
6) Once you're done, simply click the update button and click away from the image.
Note: To add or update a default link, go to the Links tab within the My Shared Data section.
How to remove a link from an image?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image with the link you want to edit; this will instantly open the image toolbox.
3) Click the unlink icon button; this will completely remove the link instantly.
Note: Once you remove an image link, you will notice that the open link icon and edit link icon has disappeared from the image toolbox, this is because they are no longer needed. They will reappear once you add an image link again.
How to add and edit the alt tag of an image?
1) After clicking into your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you want to edit; this will instantly open the image toolbox.
3) Click the alt text icon button; the alt text toolbox will now appear.
4) You can now type your required image description, within the text area provided. Remember this must be relative to the image being displayed.
5) Then simply click the insert button to close the alt tag toolbox or click the update button if you've edited an existing alt tag.
6) To edit the styling of an alt tag, simply use the options within the content toolbar across the top of the editor. You can change the following alt tag styling; Font Family, Font Size, Font Colour & Font Background Colour. Once done simply click away from the image.
How to resize an inserted image?
1) After clicking into your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you want to edit; this will instantly open the image toolbox.
3) Click the resize icon button; the resize toolbox will now appear.
4) You can now type your required width or height dimensions within the text area provided. Remember these figures are constraint, so you only need to change one and the other figure with change accordingly.
5) Once you're done, simply click the update button and click away from the image.
How edit the padding of an image?
1) After clicking into your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you want to edit; this will instantly open the image toolbox.
3) Click the padding icon button; the padding toolbox will now appear.
4) You can now type your required padding depth within the four options available; Left Padding, Right Padding, Top Padding & Bottom Padding.
5) Once you're done, simply click the update button and click away from the image.
How to view the details of an image?
1) After clicking into your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you want to edit; this will instantly open the image toolbox.
3) Click the image info icon button; the information toolbox will now appear.
4) You will now be able to view all the details for the image such as: File Name - This is the name of the file within Fred. Rendered Width & Height - This is the size of the image currently being used. Natural Width & Height - This is the original size of the image before being used. Constraint Ratio - This value is the total dimensional percentage being used. Reference - This is the original file name that was uploaded in to the file manager.
5) Once you're done, simply click the back button and click away from the image.
How to remove an image?
1) After clicking into your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content click the image you want to remove; this will instantly open the image toolbox.
3) Click on the bin icon button, this will remove the image and all its' properties from your email design instantly.
This quotation feature lets you insert punctuation marks (also called apostrophes or inverted commas), anywhere within the content of your email design. It is commonly used to identify words, direct speech and passages apart from the rest of the text. This feature automatically creates a pair of double quotations, an opening and a closing pair, so you can style the punctuation separately within the inline style making it stand out. You can also use it in conjunction with the single and double quotation marks on your keyboard, which is used should you need to quote a passage written by someone, for instance.
Note: Once you've finished changing this section, always remember to click the template save button at the very top before exiting from the email template.
Navigation: Fred > Content Toolbar > Quotations
INSERT QUOTATION MARKS - Inline Style Dropdown
Places quotes when selected. Allows you to place and select different style punctuation marks anywhere within your email design.
How to use the insert quotation inline style dropdown?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to add the quotation mark styling.
3) Within the content toolbar across the top select the quotation inline styling icon, a dropdown will appear.
4) From the list, select your required quotation inline styling, you will see the text style change immediately. This will update any default text you may have set.
How to style the quotation marks or quotation text?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your quotation mark text highlight where you would like to change the quotation mark or text styling.
3) Within the content toolbar across the top select the desired styling icon you would like to use, for example bold, you will see the text style change immediately. Once done, just simply click away from your quotation.
Note: You can use any text styling from the content toolbar to use within your quotation mark inline styling. Once selected, you will see the text style change immediately.
How to add a single punctuation within your double quotation text?
It is best to add this after you have inserted the quotation inline style, as above.
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your quotation text click and place your flashing cursor where you'd like to add a single set of quotations.
3) On your keyboard manually place a single quotation mark using shift & the number two numbered key. Then add another one at the end of you desired text, so you should have one at the start and one at the end of your single punctuation text.
4) Within the content toolbar across the top select the desired styling icon you would like to use for this second set of punctuations, for example italics, you will see the text style change immediately. Once done, just simply click away from your quotation.
Note: You can use different text styling to distinguish from the two different punctuations and the text, if you like. Whatever you choose, you will see the text style change immediately.
How to change the quotation placement?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to change the quotation mark styling.
3) Within the content toolbar across the top select the quotation inline styling icon, a dropdown will appear.
4) From the list, select a different quotation style, you will see the text style change immediately. This will update any default text you may have set.
How to remove the quotation mark inline style?
1) After clicking in your design, ensure the cell mode is selected within the element bar of the styling controls.
2) Within your content highlight the text where you would like to remove the quotation mark styling.
3) Within the content toolbar across the top select the quotation inline styling icon, a dropdown will appear.
4) Select the triple-dash option at the top of the list. This will remove the quotation mark styling and any text styling you've set and replace it with your default styling.
When designing your emails, you need quick, easy access to your images, as and when needed. With our built-in Image Manager, we've simplified asset management to speed up finding a specific image through collections and tag optimisation. This makes Image Manager fully searchable by any criteria you set. No more searching through folders for your images, just find the ones you want!
With Fred, our Image Manager makes it easy to store, organise, find and use your digital content. Simply add essential metadata to your images and transform them into meaningful digital assets - You'll be lost without it!
Creating collections is beneficial, especially when you have many images, and you need to find a specific image within your ever-growing library. Using image collections is the process of grouping and labelling multiple images of similar content, rather like a photo album where you would group a specific holiday, special event, or images of a similar nature, month, or year together. You can use as many collections as you want that best fit your requirements, and you can associate one image with multiple collections.
Note: Once you've finished managing your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Manager > Collections
Details coming soon.
Tags
Creating tags is beneficial when you discover how much easier it is to find favourite or relative images within your ever-growing library. Image tagging is the process of identifying and labelling the contents of an image, rather like those handwritten notes on the backs of photographs, this also allows the image contents to be associated with other relative matches. You can use as many tags as you want that best fit your requirements, and you can associate one image with multiple tags and collections.
Note: Once you've finished managing your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Manager > Tags
Details coming soon.
Assets
Assets are digital files managed through the Image Manager, which displays a library of all your images for storing, organising, and retrieving image files for you to use within any of your email designs. You can upload JPEG, PNG and GIF file formats. It's from here that you can access our advanced Image Editor, for making various image changes.
Note: Once you've finished managing your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Manager > Assets
When designing your email templates, you may not have the facility to edit your image. This is where our built-in Image Editor comes in useful. From cropping to adding an effect, our all-inclusive Image Manager editing tools can be used to level up any photo quickly and easily!
With Fred®, our Image Editor has everything you need to edit an image, with features like crop, resize, rotate, straighten, add text or annotations, and filter effects are all included as basic features, plus many more options for more-than-versatile editing.
Use the Annotate feature to draw and add shapes within your image context. This means that if the image is flipped or rotated, the annotations are flipped and rotated along with the image. Annotations cannot be drawn outside of the image bounds.
When annotations are used, they will always render underneath any decorations, meaning when both features are used at the same time, annotations are drawn first, and decorations are layered on top.
Note: Once you've finished editing, saved your image, and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Annotate
Details coming soon.
Crop
Use the Crop feature to manipulate the crop selection and image orientation. The crop feature handles the following functionality: Manipulating the crop selection, Free rotating the image, Exposing crop selection presets, Zooming the image, Turning the image left and right, Flipping the image up and down and Showing current crop size.
Note: Once you've finished editing, saved your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Crop
Details coming soon.
Decorate
Use the Decorate feature to draw and add shapes to the crop context. These shapes aren't bound to the image, so they can be drawn outside of the image bounds. This also means that if the image is flipped or rotated, the decorations will stay in place as they are positioned relative to the crop. If the crop rectangle is adjusted, the decorations will be moved along with it.
When decorations are used, they will always render on top of annotations. When both features are used at the same time, annotations are drawn first, and decorations are layered on top.
Note: Once you've finished editing, saved your image, and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Decorate
Details coming soon.
Filter
The Filter feature enables you to apply a colour matrix filter to the preview image. There are 3 pre-sets to choose from: Classic, Monochrome, and Sepia, giving you a total selection of 13 different pre-determined filters to choose from.
Note: Once you've finished editing, saved your image, and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Filters
Details coming soon.
Finetune
The Finetune feature enables you to control the colour effect values. There are 8 different types of settings to choose from, and each has its own sliding scale adjustment controls.
Note: Once you've finished editing, saved your image, and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Finetune
Details coming soon.
Frame
The Frame feature enables you to add specific frame shapes on top of your image. There are 9 pre-defined styles to choose from, each with different styling controls.
Note: Once you've finished editing, saved your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Frame
Details coming soon.
Redact
Use the Redact feature to enable easy and secure censoring of information within your images. The redact feature allows you to select an area within your image, to apply a secure blurring image to ensure data is sufficiently scrambled and cannot be recovered.
Note: Once you've finished editing, saved your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Redact
Details coming soon.
Resize
Use the Resize feature to enable the width and height input controls to determine an image output size. You have the option to maintain the aspect ratio of an image by using the lock control. The image editor will automatically scale images to fit the target size you choose.
Note: Once you've finished editing, saved your image and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Resize
Details coming soon.
Sticker
Use the Sticker feature to drag and drop emoji's, markers, or stickers onto your image. You can either use the pre-defined objects from one of the two tab groups, or you can upload your own sticker. When creating your own sticker, using a transparent .PNG file works best when uploading your own.
Note: Once you've finished editing, saved your image, and inserted it into your email design, remember to save your template.
Navigation: Fred > Content Toolbar > Image Editor > Stickers
Keyboard shortcuts are your productivity boosters; combinations of keys that let you quickly perform tasks within Fred, saving you valuable time and streamlining your workflow. They can be used in both the Content Toolbar whilst editing and the overall Fred application.
Toggles design guide lines on and off when clicked.
Click on the empty space in the left column below the inactive logout timer.
The email design's container rows, content blocks and cells design guide lines are toggled on and off with each click. Design guide lines are a visual aid for designing and editing only, they are not part of the email's design.
Toggles accessibility WCAG on and off when key pressed with click.
Press and hold down the CTRL or CMD key and Click on the empty space in the left column below the inactive logout timer.
The email design's cell content is assessed for accessibility when active. A coloured border highlights all WCAG issues within your email design. You can then hover over each cell to display the quick view WCAG box explaining the issue(s) raised.
By incorporating these content toolbar shortcuts into your workflow, you can significantly enhance your efficiency and productivity when working with Fred.
Please note:
Ctrl refers to the Control key on Windows
Shift refers to the Shift key on Windows and macOS
Cmd (or ⌘) refers to the Command key on macOS
Opt is another term for the Option key on macOS
Navigation: Fred > Content Toolbar
SELECT ALL - (Shortcut: Ctrl/Cmd + A)
Selects everything in the cell when key combo is pressed.
Click into the cell ensuring cell mode is active. Press and hold down the CTRL or CMD key and press the letter A key.
All of the cell's content is now selected and highlighted.
Applies or unapplies the bold style tag when key combo is pressed.
Within your content, highlight the text where you would like to add (or remove) the bold styling. Press and hold down the CTRL or CMD key and press the letter B key.
Repeat the keypress to toggle the bold styling on and off; you will see the text change immediately within your email design.
Copies the selected text to the clipboard when key combo is pressed.
Within your content, highlight the text you want to copy. Press and hold down the CTRL or CMD key and press the letter C key.
This has copied the selected text to the clipboard.
Italic - (Shortcut: Ctrl/Cmd + I)
Applies or unapplies the italic style tag when key combo is pressed.
Within your content, highlight the text where you would like to add (or remove) the italic styling. Press and hold down the CTRL or CMD key and press the letter i key.
Repeat the keypress to toggle the italic styling on and off; you will see the text change immediately within your email design.
Within your content, highlight the text or position the cursor where you would like to insert the link. Press and hold down the CTRL or CMD key and press the letter K key.
Enter the full url starting with https:// and add or modify the text as required.
Applies or unapplies the strikethrough style tag when key combo is pressed.
Within your content, highlight the text where you would like to add (or remove) the strikethrough styling. Press and hold down the ALT or OPT key and press the letter S key.
Repeat the keypress to toggle the strikethrough styling on and off; you will see the text change immediately within your email design.
Applies or unapplies the underline style tag when key combo is pressed.
Within your content, highlight the text where you would like to add (or remove) the underline styling. Press and hold down the CTRL or CMD key and press the letter U key.
Repeat the keypress to toggle the underline styling on and off; you will see the text change immediately within your email design.
Paste the formatted text from the clipboard when key combo is pressed.
Within your content, either select and highlight the text you want to replace or position the cursor where you want to insert the text. Press and hold down the CTRL or CMD key and press the letter V key.
This pastes the formatted content from the clipboard into the cell, replacing any selected text or inserting at the cursor position.
Note: If the formatted text cannot be inserted, then plain text will be inserted instead.
PASTE PLAIN TEXT - (Shortcut: Ctrl/Cmd + Shift + V)
Paste the plain text from the clipboard when key combo is pressed.
Within your content, either select and highlight the text you want to replace or position the cursor where you want to insert the text. Press and hold down the CTRL or CMD key and the SHIFT key and press the letter V key.
This pastes the plain text from the clipboard into the cell, replacing any selected text or inserting at the cursor position.
CUT FORMATTED TEXT - (Shortcut: Ctrl/Cmd + X)
Moves the selected text to the clipboard when key combo is pressed.
Within your content, highlight the text you want to cut/move. Press and hold down the CTRL or CMD key and press the letter X key.
The selected text is removed and placed in the clipboard.
NEW LINE STYLING - (Shortcut: Ctrl/Cmd + Enter/Return)
Maintain current styling on new line when key combo is pressed.
Within your content, position the cursor where you want to insert a line break. Press and hold down the CTRL or CMD key and press the Enter or Return key.
This creates a new line and carries over the current text styling.
JUMP TO START OF LINE - (Shortcut: Home or Cmd + Left Arrow)
Move cursor to the beginning of the current line when key combo is pressed.
Within your content, position the cursor on the line of text. Now either press the HOME key (windows) or hold down the CMD key and press the LEFT ARROW (macOS).
This instantly moves the cursor to the beginning of the current line.
JUMP TO END OF LINE - (Shortcut: End or Cmd + Right Arrow)
Move cursor to the end of the current line when key combo is pressed.
Within your content, position the cursor on the line of text. Now either press the END key (windows) or hold down the CMD key and press the RIGHT ARROW (macOS).
This instantly moves the cursor to the end of the current line.
JUMP TO PREVIOUS WORD - (Shortcut: Ctrl/Opt + Left Arrow)
Move cursor to the start of the previous word when key combo is pressed.
Within your content, position the cursor anywhere within a word. Press and hold down the CTRL or OPT key and press the LEFT ARROW key.
The cursor will jump to the beginning of the current or previous word.
JUMP TO NEXT WORD - (Shortcut: Ctrl/Opt + Right Arrow)
Move cursor to the start of the next word when key combo is pressed.
Within your content, position the cursor anywhere within a word. Press and hold down the CTRL or OPT key and press the RIGHT ARROW key.
The cursor will jump to the beginning of the next word.
JUMP TO LEFT OF ELEMENT - (Shortcut: Ctrl/Cmd + Alt/Opt + Left Arrow)
Move cursor just before the active element when key combo is pressed.
Within your content, position the cursor anywhere within formatted text, or click on a button, image, or tag. Press and hold down the CTRL or CMD key and the ALT or OPT key and press the LEFT ARROW key.
The cursor will move to the immediate left of the active element (style, button, image, or tag).
JUMP TO RIGHT OF ELEMENT - (Shortcut: Ctrl/Cmd + Alt/Opt + Right Arrow)
Move cursor just after the active element when key combo is pressed.
Within your content, position the cursor anywhere within formatted text, or click on a button, image, or tag. Press and hold down the CTRL or CMD key and the ALT or OPT key and press the RIGHT ARROW key.
The cursor will move to the immediate right of the active element (style, button, image, or tag).
INCLUDE HEADING TAGS & LINKS - (Shortcut: Ctrl/Cmd + Tag/Style)
Applies the style tag / font style change to the selected text including any selected heading tags and links when key is pressed.
Within your content, highlight the text where you would like to add (or remove) the styling. Press and hold down the CTRL or CMD key and click either the bold, italic, strikethrough or underline button, or select a font family or size from the dropdown in the content toolbar. Headings and links within the highlighted text will be updated.
For further assistance, please download our comprehensive Help Guide in PDF format. It contains all of the above detailed instructions and tutorials to help you make the most of Fred®. fred-help-and-support.pdf
Managing your images when creating multiple email campaign designs can be frustrating as it can mean you trawling through hundreds of images just to find the ones you want, and in some cases you may have multiple copies of the same images.
BOLD - Tag Style Button (Shortcut: Ctrl/Cmd + B)
Italic - Tag Style Button (Shortcut: Ctrl/Cmd + I)
Underline - Tag Style Button (Shortcut: Ctrl/Cmd + U)
Strikethrough - Tag Style Button
Headings - Tag Style Dropdown
Lists - Tag Style Dropdown
Horizontal Line - Tag Style Button
FONT FAMILY - Inline Style Dropdown 
FONT SIZE - Inline Style Dropdown 
LINE HEIGHT - Inline Style Dropdown 
CONTENT COLOUR - Inline Style Button 
ALIGN TEXT - Inline Style Dropdown 
INSERT LINK - Tag Button (Shortcut: Ctrl/Cmd + K)
INSERT IMAGE - Tag Button (Shortcut: Ctrl/Cmd + K)
By incorporating these canvas shortcuts into your workflow, you can significantly enhance your efficiency and productivity when working with Fred.
