Warning: Undefined array key "HTTPS" in /home/host1327411/biz-iskun.ru/htdocs/www/wp-content/plugins/wpHideLinksPro/HideLinksPro.php on line 282
Kompozer, программа для новичка. Блог Ивана Кунпана

Kompozer, программа для новичка

                                                                                                              

Здравствуйте друзья! В статье мы рассмотрим программу Kompozer, с помощью которой мы научимся создавать подписные и продающие страницы.

Подписная страница в Kompozer за час

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

Создавать продажник по шаблону будет сложнее, поэтому её лучше сделать с нуля. Для создания подписных и продающих страниц (лендинг)существуют различные программы (конструкторы). Одной из таких программ является программа KompoZer и её прародитель Nvu – по сути это одна и та же программа.

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

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

Итак, программа бесплатная, для начала надо скачать её к себе на компьютер. Если просто Вы попытаетесь её скачать с официального сайта Kompozer.net – Вы получите англоязычную версию. Поэтому поступаем следующим образом. Заходим в любой браузер и прописываем в адресной строке следующий адрес froggy-soft.ru/KompoZer.html и нажимаем Enter.

Нам будет предложено скачать программу Композер, в новом окне может быть предложено, скачать программу NVU, скачивайте смело, это одно и то же. Программу, которую я скачивал с этого портала, была русифицирована. Теперь её надо разархивировать и установить на компьютер, делается это за минуту.  Можно зайти сюда http://kompozer.net/download-07.php#l10n и скачать русифицированную версию (смотрите скрин). В последнее время предыдущая ссылка иногда не работает, поэтому можете зайти сюда и скачать русифицированную версию [urlspan]здесь[/urlspan].

Подписная_старница_1

Можно найти версии программы для Windows, Mac и других операционных систем.

После запуска программы она открывается в таком виде (смотрите скрин 2).

Подписная_старница_2

Скрин 2

Выделенные различными цветами функции нам пригодятся для работы. Коротко их опишу. При нажатии кнопки «Файл» мы будем часто использовать функции «Открыть файл» и «Сохранить». То есть если нам надо загрузить в программу шаблон подписной или продающей страницы, либо ранее созданный свой лендинг, мы загружаем его с компьютера с помощью кнопки «Открыть файл». Если мы провели работы с подписной страницей, то каждое действие сохраняем через кнопку «Сохранить».

Если выполненное действие надо отменить, то мы нажимаем кнопку «Правка» и «Отменить». Кнопки «Вставка», «Формат» будут использоваться для создания страницы, и функционал этих кнопок увидим по ходу работы. Создание лендинга начинается с создания таблицы, поэтому будем использовать функцию «Таблицы», выделено коричневым цветом. Для вставки на подписную страницу изображений и ссылок, будем использовать функции «Изображение» и «Ссылка».

Для работы с текстом, будем использовать выбор шрифта (ниже поля выбора жирный и курсив), выбор цвета шрифта (выделено розовой рамкой). Размер шрифта регулируется стрелками над буквами «А» — большая буква увеличивает шрифт, маленькая, уменьшает (подчеркнуто на скрине, синим цветом).

Далее можем выбирать шрифт жирный, курсив, подчеркнутый, а также выравнивание текста на странице. Можно текст смещать от края страницы, подчеркнуто зеленым.

Теперь, когда разобрались с функционалом, перейдём к созданию тестовой подписной страницы. Для начала надо определиться с геометрическим размером (с шириной) нашей подписной страницы, обычно её делают 600-900 px. Выбираем ширину 800 px.

Теперь идём в меню программы и нажимаем «Таблица» (смотрите скрин 2). Открывается окно «Вставка таблицы».

Подписная_старница_3

С помощью функции таблицы мы можем будущую подписную разбить на несколько прямоугольников, на несколько полей, но нам это не надо, нам надо создать простой одностраничник, поэтому выбираем одну ячейку по горизонтали и одну по вертикали, нажимаем кнопку «Ок».

