Как в таплинк сделать раскрывающийся блок

Меню навигации

Эта инструкция о том, как добавить меню навигации на Таплинке. Всего три простых шага — и на вашей странице появится меню.

Если вы вы пришли сюда в поисках ответа на конкретный вопрос, то вы можете перейти сразу к одному из разделов:

Меню позволяет пользователям быстро найти нужную информацию. Вот один из вариантов, как может выглядеть меню на вашем Таплинке:

Пункты меню могут направлять пользователей на:

• Внутренние страницы вашего Таплинка, в том числе страницы магазина.
• Конкретные блоки на этих страницах.
• Любые внешние веб-страницы.
• Набор номера, отправку СМС или email, сохранение контакта.

Все возможные действия можно посмотреть на скриншоте ниже:

Обратите внимание! Если вы используете готовый шаблон страницы, то добавить меню вы можете только после публикации страницы. Опубликуйте ее, если еще этого не сделали. Если же вы используете «Пустой шаблон», то добавить меню вы можете в любой момент.

Настройки меню находятся в личном кабинете:

1. Перейдите к управлению страницами.
2. Выберите вкладку Меню навигации.

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

Шаг 1 — Добавьте пункты меню

Во вкладке «Меню навигации», вы можете добавить пункты меню:

1. Выберите Добавить ссылку.
2. Введите текст, который будет отображаться.
3. Выберите действие.
4. Укажите страницу, а также имя блока, если добавляете ссылку на конкретный блок страницы.
5. По желанию к каждому пункту меню можете добавить миниатюру — выберите иконку или загрузите свое изображение.
6. Нажмите Сохранить.

Чтобы добавить еще один пункт меню, снова проделайте шаги 1–5 инструкции выше. Для примера мы добавили еще две ссылки. Одна из них ведет на другой блок на этой же странице, а вторая набирает номер телефона для звонка.

Так добавленные ссылки выглядят в настройках:

Шаг 2 — Настройте дизайн меню

Теперь, когда в меню есть все необходимые пункты, приступим к дизайну меню. Ниже мы подробно рассказываем о каждой настройке дизайна.

Тип меню

Для начала выберем форму и расположение меню:

• Верхнее меню.
• Виджет в правом верхнем углу.
• Нижняя панель вкладок.

На скриншотах ниже вы можете посмотреть, как выглядит каждый тип меню на сайте: на первом «Верхнее меню», на втором «Виджет», на третьем «Нижняя панель вкладок».

Обратите внимание, доступные далее настройки зависят от типа выбранного меню.

Скрыть ссылки в гамбургер

Пункты меню могут отображаться или могут быть свернуты в зависимости от устройства. Выберите один из вариантов:

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

Посмотрите на примеры ниже. В первом случае выбрано «Не скрывать», поэтому пункты меню отображаются. Во втором случае выбрано «Скрывать в телефоне», поэтому пункты меню свернуты в гамбургер.

Дизайн меню

Переходим к настройкам дизайна меню. Вам доступны настройки:

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

Дизайн гамбургера

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

• Иконка. Вид гамбургера.
• Анимация. Анимация при открытии и закрытии меню.
• Цвета. Цвета для деталей меню.
• Шрифт. Толщина шрифта, регистр, размер и межбуквенный интервал, шрифт.
• Выравнивание. Выравнивание пунктов меню.
• Отступ между ссылками. Расстояние между пунктами меню.
• Скорость анимации. Скорость анимации при открытии и закрытии меню.

По желанию вы можете добавить к меню тень. У тени есть настройки:

• X смещение. Смещение тени вправо или влево.
• Y смещение. Смещение тени вверх и вниз.
• Размытие. Размер размытия.
• Растяжение. Пропорциональное увеличение тени по осям X и Y.
• Цвет. Цвет тени.
• Прозрачность. Настройка прозрачности тени.

Шаг 3 — Активируйте отображение меню на сайте

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

