SLX Developer Magic Book

When searching for solutions online, use keywords related to the subject you’re looking for. Think about what someone would be likely to name an article about what you’re looking for, and is this a problem lots of other people are likely to have encountered? How might they have worded their questions differently from your search terms?

Use these guidelines to help you refine your search:

https://support.google.com/websearch/answer/2466433?hl=en

Tips to avoid wasting time:

If you haven’t found what you want in the first three pages of google search results, your likelihood of finding fruitful info drops significantly. Consider another approach.
If waiting on a response from someone, stay busy doing something else that doesn’t require someone else’s assistance, this is a good time to try less efficient research methods as a hail mary if you’ve exhausted all other options (such as scouring forum entries deep in the search results, trying different word combos or synonyms in your search, etc…).
When you learn something new, ask your team lead to add it to the internal documentation and let your teammates know what you found, so they won’t have to search as long for the answer when it comes up again.

Form Troubleshooting Process Tips

USE THESE STEPS AS A GUIDELINE WHEN APPROACHING UNFAMILIAR UPDATES AND STYLING ON A FORM LAYOUT:

View the form in your browser using the “View Online” option in Pardot. Use the Inspector Chrome tool to browse through the HTML, CSS and Java Script.

Use the Icon on the top left of the inspector tool and on the left side of the screen, hover over the element that needs to be targeted and fixed., The inspector tool will highlight the portion of the code that pertains to the element you are hovering over, allowing you to quickly identify where you’ll need to edit.

Check the bottom section of the code inspector tool for the classes structure that relates to the element you are looking at. You can change/add style attributes right in the inspector tool to make sure your changes fix the related issues. Once you find the attribute value that fixes your issue, paste that update into the code in the Form Layout Template. Make sure to work on optimizing one class at a time, so you don’t lose track of all your updates when troubleshooting multiple issues.

Experiment with code updates directly in the inspector tool, and you will see your updates applied live in the preview panel on the left. Once you figure out the changes that give you the desired results, implement the new styles on the correct classes, or create new ones accordingly in the Pardot form Layout template, under the “form” tab.

In order to have the submit button disabled until all required fields are filled out, add this script to the bottom of the form layout:


<script>
document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("pardot-form");
    const requiredFields = form.querySelectorAll(".required input");
    const submitButton = form.querySelector('input[type="submit"]');

    function checkRequiredFields() {
        let allFilled = true;
        requiredFields.forEach(field => {
            if (field.value.trim() === "") {
                allFilled = false;
            }
        });
        submitButton.disabled = !allFilled;
    }

    // Disable initially
    checkRequiredFields();

    // Attach listeners
    requiredFields.forEach(field => {
        field.addEventListener("input", checkRequiredFields);
    });
});
</script>

If you’re not sure what is causing the issue and what can fix it, try to search for the correct class on this Form CSS Classes and Examples, and identify the styling property you are trying to achieve (Use this properties list to help you find the right property). If it is more complicated than that, try searching on Google using keywords to describe the issue (be specific in your description of what you try to achieve, and use words like style, CSS, selectors, Pardot, form, JavaScript, to help and populate results that will be on point for what is needed). Try to find others who have had a similar problem and documented the solution. Once you learn something new, let your team lead know, so the details can be added to the Developer Knowledge Base/Magic Book!

Only after exhausting all of these resources, and searching on google got to an end point with no result, reach out to your team lead for help.

LP Troubleshooting Process Tips

USE THESE STEPS AS A GUIDELINE WHEN APPROACHING UNFAMILIAR UPDATES AND STYLING ON A LANDING PAGE:

First, use the Webflow university site to try and search for the required behavior or functionality you are trying to accomplish. Most common questions should be answered here.
If that doesn’t help, try to search on Google using Webflow as a keyword (there might be independent solutions out there that are not on the Webflow university). User forums are a good place to search for fixes like this.
Before adding a custom code to your Webflow LP, make sure there is no way to achieve what’s needed in the “style” tab on the right of the editor. A lot of times it seems like there is no way it’ll be able to give the required option, but in fact, Webflow has a lot of abilities in the editor that may not be obvious at first glance.

