Hi,
I’m new and I’ve tried adding custom module with styles but the email DnD editor still forces to 600px. I want to add a text full width element that users can drop in and then continue dragging other normal 600px elements into the email.
Thanks for any help,
Paul
Hello @pclatworthy
To create a full-width text element in the email DnD editor, you can follow these steps:
Click on the “Add module” button in the editor and select “Custom HTML”.
In the HTML editor, enter the following code:
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse;">
<tr>
<td style="font-size: 16px; line-height: 24px; font-family: Arial, sans-serif; color: #000000; padding: 20px 0;">
Your text goes here.
</td>
</tr>
</table>
This code creates a table with a single cell that spans the full width of the email, and contains your text.
Save the module, and you should now be able to drag it into your email template.
Note that any other modules you drag into the email template will still be limited to the 600px width. However, you can use this custom HTML module to create full-width sections of text or images.
Thanks & Regards
Himanshu Rauthan
Thank you for your response, but are there any more steps. The full width
doesn’t show in Preview or in Gmail test.
Thanks,
Paul[image: Screenshot 2023-04-05 at 11.41.01 AM.png]
Yes, there are a few additional steps you can take to ensure that your full-width text element displays correctly in the email preview and when viewed in Gmail.
First, make sure that the table containing your text has the “width” attribute set to 100%, as shown in the code snippet I provided earlier. This will ensure that the table spans the full width of the email.
Next, you should add some additional styles to the table cell containing your text to ensure that it displays correctly in different email clients. For example, you might add styles for the text alignment, font size, line height, and font family. Here’s an updated code snippet with some additional styles:
<table cellpadding=“0” cellspacing=“0” border=“0” width=“100%” style=“border-collapse: collapse;”>
<tr>
<td style=“font-size: 16px; line-height: 24px; font-family: Arial, sans-serif; color: #000000; padding: 20px 0; text-align: center;”>
Your text goes here.
</td>
</tr>
</table>
In this example, I’ve added the “text-align: center;” style to center the text in the table cell.
Once you’ve added these styles, save the module and preview it again in the email editor to make sure the full-width text element displays correctly. You can also send a test email to yourself and check how it displays in different email clients.
Note that some email clients may still limit the width of the email, and the full-width text element may not always display as expected. However, adding these styles should help ensure that the element displays correctly in most email clients.
Thank you for your response but still no go. Maybe this solution used to
work, but the text is not full width in the preview or any email client I
tested. Any other ideas?