Выберите шаблон

На конструкторе более 3000 шаблонов сайтов

Внесите свои изменения

В нашем редакторе очень просто отредактировать сайт

Сайт готов

Все готово! Теперь можно заниматься его продвижением.

Шаблоны сайтов бесплатно

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

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

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

В данном разделе собраны шаблоны landing page для самых разных видов бизнеса: от готовых рекламных сайтов по продаже товаров через интернет и продвижению различных услуг до обучающих курсов и тренингов. Эти темы подбираются специалистами, которые отвечают за актуальность и релевантность идеи для бизнеса на современном рынке, и затем шаблоны создаются на основе этих идей, соблюдая при этом все правила при оформлении и размещении блоков в самом шаблоне. Данная работа проделывается специально для того, чтобы улучшить и облегчить работу для вас. Именно поэтому вы можете в то или иное время установить любой шаблон лэндинг пейдж бесплатно из предложенных готовых сайтов любое количество раз.

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

Бесплатные шаблоны landing page

1. Пройдите регистрацию на нашем конструкторе. При регистрации вам даётся 14 дней бесплатного использования, что позволяет вам экономить бюджет на начальном этапе.

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

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

4. Сохраните ваш готовый шаблон посадочной страницы. И, в целом, не забывайте сохранять ваши действия, которые вы бы не хотели потерять. Любые неполадки с интернетом или компьютером, и все ваши труды придётся восстанавливать.

Все эти бесплатные шаблоны landing page разрабатывали 4 специалиста, которые подготовили готовые тексты для разных бизнес лендингов, тщательно подбирали картинки, структуры и видео, чтобы вы на данном примере понимали, как создать лендинг пейдж или в дальнейшем многостраничный сайт. Каждый шаблон лэндинга — это готовый сайт под ключ под разные бизнес-проекты, который нужно просто установить и начать использовать его в своих целях. Это очень удобно, ведь для этого не нужно быть ни дизайнером, ни верстальщиком, или иметь какие-нибудь специальные навыки правильного оформления и написания кодов. Просто примените понравившийся шаблон лендинг пейдж и начните зарабатывать прямо сейчас, так как вы можете создать сайт самостоятельно всего за пару часов и запустить его в работу.

Как создать готовый сайт

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

Именно поэтому здесь вы найдете бесплатные шаблоны сайтов одностраничников по продаже строительных, юридических и бухгалтерских услуг, по продаже товаров различного направления, шаблоны продающих страниц по оптовым продажам сельхозпродукции и готовых продуктов, а также множеству других направлений, которые можно использовать, как идеи для бизнеса. Также готовые шаблоны лендинг пейдж бесплатно предоставят вам возможность начать свой бизнес в сети Интернет по продаже курсов и тренингов. Они особенно популярны в последнее время. Готовые сайты с админкой уже подстроены под ваши условия и требования. Для того, чтобы найти подходящий шаблон landing page, выберите подходящую категорию справа и просмотрите появившиеся шаблоны. Можно также воспользоваться поиском.

  • Tutorial

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

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG - это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript"ом.

Что же, начнём?

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

Готовим карту Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.

Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)

Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов Стили fill и stroke, зато взамен даю этим элементам нужные мне class и id. Например, class=«area» для регионов и class=«city» для городов.

Далее, в секции изображения помещаем до боли знакомое:
.area { stroke: black; stroke-width: 2px; fill: #E9FFE9; } .city { stroke: black; stroke-width: 2px; fill: red; }
Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff .

Результат:

Вставляем SVG в HTML Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG .

Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:

Все браузеры, поддерживающие SVG , его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).

Второй правильный метод - вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже . Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML"ем. Так что кавычки и закрывающие теги обязательны.

Подводные грабли Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:

Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
viewBox="0 0 493 416" Diff .

После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента , а не увеличить высоту согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры.


Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" "); var aspectRatio = viewBox / viewBox; svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio); Diff .

Результат:

Взаимодействуем с SVG Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно - он уже часть DOM веб-страницы.