Webflow editor usually uses the same styling language as CSS, for example: Display, direction, align, justify, position, padding, margin, etc…
When looking to implement styling, look for the correct language in the editor “style” tab.

Make sure you’re applying style changes to the most appropriate element in the code structure. Usually, it is most efficient to apply the styling to the largest containing element possible. For example: If you wish to align an image to the center, apply the “align” or “Justify” center styling to the div that the image is nested in. By making sure you are working correctly, you will eliminate a lot of future issues and responsiveness will act better. If you want to ensure everything in the page is at least 50px from the sides, apply the padding to the entire page body or section, rather than to each individual column, div, or element.

If the Webflow file you are working on uses REM as the fonts size unit, and you are trying to match a design file you are working on that uses PX (pixels), use this Pixel to REM conversion table.
Creating sliders and carousels in Webflow can be a real headache—limited flexibility, clunky UI, and constant workarounds. Instead, try using our Internal tool here: Carousel/Slider Builder. It’s a cleaner, faster way to generate responsive sliders or carousels without the Webflow pain. Here’s how it works:
1. Switch between “Slider” or “Carousel” mode using the toggle in the top-left.
2. Customize your layout — control the number of visible columns, total items, autoplay, and arrow positions.
3. Export and paste the generated HTML/CSS/Javascript directly into your exported HTML file from Webflow.
4. Then you can edit the carousel cards directly in the HTML.
5. In order to make the carousel Infinitely scrolling, there are “clones” of the columns in the generated HTML, there are comments notating which are clones. Simply copy the HTML from your originals to the clones.
It’s a massive time-saver and gives you way more control than Webflow’s native options.

Integrating Dynamic Iframes

To enable the SalesLabX dynamic iframe, a small script import must be added to either:
- The Form’s layout template, or…
- The “Below Form” section of the form layout.

<script src="https://clientslx.b-cdn.net/SalesLabX/DynamicIframe/iframe-resizer.js"></script>
// Do not edit this!

To simplify the implementation for clients, the iframe link is placed directly within the data-src attribute of the script. This minimizes the amount of code they need to add. Example below:

<script id="dynamic-iframe" src="https://clientslx.b-cdn.net/SalesLabX/DynamicIframe/dynamicIframe.js"
data-src="https://www2.saleslabx.com/l/722833/2025-09-05/35m97v"></script>
// Make sure to only edit the data-src attribute value!

This will automatically adjust the height of the iframe dynamically, and will work with 2 column forms, conditional fields, and when error messages appear.

Webflow Common Troubleshooting Fixes

Interactions

Creating Interactive Elements…
Things that require adding custom code after exporting…

Can be links to Webflow University Topics or typed out explanations if no existing article explains it well

Troubleshooting [Issue]

How to figure it out…
How to fix it…

Email Common Troubleshooting Fixes

Common Email Coding Fixes Cheatsheet

Extra email troubleshooting related subjects:

How to look up someone’s email client: http://mxlookup.online-domain-tools.com/
How to explain to ACs & Clients that forwarding emails is not recommended because it breaks code
The SLX Email on Acid & Fake Prospect Test List: SLX_Testing should be present in all client Pardot environments
Prevent orphaned words using CSS or using white space no wrap attribute on the last 2-3 words of a paragraph for an inline solution:
<span style=”white-space:nowrap”> EXAMPLE TEXT </span>
Stretchy Outlook Background Images: If your Outlook Desktop background images are stretching, the problem may be caused by the email client ignoring padding for the module, so the workaround is to take off the top and bottom padding and instead add a blank
above and below your text/content with the height of the padding you’d like.
Stretchy Non BG Images in Outlook: Check for conflicting width/height parameters on the images’s tag, and on the tag itself.
How to Force Outlook to show fallback fonts:
https://jennamolby.com/how-to-force-outlook-to-display-the-fallback-font-instead-of-times-new-roman/
https://stackoverflow.com/questions/18254711/html-emails-fallback-for-mso-conditional/21626196#21626196
<!–[if !mso]><!–><span style=”font-family: Helvetica;”><!–<![endif]–> TEXT <!–[if !mso]><!–></span><!–<![endif]–>
How to implement rounded buttons into Outlook:
- Generate the new code for the button using our code generating tool: https://www2.saleslabx.com/email-button-generator
- As for where exactly to add the code, refer to this image
To disable blue hyperlinks in Emails for Apple, Gmail, and Samsung add this code to CSS:

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

u + #body a {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

#MessageViewBody a {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

Dark Mode Background Image ModulesOptimized for Outlook & IOS Gmail

Reference Article for Gmail Fix: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/
Reference Article for Outlook Fix: https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems–cms-37718t

// immediate parent elements and their attributes

<tr>

<div style=”text-align:left;”><span style=”font-size:16px;font-family:’Open Sans’,’Arial’,sans-serif;font-weight:300;font-style:italic;color:#ffffff;line-height:150%;mso-line-height-alt:24px;”><span class=”gmail-blend-screen”><span class=”keep-white gmail-blend-difference” pardot-region=”” style=”color: #ffffff;”>Assistant Director of Admissions</span></span></span>

</div>

</td>

</tr>

// classes and their styles:

<style>

u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }

u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }

</style>

// mso css portion

<!–[if gte mso 16]>

<style>

.keep-white {

mso-style-textfill-type:gradient;

mso-style-textfill-fill-gradientfill-stoplist:

“0 \#F7FAFD 4 100000 lumm=5000 lumo=95000\,100000 \#FFFFFF 0 100000”;

color:#000000 !important;

}

</style>

<![endif]–>

// place class “body” on body element

// place background color hex code and linear gradient to two most outer div of the module (which hold background image)

Rounded Strokes in Emails

In order to create a rounded cornered “stroke” in emails, use a wrapper module and add a border radius + background color + 1px padding on that, and then on the column inside that add a white background color + the same border radius. this will create an “stroke” look that tests well.

Transitioning HTML Email Templates to Salesforce Lightning

Salesforce (SF) Lightning has a stricter HTML sanitizer than Pardot. To ensure email templates render correctly and pass the Lightning security validator, follow these structural and syntax updates.

1. Remove Restricted Header Attributes

Lightning identifies XML namespaces and custom Pardot attributes as invalid.

Action: Clean the <html> tag.
Remove: xmlns, xmlns:v, xmlns:o.
Remove: Proprietary Pardot attributes such as pardot-repeatable, pardot-region, and pardot-region-type.

2. Update Merge Field Syntax

Salesforce Lightning uses a different syntax for variable injection.

Syntax Change: Replace {{Field_Name}} with {{{Recipient.Field_Name}}}.
Note: Use triple curly braces { { { } } } for standard fields to ensure HTML characters or links within those fields are rendered correctly.

3. Structural and Table Adjustments

Lightning often strips complex <style> blocks in the <head>. Rely more on inline styles and standard table attributes.

Ghost Tables: Remove complex [if mso] conditional wrappers that use div classes. Instead, use a simple outer table with a fixed width (e.g., width="600") and align="center".
Attribute Placement: Move attributes like valign and bgcolor directly into the <td> or <table> tags rather than relying solely on external CSS classes.
Image Handling: Ensure all <img> tags have explicit width attributes and display:block; inline styles to prevent unwanted gaps in Outlook and Gmail.

4. Code Sanitization Summary

Use the table below as a checklist before importing code into the Lightning Email Builder:

Element	Pardot / Usual Code	SF Lightning Requirement
HTML Tag	Contains `xmlns` namespaces	Plain `<html>` or `<html lang="en">`
Merge Fields	`{{Recipient.FirstName}}`	`{{{Recipient.FirstName}}}`
Regions	`pardot-region="header"`	Remove attribute entirely
Body Styling	Complex CSS in `<head>`	Simplified CSS + Inline styles
Links	Standard `<a href="...">`	Ensure merge fields in links use `{{{ }}}`

Back to Top ↑

Pardot Forms Common Troubleshooting Fixes

Add content from Pardot Form Styling Library

