Если мы вам нравимся, подпишитесь на нашу телегу, там мы делимся полезными штуками
и говорим о работе

SVOEMEDIA.SPACE

Шаблоны для Тильды

Если мы вам нравимся, подпишитесь на нашу телегу, там мы делимся полезными штуками
и говорим о работе

⚡️⚡️⚡️ EARLY BIRDS КУРС ⚡️⚡️⚡️ «КАК СОСТАВИТЬ РАБОТАЮЩИЙ КОНТЕНТ-ПЛАН»

Подробнее

ИП КОЛТАШОВА АЛЕКСАНДРА ВАДИМОВНА

Свидетельство о гос. регистрации: 54 № 5 150 134
ИНН: 540 618 483 335
ОГРНИП: 316 547 600 156 201
Дата постановки на учет: 25 августа 2016
Р/с: 4080 2810 5045 0000 0701
БИК: 44 525 999
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
К/с: 3010 1810 8452 5000 0999

ООО СВОЕМЕДИА

ИНН: 5405047736
КПП: 540501001
ОГРН: 1195476069887
Р/с: №40702810004500006839
ТОЧКА ПАО БАНКА «ФК ОТКРЫТИЕ» Г. МОСКВА
БИК: 044525999
К/с: 30101810845250000999

Этот сайт использует куки. Без них никак. Подробнее…

ок

Как в меню из zero-блока добавить переключатель языковых версий

Или как расширить любой блок чем угодно, без программирования и СМС

Настя Зиновьева, дизайнер

Ответ получен 27 января 2020

Дано: меню, собранное в zero-блоке на отдельной странице, одно на весь сайт. Задача: добавить англоязычную версию на многостраничный сайт с переключением языка в шапке. При этом у каждой страницы должна быть иностранная сестра-близнец с уникальным URL, значит и zero-шапку с переключателями надо ставить на каждую страницу уникальную, и даже малейшие изменения в шапке будут причинять невыносимую боль при количестве страниц более пяти. Рассказываю, что сделать, чтобы не страдать.

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

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

1. Создаем нулевой блок в начале страницы, он будет располагаться под шапкой.

← Настраиваем его так, чтобы блок был виден за своими пределами, высота блока нулевая (истинный zero).

2. Вносим в него две кнопки и разделитель.

← Первая кнопка «En» будет отвечать за переход на англоязычную версию, вторая «Ру» — за русскоязычную.

3. Теперь нам надо настроить расположение и поведение кнопок для каждой ширины экрана.

Сперва указываем позиционирование относительно окна и сетки. Для десктопа и планшетов это скорее всего будет контейнер сетки (Grid Container), для мобильных устройств — контейнер окна (Window Container). Удобнее указывать расположение по осям относительно ближайших сторон. В моем случае это левая сторона (Right) и начало блока (Top).

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

4. Проделываем перемещения для каждой ширины экрана, проверяя результат сужением окна браузера.

← Можно проверять с помощью консоли разработчика (например, для Google Chrome — клик правой кнопкой мыши, Посмотреть код, выберите нужный девайс или разрешение).

Чтобы правильнее настроить шапку для мобильных — лучше публиковать страницу и смотреть непосредственно с устройства.

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

← Посмотрите, как это работает на сайте SOLVEX

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

← А вот и видео-инструкция :) Все получится!

Иллюстрации: иконка для обложки — Wanicon для Flaticon

Нужен свой контент-проект? Напишите нам

Тут подробнее о том, чем можем быть вам полезны✊

НАПИСАТЬ НАМ