Теперь пользователи не заблудятся на вашем Таплинке. Обязательно поделитесь своим Таплинком в ВК, Инстаграме и других социальных сетях, если еще этого не сделали.

Ответы на часто задаваемые вопросы

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

Как присвоить имя конкретному блоку страницы

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

1. Нажмите на блок.
2. Выберите вкладку Настройки.
3. Включите функцию Присвоить имя блока.
4. Укажите название блока.
5. Нажмите Сохранить.

Все, теперь на этот блок можно ссылаться. Как это делать, читайте выше.

Как удалять пункты меню

Удалить пункт меню можно в любой момент:

1. Перейдите к управлению страницами.
2. Выберите вкладку Меню навигации.
3. Нажмите иконку удалить рядом с ненужным пунктом.
4. Нажмите Да.

Как удалить меню с сайта

Если вы хотите убрать меню с сайта, вам нужно выключить функцию «Показывать на сайте»:

1. Перейдите к управлению страницами.
2. Перейдите во вкладку Меню навигации.
3. Выключите функцию Показывать на сайте.

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

Как в таплинк сделать раскрывающийся блок

About

Platform

СВОИ ФОРМЫ ЗАЯВОК ДЛЯ PRO-ТАРИФА

Форма с валидатором данных, возможностью установить свой цвет для всех элементов и с нейтральным оформлением для подгонки под любой дизайн ��

ОБНОВЛЕНИЕ ОТ TAPLINK

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

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

ИСПРАВЛЕНИЯ КОДА-ПОМОЩНИКА СКРЫТЫХ БЛОКОВ И АНИМАЦИЙ

Были внесены поправки в код для совместимости с текущим кодом Taplink.

Что именно было исправлено?
В taplink у каждого блока есть свой уникальный кодовый идентификатор. Все коды-помощники ориентировались на него, чтобы писать для вас индивидуальный код для чисто вашего таплинка и ваших уникальных блоков. Taplink перенес этот идентификатор с одного места чуточку в другое. Также добавилась задержка на исполнение всех функций, написанных с библиотекой jQuery.
Так как коды-помощники все равно располагались на моем сервере, я поменял код кодов-помощников у себя и они снова работают.
Анимации: https://besttaplink.ru/p/c4e2a5/
Скрытые блоки: https://besttaplink.ru/p/c5c1c1/

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

ЧТО ДЕЛАТЬ, ЕСЛИ КОД АНИМАЦИИ НЕ РАБОТАЕТ

1.Если у вас стоит код анимаций, сделанный ранее по инструкции, найдите строчку
const animated = document.querySelectorAll('.block-item>div');
и замените ее на
const animated = document.querySelectorAll('.block-item');
Анимации заработают
2. Если вы начинаете делать заново по инструкции, но у вас не работает
В коде помощнике добавьте обозначение версии, чтобы сбросить кэш с кода-помощника
То есть в коде-инструкции находите пятую строчку
и меняете на
После этого всё заработает

Также напоминаю, что у канала есть чат https://t.me/taplinkbestchat где гораздо быстрее можно получить ответ на свой вопрос либо от меня, либо от других участников канала

АНИМАЦИИ ПОЯВЛЕНИЯ С НАСТРОЙКОЙ КАЖДОГО БЛОКА

Это пушечка. Проверить всё на примере невозможно, так что посмотрите видео
Инструкция с видео: https://teletype.in/@onthewaytothesun/zhOrY7gUl7X
Пример админки, которая появляется с кодом: https://besttaplink.ru/p/c4e2a5/…

TAPLINK В TELEGRAM WEB APP

Этот пост без готового кода для Taplink.

В Telegram относительно недавно добавили возможность встраивать сайты в качестве Web-приложения. Помимо красивого внешнего вида использование сайтов внутри веб приложений позволяют защищать код, т.к. его из приложения никто не украдет, даже не просмотрит

