subscribe
arrow
К списку статей
Создай лендинг бесплатно
Лендинг бесплатно

Обзор и инструкция HTML-блока Хиполинк

02.04.21
257 просмотров
Создание страницы
Сервисы для создания мультиссылки становятся все популярнее. Отсутствие ссылки на мини-лендинг уже считается недоработкой и показателем непрофессионализма в ведении блога. Теперь, когда у конкурентов есть мини-лендинги встает новый вопрос: как выделиться? Предлагаем html коды, с помощью которых вы преобразите внешний вид сайта. Их легко добавлять на любые сервисы мультиссылок, в том числе и Хиполинк.
article_image

Базовые возможности Хиполинк

Hipolink.net, как и другие подобные сервисы – это конструктор мини сайтов, который создан для того, чтобы любой человек без знания программирования мог быстро создать себе мини-сайт. А значит визуально все выглядит немного проще, чем на полноценных многостраничных сайтах, для которых разрабатывается дизайн и программируются сложные функции.
Внутри сервиса есть все необходимые модули для создания мини-сайта, которые будут участвовать в продвижении Инстаграм или другой социальной сети.
Модули Хиполинк
В сервисе Хиполинк 16 модулей. Этого хватает для оформления полноценного лендинга, а не простого сайта-визитки. Здесь можно настраивать:
— Любые способы связи – от простых кнопок-ссылок до виджетов,
— Выбирать свой фон, внешний вид кнопки,
— добавлять 18 социальных сетей
— Определять даты показа акции, скидки распродажи по датам
— Составлять список услуг, указывать стоимость услуг и товаров
— Размещать поле для заявок и отслеживать их в CRM-системе
— И многое другое.

Когда нужна вставка HTML-кода

В какой-то момент стандартного дизайна и функций сервиса Хиполинк может не хватать. Для этого есть модуль « HTML блок». Что можно сделать с помощью кода:
— Подключить виджеты
— Реализовать нестандартный дизайн
— Разместить 1, 2, 3, 4 кнопки в ряд
— Привести оформление кнопок различных мессенджеров в соответствие с дизайном
— Сделать анимированные кнопки (блики, прыгающие кнопки и прочие эффекты)
— Сделать красивую плавающую кнопку ватсап, телеграм
— Интегрировать формы с других сайтов
— Вставить калькулятор стоимости услуг
Чтобы воспользоваться этим блоком сервиса, необходимо оплатить тариф Business.

Где взять html коды

Чтобы использовать этот модуль нужно базовое понимание HTML. Примеры кодов можно поискать в Интернете, заказать на биржах фрилансеров.
Понимать весь код не нужно. Хватит разобраться с основными строчками, изменяя параметры которых, вы сможете менять вид объектов.
Сначала в строке пишется название параметра. Обычно это понятные фразы на английском. После двоеточия нужно вписывать значение. Например:
— font-family: — это параметр шрифта. После двоеточия нужно вписать его название
— font-size: — размер шрифта. Также вносите нужный на ваш взгляд.
— color: — цвет. В HTML задается с помощью кода: белый #ffffff, черный #000000. Таблицы цветов есть в интернете. Или можно посмотреть значение цвета в графическом редакторе.
Если после добавления кода в работе Хиполинк произошел сбой, удалите код.

Как добавить шаблон в Хиполинк

— Выберите HTML-блок
— На мокапе появится черная кнопка HTML
— Справа – ее код. Удалите его
HTML-блок для Хиполинк
— В освободившееся поле вставьте скопированный шаблон
— Отредактируйте
— Для просмотра и редакции кода используйте онлайн html редактор, например https://html5css.ru/edithtm/. Слева вставляйте код, нажимайте «Run», справа увидите результат.
html для хиполинк
— Проверяйте, корректно ли работает Хиполинк с кодом, нажатием на username
Username — ссылка страницы для Хиполинк

Шаблон html кода для анимированной кнопки

Если вы готовы немного покопаться в кодах html самостоятельно, предлагаем шаблон, который вы можете использовать.

Кнопка с эффектом Hover

Ховеры - это разные эффекты, которые появляются при наведении на кнопку курсора: всплывающие подписи, подсказки, плавные переходы, трансформация, увеличение и другие.
Ниже код ховера с наплывом
article_image
<style>
.Button__exampleOneContainer {
padding: 10px;
}
.Button__exampleOne {
display: flex;
width: 100%;
height: 54px;
cursor: pointer;
text-decoration: none;
align-items: center;
justify-content: center;
background: #312937;
border-radius: 42px;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.Button__exampleOne:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #463651;
border-radius: 42px;
transition: all 0.5s ease;
}
.Button__exampleOne:hover:before {
width: 100%;
}
.Button__exampleOneText {
color: #ffffff;
font-family: TT Firs Neue;
font-size: 18px;
text-decoration: none;
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="Button__exampleOneContainer">
<a href="/" class="Button__exampleOne"><div class="Button__exampleOneText">Позвонить</div></a>
</div>

Строчки для редактирования:

— Button__exampleOneContainer – это название стиля. Если нужно несколько кнопок с разным оформлением, то для каждой нужно свое название. Обратите внимание, что название стиля встречается в коде несколько раз.
— background: #463651 — цвет кнопки
— font-family: TT Firs Neue — это шрифт. Впишите необходимый вам.
— color: #ffffff — цвет текста
— font-size: 18px; — Размер текста

Вставка ссылки на WhatsApp в кнопку:

<a href=" https://wa.me/4957777777?text=Привет!" class="Button__exampleOne"><div class="Button__exampleOneText">Позвонить</div></a>
— «Позвонить», текст ссылки, можно заменить на другой.
— В кавычках <a href=" " — ссылка на чат с пользователем WhatsApp. Вы также можете вставлять ссылку на чат в другом мессенджере.
— Используйте инструкцию по ссылкам для Ватсап.
На подходе новые статьи об HTML в нашем блоге.
Коментарии к статье
Доступно для ввода 0 из 700 символов
Оставить коментарий