- Stephanie Pardot Form Knowledge Dump:
To Add a Custom Field in Pardot
Main Menu > Admin > Configure Fields > Prospect Fields
1. Click Add Custom Field (top right)
2. Name the Field, Specify Salesforce field name (can leave blank if you aren’t instructed to match with salesforce), sync behavior, Type, Values… Click Create Custom Field
Now you can create a form, and add this as a field
Difference between Pardot forms and form handlers: https://help.salesforce.com/articleView?id=pardot_forms_versus_form_handlers.htm&type=5
1. The outermost containing element controls a form’s styling.
2. If a form is by itself, the layout template for that form is used.
3. The contents of the form tab is inserted into the %%content%% tag of your layout template.
4. If a form is on a landing page, the landing page layout template is used, and the form’s layout template is ignored. To make sure the form styling gets used, copy the code from the “layout” tab of the form layout template, and insert that into the “form” tab of the landing page layout template. Remove redundant %%content%%.
– You can change your form’s styling by editing the code in your layout template. If your form is on a Pardot landing page, add the code to the landing page’s layout template.
1. “Load Default Data” when configuring fields ensures the correct field type (eg. text, dropdown, checkbox etc.) is selected, and it will also pull in the options for dropdowns, checkboxes, radio buttons.
1. How to have labels display as placeholder text (ala Ossur) https://jennamolby.com/how-to-add-placeholder-text-within-pardot-forms/?source=advanced-pardot-js
1. Default Form Styling Classes: https://www.pardot.com/blog/default-form-styling-classes/
To make the form height dynamic: https://jennamolby.com/how-to-embed-a-pardot-form-on-your-website-the-right-way/ (possibly still not working?)
CSS MODS: https://ebq.com/making-a-custom-pardot-form-with-css/
1. Two Column Forms: https://jennamolby.com/the-best-way-to-create-a-2-column-pardot-form/
2. Making Two Column Forms mobile responsive; https://www.w3schools.com/css/css_rwd_mediaqueries.asp

To open a redirect page in a new window use this script in the thank you code:

Back to Top ↑

Spam steps for html

What to update in an email’s HTML to reduce chances of spam triggers

<TITLE> tag:

Update the <title> tag with text. (Title is what populates the browser tab when an email is viewed online)

HTML Errors:

You can see if there are any basic html errors in the code with DW. Click on the red X to view the errors, then fix until the code is clean. Once fixed a green check will appear instead of the red X.

No Empty Attributes:

Populate any empty Attributes. Always have an alt attribute on images

If an attribute is not needed, then just delete it.

WordPress

WordPress Offboarding Documentation

1. Backup the Client’s Websit

Create a Full Backup:

- Use the server to create a full backup of the website.
- Ensure the backup includes the database, files, themes, plugins, and uploads.
- Before migrating the client’s WordPress site download a full back of the website to ensure no issues.

This can be achieved on WordPress Engine by following this set of instructions https://wpengine.com/support/restore/#Download_a_Backup.

2. Migrate the Website to the Client’s Server (Milton and/or the client’s team has handled this step in the process in most cases.)

Access the Client’s New Server:

- Upload the backup file to the new server.
- Use a migration plugin or manually restore the backup on the new server.

Upload the Backup:

- Obtain access credentials (FTP, SFTP, cPanel, or hosting dashboard).

Update DNS Records:

- Ensure the domain’s DNS records point to the new server.
- Confirm the site is live and functioning properly on the new server.

3. Transfer the Elementor Account

Elementor Pro License Transfer:

- Log in to the current Elementor account.
- Navigate to the account settings and deactivate the license on the client’s site. (The Elementor login isn’t present in LastPass and will have to be acquired from leadership. Once the login information is acquired the verification code for the two-step authenticator will be sent to the design email address.
  - https://elementor.com/help/wp-content/uploads/2023/06/02-Deactivate-website.png
  - https://elementor.com/help/deactivating-an-elementor-pro-license/
- Instruct the client to purchase a new Elementor Pro license.
  - Provide guidance on how to activate the new license on their site if the client plans on activating Elementor Pro at a later point.
  - https://elementor.com/help/activate-your-license-key/
- Log in to the client’s Elementor account and activate the license for the WordPress account.

4. Transfer Paid Plugins

List Paid Plugins:

- Create a list of all paid plugins used on the site.
- When looking for a paid plugin first check for any plugin with a name that mentions premium, pro, or even the word paid.

Payment Information Update (This step will be taken care of by the AC and/or Leadership)

5. Document Notable Custom Code

Identify Custom Code:

- Review the theme files, functions.php, and any custom plugins for custom code.

Create Documentation:

- Document the purpose and functionality of each custom code snippet.
- Include file location and instructions for any necessary future updates.

Share Documentation:

- Provide the documentation to the client in a clear and concise format.
- Offer to clarify any questions the client may have.

6. Final Review and Handover

Review Checklist:

- Ensure all steps have been completed and documented.
- Verify that the client has access to all necessary accounts and information.
  - This includes staging and development environments.

Reference Task

https://app.asana.com/0/0/1206951296058829/f

push a new website into production

When a development site is ready to be pushed over and override the existing live site, please follow these steps

1. Confirm with the AC/PC that all existing pages/blogs in the live environment, are created and existing in the dev environment.

2. Log into the client’s WPEngine account, and create a manual backup for both the dev and the live environments.

3. update all plugins, themes, and WordPress version on the dev and live WordPress environments. Run a regular maintenance procedure, to ensure all updates been made, and the site is functioning correctly.

4. Create another manual backup for both the dev and the live environments (to have the latest backup include any updates made to the plugins, themes, etc…).

5. When ready to do the push, go to the dev environment and at the top right, click on the “Quick actions” dropdown. Choose “Copy environment”.

6. Within the Copy environment screen, make sure the source environment is set to the Dev environment, and the destination is set to production environment

7. Next, make sure to enable the “All database tables and file system” under the “Include” radio buttons field.

8. Under “Send notifications”, enter your SLX email address so you get a notification to your email when the process is complete.

9. In the “Review & confirm” page, make sure that everything seems to be set up in the way you set it up. Once ready, click the “Looks good, copy the environment” button, and the process of pushing the Development site into the live site will begin.

10. After the process is complete, go to the live site and browse it to make sure everything carried over correctly. Check the WordPress environment to make sure all plugins, themes, etc… are up-to-date.

SLX WordPress Site – Scroll & Layout Fix Documentation

Problem Summary

The SalesLabX WordPress site (built with Elementor + Bridge theme) was experiencing persistent double scrollbars, and inner container scrolling.

Objective

Eliminate double vertical scrollbars
Prevent inner scrollable containers
Ensure Elementor stretched sections and dropdown menus do not break layout

Global Fix (Applied via WordPress → Customizer → Additional CSS)

The following CSS was added to resolve the scroll issues globally across the site:

/* === Scroll & Layout Fix: Elementor + Bridge Theme === */

html {

overflow-x: hidden;

overflow-y: scroll !important;

height: auto !important;

scroll-behavior: auto;

width: 100%;

}

body {

overflow-x: hidden;

overflow-y: visible !important;

height: auto !important;

position: relative !important;

}

/* Stretched sections should stay within viewport */

.elementor-section.elementor-section-stretched {

width: 100% !important;

max-width: 100vw !important;

left: 0 !important;

right: 0 !important;

position: relative !important;

overflow-x: hidden !important;

}

/* Prevent all container elements from becoming scrollable */

.elementor-section,

.elementor-container,

.elementor-column,

.elementor-inner-section,

.elementor-widget-wrap,

.elementor-widget-container {

height: auto !important;

max-height: none !important;

overflow: visible !important;

box-sizing: border-box !important;

}

/* Fix known problematic column */

.elementor-element-27866248 {

height: auto !important;

overflow: visible !important;

max-height: none !important;

}

/* Clamp overflowing dropdown nav menu */

.elementor-nav-menu–dropdown.elementor-nav-menu__container {

width: 100% !important;

max-width: 100vw !important;

left: 0 !important;

right: 0 !important;

overflow: visible !important;

position: absolute !important;

box-sizing: border-box !important;

padding: 0 16px;

}

/* Wrap long text inside nav menu items */

.elementor-nav-menu–dropdown .elementor-item {

white-space: normal;

max-width: 100%;

overflow-wrap: break-word;

text-align: left;

}

/* Prevent invisible screen-reader spans from causing scroll */

.elementor-screen-only,

.elementor-screen-only span,

.elementor-screen-only * {

display: none !important;

height: auto !important;

max-height: none !important;

overflow: visible !important;

position: static !important;

}

/* Cleanup persistent body dialog styles */

body.dialog-body,

body.dialog-lightbox-body,

body.dialog-container,

body.dialog-lightbox-container {

overflow: visible !important;

height: auto !important;

position: static !important;

}

/* GPU optimization for animation-heavy widgets */

.envato-kit-66-featured-slider .elementor-slides .slick-prev,

.envato-kit-66-featured-slider .elementor-slides .slick-next,

.envato-kit-140-slide .elementor-slide-content,

.envato-kit-140-carousel .slick-active:not(.slick-current) img {

will-change: transform;

}

/* Just one declaration needed */

.envato-block__preview {

overflow: visible !important;

}

Homepage-Specific Adjustments

The global fix above caused layout compression on the homepage, especially with vertically stretched content.

Elementor → Homepage → Custom CSS:

/* Fix vertical height and alignment issue in homepage hero */

.elementor-7 .elementor-element.elementor-element-1aecf809 > .elementor-container {

height: 70vh !important;

align-items: center;

}

Elementor → Homepage → Advanced Tab: Padding Top was adjusted manually on the relevant section to rebalance spacing affected by container height changes.

Back to Top ↑

General Coding Magic

Mailto Link Generator: https://mailtolink.me/
How to create Add to Calendar buttons: https://saleslabx.com/pardot-add-to-calendar-link/
How to create nested lists with sub items: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested
Prevent orphaned words using CSS or using white space no wrap attribute on the last 2-3 words of a paragraph for an inline solution:
EXAMPLE TEXT
Prevent orphaned words using

GENERAL:

Prettier Bulleted Lists with second line hanging indent:

Add to custom CSS:

ul {

list-style-position: inherit;

padding-left: 40px;

padding-right: 40px;

}

Nested Lists with sub items: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested

Prevent line break: add “white-space: nowrap;” in style of element

<span style=”white-space: nowrap;”>EXAMPLE TEXT</span>

Mailto Link Generator: https://mailtolink.me/

Add to calendar buttons: https://saleslabx.com/pardot-add-to-calendar-link/

Anchor links: find ID of element/section, and add “/#id-name” to the end of the url

Pass Thru URLs: To pre fill form add “/?field_name=prefilleddata” to the end of the form url in iframe code

WORDPRESS SPECIFIC:

WP Password Protection:

Using Password Protection

Guide to WordPress Password Protected Pages and Cookie Detection

WP Redirects: Tools > Redirect > Source URL = Old Page & Other URL = New URL

Available Elementor Add Ons: https://elementor.com/addons/

EMAIL SPECIFIC:

Look up someone’s email client: http://mxlookup.online-domain-tools.com/

Prevent line break: add “white-space: nowrap;” in style of element

EXAMPLE TEXT

Rounded Corners (Even in Trouble Outlooks) https://medium.com/@alexvargash/html-email-rounded-corners-2d58c42e491c

Forwarding breaking code: https://litmus.com/blog/when-forwarded-emails-break

Stretchy Outlook BG Images:

If your Outlook Desktop background images are stretching, the problem may be caused by the email client ignoring padding for the module, so the workaround is to take off the top and bottom padding and instead add a blank

above and below your text/content with the height of the padding you’d like. Check to see if there’s already an empty spacer

above/below the content and if there is you can just increase the height.

Force Outlook to show fallback fonts:

Quick Tip: How to Force Outlook to Display The Fallback Font Instead of Times New Roman

https://stackoverflow.com/questions/18254711/html-emails-fallback-for-mso-conditional/21626196#21626196

TEXT

Links in Emails Best Practices: Just so you’re aware, emails with more than five hyperlinks in them (including company homepage and social links) are more prone to being marked as spam. Our best practices would dictate breaking email content into multiple shorter emails, or placing the collection of links on a landing page the email CTA could link to. You could also continue to use lots of links but actively remind people to mark you as a safe sender if you’d rather not compromise on the email content. We’ll do whatever you prefer, just want to make sure you have all the info you need to decide.

Darkmode Invisible Text Workaround: lighten your bg, either in PS or AI and test multiple lighter versions until you get to a place where the darkmode is working correctly but the normal text is still readable

Darkmode isn’t very customizable: https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

Disable Blue Links in Emails:

For Apple, Gmail, and Samsung add to CSS:

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

u + #body a {