В окне программы появился проект нашей таблицы. Нажимаем правой кнопкой мыши на таблицу и выбираем «Свойства ячейки таблицы».

Подписная_старница_4

Открывается окно таблицы, в верхнем левом углу выбираем «Таблица», в полях «Высота», «Ширина» выставляем размерность в пикселях (в процентах будет неудобно). Мы уже решили, что ширина лендинга будет 800 px, поэтому прописываем ширину 800 (смотрите скрин).

Подписная_старница_5

Скрин 5

Далее проставляем размеры рамки и полей, я сделал рамку 5 px. Теперь выравниваем таблицу по центру и нажимаем «Применить» «Ок».  Как видим, сформирована заготовка для создания подписной страницы нужного размера, остается наполнить подписную страницу содержимым.

Подписная_старница_6

Перед заполнением лендинга, надо выполнить подготовительные работы. Для этого создаем на компьютере отдельную папку с названием нашей подписной страницей (написать лучше на латинице). Теперь присваиваем имя файла будущей подписной в Kompozer, для этого идём в «Файл», нажимаем «Сохранить как». Имя присвоить лучше index и сохраняем файл в заранее созданную папку. В эту же папку обязательно надо загрузить все картинки, которые мы собираемся использовать в подписной странице, причем их название должно быть написано на латинице.

Текстовую часть можно набирать в самой программе Kompozer, а можно сделать заготовку в Word, мне больше нравится делать предварительную заготовку текста в Word.

Подписная_старница_11

Скрин 7

Печатаете или переносите заголовок, подзаголовок и текст в таблицу, выравниваете заголовок по центру с помощью функционала (смотрите скрин 2), делаете шрифт нужного размера и цвета. Иногда для выравнивания заголовка по центру надо переместить курсор на следующую строку, а затем уже центровать. В основном там всё просто.

Для того чтобы вставить в нужное место картинку, устанавливаем курсор в нужное нам место страницы, нажимаем кнопку «Изображение» (смотрите скрин 2). В открывшемся окне нажать кнопку «Выбрать файл» (скрин),

Подписная_старница_7

выбрать нужное изображение именно из той папки, где лежит наш файл index и нажать «Открыть». Напомню, мы туда должны были заранее перенести нужные нам изображения, иначе они не откроются в браузере.

В строке «Адрес изображения» автоматически пропишется название вставляемой картинки, галочка «Относительный URL» должна стоять, желательно заполнить поле «Альтернативный текст», либо отметить поле «Не использовать альтернативный текст» и нажимаем «Ок». Если размер изображения нужно скорректировать, то это делается с помощью кнопки «Размеры», «Задать размер», там ничего сложного нет. Если курсор будет по центру, то и изображение будет по центру.

Под рисунком мы делаем нужные нам записи, например, «Прочитав эту книгу, Вы узнаете» и далее перечисляете выгоды. Различные галочки вставляются как отдельные рисунки напротив каждой строчки текста, их надо тоже заранее поместить в папку.

Теперь рассмотрим, как установить форму подписки, либо кнопки социальных сетей, всё то, что связано с установкой через код HTML. Делается это просто. Предварительно генерируем форму подписки, например, в SmartResponder и сохраняем полученный код формы подписки. Это отдельная тема, поэтому её здесь рассматривать не будем.

Теперь выбираем место, куда надо установить форму подписки на подписной странице (я поставил слева) и нажимаем правой кнопкой мыши, теперь выбираем «Вставить таблицу», «Таблица».

Подписная_старница_8

Теперь таблицу устанавливаем по центру, выше мы рассматривали, как это делать.

Ставим курсор внутрь таблицы, идем в меню «Вставка», выбираем «HTML» (смотрите скрин),

Подписная_старница_9

«Вставка», всё наша форма подписки установлена. Таким же путём мы можем установить и кнопки социальных сетей.

