@AkramH -
When designing an email template, I generally follow these steps:
Define the layout: Start by breaking the template into logical sections, such as 1-column, 2-column, 3-column, etc.
Build the base structure: Drag and drop the chosen layout into the canvas to establish the foundation of the template.
Add the necessary elements: Insert the required components, such as text, images, buttons, etc., into each section. While designing, I recommend referring to out-of-the-box templates to understand best practices for creating responsive templates that work across various email clients and browsers.
Additionally, please find attached an example of a 2x2 column layout from the email designer for reference.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="content-version" content="3.3.25">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style data-name="default" type="text/css">body{font-family:sans-serif;margin:0 !important;padding:0 !important;background:#FFFFFF;min-width:750px;}td{padding:0;border-collapse:collapse;}th{font-weight:normal;text-align:left;}.acr-fragment,.acr-component{padding:0;}.acr-fragment img,.acr-component img{vertical-align:middle;}.divider-container{padding:5px 0;font-size:0px;}.text-container p{margin:0;}.image-container{line-height:0;}.acr-tmp-component img,.image-container img{height:auto;}.button-container a{text-decoration:none;color:inherit;}.acr-structure{background-size:auto;background-repeat:no-repeat;}.structure__table{table-layout:fixed;margin:0 auto;border-spacing:0;background-size:auto;background-repeat:no-repeat;mso-table-lspace:0pt !important;mso-table-rspace:0pt !important;}.colspan1,.colspan2,.colspan3,.colspan4,.colspan33,.colspan66{background-size:auto;background-repeat:no-repeat;box-sizing:border-box;}.colspan1{width:100%;}.colspan2{width:50%;}.colspan3{width:75%;}.colspan4{width:25%;}.colspan33{width:33%;}.colspan66{width:66%;}.component-social-container{width:100%;text-align:center;}span.preheader{display:none !important;visibility:hidden;mso-hide:all;opacity:0;}.ExternalClass{width:100%;}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}h1,h2,h3,h4,h5{display:block;font-weight:bold;}h1{font-size:24px;margin:19px 0 19px 0;}h2{font-size:24px;margin:20px 0 20px 0;}h3{font-size:19px;margin:19px 0 19px 0;}h4{font-size:16px;margin:21px 0 21px 0;}h5{font-size:13px;margin:22px 0 22px 0;}h6{font-size:11px;margin:25px 0 25px 0;}.mso-is-desktop-hidden,.mso-is-desktop-hidden table{mso-hide:all;}@media screen and (min-width: 500px){.is-desktop-hidden{display:none !important;}.is-desktop-visible{display:block !important;}.is-mobile-visible{display:none !important;}}</style><style data-name="media-default-max-width-500px" type="text/css">@media screen and (max-width: 500px){body{width:100% !important;min-width:0px !important;}.structure__table{width:100%;}.colspan1,.colspan2,.colspan3,.colspan4,.colspan33,.colspan66,.colspan-n{display:block !important;min-width:100%;}.container-small-size .colspan1,.container-small-size .colspan2,.container-small-size .colspan3,.container-small-size .colspan4,.container-small-size .colspan33,.container-small-size .colspan66,.container-small-size .colspan-n{display:table-cell !important;width:100% !important;}.is-mobile-hidden{display:none !important;}.is-mobile-visible{display:block !important;}.is-desktop-visible{display:none !important;}}</style><!--[if gte mso 9]><style acrite-mso-css="true">.image-container div { display: block;}.structure__table td { padding: 0; border: none;}.button-container { border: none !important; padding: 0 !important; margin: 0 !important; line-height: normal !important;}.acr-structure { margin: 0 !important;}.acr-component { margin: 0 !important;}.acr-fragment { margin: 0 !important;}.colspan1, .colspan2, .colspan3, .colspan4, .colspan33, .colspan66 { box-sizing: border-box !important;}.divider-mso-hidden { border: none !important;}</style><![endif]--></head>
<body class>
<div class="acr-container"><div class="acr-structure" data-structure-id="2-2-column" data-structure-name="richtext.structure_2_2_column"> <table class="structure__table" align="center" cellpadding="0" cellspacing="0" border="0" width="750"> <tbody> <tr> <th class="colspan2"><div class="acr-fragment acr-component image-container" contenteditable="false" data-component-id="image" style="width: 100%; text-align: center;" data-has-int-mso-hack="true"><!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<!--[if mso]></td></tr></table><![endif]--><div class="component-image-container"> </div></div><div class="acr-fragment acr-component" data-component-id="text" contenteditable="false">
<div contenteditable="true" class="text-container">
<p>Please type your text here.</p>
</div>
</div></th> <th class="colspan2"><div class="acr-fragment acr-component image-container" contenteditable="false" data-component-id="image" style="width: 100%; text-align: center;" data-has-int-mso-hack="true"><!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td style="text-align: center;" ><![endif]-->
<!--[if mso]></td></tr></table><![endif]--><div class="component-image-container"> </div></div><div class="acr-fragment acr-component" data-component-id="text" contenteditable="false">
<div contenteditable="true" class="text-container">
<p>Please type your text here.</p>
</div>
</div></th> </tr> </tbody> </table> </div> </div>
</body></html>
