Set different font styles for mobiles to ensure readability and visual appeal:

• Use a smaller font size to fit content on smaller screens,
• Use a safe font family for better readability, and
• Adjust font color to ensure good contrast in diverse lighting conditions or for dark-mode settings.

E-Mail auf dem Desktop	E-Mail auf Mobilgeräten

To change your font size, color, or family for mobiles, you will need to set the font styles for both mobile and desktop: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Search for the content for which you want to change the font styles. Your content settings are just above it in the code. 
4. Copy the codes corresponding to the type of style you want to change on mobile devices: 
   • Text font:font-family: 'font family name'
   • Text size:font-size: SIZEpx
   • Textfarbe: color: 'HEX' 
5. Under the layout string and 320px value, paste the codes you copied above to edit the mobile font styles and replace their value with the one you need:
   
   • font-family: 'font family name' where font family name is the name of the font as it appears in the list of available fonts in the editor. 
   • font-size: SIZEpx where SIZE is the size you want to give to your content in px. 
   • color: 'HEX' where HEX is the HEX code corresponding to the color you want to give your content. 
     
6. From the content string, in our example Warm-up with Sun Salutations, remove any style, span, or class attributes between the single quotes '' to only keep your content.
   ➡️  Beispiel

   Wenn dein Inhalt wie folgt lautet: 

   content: '<h2 class="default-heading2"><span style="color:#116b6b;">Our 3 tips to practice safe yoga 🧘</span></h2>'

   Remove any style or class attributes to only keep your content, such as: 

   Inhalt: 'Our 3 tips to practice safe yoga 🧘' (Unsere 3 Tipps, um sicheres Yoga 🧘 zu praktizieren)
7. Switch between the desktop (⇧ + D) and mobile (⇧ + M) modes using the corresponding icons at the top-right of your email editor. This will allow you to ensure that your font styles change according to the type of device on which they are read.
8. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.  
9. Click the cross icon  to close the developer mode.

Congratulations! Your font styles are now changing depending on the device on which they are read. 

Gmail annotations allow Gmail users to view and engage with your promotions directly from their inbox by clicking the annotated image or text without opening the email. These annotations allow messages received in Gmail's Promotions tab to stand out by adding features such as:

So zeigst du deinen Empfänger:innen Gmail-Anmerkungen an: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Copy the code from the tab below corresponding to the type of annotation you want to display to your Gmail recipients: 
   
   Deal annotationsProduct carouselsSingle image preview

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Optional) DESCRIPTION is the text that displays with the deal badge, such as 20% off.  (Optional) DISCOUNT_CODE is the discount or promotion code for the offer, such as 20TODAY.  (Optional) START_DATE_TIME is the date and time when the offer begins in ISO 8601 format, such as 2023-09-25T18:44:37-07:00. (Optional) END_DATE_TIME is the end date and time of the promotion in ISO 8601 format, such as 2023-09-25T18:44:37-07:00.

   ❗️ Wichtig

   For each image in your product carousel, add a PromotionCard type. 

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL is the URL to your image in PNG or JPEG format, such as https://www.example.com/image.png. The supported aspect ratios are 4:5, 1:1, 1.91:1. For product carousels, each image must have a unique URL and use the same aspect ratio. PROMO_URL is the URL for the promotion. When users click on the image from the Promotions tab, they visit this URL. (Optional)HEADLINE is 1 to 2-line description of the promotion that displays under the preview image. (Optional) PRICE is the price of the promotion. (Optional) PRICE_CURRENCY is the currency of the price in 3-letter ISO 4217 format, such as USD. Determines the currency symbol displayed with the price. (Optional) DISCOUNT_VALUE is the amount subtracted from the price to display an adjusted price. The adjusted price is displayed next to the original price. For example, if the discountValue is 25, the price is 100, and the priceCurrency is USD, the adjusted price displays as $75. (Optional) POSITION is the position of the card in the carousel.

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL is the URL to your image in PNG or JPEG format, such as https://www.example.com/image.png. The supported aspect ratios are 4:5, 1:1, 1.91:1. For product carousels, each image must have a unique URL and use the same aspect ratio. PROMO_URL is the URL for the promotion. When users click on the image from the Promotions tab, they visit this URL. (Optional) HEADLINE is 1 to 2-line description of the promotion that displays under the preview image. (Optional) PRICE is the price of the promotion. (Optional) PRICE_CURRENCY is the currency of the price in 3-letter ISO 4217 format, such as USD. Determines the currency symbol displayed with the price. (Optional) DISCOUNT_VALUE is the amount subtracted from the price to display an adjusted price. The adjusted price is displayed next to the original price. For example, if the discountValue is 25, the price is 100, and the priceCurrency is USD, the adjusted price displays as $75.

4. At the top of the developer mode, under the fonts value and at the first level, paste the code you copied from one of the tabs above.
5. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.
6. Click the cross icon to close the developer mode.
7. (Optional) Send a test email to a test email address using Gmail and with the Promotions tab active, to ensure the Gmail annotation displays correctly.

Alternatively, you can use our HTML editor to display Gmail annotations. To learn more, check Google's official documentation. 

Changing the color of your bullets or numbers can be useful to emphasize key points, group ideas, or match your branding. Below is an example of what a colored bulleted list looks like: 

So änderst du die Farbe deiner Aufzählungszeichen und nummerierten Listen:

1. Erstelle eine Liste mit Aufzählungszeichen oder Nummern. 
2. Rufe den Entwicklermodus auf. 
3. Search for the list you've just created in the developer mode and spot the content value corresponding to it. Your content settings are just above it in the code. 
4. Under the default value, paste the following code where HEX is the HEX code corresponding to the color you want to give your list: color: '#HEX'
   
