Email Designer: Difference between revisions

From Activepedia
Jump to navigation Jump to search
(SEO-optimized content from ActiveCampaign documentation)
(SEO-optimized content from ActiveCampaign documentation)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
```mediawiki
```mediawiki
'''Navigation:''' [[Main_Page]] > [[Campaigns]] > [[Email Designer]] > Email Designer: How to use Sections
'''Navigation:''' [[Main_Page]] > [[Campaigns]] > Email Designer


== Email Designer: How to use Sections ==
== Email Designer: Text or Link Color is Different in the Inbox ==


ActiveCampaign’s new and improved '''Email Designer''' (launched in 2022) makes it easier than ever to create branded, high-performing emails within the platform. With an emphasis on reliability and an easy-to-navigate UI, this email designer will give you the best possible experience to create optimal campaigns and engage your customers.
The '''Email Designer''' is a powerful feature that allows users to create visually appealing email campaigns in ActiveCampaign. However, one common issue that may arise is when the text or link color appears differently once the email is received in the inbox. This can lead to a mismatch between the designed email and what recipients actually see. Understanding how to address this issue is important to ensure brand consistency and foster effective communication with your audience.


In the new ActiveCampaign Email Designer, there is a hierarchy of elements that work together to build high-quality email campaigns. This article will review the top of that hierarchy – '''Sections'''.
This guide will help you troubleshoot discrepancies in text or link color by utilizing the built-in code editor within ActiveCampaign's Email Designer.  


=== What are Sections in the Email Designer? ===
== How to Access This Feature ==
To access the Email Designer and begin adjusting your campaign's text or link colors, follow these steps:
# Click on '''Campaigns''' on the left-hand navigation menu.
# Open the campaign you wish to edit.
# On the '''Campaign Summary''' page, hover over the design on the right and click '''Edit design''' to open the campaign designer.


'''Sections''' are the scaffolding that holds a campaign together. The '''Section''' builds the basic frame of a campaign. Within that frame, you can add '''Structures''' to your campaign, which hold '''Containers'''. '''Containers''' are what you use to add multiple campaign functions to one content block, like images and text boxes.
== Step-by-Step Instructions ==
Once you are in the Campaign Designer, follow these detailed instructions to troubleshoot and fix the color discrepancies:


