Здравейте приятели,

В тази публикация ще ви представя един безплатен и мощен редактор за HTML email бюлетин. Неговото име е Bee.

Защо се нуждая от Bee?

Поради няколко причини:

• Желаете вашият имейл маркетинг да е на ниво с чудесна визия и функционалност (в това число и възможност за отварянето и прочитането му на всяко едно устройство – т.е. responsive design);
• Нямате нужният опит в сферата на HTML, за да създадете ваш собствен бюлетин или нямате бюджета да наемете подходящ специалист за целта;
• Получавате една чудесна функционалност, без да се налага да влагате никакви средства;
• HTML бюлетинът се генерира незабавно и е на ваше разположение за изпращане с леки последващи редакции, които ще разясня, ако останете с мен до края на статията;

Как да работя с Bee?

Първо посетете адреса beefree.io и след това кликнете на бутона Start designing. Незабавно ще бъдете пренасочени към самия редактор.

Първоначално ще можете да изберете подходящ шаблон от предварително генерираните. Ще забележите, че са налични шаблони за различни тематики. Можете да филтрирате по една от тях или да използвате интегрираната търсачка и да търсите по категория или таг.

За целите на тази статия съм избрал един от показаните в началото шаблони и съм започнал работа по него. Държа да отбележа, че можете да работите и изцяло от нулата, като дизайнът вече ще зависи изцяло от вас. За тази цел просто трябва да изберете опцията „Start from scratch“.

Но нека да се върнем на избрания от мен шаблон за тази статия.

Самият редактор е разделен на три раздела:

• Content – тук избирате какво съдържание трябва да добавите към HTML бюлетина. Можете да поставите текст, изображение, бутон, разделител, социални бутони, HTML код.
• Structure – тук дефинирате структурата на вашия email бюлетин.
• Body – в този раздел трябва да определите генералните опции за вашия нюзлетър или имейл. Те са: ширина на зоната със съдържание, цвят на фона, цвят на фона за съдържанието, шрифт по подразбиране, цвят на линковете в HTML бюлетина.

Ако кликнете на част от съдържанието на шаблона (примерно изображение, както съм показал на скрийншота) ще видите, че можете да го промените. За целта аз съм премахнал една от поставените картинки и съм добавил логото на Optibg.com. Това съм направил чрез опцията Import и Bee е взел картинката от линка ѝ в блога. След това е добавена във временната директория за текущата редакция. По-късно, когато генерирам бюлетина, тази картинка ще бъде налична в архива, който ще получа.

На следващия скрийншот виждате, че съм редактирал и социалните бутони и съм добавил коректните линкове към профилите на Optibg.com.

Преди да приключа с работата по нюзлетъра съм избрал опцията Preview, за да се уверя, че той ще изглежда перфектно за desktop и mobile устройства.

След това вече съм пристъпил към генерирането на самия бюлетин. Това се прави с кликване на бутона в горния десен ъгъл, който се казва Save. Ще бъдете пренасочени към екран, на който трябва да изберете какво да се случи със създадения от вас HTML email бюлетин. Тъй като работим само с безплатната версия на Bee ще изберем опцията за изтегляне на нюзлетъра, който после ще обработим още малко офлайн и ще го изпратим чрез избран от нас инструмент за имейл.

Нека сега да разархивираме файла, който сме изтеглили. В него ще видите следното съдържание:

• Директория, която съдържа файловете и поддиректориите;
• HTML файл, който съдържа самия бюлетин;
• Поддиректория images, в която са поставени картинките от бюлетина;

Ако отворите с двоен клик HTML файла ще можете да го визуализирате във вашия браузър. Но ако изпратите HTML кода от файла чрез инструмент за имейл маркетинг, то ще се изпрати шаблон без картинки.

Защо ще се случи това и как да го коригираме, след като сме приключили работа с безплатната версия на Bee?

HTML кодът съдържа връзки към поддиректорията images, която в момента е в същата директория с файла на самия бюлетин. При изпращането обаче тази поддиректория ще липсва и съответно в нюзлетъра няма да има картинки. За да избегнете тази ситуация следва да предприемете следните стъпки:

• Качете всички картинки от поддиректорията images на вашия сайт и вземете техните пълни URL адреси;
• Отворете HTML файла с любимия ви редактор (примерно Notepad++ под Windows) и потърсете с търсачката файловите имена на картинките в кода. За всяка картинка ще откриете нещо подобно:

   src="images/opti_headline1.png" 

• Редактирайте кода като замените съдържанието в кавичките с пълния URL адрес за всяка картинка, която качихте преди малко. Не забравяйте да заменяте код, който отговаря на URL от вашия сайт. Тоест стремете се да поставите всяка картинка където е била генерирана от самия редактор Bee, за да няма разместване в дизайна и съответно некоректно визуализиране.

С тези стъпки сте готови за изпращане. Запазете HTML файла и вече спокойно той може да бъде изпратен чрез любимия ви инструмент за имейл маркетинг. Всички картинки ще бъдат визуализирани от вашия сайт и така няма да има загуба на съдържание.

Това е всичко за безплатната версия на Bee, приятели. Този мощен редактор има  и платен вариант, който отключва повече възможности, както и плъгин, който може да бъде интегриран във ваш уеб проект. За повече информация разгледайте официалната страница на Bee.

До нови срещи, приятели!