Получить доступ к SVG, вставленным через чуть сложнее:
jQuery(window).load(function () { // Нам нужно дождаться, пока вся графика (и наша карта тоже) загрузится, поэтому используем window.onload, var svgobject = document.getElementById("svgmap"); // Находим тег if ("contentDocument" in svgobject) { // У нас действительно там что-то есть? var svgdom = jQuery(svgobject.contentDocument); // Получаем доступ к объектной модели SVG-файла // Теперь делаем свою работу, например: jQuery("#figure1", svgdom).attr("fill", "red"); // Находим тег с id="figure1" в SVG DOM и заливаем его красным } });
Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам (jQuery(".class")). Приходится извращаться.

Заметьте, что я использую событие window.onload, так как нам необходимо дождаться полной загрузки страницы, вместе со всеми связанными элементами (в числе которых и наша карта). Однако и тут Google Chrome спешит подложить нам свинью: в том случае, если скрипт с window.onload находится в html-коде до тега , то код в обработчике выполняется ДО того, как карта на самом деле загрузится. Поэтому тег необходимо разместить после нашей карты. Sad but true.

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

Здесь мы будем при щелчке по флажку ставить или убирать класс selected у соответствующей области на карте, а так уже у самой строки. Это несложно:
$("#areas input").change(function() { var row = $(this).parent().parent(); var id = row.attr("id"); if (this.checked) { row.addClass("selected"); $("#"+id, svgdom).myAddClass("selected"); } else { row.removeClass("selected"); $("#"+id, svgdom).myRemoveClass("selected"); } });
Соответственно, нужно добавить и стилевые определения для данного класса. Предоставляю вам это сделать самостоятельно, согласно своих вкусов и предпочтений. Diff .

Интерактивность вторая: вскрываем/показываем названия на карте щелчком по чекбоксу на странице. Это взаимодействие делается ещё проще. Вставляем на страницу и немножко яваскрипта, который добавляет/удаляет всем связанным с названиями элементам на карте класс hidden {visibility: hidden;} :
$("#titleswitch").change(function () { var elements = $(svgdom.getElementsByClassName("areatitle")) .add($(svgdom.getElementsByClassName("citytitle"))) .add($(svgdom.getElementsByClassName("titlebox"))) .add($(svgdom.getElementsByClassName("titleline"))); if (this.checked) { elements.myAddClass("hidden"); } else { elements.myRemoveClass("hidden"); } });
Вот так .

Интерактивность третья: подсвечиваем районы на карте при наведении на строку таблицы (и наоборот) Для этого необходимо повешать обработчики события onhover как на таблицу:
// Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы. $("#areas tr").hover(function () { var id = $(this).attr("id"); $("#"+id, svgdom).myAddClass("highlight"); }, function () { var id = $(this).attr("id"); $("#"+id, svgdom).myRemoveClass("highlight"); });
…так и на районы на карте:
// Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте $(svgdom.getElementsByClassName("area")).hover(function () { var id = $(this).attr("id"); $("#areas #"+id).addClass("highlight"); }, function () { var id = $(this).attr("id"); $("#areas #"+id).removeClass("highlight"); });
Для того, чтобы мы это видели, добавим соответствующие CSS-правила в страницу:
tr.highlight, tr:hover, tr:nth-child(even):hover { background: lightyellow; } …и в SVG-карту: .highlight, .area:hover { fill: lightyellow; stroke: black; }
При наведении мышкой на строку таблицы (или на район на карте) на соответствующий район на карте (на строку таблицы) вешается нужный для подсвечивания класс. Чтобы приведённый выше код работал, необходимо, чтобы у районов на карте и строк таблицы были совпадающие (или схожие) id. Diff .

Интерактивность четвёртая: Отображаем данные со страницы на карте Ну что же, банальное присваивание классов, наверное, уже наскучило. Пускай карта нам показывает на себе какие-нибудь данные.

Перво-наперво: данные. Добавим к нашей табличке пару столбцов, например «Люди» и «Деньги». Внимание : Данные взяты от балды и никакого отношения к реальному Аместрису не имеют. А так же радиокнопки, по которым будем переключать, какие данные показывать.

Во-вторых, нам нужно место на карте, где будут отображаться данные. Добавим на карту пять блоков (по одному на каждый регион, соотнеся их id с регионами) и соответствующие стили в :

Ну и JavaScript-код, который будет брать данные из ячеек таблицы и помещать в блоки текста:
$("input").change(function () { var descnum = $(this).parent().prevAll().length+1; $("#areas tbody tr").each(function() { var id = $(this).attr("id").substring(4); var value = $(this).children(":nth-child("+descnum+")").text(); $("#text"+id, svgdom).text(value); }); });
И по переключению радиокнопок карта будет показывать нужные цифры. Вуаля !

Интерактивность пятая: всплывающие подсказки Возможно, это уже и лишнее, но пусть будет. Для ровного счёта.

Для данного взаимодействия возьмём плагин jQuery.tooltip и привяжем его к областям на карте. Текст для подсказок будем брать, конечно же, из таблицы:
$(svgdom.getElementsByClassName("area")).tooltip({ bodyHandler: function() { var id = $(this).attr("id"); var area = $("#areas #"+id+" td:nth-child(2)").text(); var result = $("

").append($("").text(area)); $("#areas #"+id+" td:nth-child(2)").nextAll().each(function(){ var pos = $(this).prevAll().length+1; var title = $("#areas thead th:nth-child("+pos+")").text(); var value = $(this).text(); result.append($("

").text(title + ": " + value)); }); return result; } });


Diff .

И так далее… Разумеется, этим возможности взаимодействия с SVG не ограничиваются. Вы можете делать всё . Перетасовывать DOM, менять страницу и SVG по AJAX-запросам и многое, многое другое. Дерзайте.Результат
Оставшиеся подводные камни Из известных проблем пока что можно отметить, что Google Chrome не выводит на печать SVG-картинки. Это или его баг или баг WebKit в целом.Обратная совместимость Почти все современные браузеры поддерживают SVG: IE 9+, Opera 8+, Firefox 3+ (в Firefox 1.5+ частичная поддержка), Chrome всех версий, Safari 3.2+ (более полный список)

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

Стандартный и самый простой путь, если SVG - это просто картинка: вставляем замещающее содержимое (отрендеренную в PNG картинку и абзац текста) внутрь тега .

К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.


Если в браузере поддержки SVG нет, будет показана PNG-картинка и текст, уведомляющий пользователей, что их браузер устарел. Никакого интерактива. Впрочем, он, может быть, не очень-то и нужен. Правда, есть один минус - как я заметил, современные браузеры упорно скачивают себе замещающую png-картинку, несмотря на то, что они её всё равно не отобразят.

Желающие могут воспользоваться детектированием поддержки SVG с помощью Modernizr и наворотить на яваскрипте что-нибудь посложнее.

В более сложных случаях вам могут помочь многочисленные решения на Flash, VML или Canvas (или на всех вместе). Список можно посмотреть здесь: HTML5 Crossbrowser Polyfills , но те решения, которые я опробовал, мне, к сожалению, не помогли. Возможно потому, что тот SVG c CSS"ом, что я набросал на коленке - оказался им не по зубам.

Конвертирование SVG в PNG В сети есть много мест, где можно конвертнуть SVG-картинку во что-нибудь другое. Я же предложу воспользоваться командой rsvg-convert из пакета librsvg2-bin . Примерно вот так:
cat map.svg | rsvg-convert > map.png
Впрочем, она может преобразовывать и в другие форматы, а так же увеличивать/уменьшать картинку, смотрите --help.
Для массовых преобразований можно сочинить команду посложнее или посмотреть примеры в Добавить метки

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

ШАГ 1. Подготовка базовой HTML разметки

Добавьте код ниже:

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

ШАГ 2. Создание SVG елементов

Для дальнейшей работы вам необходимо установить программу позволяющую работать с svg графикой Inkscape . После установки программы смело запускайте её. Открывайте ваше изображение в этой программе во вкладке «файл» и «открыть…» . В моём случае это изображение карты мира. Затем нажимайте на кнопку в правом нижнем углу «Просмотреть и изменить XML «. У вас после нажатия на эту кнопку в правой части экрана появится соответствующий виджет.

После выделения выберите появившуюся строку выделенной вами части изображения в редакторе xml. Затем выберите поле d этого елементаи скопируйте его содержимое немного ниже.

В поле d будет довольно большой объем координат. Копируйте это все и вставляйте в вашем HTML коде в атрибут d елемента path .

После добавления координат можете обновить страницу. Вы увидите, что появился черная проекция изображения, которую вы обводили ранее.

ШАГ 3. Добавление стилей

Для того, чтобы все это дело нормально отображалось, нам нужно добавить такие стили нашим елементам:

Map { position: relative; text-align: center; } svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } path { opacity: 0.4; fill: orange; cursor: pointer; transition: 0.3s; } path:hover { opacity: 0.8; transition: 0.3s; }

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

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

Все! Теперь вы сделали свою первую интерактивную svg карту.