Mosaico конструктор html писем

Обновлено: 17.05.2024

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

Draw a wireframe of a "maximum" email, it shall contain every variation and shape of email.

In the wireframe identify the points of interaction in the email editor

Main Blocks
editable content
variation point
user selectable styling

Identify draggable blocks

Identify the smallest parts which can be dragged to the mail. These are blocks. Note that a block must be one vertical element which covers the entire width of the email. There are no nested blocks.

Decide if you need an extra block or you can handle it by variations in a block. You need to find a good compromse between having few small block (atomic blocks) and many different complex blocks.

Setup your initial environment

For sake of simplyicity, we make a very simple HTML - Template.

The marks the draggable area as well as the draggable blocks.

open index.html and add an entry

create the previews

for each block prepare a PNG thumbnail named templatefolder/edres/blockName.jpg with a width of 340px. Mosaico "demo" will also read a templatefolder/edres/_full.jpg as a preview of the master template.

start the local server

you see the selection of tempates with previews

click on "tutorial" in order to create an email which is an instance of "tutorial". In other words, the new email is based on the template "tutorial"

Create a draggable blocks

Draggable blocks is the first concept how to compose an email. Draggable blocks are taken from the block library in the left pane and copied to the email by drag and drop.

With this we have one draggable block called "HeaderAndText"

recreate the previews

start the local server again

specify editable content

create the container for the mosaico classes.

The section @supports -ko-blockdefs <> is declared in a way similar to CSS styles but they are no way related to CSS styles. In fact it is a way for the template author to declare object/properties/content types and much more. This tutorial refers the entries of this section as "mosaico-class".

A "mosaico-class" is an entity which defines values applicable for html attributes, css properties, mosaico configuration etc.

In the example here, we have created an "mosaico-class" named "text". The attribute "widget" says that it represents text.

In this case in -ko-blockdefs we have a mosaico class named "text". The attribute "widget" says that this is a text

TODO : do we really need this "text"? It seems to work even without it.

enhance the draggable block with markup for editable text

We have marked to locations as editable by the HTML-attribute 'data-ko-editable'. The value of this attribute refers to a "mosaico- class" named "text" which we have declared in the previous step.

refresh your browser

Now the header and the body are editable. If you click on it, you get a text editor. Note that if you change the header, the body changes as well. The reason is that the mosaico class "text" is referenced in both elements. In fact both elements refer to the same instance of the "mosaico-class" name "text".

to overcome this change the data-ko-editable attributes as follows:

This notation creates two different instances of the "mosaico-class" named "text". This is an implicit mechanism called "magic autodeprefix" so when you try to use a variable named "headerText" mosaico will try to see if you defined it as "headerText" (in the @supports section) and if it doesn't find it, it will look for "text" (camel-case deprefixing) and so on.

In our case we only have "text" so "headerText" and "bodyText" refers to particular instances of the "mosaico-class" name "text".

refresh your browser to see the results. You can now edit the header and the body text independent from each other.

You also observe that header text is only a single line while the body text can be paragraphs etc. Reason is that mosaico derives the editing capabiliteis from the related html element:

At this time data-ko-editable autodetect a 2 kind of editable areas.

If you apply it to or then you get a "multiline" editor (full toolbar).

If, instead, you apply it to another element, then you get a simpler editor thought for single line.

make the structure of the content customizable

The content customization is the second concept how to compose an email. Content customization allows to control the visibility and geometry parameters of an inserted block.

create a new block

We now introduce the new HTML attribute data-ko-display . The value of this attribute is a mosaico-expression. If this expression yields "true" then the HTML-element in question will be inserted in the resulting email and its content is preocessed.

enhance your style ko-blockdefs by another "mosaico-class" named "listsize"

The attributes of this class indicate that

it shall use the selector widget
the selectable options are "1", "2" or "3"

refresh the previews ( node_modules/grunt-cli/bin/grunt makeThumbs )

refresh your browser to see the results. Now you have another block with the list. Drag this block to your email.

Click into the inserted block, you see that the list has one item. The editor automatically switches to the "CONTENT" pane which provides a widget where you can select the listsize.

As you select another list size, you can observe that number of visible items changes in the email.

make the style customizable

The style customization is the second concept how to compose an email.

create a "mosaico-class" named 'color'

Hint: you do this in the CSS section @supports -ko-blockdefs

change the block definition for "fixedlist" to start with

This change introduces

the background-color is editable according to the "mosaico-class" 'color'

a default for background-color is provided

TODO : how can we provide a global default for 'color'

create a new email from the template. (Note that we introduced an incompatible change in the template. Therefore emails of the previous version cannot be loaded anymore.)

Again drag the "fixedlist" block to your email. You see that the background of the block is grey.

Switch to the "STYLES" pane. There you can change the background color for all blocks or for the current active block.

Mosaico Commercial is licensed to you with full source code access.
You are allowed to read, improve or customize the code we license to you.

Other closed source solutions lock you to what the author/supplier want you to do, and with the timing and prices imposed unilaterally.

On-premise

You host Mosaico library on your own server and will run in your end-users browsers.

The backend services needed by Mosaico are minimal and under your control and you can easily share the "image gallery" between Mosaico and your legacy (or alternative) email editing tool.

Perpetual license

You get a perpetual license with a one-off payment, including upgrades and support for 3 to 12 months (depending on the package).

You can choose either to buy further licenses or keep using your original license for free.

Template based

We provide you with a best in class general purpose master template and you can tweak it to your needs.

You can add new blocks, add or remove customization of a given style or even write your own template from scratch, without looking at Mosaico sources.

The "what if's" of unexpected or unpredictable events.

Network Failures

You host Mosaico library on your own servers, the same servers already running your service, so you don't add a new POF (point of failure).

When you integrate external services hosted on different hardware/networks you "accept" that sometimes the the service could not be available, even with a 99.99% SLA, you can't prevent routing issues from happening around the world.

Business shutdown

You should always prepare for the worse. What if your product, in order to work, relies on features hosted by a Vendor whose business fails?

With Mosaico you are on firm ground, but what if you used an hosted email builder? You will have to migrate all of your contents to a new platform in a very short time frame, and your users will probably not be happy.

Price Increment

With Mosaico there are no recurring fees, so you are not forced to accept new prices: you know what you paid for and you can use it forever.

You can see there are hundreds of developers out there that already forked Mosaico opensource and know how to put their hands in the library, so you can find new partners without destabilizing your end-users with a whole new product.

Stale Product

We are motivated to improve Mosaico in the long term: with no "recurring fees" we can't expect big earnings if we don't keep up creating new value.

If you choose an hosted/closed source product then you can either stay or leave to a different product. With Mosaico you have the option to evolve the product on your own, or find another partner to evolve it to your needs.

Pricing

MAU - Monthly Active Users:
the pricing is based on the maximum number of end-users actively using Mosaico - by executing the library in their browser - for each calendar month.

To make it simpler, if you have multiple users sharing the same storage for emails and images and having the same permissions over that storage end-point, then you can count them as a single user.

MAU Limit	Support & Updates	Price
50 users	3 months	800 € + VAT
200 users	1 year	2.400 € + VAT
500 users	1 year	4.000 € + VAT
2.000 users	1 year	8.000 € + VAT
5.000 users	1 year	15.000 € + VAT

Do you need further commercial information?

If you have any question about MOSAICO Commercial Edition,
write us at sales @ this domain!

MOSAICO.io email builder proudly brought to you by italian email marketing firm VOXmail.it

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Mosaico - Responsive Email Template Editor

Mosaico is a JavaScript library (or maybe a single page application) supporting the editing of email templates. The great thing is that Mosaico itself does not define what you can edit or what styles you can change: this is defined by the template. This makes Mosaico very flexible.

At this time we provide a single "production ready" template to illustrate some best practice examples: more templates will come soon! Have a look at Template Language and get in touch with us if you want to make your email html template "Mosaico ready".

More Docs from the Wiki

Build/Run with the development backend

You need NodeJS v8.0 or higher + NPM 8.3 (because of "overrides" support in package.json you need npm 8.3 if you want to change/upgrade dependencies, but it should work with older npm, too, if you rely on package-lock.json)

Download/install the dependencies (run again if you get an error, as it probably is a race issues in npm)

if you don't have it, install grunt-cli globally

We bundle a Dockerfile based on Alpine linux and another based on Centos 7 to test mosaico with no need to install dependencies.

then open a browser to point to the port 9006 of your docker machine IP.

Deploying Mosaico via Apache PHP or Django or something else?

First you have to build it using grunt, then you MUST read Serving Mosaico.

OpenSource projects including/using Mosaico

MailTrain is a full featured newsletter web application written in Node and support email editing via Mosaico since their 1.23.0 release.

