Modules

We’re now going to look at the Modules in the Newsletter Templates in EasyNews, how they are built and what you can do with them.

Basics

Templates consist of different modules. The modules represent a block that can be used in a newsletter. A module will be separated by the data-moduleattribute.

<table data-module="hello_world">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

This ensures that the module will be listet in the editor and that the user can drag and drop the module from the Modules bar into the Newsletter.

This adds also the following functionality to the editor:

Remove Sections
Sort sections

Thumbnails

The Thumbnails of a module gets generated when the theme is uploaded, see Import Zip.

To allow the full customisation of the Template via. Editor you can provide several Data-Attributes to achieve the best possible user-experience. Bellow the different functions provided by the Editor and the associated attributes are documented in detail.

Change font sizes

To allow the user to change font sizes, simply add data-size to any element. You can also add the data-min and data-max tag to control the marges. Following this example, the user would be able to drag the range slider with a minimum value of 12px and a maximum value of 36px. However, the data-min and data-max template tag are not required. If you want to target multiple elements for the same slider, simply give each desired element the exact tag name.

<!-- Change element font size. Minimum 12px, maximum 36px. -->
<table>
	<tr>
		<td data-size="my specific element" data-min="12" data-max="36">Hello World</td>
	</tr>
</table>

<!-- Change multiple elements the same font size. Minimum 12px, maximum 36px. -->
<table>
	<tr>
		<td>
			<h1 data-size="headline" data-min="12" data-max="36">Headline 1</h1>
			<p>Hello World 1</p>
			
			<h1 data-size="headline" data-min="12" data-max="36">Headline 2</h1>
			<p>Hello World 2</p>
			
			<h1 data-size="headline" data-min="12" data-max="36">Headline 3</h1>
			<p>Hello World 3</p>
		</td>
	</tr>
</table>

Change font colors

To allow the user to change the desired font color, simply add ``data-color` to your element. Want to target multiple colors? Simply give each element the exact same tag name.

<table>
	<tr>
		<td data-color="my element">Hello World</td>
	</tr>
</table>

Giving stylings to each newly created link

Sometimes you don’t want to have a new link to be the main color. You want it bold and italic. We can give separate stylings by adding data-link-style to your desired TD, Table or any element really. If you want the new link to hold a data-color or data-size, simply add 2 other tags to your TD, table or any element, like so: data-link-color and ``data-link-size`.

Here’s an example to turn each newly created link red and bold.

<table data-link-color="Link" data-link-size="Link"
 data-link-style="font-weight: bold; color: red;">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

Change border colors

Sometimes we are in a situation we want the user to be able to edit border colors. This can easily be achieved by adding the data-border-color tag. If you want to target a specific side for the border, simply use data-border-top-color, data-border-left-color, data-border-bottom-color or data-border-right-color.

If you use the same tag as the data-border-color and data-bgcolor, the picker will merge as one.

<!-- Change element border top color -->
<table data-border-top-color="my element">
	<tr>
		<td>Hello World</td>
	</tr>
</table>

Change background images

To allow users to add a background image to your element, simply add the data-bg tag.

<!-- Change background image -->
<table>
	<tr>
		<td data-bg="my element">Hello World</td>
	</tr>
</table>

Keyboard shortcuts