Теперь рассмотрим, как установить ссылку на элемент текста. Предположим нам надо сделать кликабельным выражение «Служба технической поддержки». Пишем текст, выделяем его. Нажимаем на кнопку «Ссылка» (скрин 2), в открывшемся окне вставляем нужную ссылку и нажимаем «Ок», не забываем нажать «Сохранить». Да и еще, надо сделать так, чтобы ссылка открывалась в новом окне. Как это сделать показано d статье «Как открыть ссылку в новом окне«.

 Всё, вставленная ссылка рабочая. Как это проверить? Для этого идём в папку, где сохранён файл index. Находим файл, нажимаем по нем правой кнопкой мыши и выбираем «Открыть с помощью», выбираем любой браузер Mozilla, Chrome и т.д. Страница откроется так, как она будет открываться у посетителя сайта. Кликнув по ссылке легко убедиться, что она рабочая.

И в заключении рассмотрим, как улучшить дизайн страницы с помощью фона. Для этого идем в меню, нажимаем «Формат», «Цвета и фон страницы», отмечаем поле «Использовать цвета», нажимаем на окошко «Фон».

Подписная_старница_10

Выбираем цвет и нажимаем «Ок». Получилась окраска не только фона, но и всей подписной страницы. Далее нажимаем правой кнопкой мыши по подписной странице, «Выделить таблицу», «Таблица». Снова нажимаем правую кнопку и выбираем «Свойства таблицы», открывается окно настройки таблицы (скрин 5), нажимаем на «Цвет фона», выбираем, например, белый и «Ок». Как видим, есть выбранный фон, а подписная страница осталась белой (скрин 7).

Таким же образом можно переделывать чужие подписные или продающие страницы под себя, для этого достаточно загрузить файл index другого одностраничника в программу Композер. Далее последовательно изменяете текст, ненужные картинки вырезаются и вставляются свои, изменяются ссылки, корректируется дизайн. Если Вы захотите сделать свою подписную или продающую страницу с помощью программы Kompozer, Вы можете скачать мой видео-курс «Как сделать подписную страницу новичку» или купить платный курс за символическую цену «Как создать подписную и продающую страницу за три шага новичку«.

После завершения всех работ, папка, которая была создана для нашей подписной (продающей) страницы закачивается на сайт (блог), например, через FTP.

Нельзя сказать, что программа сложная в работе, все очень просто. Но для того, чтобы в будущем создавать подписные и продающие страницы за короткий промежуток времени, надо потренироваться и всё получится.

С уважением, Иван Кунпан.

Просмотров: 8946
22 комментариев на “Kompozer, программа для новичка
Татьяна
12.08.2014 в 06:07

Простая и удобная программа! Очень удобна для тех, кто не хочет или не любит «ковыряться» в коде. Спасибо за статью!

16.08.2014 в 22:33

Согласен с Вами, работа в в программе Композер сэкономит массу времени и даст нужный результат.

еВГЕНИЙ
29.12.2018 в 22:34

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

09.01.2019 в 14:04

Евгений, статья написана давно, а в Интернете все быстро меняется. Вполне возможно, что ссылки не работают. У меня программа скачана и ее можно открыть в любой момент. Если Вам понадобится эта программа — напишите, я вышлю ее Вам!
Сегодня есть много других, современных программ, но большинство из них платные. Так что Композер хорошее подспорье для новичков.

Евгений
14.03.2019 в 17:50

Иван, если возможно, вышлите мне дистрибутив Композера? С уважением, Евгений

15.03.2019 в 13:16

Евгений, можете взять отсюда, это проверенная программа https://yadi.sk/d/xm_bm_5CQa-sMQ Можете работать, не устанавливая ее, достаточно только скачать.

еВГЕНИЙ
29.12.2018 в 22:29

Программа —— ни один сайт ни одна ссылка не работает

09.01.2019 в 14:04

Я ответил Вам в предыдущем комментарии.

22.08.2014 в 19:24

Тогда можно и без Дримвивера создавать страницы.

23.08.2014 в 11:26

Да, можно. Но если глубоко вникать в эти вопросы, то надо смотреть конкретно возможности каждой программы. Ведь каждая программа имеет свои плюсы и минусы.

