![\"Рекламное](\"https:\/\/burmistrovtarget.ru\/pictures\/reclama-na-sait.png\")
\nЕсли оно сработало, и мы как посетители рекламной площадки вдруг увидели что-то, что нас заинтересовало, и появилось желание посмотреть поближе — мы делаем ответный шаг: переходим на сайт и видим вторую фразу:<\/p>\n
- \n
- Вторая фраза — сам сайт<\/b>. То есть именно та страница<\/i>, на которую мы попадаем с данной рекламы. Что мы видим?<\/li>\n<\/ol>\n\n
![\"Посадочная](\"https:\/\/burmistrovtarget.ru\/pictures\/posadochnaya-stranica-posle-perehoda-po-reklame.png\")
\nПосадочная страница, которую мы видим после перехода по рекламе<\/div>\n<\/div>\nЕсли мы видим то же, что и на рекламе — значит мы убедились, что перешли правильно, как минимум картинка и сообщение в рекламе соответствует картинке и сообщению на той посадочной странице, куда мы попали. Как минимум не возникает желания закрыть поскорее непонятную страницу — то есть нам все понятно<\/b>. Мы видим смысл в конце этого туннеля!<\/b><\/p>\n
- \n
- Ну и далее по смыслу — возможны следующие шаги в этом танго:\n
- \n
- дальнейшее изучение контента и возможно углубление на следующие страницы,<\/li>\n
- поиск дополнительной информации (например часы — электронные часы — часы бочкообразной формы — и т. д.)<\/li>\n<\/ul>\n<\/li>\n
- Весь этот танец может счастливо завершиться хорошим знакомством, а может быть и заключением брака (созданием заявки или даже покупки)<\/li>\n<\/ol>\n
Но было бы это возможно, если бы сообщение в рекламе и сообщение на сайте противоречили друг другу?<\/p>\n
...Сайт не должен быть кр..ивым<\/i><\/b><\/p>\n", "date_published": "2022-08-30T14:23:12+00:00", "date_modified": "2022-08-31T16:17:06+00:00", "image": "https:\/\/burmistrovtarget.ru\/pictures\/reclama-na-sait.png", "_date_published_rfc2822": "Tue, 30 Aug 2022 14:23:12 +0000", "_rss_guid_is_permalink": "false", "_rss_guid": "6", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/burmistrovtarget.ru\/pictures\/reclama-na-sait.png", "https:\/\/burmistrovtarget.ru\/pictures\/posadochnaya-stranica-posle-perehoda-po-reklame.png" ] } }, { "id": "5", "url": "https:\/\/burmistrovtarget.ru\/all\/kak-sdelat-knopku-neaktivnoy-v-tilde-zero-block\/", "title": "Как сделать кнопку неактивной в Тильде (Zero-block)", "content_html": "
(Или как переключать активность кнопки по клику на чек-боксе) — именно такое поведение необходимо, например, когда банк требует, чтобы кнопка оплаты была неактивной ДО согласия посетителя с правилами. Для этого обычно предлагается разместить над кнопкой чек-бокс, выбирая который, пользователь активирует кнопку. Понятно, что в случае html+css вопросов не возникает — у тега<\/p>\n
<button><\/code><\/pre>может быть псевдокласс :disabled, с которым кнопка становится неактивной (отключённой).<\/p>\n
Но мы рассмотрим вопрос, как сделать кнопку неактивной, применительно к Тильде, потому что в Тильде нет <button>. И потому что есть способ гораздее<\/b>. Читайте ниже.<\/p>\n
Первое, что я обычно делаю, когда возникает вопрос «Как сделать неактивную кнопку на Тильде» — это иду в официальный help<\/a> и смотрю в экран:<\/p>\n
\n![\"Вопрос](\"https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png\")
\n<\/div>\nСледующим шагом можно поискать информацию в сети, но чаще всего там не то, что нужно.
\nПосле этого становится ясно, что придётся включить голову и применить знакомые инструменты, а именно:<\/p>\n- \n
- A. Кнопки и шейпы<\/li>\n
- B. Пошаговую анимацию элементов<\/li>\n<\/ul>\n
Первое, что надо сделать — чек-бокс для активации нашей кнопки.
\nСделаем его из 2 картинок: неактивный чек-бокс — квадрат, активный — квадрат с галочкой внутри. Сверху разместим невидимую прозрачную кнопку такого же размера. Клик по ней будет запускать анимацию проявления «галочки внутри» чекбокса.<\/p>\n\n\n![\"\"](\"https:\/\/burmistrovtarget.ru\/pictures\/checkbox-0.png\")
\n![\"\"](\"https:\/\/burmistrovtarget.ru\/pictures\/checkbox-1.png\")
\n<\/div>\n<\/div>\nТут важно, что настроить пошаговую анимацию нужно только для картинки, изображающей выбранный чек-бокс (с «галочкой»). В настройках пошаговой анимации делаем клик по верхней прозрачной и невидимой кнопке триггером, запускающим анимацию. Сама анимация — проявление данной картинки (Прозрачность 0% -> 100%).<\/p>\n
Эту же анимацию потом копируем на все остальные анимированные элементы, немного модифицируя эти анимации. Неизменным остаётся только триггер — клик по нашему псевдо-чекбоксу.<\/p>\n
Начинаем с того, что делаем неактивную кнопку серого цвета. Примерно вот такую:<\/p>\n
\n![\"Неактивная](\"https:\/\/burmistrovtarget.ru\/pictures\/neaktivnaya-knopka-na-tilda.png\")
\n<\/div>\nТут самое главное, чтобы у пользователя не возникло желания на неё кликнуть и с первого взгляда было понятно, что кнопка не сработает. В принципе, совсем необязательно, чтобы это была именно кнопка. Достаточно и просто картинки или шейпа (shape) нужного размера. Нужный размер здесь — это размер точно такой же, как у активной кнопки.<\/p>\n
Вторым шагом делаем такую же по форме кнопку, но по виду всю такую «активную»:<\/p>\n
\n![\"Активная](\"https:\/\/burmistrovtarget.ru\/pictures\/aktivnaya-knopka-na-tilda.png\")
\n<\/div>\nРазмещаем её точно над первой серой кнопкой. Больше ничего не трогаем. Тут пока самое главное, чтобы кнопка явно кричала: «Нажми меня, Алиса! Я-кнопка!» При этом этот элемент так же не обязан быть кнопкой. Почему? Объясню чуть ниже.<\/p>\n
Вы уже догадались, что следующим шагом я с помощью анимации выведу прозрачность у активной кнопки из 0 к 100%, а прозрачность неактивной уберу со 100% до 0?<\/p>\n
Я тоже так думал. Но так не работает<\/b>. Потому что даже полностью прозрачная активная кнопка сохраняет свою активность, если она находится в верхнем слое, выше, чем серая. Даже если её не видно, по ней все равно можно кликнуть и перейти. Но её так или иначе придётся скрывать до момента, пока не выбран чек-бокс (хотя бы визуально), так что продолжаем работать.<\/p>\n
Анимация красной кнопки — это наша вторая анимация. Эту анимацию мы просто скопируем из первой и применим к элементу красной кнопки, только сделаем так, что она сначала (то есть на Шаге 1) — полностью прозрачна, а на Шаге 2 — полностью проявлена. Триггер — тот же. Серая кнопка точно так же и за то же время «исчезает» ((Opasity = 100->0). (Это уже третья анимация).<\/p>\n
Внимание!<\/b> В панели настроек все кнопки должны изначально быть проявлены (Opasity = 100), их прозрачность мы настраиваем только в анимации!<\/p>\n
Как же сделать, чтобы кнопка работала после выбора чек-бокса и НЕ работала до его выбора?
\nПрименим смекалку и еще один прозрачный шейп.<\/p>\nИтого бутерброд из элементов у нас состоит из 3 этажей:<\/p>\n
- \n
- Неактивная серая кнопка<\/li>\n
- Красная кнопка, делающая вид, что она активная<\/li>\n
- Прозрачный шейп над этими кнопками, к которому привязан url кнопки и который по сути кнопкой и является. Но изначально он будет стыдливо прятаться за пределами экрана и перейти по нему до той поры, как он займёт своё законное место строго над нашими рисованными кнопками, мы не сможем, потому что его изначально не будет на месте кнопки.<\/li>\n<\/ol>\n\n\n
![\"1](\"https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-0.png\")
\n![\"2](\"https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-1.png\")
\n<\/div>\n<\/div>\n1 шаг анимации. Шейп выведен за пределы видимости из Зеро-блока (удостоверьтесь, что в настройках блока у вас стоит OVERFLOW — hidden)
\n2 шаг анимации. Приводим шейп на место кнопки. Всё, кнопка активна! И путешествия прозрачного шейпа по экрану никто не увидит. На этапе настройки можете задать цвет шейпу и некоторую прозрачность, чтобы удостовериться, что он двигается как научили, а не как попало).<\/p>\nТаким образом, клик по триггеру — кнопке над нашим чекбоксом запустит сразу 4 анимации:<\/p>\n
- \n
- Проявится галочка внутри чекбокса — теперь он выбран<\/li>\n
- (и 3) — Серая кнопка станет прозрачной, а красная проявится и станет непрозрачной. Т. к. красная кнопка имеет тень, а анимация имеет длительность (DURATION = 0,2s), создаётся иллюзия, что кнопка «всплывает», обретая одновременно цвет<\/li>\n
- Из ниоткуда приплывёт прозрачная активная кнопка и накроет своим прозрачным телом красную кнопку. Теперь мы можем кликнуть по этой кнопке и перейти куда надо.<\/li>\n<\/ol>\n
Оставьте комментарий, если было полезно.<\/p>\n", "date_published": "2022-08-24T16:21:27+00:00", "date_modified": "2022-09-14T15:54:35+00:00", "image": "https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png", "_date_published_rfc2822": "Wed, 24 Aug 2022 16:21:27 +0000", "_rss_guid_is_permalink": "false", "_rss_guid": "5", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/highlight\/highlight.js", "system\/library\/highlight\/highlight.css", "system\/library\/jquery\/jquery.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/burmistrovtarget.ru\/pictures\/kak-sdelat-knopku-neaktivnoy-tilda.png", "https:\/\/burmistrovtarget.ru\/pictures\/checkbox-0.png", "https:\/\/burmistrovtarget.ru\/pictures\/checkbox-1.png", "https:\/\/burmistrovtarget.ru\/pictures\/neaktivnaya-knopka-na-tilda.png", "https:\/\/burmistrovtarget.ru\/pictures\/aktivnaya-knopka-na-tilda.png", "https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-0.png", "https:\/\/burmistrovtarget.ru\/pictures\/shape-knopka-1.png" ] } }, { "id": "1", "url": "https:\/\/burmistrovtarget.ru\/all\/ne-bylo-by-schastya-da-neschastye-pomoglo\/", "title": "Не было бы счастья, да несчастье помогло?", "content_html": "
— Что, правда?
\n— Или нет?<\/p>\n\n![\"\"](\"https:\/\/burmistrovtarget.ru\/pictures\/ne-bulo-by-schastya.jpg\")
\n<\/div>\nПочему для «достижения» счастья нам нужна иллюзия, что ее достижение требует «платы»? Вы в курсе, кто советовал обратить внимание на птиц небесных, которые не сеют, не жнут.<\/p>\n
И что же? Обратим внимание на птиц. Если мы в городе, то увидим мы в первую очередь голубей. Что можно сказать?<\/p>\n
- \n
- Образ жизни голубя особенный.<\/li>\n
- Вкусы его специфичны.<\/li>\n
- И для того, чтобы жить свободно, как «Серый голупь» в исполнении Петра Мамонова, остаётся разве стать бомжом.<\/li>\n<\/ul>\n
\n
«Я гадость, я дрянь. Зато я умею летать», ога.<\/p>\n<\/blockquote>\n
Летать, конечно! Как перекати-поле. И довольствоваться тем, что само сыплется в руки, а это, как мы все знаем — только мусор. А как же? Всё «ценное» — за денежку. И не иначе.<\/p>\n
Так в чем же соль? Неужели в той самой книге «голубиное счастье» и имелось в виду? — Как-то не верится, знаете ли. Я не доверяю своему уму в таких серьезных вещах, как молниеносное опошление любого услышанного и измерение всего увиденного своими мерками им. Прокруста. В этом он хорош, да, но для ясности это совсем не годится. Ясность какая-то безысходная получается. Не может такого быть!<\/p>\n
А что может быть? Что остаётся?<\/p>\n
Как ни странно, остаётся включать ощущения. Помните, у всех нас частенько включается «такое ощущение, что тут что-то не то»? Вот и я об этом. Чуять. И понимать.<\/p>\n
Не принимать на веру ту лабуду, которую подсовывает ум. (Можно подумать, что кроме лабуды там еще что-то есть)). Да, не принимать за чистую монету всё то, что приходит в голову. Так яснее вроде.<\/p>\n
Это первая заметка в данном блоге, а почему выбрано такое название и какой в этом смысл?<\/b><\/i><\/p>\n
Всё просто. Просто я только что опубликовал этот блог.
\nНо! Этого бы не случилось, если бы минутой ранее я не удалил вместе с черновой базой этого домена (где целый год стоял пустой WP) заодно и вторую базу своего древнего портфолио web4sb.ru<\/a>. (Страшное доменное имя, (как мне казалось когда-то в 2008 году, обозначает «Web для малого бизнеса»<\/b>).<\/p>\nШтош, восстановил, работает) Да здравствует дамп базы! Заодно уж, раз полез в MySQL, настроил и Эгею на данном домене.<\/p>\n
То есть по сути я заплатил за развертывание этого блога крушением (и восстановлением) старого сайта? Так можно было?<\/p>\n
\n![\"\"](\"https:\/\/burmistrovtarget.ru\/pictures\/krokodile_episode_6.jpg\")
\n<\/div>\nИ первое впечатление об Эгее — по сравнению с плясками с бубнами вокруг WP — это просто небо и земля. Все очень быстро. Практически мгновенно. И просто. Просто работает. Markdown опять же имеется. Это ли не главное?
\nСамое главное — то, к чему я не мог приступить целый год на WP, завелось за пять минут на Эгее. Ура.<\/p>\n
- Ну и далее по смыслу — возможны следующие шаги в этом танго:\n