Например, можно сделать вот такую страницу на таплинке, она использует загрузчик картинок от сервиса Uploadcare, а базу профилей хранит в Google-таблицах. В качестве идентификатора пользователя используется telegram-id, уникальный параметр вашей учетной записи, благодаря чему страница помнит, кто есть кто и сопоставляет профили

Хотите попробовать страницу воочию? Переходите в тестового бота https://t.me/taplinkreviewbot и отправляйте ему /start, после чего выберите вторую кнопку (заполнить профиль).

ФОРМА ЗАЯВОК ДЛЯ PRO-ТАРИФА ДОРАБОТАНА

Теперь можно разместить сколько угодно форм.
Для размещения дополнительной формы скопируйте в коде только эту часть:
<form ><div заявку</div>
<div свяжемся с вами в ближайшее время</div>
<input placeholder="Ваше имя" name="name" minlength="3" type="text" required>
<input type="email" name="email" required placeholder="Ваша почта">
<input type="phone" placeholder="Ваш номер телефона" name="phone" required>
<input name="terms" type="checkbox" required><label for="agree">Принимаю <a href="#" target="_blank">условия</a> обработки персональных данных</label>
<button type="submit">Отправить</button>
</form>
и вставьте отдельным блоком. Остальной код копировать не нужно

Что изменилось:
1. Переписана вся скриптовая часть, валидатор и логика отправки
2. В стилевой части заменен #agree на input[name="terms"]

БЕСПЛАТНЫЙ СЕРВИС ДЛЯ КРАСИВОГО ОФОРМЛЕНИЯ СКРИНШОТОВ

Увидел у коллеги пост с отличным сервисом shots.so, с помощью которого можно быстро оформить скрины для работы. Спешу поделиться ссылочкой с вами ��

СИСТЕМА РОЗЫГРЫША ПРИЗОВ НА ЛЮБОЙ ПЛАТФОРМЕ

Инструмент для повышения вовлеченности и продаж теперь доступен и на Taplink, и на Tilda!