GoodEnough's Mosaico born as a Mosaico fork, now have become a full web application product built around Mosaico editing targeting agencies.

CiviCRM is an open source CRM built by a community of contributors and supporters, and coordinated by the Core Team. CiviCRM is web-based software used by a diverse range of organisations, particularly not-for-profit organizations (nonprofits and civic sector organizations). CiviCRM offers a complete feature set out of the box and can integrate with your website.

Are you having issues with Mosaico?

Please contact us if you have ideas, suggestions or, even better, you want to collaborate on this project ( feedback at mosaico.io ) or you need COMMERCIAL support ( sales at mosaico.io ) . Please DON'T write to this email to get free support: use Git issues for that, start the issue subject with "[help] " prefix, and write something to let us know you already read the CONTRIBUTING file.

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

Mosaico - Responsive Email Template Editor

More Docs from the Wiki

Build/Run with the development backend

Download/install the dependencies (run again if you get an error, as it probably is a race issues in npm)

if you don't have it, install grunt-cli globally

We bundle a Dockerfile based on Alpine linux and another based on Centos 7 to test mosaico with no need to install dependencies.

then open a browser to point to the port 9006 of your docker machine IP.

Deploying Mosaico via Apache PHP or Django or something else?

First you have to build it using grunt, then you MUST read Serving Mosaico.

OpenSource projects including/using Mosaico

MailTrain is a full featured newsletter web application written in Node and support email editing via Mosaico since their 1.23.0 release.

GoodEnough's Mosaico born as a Mosaico fork, now have become a full web application product built around Mosaico editing targeting agencies.

Are you having issues with Mosaico?

На сегодняшний день почта в интернете чаще используется для различного вида рассылок, нежели для простого общения. Из-за этого становится актуальной тема создания HTML-шаблонов, предоставляющих куда больше возможностей, чем стандартный интерфейс практически любого почтового сервиса. В этой статье мы рассмотрим несколько наиболее удобных веб-ресурсов и настольных приложений, предоставляющих возможность решения данной задачи.

Конструкторы HTML-писем

Подавляющее большинство существующих на сегодняшний день средств для конструирования HTML-писем являются платными, но у них есть пробный период. Это следует учитывать заранее, так как использование подобных сервисов и программ будет нецелесообразным для отправки нескольких писем — по большей части, они ориентированы на массовую работу.

Mosaico

Единственный в рамках нашей статьи максимально доступный сервис, не требующий регистрации и предоставляющий удобный редактор писем. Весь принцип его работы раскрывается прямо на начальной странице сайта.

Процедура редактирования HTML-писем происходит в специальном редакторе и заключается в составлении дизайна из нескольких подготовленных блоков. При этом каждый элемент оформления можно изменить до неузнаваемости, что придаст вашим работам индивидуальности.

После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.

Tilda

Редактор писем содержит множество инструментов как для создания шаблона с нуля, так и для корректировки стандартных образцов.

Итоговый вариант разметки можно будет получить после публикации на специальной вкладке.

CogaSystem

Как и предыдущий онлайн-сервис, CogaSystem позволяет одновременно создавать HTML-шаблоны писем и организовывать рассылку на электронную почту, указанную вами. Во встроенном редакторе есть все необходимое для создания красочных почтовых рассылок с использованием веб-разметки.

GetResponse

Последним онлайн-сервисом в рамках настоящей статьи является GetResponse. Данный ресурс по большей части ориентирован на почтовые рассылки, а имеющийся в нем HTML-редактор является, скорее, дополнительным функционалом. Им можно воспользоваться как на бесплатной основе с целью проверки, так и путем приобретения подписки.

ePochta

Практически любая программа для почтовой рассылки на ПК обладает встроенным редактором HTML-писем по аналогии с рассмотренными онлайн-сервисами. Наиболее актуальным софтом является ePochta Mailer, содержащий большую часть функций почтовых сервисов и удобный редактор исходного кода.

Основное достоинство при этом сводится к возможности бесплатного использования HTML-конструктора, в то время как оплата необходима только для непосредственного создания рассылки.

Outlook

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Заключение

Мы рассмотрели лишь некоторые из существующих сервисов и приложений, однако при углубленном поиске в сети можно найти множество альтернативных вариантов. При этом стоит помнить о возможности создания шаблонов напрямую из специальных текстовых редакторов при должном знании языков разметки. Такой подход является наиболее гибким и не требует финансовых вложений.

Мы рады, что смогли помочь Вам в решении проблемы.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Читайте также: