Create flexible Layouts

Hello

i am the following Question.
In a Newsletter i have different Contentsituations.
- Text only
- Text and Image
- only Image

These should be able to change Positions by Drag&Drop.
Also all Titles should be listed within the entire Newsletter.

I attached a Testimage and the Code for it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><$title$></title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />

</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="font-family: Verdana; font-size: 11.5px; border: 1px solid #eaeaea;">
    <tr>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="<$imagesrc$>" width="600" alt="" />
        </td>
    </tr>
    <tr valign="top">
        <td width="390">
            <repeater toc='true'>
                <table cellpadding="0" cellspacing="0" align="center" style="font-family: Verdana; font-size: 11.5px; margin-bottom: 15px;">
                    <tr valign="top">
                        <td colspan="2" style="font-size: 12px; text-transform: uppercase;">
                            <$title$>
                        </td>
                    </tr>
                    <tr valign="top">
                        <td width="200">
                            <img src="<$imagesrc link='true'$>" width="180" alt="" border="0" />
                        </td>
                        <td>
                            <$description$>
                        </td>
                    </tr>
                </table>
            </repeater>
            
            <repeater>
                <table cellpadding="0" cellspacing="0" align="center" style="font-family: Verdana; font-size: 11.5px;  margin-bottom: 15px;">
                    <tr valign="top">
                        <td style="font-size: 12px; text-transform: uppercase;">
                        <$title$>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <$description$>
                        </td>
                    </tr>
                </table>
            </repeater>
            
            <repeater>
                <table cellpadding="0" cellspacing="0" align="center" style="font-family: Verdana; font-size: 11.5px;  margin-bottom: 15px;">
                    <tr valign="top">
                        <td>
                            <img src="<$imagesrc link='true'$>" width="390" alt="" border="0" />
                        </td>
                    </tr>
                </table>
            </repeater>
        </td>
        <td>
            <ul>
            <tableofcontents>
                <li>
                <$repeatertitle$>
                </li>
            </tableofcontents>
            </ul>
        </td>
    </tr>
    <tr>
        <td style="padding-top: 20px; font-size: 10px;">
            <unsubscribe>Abmelden</unsubscribe>
        </td>
    </tr>
</table>
</body>
</html>

http://aerofunk.de/cm.jpg

Am i wrong, or isn't it possible?

Thank you!

ciclista, 7 years ago

Hello - someone with some ideas?

ciclista, 7 years ago

Anybody ? :(

ciclista, 7 years ago

Hello, anybody with an idea?

Stig Stig, 7 years ago

Hi, sorry for the late response.

The code you posted will work, but since you have three separate repeater areas, you won't be able to drag and drop items between the different areas, which I think is what you're after.

What you can do though, is create a single repeating area that can either contain a text and an image, image only, or text only.

I think this code is more or less what you're trying to achieve:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><$title$></title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />

</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="font-family: Verdana; font-size: 11.5px; border: 1px solid #eaeaea;">
    <tr>
        <td colspan="2">
            <img src="<$imagesrc$>" width="600" alt="" />
        </td>
    </tr>
    <tr valign="top">
        <td width="390">
            <repeater toc='true'>
                <div style="font-family: Verdana; font-size: 11.5px;  margin-bottom: 15px;">
                    <div style="font-size: 12px; text-transform: uppercase;"><$title$></div>
                    <img src="<$imagesrc$>" width="390" alt="" align="left" style="margin:0 5px 5px 0;"/>
                    <$description$>
                </div>
                <div style="clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;"></div>
            </repeater>
        </td>
        <td>
            <ul>
            <tableofcontents>
                <li>
                <$repeatertitle$>
                </li>
            </tableofcontents>
            </ul>
        </td>
    </tr>
    <tr>
        <td style="padding-top: 20px; font-size: 10px;" colspan="2">
            <unsubscribe>Abmelden</unsubscribe>
        </td>
    </tr>
</table>
</body>
</html>

Does that work for you?

Stig


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
ciclista, 7 years ago

Thank you Stig, i try to work with that now.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098