Как это работает?
Вы определяете, за что начислять попытки. Они могут начисляться за покупку ваших продуктов или быть бесплатным продуктом-трипваером (в этом случае рекомендуется проводить внутри приложения Telegram для привязки 1 телеграм = 1 попытка. После поступления оплаты у пользователя появляется попытка в кручении колеса фортуны, он крутит колесо и получает свой приз.
Насколько это надежно?
Все расчеты шансов и призов выполняются на сервере. Если в онлайн-школах выиграть лучший приз довольно простая задача, то в этой разработке повлиять на выигрыш невозможно. Все кручения ото всех пользователей сохраняются, так что можно посмотреть результаты участников в любой момент
Насколько это удобно?
Вы можете выбирать количество и тип призов в гугл-таблице и эти значения отобразятся на странице. Нигде касаться кода после установки системы разработчиком не требуется. Оплачивать хостинг не нужно, т.к. сервер находится в App Script гугл-таблиц

Посмотреть, как работает колесо фортуны, можно по ссылке: https://besttaplink.ru/p/c9d7f5/

Приобрести услугу установки колеса на свой сайт можно через личные сообщения @onthewaytothesun

ПАРТНЕРСКАЯ СИСТЕМА

Хочу предложить всем участникам канала возможность зарабатывать на разработке в пассивном режиме. Если вы не разработчик, а у вашего клиента есть запрос на какую-либо сложную разработку — посоветуйте клиента мне и предупредите в личку @onthewaytothesun о том, кто должен от вас написать. В случае успешного сотрудничества вам будет перечислено 15% от итоговой стоимости разработки.

Какие работы можно предлагать?
1. Верстка на таплинке любой сложности кодом
2. Любые работы по платформе GetCourse
3. Любые интеграции. Например привязка платежной системы, которой нет в разделе модулей
4. Любые разработки для таплинка. На таплинке уже было реализовано колесо фортуны, различные нумерологические калькуляторы, видео с таймкодами (нажатие по которым включает эту позицию в видео).

От вас потребуется только перевести клиента на меня @onthewaytothesun и предупредить о клиенте в личку ��

Блоки в таплинке

Начиная работать в таплинке, иногда новички сталкиваются с непониманием, что такое блоки в таплинке, как их сделать и как использовать. Поэтому давайте пройдемся по блокам и их назначению.

Что такое блоки в таплинк?

Таплинк — это конструктор сайтов, работа в котором строится на комбинации различных видов контента. Для каждого из видов контента есть своя функция, или — свой блок. Например, чтобы добавить картинку, мы используем блок «Баннер», для добавления текста подойдет блок «Текст» и так далее.

Как сделать блоки в таплинк?

Чтобы создать новый блок в таплинк, для начала нужно авторизоваться в сервисе (ввести свой логин-пароль) на главной странице, затем перейти в личный кабинет и на нужной странице нажать кнопку «Добавить блок».
И из открывшегося меню уже выбирать, какой именно блок вам нужен. Важно отметить, что для разных тарифов таплинк доступны разные наборы блоков, например для бесплатного тарифа — только первые шесть, что существенно снижает возможности и функционал сайта на тарифе BASIC.

Какие блоки доступны на тарифе таплинк BASIC?

Блок Текст

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

Блок Ссылка

Этот блок создает кнопку со ссылкой, причем ссылка может вести:

• на новую страницу таплинк
• на любой сторонний сайт или сервис
• в мессенджеры или соцсети
• к нужному месту на текущей странице таплинка или (для тарифа Бизнес) к нужному месту любой страницы таплинка

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

Блок Разделитель

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

Блок Аватар

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

В остальных случаях используется для оформления иконки сайта (favicon). Читайте подробнее тут (в разработке).

Обратите внимание, что не получится добавить несколько раз блок Аватар и в каждый разместить разные фото. При замене фото в одном блоке, автоматически заменится и в остальных.

Блок Вопросы и ответы

Один из самых востребованных блоков таплинка, с помощью которого вы легко сможете оформить раскрывающиеся пункты меню на своем сайте. Используя html код для блока вопрос ответ в таплинк, можно сделать его оформление более привлекательным.

Блок Иконка и текст

Очень удобный блок для создания различных списков, например для перечня услуг компании. Можно выстроить пункты столбцом, можно в две или три колонки, причем для мобильной версии и для ПК настройки можно задавать свои. Иконки можно выбирать из предложенных, или добавить свои, если у вас платный тариф сервиса.

Если вам нужно, чтобы все иконки были одинаковыми, достаточно в первом и втором пункте выбрать нужную, далее в третьем и последующих пунктах эта иконка будет выбираться уже автоматически.

Подробно про все виды блоков таплинка и о способах их применения — в моем курсе «Таплинк с нуля до профи», который входит в состав онлайн школы «Легкий старт в онлайне«. Всего за несколько недель научись создавать сайты с нуля и зарабатывать на этом от 40000 рублей в месяц. Спеши, пока стоимость такая низкая!

Напишите в комментах, надо ли рассказать про остальные блоки таплинка?

HTML код для блока вопрос ответ таплинк

тут код и пример работы — в разработке

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

Как убрать отступы между блоками таплинк?

Для того, чтобы между блоками в таплинке не было пустого пространства, используйте секции. Зайдите в настройки нужных блоков — у верхнего выключите отступ снизу, у нижнего — отступ сверху. Таким образом, блоки склеятся между собой и отступ между ними пропадет.

Как скрыть блок на таплинке?

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

Если у вас платный тариф, скрыть блок на таплинке можно отправив его в архив. Или же просто выбирайте в настройках «Скрыть блок», тогда он не будет отображаться на странице, но останется висеть полупрозрачным в вашем личном кабинете.

Читайте также: Как в таплинке сделать раскрывающийся блок (в разработке)