5. Check your email design on the right of your screen to see if your list of items has changed color. Your bullets or numbers and associated text should appear in the color that corresponds to the HEX code you entered in the developper mode. 
6. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
7. Click the cross icon to close the developer mode.
8. To change the color of your text while keeping the color of your bullets or numbers:
   1. Wähle den Text aus, dessen Farbe du ändern möchtest. 
   2. From the toolbar above your text, click the Font color icon.
      
   3. Select a color from your brand or previously used, or paste the HEX color code you want to give your text in the HEX field. In our example, #
      3B3F44.

Congratulations! You have changed the color of your bullet points or numbers. 

Non-breaking spaces and hyphens ensure proper formatting in email designs by preventing undesirable line breaks, such as a compound name or item price being split, and maintaining readability across devices. Check our example below to understand the importance of non-breaking spaces and hyphens:

Ohne geschützte Zeichen	Mit geschützten Zeichen

So fügst du geschützte Leerzeichen und Bindestriche in dein E-Mail-Design ein: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Search for the content to which you want to add a non-breaking space or hyphen. Your content settings are just above it in the code. 
4. Copy the code corresponding to the type of non-breaking character you want to include:
   • Geschütztes Leerzeichen:  
   • Geschützter Bindestrich: –
5. Paste the code copied above in place of the space or hyphen you want to make non-breaking.
   
6. Check your email design on the right of your screen to see if your list of items has changed color. 
7. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
8. Click the cross icon to close the developer mode.

Congratulations! You have added non-breaking characters to your email design. 

Outlook desktop versions using the Microsoft Word rendering engine have limited CSS support (e.g., Outlook 2007, 2010, 2013, 2016, and Office 365 desktop versions). Background images and text formatting often display incorrectly, showing white backgrounds instead of images and misaligned text due to poor handling of properties like background-image and line-height.

To ensure background images and text blocks render properly in Outlook, use the following workaround:

1. Entwerfen deiner E-Mail. 
2. Retrieve the height size in px of your background image. In our example, 265px. 
3. Rufe den Entwicklermodus auf. 
4. Click the tab corresponding to the rendering issue you want to solve:
   
   Background imageText block

   ❗️ Wichtig

   This workaround only works for background images applied on body width, not full width, and under a grid-row value. Note that a grid-row value should not contain any button.

   1. Search for the grid-row value corresponding to where your background-image is displayed.
   2. Under the background-image value, enter height: followed by the height size in px of your background image. In our example, we will enter height: 265px.
      

   1. Search for the content for which you want to fix display issues. Search for the line-height value corresponding to where your text is displayed. If there's no line-height value for this content, add one.
   2. Replace the default size of your line-height value or enter a size in px as it is the only values that are supported by Outlook email clients. In our example, we will enter 30px.
      
5. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
6. Click the cross icon to close the developer mode.
7. (Optional) Send a test email to a test email address using one of the Outlook versions that do not support background images to ensure it displays correctly.

Add alt-text to your social media icons in your email designs to improve accessibility for visually impaired people using screen readers, enhance user experience, and ensure context is clear if images don’t load.

So fügst du Alt-Text in dein E-Mail-Design ein: 

1. Gestalte deine E-Mail und füge deine Social-Media-Symbole hinzu.
2. Rufe den Entwicklermodus auf. 
3. Search for the type: social-media values. There should be one for each social media icon. Your content settings are just above it in the code. 
4. Under each src value corresponding to your social media icons, search for the 'alt: null' value or add one.
5. Replace null with your alt text. In our example, our website icon alt text will be The Green Yoga website, and our Instagram icon alt text will be Instagram account. 
   
6. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.  
7. Click the cross icon to close the developer mode.
8. (Optional) Send a test email to check that your alt-text is displayed correctly for each of your media icons.

Anders als du vielleicht gedacht hast, ist es nicht möglich, im Entwicklermodus HTML direkt einzugeben. Stattdessen solltest du YAML verwenden, das eine einfache Darstellung für eine JSON-ähnliche Verzeichnisstruktur ist.

Mit dieser Sprache verwendest du abstrakte Definitionen, die von unserem Team erstellt wurden, um die Entwicklung von Templates zu vereinfachen und sicherzustellen, dass das HTML, das erzeugt und an die Kundinnen und Kunden versendet wird, von unseren Tools verwaltet wird. Dies ermöglicht die beste Qualität und eine breite Unterstützung für E-Mail-Clients.

Wie du vielleicht weißt, sind die E-Mail-Clients nicht alle gleich und es kann schwierig sein, professionell aussehende Newsletter zu erstellen, die überall funktionieren, auch auf Mobiltelefonen und in Outlook.

Außerdem ist dies eine Standardaufgabe, da neue E-Mail-Clients auf den Markt kommen und alte Clients die Art und Weise ändern, wie sie E-Mails darstellen.

Deshalb arbeiten wir hart daran, dass deine E-Mails überall wie erwartet funktionieren, und zwar mit minimalem Aufwand für dich. Wir haben eine abstrakte Methode entwickelt, mit der du deinen HTML-Code definieren kannst. Die Arbeit hinter den Kulissen übernehmen wir. 

Für 99 % der Anwendungsfälle wirst du nur selten auf Einschränkungen bei unserer Template-Sprache stoßen, da wir ständig daran arbeiten, sie zu aktualisieren. Aber natürlich könnte es einige Besonderheiten oder kundenspezifische Funktionen geben, die wir vielleicht übersehen haben. Dies eröffnet eine neue Welt von Möglichkeiten, die über das hinausgehen, was wir in der Benutzeroberfläche anbieten. Entdecke unsere häufigsten Anwendungsfälle für den Entwicklermodus für erweiterte E-Mail-Anpassungen!