For more information about '''Structures''', '''Containers''', and different content blocks, please visit the [https://help.activecampaign.com/hc/en-us/articles/4404950771612-Email-Designer-Overview Email Designer overview] and [https://help.activecampaign.com/hc/en-us/articles/4404950913308-Email-Designer-Blocks-Explained Email Designer Blocks Explained].
# In the Campaign Designer tab, click on the text box that displays the color issue.
# Locate the code editor icon on the top right and click on it.
# Within the code, find the text or link that is displaying the incorrect color.
# Check if the text is wrapped within a paragraph <p> tag. If it is, you will need to change the <p> tag into a <span> tag.
  # For example:
  # <p style="color: #ffffff">Foobar</p>
  # Change it to:
  # <span style="color: #ffffff">Foobar</span>
# After making the necessary adjustments, test your email to confirm the fix.


=== How to Access this Feature ===
This issue generally arises because certain email clients, such as Gmail and Outlook, may strip style attributes applied in paragraph (<p>) tags when rendering emails in the inbox. Note that this behavior can vary based on the email client used, making the adjustment of the tag crucial for consistent appearance across platforms.


To access the Email Designer and its features, navigate to the campaign you are working on within ActiveCampaign. The Email Designer will be part of the campaign creation process, where you can visually design your emails using various elements, including '''Sections'''.
== Configuration Options and Settings ==
In the Email Designer, there are specific settings that can influence how emails are displayed:
* '''Text Box''' - The area where your content is displayed, which can sometimes lead to color issues if not correctly configured.
* '''Code Editor''' - A tool accessible within the campaign designer that allows for advanced users to edit the HTML directly for a more customized approach.


=== Step-by-Step Instructions ===
== Best Practices and Tips ==
When working with the Email Designer and addressing color discrepancies, consider the following best practices:
* Always preview your emails before sending them out. This helps identify any mismatches.
* Test your emails in multiple clients to ensure the desired appearance is achieved across different platforms.
* Use '''span''' tags for applying styles to text that require specificity, as opposed to the broader '''paragraph''' tags.
* Be cautious while editing HTML code, as improper changes can lead to other formatting issues.


Here’s a step-by-step guide on how to add '''Sections''' to a campaign:
== Common Use Cases with Examples ==
- A company sends out a promotional email with links highlighted in blue but finds that recipients see them as gray. By following the steps outlined, the company correcting the issue allows their call-to-action (CTA) links to stand out.
- A designer creates an email featuring white text on a colored background. However, when the email is opened in certain clients, the color appears different. By adjusting the styling using the code editor, the text appears as intended.


# Start by navigating to your campaign in the ActiveCampaign platform.
== Troubleshooting ==
# Hover your mouse over an existing section within your campaign. You will notice a green '''Plus (+) sign''' appear.
If you continue to experience issues after following the above steps, consider the following troubleshooting tips:
# Click on the green '''Plus (+) sign''' to add a new '''Section'''.
* Ensure that you have saved any changes made in the code editor before testing the email.
# After adding the '''Section''', configure it by selecting various settings to match your desired design.
* Check for any conflicting styles in other parts of the email that may override the color settings.
* Review your template for any inherited styles that may be affecting the text color.


Once you have added '''Sections''' to your campaign, you can configure them with your personal settings, such as '''background color''', '''font''', '''header size''', and more.
== Related Features ==
For more information on related functions and features, consider reviewing the following:
* [[Campaigns]]
* [[Automation]]
* [[Contact Management]]


=== Configuration Options and Settings ===
== FAQ ==
=== 1. Why does the color of my text change in certain email clients? ===
Many email clients have their own rendering engines that may ignore styles, especially those applied with paragraph tags.


Sections settings are available in two tabs:
=== 2. What should I do if I’m not comfortable editing HTML? ===
* '''Global Settings'''
It is recommended that only advanced users utilize the code editor. If you are not familiar with HTML, consider consulting with someone who is.
* '''Content'''


While configuring the settings, you can designate certain '''Sections''' into different categories such as headers, footers, content, and info areas based on how you wish to style your campaign.  
=== 3. Can I revert my changes if something goes wrong? ===
Yes, you can always revert to a previous version of your campaign by accessing your campaign history within ActiveCampaign.


To change what functions each of your '''Sections''' represent in your campaign, click on the dropdown menu next to '''Message Area''' under the '''Content''' tab and within '''Structures'''. You will see this dropdown when you click to grab a specific '''Section''' in your campaign.
=== 4. Do all email clients behave the same way? ===
No, different email clients handle styles differently, which can lead to inconsistencies in how emails are displayed.


=== Best Practices and Tips ===
=== 5. What are the risks of using the code editor? ===
Improper edits can lead to broken layouts or functionality in your emails, so it is essential to proceed with caution.


* When designing your email, ensure that your '''Sections''' maintain a cohesive style throughout the campaign. This will help with branding and the overall look of your emails.
=== 6. How can I ensure my emails are tested effectively? ===
* Categorize your '''Sections''' effectively. Use headers for introductory content, footers for closing content, and content areas for the body of the email.
Utilizing email testing tools and sending test emails to various accounts can help verify appearance across platforms.
* Regularly preview your email campaign to see how the '''Sections''' work together and to ensure everything appears as intended.


=== Common Use Cases with Examples ===
=== 7. Is there support available for code-related issues? ===
The ActiveCampaign Customer Experience Team does not provide support for coding issues; it is suggested to seek resources or communities focused on HTML and email design.


1. **Product Launch**: Use one '''Section''' for the header that includes your logo and overarching message. Use additional '''Sections''' to feature different products with images and descriptions.
By following these guidelines and best practices, you can successfully address and prevent issues related to text and link colors in your emails, ensuring effective communication with your audience.
2. **Newsletter**: Organize your newsletter with a '''Section''' for the introduction, a '''Section''' for articles, and a '''Section''' for the conclusion or call-to-action.
3. **Event Promotion**: Create distinct '''Sections''' for event details, RSVP buttons, and social sharing options to effectively drive engagement.
 
=== Troubleshooting ===
 
If you encounter any issues while adding or configuring '''Sections''', consider the following:
 
* Ensure you are using the latest version of ActiveCampaign, as the email designer is regularly updated for improvements.
* If the '''Plus (+) sign''' does not appear, double-check to ensure you are hovering over the correct area between existing '''Sections'''.
* If your changes are not saving, try refreshing the page or clearing your browser cache.
 
=== Related Features ===
 
For more related functionalities, you can explore the following help articles:
* [[Campaigns]] overview
* [[Email Designer]] overview for a broader understanding of the Email Designer capabilities.
 
=== FAQ ===
 
'''Q1: Can I customize the background color of a Section?''' 
A1: Yes, you can configure the '''background color''' of each '''Section''' in the settings.
 
'''Q2: What is the difference between Sections and Containers?''' 
A2: '''Sections''' act as the overall frame for your campaign, while '''Containers''' are used within '''Sections''' to add specific content elements.
 
'''Q3: How many Sections can I add to one campaign?''' 
A3: You can add multiple '''Sections''' as needed, depending on your campaign structure.
 
'''Q4: Are there pre-defined templates for Sections?''' 
A4: The Email Designer offers a variety of formatting options, but you will need to define the content and layout of each '''Section'''.
 
'''Q5: Is the Email Designer available for all ActiveCampaign plans?''' 
A5: Yes, the Email Designer is available for the Starter, Plus, Pro, and Enterprise plans.
 
'''Q6: How can I preview my email design?''' 
A6: Utilize the preview feature within the Email Designer to see how your '''Sections''' and overall email appearance before sending.
 
'''Q7: Can I copy Sections from one campaign to another?''' 
A7: Currently, there isn’t a direct function to copy '''Sections''' between campaigns, so you'll need to recreate them as required.
 
For additional assistance with the Email Designer or any feature of ActiveCampaign, please refer to the [[Email Designer]] documentation.]]
```
```