25.04.2015 в 21:50

Знаю фрилансеров которые всерьёз не воспринимают Композер. Кому как. Для новичков — это неплохой выбор.

26.04.2015 в 18:59

Возможно, так, но меня устраивает эта программа.

татьяна
19.10.2015 в 22:14

здравствуйте! У меня вопрос: возможно ли в композере сделать версию для слабовидящих, если да, то каким образом

20.10.2015 в 13:24

Не совсем понял, что значит сделать страницу для слабовидящих? Поясните, если можно.

Сергей
17.03.2016 в 13:06

Вот только не понятно как эту замечательную программу русифицировать. Вот бы по настройкам пройтись. Что там да как.

17.03.2016 в 14:43

Сергей, эта программа руссифицирована. Если хотите можете скачать мой бесплатный курс, там есть программа Композер, она руссифицирована. Так Вам будет проще получить программу без вирусов и т. д. А потом сможете от меня отписаться, если захотите. Вот ссылка https://biz-iskun.ru/videokurs_kak_sozdat_podpisnuyu/ Просто отдельно программа у меня нигде не закачана.

17.04.2016 в 14:25

Здравствуйте, Иван. На ваш блог придешь и не уйдешь… Подскажите WP-page, это сродни программе Композер? В WP-page тоже создаются продающие страницы, это вроде плагина к сайту, его надо устанавливать на сайт, зато на нем создаются лендинги. Он платный, подскажите, а можно, купив его, установить на несколько сайтов? Спасибо.

17.04.2016 в 17:30

Марина, WP-page это плагин, который работает с WordPress, с его помощью можно создавать подписные и продающие страницы. Задачи они решают с Композером одинаковые. С помощью WP-page Вы собираете лэндинг, как конструктором, используете, по сути, шаблонные варианты. Делается быстро, но хороший дизайн сложно получить. В Композере есть возможность проявить больше творчества, но зато дольше.

Точно не помню, но кажется раньше плагин WP-page стоил 10 долларов (300 рублей), ограничений там не должно быть. Его я не покупал. Но если Вы хотите узнать, сможете это сделать в Интернете.

Дарья
21.06.2017 в 13:58

Подскажите пжста, почему в kompozer ссылки вида <a href="[[=lib.ext.ACTIONMEDIA.AutoLoginLink("e.glmedsestra.ru/article.aspx?aid=561957&utm_source=lettermarket&utm_medium=letter&utm_campaign=lettermarket_gms_demo_22062017_readers_25992");]]" преобразуются в "%5B%5B=lib.ext.ACTIONMEDIA.AutoLoginLink%28" http:=""
e.glmedsestra.ru=""
articleannounce.aspx?aid="561658&utm_source=lettermarket&utm_medium=letter&utm_campaign=lettermarket_gms_demo_20062017_readers_32588");]]"", никак не могу в настройках эту ситуацию исправить…

21.06.2017 в 14:48

Дарья, мне сложно судить, ведь я не знаю, где у Вас отображается эта ссылка. Если это на Вашем блоге, то это может быть из-за отсутствия плагина Cyr to Lat…

Виталий
08.06.2019 в 22:17

Уважаемый Иван ,а у вас есть видео как сделать подписную страницу примерно вот такую yadi.sk/i/ThttKqo7rcRV6w Спасибо.

09.06.2019 в 12:01

Виталий, Вы можете скачать мой бесплатный видеокурс — там есть все пошаговые видео. Однако нужно понимать, что Композер уже устарели многие сервисы не поддерживают старые коды. Все остальные программы платные. Поэтому есть два варианта — купить современную программу для создания подписных и продающих страниц, либо использовать бесплатный Композер, но в сочетании с бесплатным сервисом Falcon Sender. На этом сервисе поддерживаются подписные и продающие страницы, сделанные в Композере. Кроме того, там можно бесплатно собирать до 1000 подписчиков и отправлять им письма. Для начала вполне достаточно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *