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

02.04.21

•

1772 просмотров

•

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

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

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 редактор, например https://html5css.ru/edithtm/. Слева вставляйте код, нажимайте «Run», справа увидите результат.

— Проверяйте, корректно ли работает Хиполинк с кодом, нажатием на username

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

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

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

Ховеры - это разные эффекты, которые появляются при наведении на кнопку курсора: всплывающие подписи, подсказки, плавные переходы, трансформация, увеличение и другие.

Ниже код ховера с наплывом

<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>

<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; — Размер текста