Latest revision as of 16:41, 3 November 2025

```mediawiki Navigation: Main_Page > Campaigns > Email Designer

Email Designer: Text or Link Color is Different in the Inbox[edit | edit source]

The Email Designer is a powerful feature that allows users to create visually appealing email campaigns in ActiveCampaign. However, one common issue that may arise is when the text or link color appears differently once the email is received in the inbox. This can lead to a mismatch between the designed email and what recipients actually see. Understanding how to address this issue is important to ensure brand consistency and foster effective communication with your audience.

This guide will help you troubleshoot discrepancies in text or link color by utilizing the built-in code editor within ActiveCampaign's Email Designer.

How to Access This Feature[edit | edit source]

To access the Email Designer and begin adjusting your campaign's text or link colors, follow these steps:

  1. Click on Campaigns on the left-hand navigation menu.
  2. Open the campaign you wish to edit.
  3. On the Campaign Summary page, hover over the design on the right and click Edit design to open the campaign designer.

Step-by-Step Instructions[edit | edit source]

Once you are in the Campaign Designer, follow these detailed instructions to troubleshoot and fix the color discrepancies:

  1. In the Campaign Designer tab, click on the text box that displays the color issue.
  2. Locate the code editor icon on the top right and click on it.
  3. Within the code, find the text or link that is displaying the incorrect color.
  4. Check if the text is wrapped within a paragraph

    tag. If it is, you will need to change the

    tag into a tag.

  # For example:

#

Foobar

  # Change it to:
  # Foobar
  1. After making the necessary adjustments, test your email to confirm the fix.

This issue generally arises because certain email clients, such as Gmail and Outlook, may strip style attributes applied in paragraph (

) tags when rendering emails in the inbox. Note that this behavior can vary based on the email client used, making the adjustment of the tag crucial for consistent appearance across platforms.

Configuration Options and Settings[edit | edit source]

In the Email Designer, there are specific settings that can influence how emails are displayed:

  • Text Box - The area where your content is displayed, which can sometimes lead to color issues if not correctly configured.
  • Code Editor - A tool accessible within the campaign designer that allows for advanced users to edit the HTML directly for a more customized approach.

Best Practices and Tips[edit | edit source]

When working with the Email Designer and addressing color discrepancies, consider the following best practices:

  • Always preview your emails before sending them out. This helps identify any mismatches.
  • Test your emails in multiple clients to ensure the desired appearance is achieved across different platforms.
  • Use span tags for applying styles to text that require specificity, as opposed to the broader paragraph tags.
  • Be cautious while editing HTML code, as improper changes can lead to other formatting issues.

Common Use Cases with Examples[edit | edit source]

- A company sends out a promotional email with links highlighted in blue but finds that recipients see them as gray. By following the steps outlined, the company correcting the issue allows their call-to-action (CTA) links to stand out. - A designer creates an email featuring white text on a colored background. However, when the email is opened in certain clients, the color appears different. By adjusting the styling using the code editor, the text appears as intended.

Troubleshooting[edit | edit source]

If you continue to experience issues after following the above steps, consider the following troubleshooting tips:

  • Ensure that you have saved any changes made in the code editor before testing the email.
  • Check for any conflicting styles in other parts of the email that may override the color settings.
  • Review your template for any inherited styles that may be affecting the text color.

Related Features[edit | edit source]

For more information on related functions and features, consider reviewing the following:

FAQ[edit | edit source]

1. Why does the color of my text change in certain email clients?[edit | edit source]

Many email clients have their own rendering engines that may ignore styles, especially those applied with paragraph tags.

2. What should I do if I’m not comfortable editing HTML?[edit | edit source]

It is recommended that only advanced users utilize the code editor. If you are not familiar with HTML, consider consulting with someone who is.

3. Can I revert my changes if something goes wrong?[edit | edit source]

Yes, you can always revert to a previous version of your campaign by accessing your campaign history within ActiveCampaign.

4. Do all email clients behave the same way?[edit | edit source]

No, different email clients handle styles differently, which can lead to inconsistencies in how emails are displayed.

5. What are the risks of using the code editor?[edit | edit source]

Improper edits can lead to broken layouts or functionality in your emails, so it is essential to proceed with caution.

6. How can I ensure my emails are tested effectively?[edit | edit source]

Utilizing email testing tools and sending test emails to various accounts can help verify appearance across platforms.

7. Is there support available for code-related issues?[edit | edit source]

The ActiveCampaign Customer Experience Team does not provide support for coding issues; it is suggested to seek resources or communities focused on HTML and email design.

By following these guidelines and best practices, you can successfully address and prevent issues related to text and link colors in your emails, ensuring effective communication with your audience. ```