В прошлый раз я писал о том, почему не стоит выбирать конструктор, как площадку для создания сайта. Сегодня я хочу поговорить о том, в каких случаях можно сделать сайт на конструкторе.
Нужно быстро запустить сайт.
Запустить сайт на конструкторе можно за 30 минут, это правда. Если же вы закажете сайт у разработчиков, сначала с вами будут вести диалог о вас и вашем бизнесе, чтобы разработать для вас лучшее решение. Потом дизайнер сделает макет, верстальщик создаст по этому макету сайт. На это может уйти от 5 дней.
Протестировать идею.
В торговле в интернете скорость реагирования играет важную роль. Если вам нужно быстро протестировать решение, получить первых клиентов, сайт на конструкторе — отличный вариант. Вы сможете за короткое время протестировать тексты, расположение блоков, то есть то, что влияет на конверсию сайта.
Разовая сделка.
Когда вам нужно продать какой-то товар или услугу(или привлечь внимание к конкретному мероприятию) только один раз, вы не будете вкладывать большой бюджет ради продажи одного участка(или одной квартиры), а после продажи просто удалить этот сайт или оставить лежать без дела.
Если выбирать конструктор сегодня, это однозначно Тильда, удобный и недорогой конструктор.
Если материал был вам полезен — поставьте лайк этой записи:)
Возникли сложности с созданием сайта на конструкторе? Напишите мне и мы что-нибудь придумаем.
Можете посмотреть демо чтобы увидеть как будет выглядеть результат. В колонке JS сверху расположен код JQuery, ниже JavaScript.
В самом начале объясню схему, по которой мы будем делать табы:
Добавим вкладкам и блокам с их содержимым классы с приставкой js- для обращения к ним из JavaScript.
Добавим data атрибут data-tab для идентификации наших табов. Некоторые делают табы по индексу элемента в dom-дереве, я так делать не буду, это не гибкая конструкция.
При клике на вкладку, удалим активный класс у всех вкладок, добавим той, по которой кликнули, удалим активный класс у всех блоков с содержимым и добавим тому, у которого значение атрибута data-tab такое же как у атрибута data-tab нашей вкладки.
Про приставку js.
Мы добавляем отдельный класс для манипуляций из js потому что, на один класс могут быть завязаны стили, которые в дальнейшем могут быть заменены. Приставка js даст вам или другому разработчику понять что этот элемент, в частности класс, участвует в интерактивности, на нем завязаны только события javascript. Таким образом этот класс всегда будет у элемента, не смотря на стили.
В нескольких проектах я это правило игнорировал и потом на исправление багов я тратил время.
Первым делом создадим разметку для наших табов.
<!-- Общий контейнер для табов -->
<div class="tabs">
<!-- Контейнер с вкладками -->
<ul class="tab-header">
<li class="tab-header__item js-tab-trigger active" data-tab="1">Первая</li>
<li class="tab-header__item js-tab-trigger" data-tab="2">Вторая</li>
<li class="tab-header__item js-tab-trigger" data-tab="3">Третья</li>
</ul>
<!-- Контейнер с блоками, которые содержат контент вкладок -->
<ul class="tab-content">
<li class="tab-content__item js-tab-content active" data-tab="1">
Далеко-далеко за словесными, горами в стране гласных и согласных живут рыбные тексты.
</li>
<li class="tab-content__item js-tab-content" data-tab="2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum rem laboriosam cum repudiandae natus corrupti?
</li>
<li class="tab-content__item js-tab-content" data-tab="3">
Далеко-далеко за словесными горами.
</li>
</ul>
</div>
Первой вкладке и её содержимому мы добавили класс active, чтобы по-умолчанию эти два элемента были активны. Остальные вкладки оставляем неактивными, а блоки с контентом скрываем.
Стилизовать — дело вкуса, если вы не против я стилизовал на свой вкус.
Здесь мы определили вид наших вкладок и контенеров с содержимым. Важным для понимания будут стили для вкладок, активной вкладки, контенеров, активного контейнера.
Тут все довольно просто. Активной вкладке добавляем изменение цвета, остальные остаются с серым цветом. Активный блок показываем, остальные скрываем.
Разберем Jquery код:
Итак, первое что нужно сделать, обработак клик по каждому элементу.
Теперь нам нужно получить идентификатор нашей вкладки и найти контент с таким же значением data-tab.
$('.js-tab-trigger').click(function() {
var id = $(this).attr('data-tab'), // 1
content = $('.js-tab-content[data-tab="'+ id +'"]'); // 2
});
Получили значение атрибута data-tab у текущего элемента
Здесь происходит конкатенация(соединение) строк. В селекторе jquery мы разрываем строку и вставляем туда значение нашей переменной id с помощью операторов сложения«+». Если вы складываете строки, оператор«+» соединит их. В результате конкатенации строк мы получили такой селектор: ‘.js-tab-content[data-tab="3″]’ (содержимое data-tab меняется в зависимости от вкладки).
Подробнее здесь.
Отлично, теперь мы знаем и вкладку по которой мы кликнули и контейнер с содержимым этой вкладки. Теперь дело за малым, поработать с классами. Дополним наш предыдущий код.
$('.js-tab-trigger').click(function() {
var id = $(this).attr('data-tab'),
content = $('.js-tab-content[data-tab="'+ id +'"]');
$('.js-tab-trigger.active').removeClass('active'); // 1
$(this).addClass('active'); // 2
$('.js-tab-content.active').removeClass('active'); // 3
content.addClass('active'); // 4
});
Удалили класс active у активной вкладки
Добавили класс active вкладке по которой кликнули
Удалили класс active у активного контейнера с содержимым
Добавили класс active контейнеру который должен быть активным
Вот и все, код на JQuery занял у нас всего лишь 10 строк кода. Рассмотрим JavaSсript.
Код на JavaScript не сложнее чем jquery код. Когда я начинал знакомиться с JQuery, в одном из проектов она не хотела работать, там была сложная структура битрикс сайта и я потратил много времени чтобы заставить её работать. После безрезультатных попыток я психанул и написал табы на JavaScript, до этого я боялся его, но написав табы без JQuery удивился, это не так сложно как кажется.
Разберем JavaScript код:
Прежде чес обработать клик по вкладке, объявим несколько переменных для наших вкладок и контенеров с содержимым.
var jsTriggers = document.querySelectorAll('.js-tab-trigger'),
jsContents = document.querySelectorAll('.js-tab-content');
Время когда можно было обойтись версией для компьютеров — прошло.
По словам«Яндекс.Метрики» от весны 2016 года, в России совершается 29% визитов на сайты приходится с мобильных устройств, и эта цифра постоянно растет. Это не просто мое мнение, а официальное заявление Яндекса: https://yandex.ru/support/webmaster/recommendations/m..
На моем сайте эта цифра — 40%.
Если сайт не адаптирован под мобильные устройства, вы теряете более трети посетителей или клиентов.
С 2015 года поисковики в выдаче ценят сайты с мобильной версией выше обычных. Их любят пользователи. Переход на адаптивный дизайн позитивно влияет на трафик сайта из поисковых систем и поведенческие факторы.
Таким образом. Адаптивность сайта, то есть корректное отображение сайта на большинстве устройств — необходимость для современных сайтов.
Как проверить адаптивность сайта?
Сервис http://www.responsinator.com показывает как сайт работает на устройствах от мобильного и до планшета. Каждое расширение работает как браузер. Можно переходить по страницам, нажимать кнопки и увидеть, есть ли проблемы с адаптивностью сайта.
Если ваш сайт не адаптивен, если в адаптивной версии сайта есть проблемы — свяжитесь со мной и мы что-нибудь придумаем.
Я любитель становится лучше, развиваться, то есть фанатик саморазвития. Такая тяга у меня не только у умственному и духовному развитию, но и физическому.
Проблема в том, что я люблю употреблять всякую гадость: чипсы, сухарики, кола, конфеты, сладкое, сладкое, сладкое …
У кого как проявляет влияние на организм этих вещей, а у меня все идет в лишний вес.
«Практически», потому что сахар содержится во многих продуктах от которых я отказаться не могу, так что стараюсь снизить употребление сахара по-максимуму.
Употребление сахара, даже по норме на человека в день, а это 40 ложек, может за 2 месяца перевести в зону риска по заболеваниям ожирения, болезни печени и почек.
Я волновался о том, сколько сахара я кладу в чашку с чаем. В день получалось ложек 10−15 и да я люблю пить чай
Когда я хотел сократить количество ложек, я начинал понемногу уменьшать, сначала клал по 1.5 ложки, потом по одной.
К сожалению со временем все возвращалось на свои места. Так происходило потому что я прочитав пару фактов о вредности сахара, не понимал проблему глобально, относился к ней не серьезно.
15 ложек. Взять туда печенье, мороженое, соки и сахара уже будут полные карманы.
Этот фильм зарядил меня энергией и важным знанием того, что ни на секунду не стоит забывать о сахаре и о том, что если не следить за его употреблением, можно серьезно попортить себе здоровье.