Тёмная тема
Если Вы хотя бы отчасти знаете принципы конструирования сайтов, Webflow станет для Вас довольно простым инструментом. Вам не нужно читать огромное количество документации, чтобы самостоятельно создать великолепный сайт.
Но есть несколько хитростей, о которых дизайнеры узнали случайно, и другие советы, которыми команда Webflow поделилась на форуме. Эти советы значительно ускорят процесс создания сайта.
Этот пост первоначально появился в шикарном блоге Винсента на сайте inb4.webflow. Команда Webflow дополнила его несколькими полезными советами.
1. Используйте не HTTP ссылки, добавив символ «обратная кавычка» (`)
Допустим, что после небольшого исследования Вы обнаружили часть кода, которая заставляет ссылку работать как кнопка «Назад» браузера: window.history.go (-1).
Но когда Вы добавляете этот фрагмент кода в поле URL в настройках ссылки, Webflow автоматически привязывает http:// к ссылке, при этом теряются весь необходимый Вам функционал.
Но есть решение! Всякий раз, когда Вам нужно добавить специальный код вместо ссылки HTTP, просто поставьте перед кодом символ «обратная кавычка» (`), затем нажмите Tab или просто щёлкните в любом месте вне поля редактирования, и Webflow не добавит http://.
Если Вы не добавите символ «обратная кавычка» (`), Webflow добавит http:// в начало вашей ссылки.
Это удобно, поскольку текст, вставляемый в атрибут HREF при разработке сайта, постоянно дорабатывается. Webflow об этом позаботился, поэтому поддерживает вставку гиперссылок, ссылок для электронных адресов, телефонных номеров, а также якорные ссылки. Но любые новые функции требуют добавления этого символа.
2. Вертикально отцентрируйте точку привязки якорной ссылки с помощью пользовательских атрибутов
В Webflow при щелчке на якорную ссылку «привязанная к якорю»секция обычно перемещается вверх страницы или чуть ниже панели навигации.
По умолчанию при нажатии якорной ссылки Webflow перемещает секцию в верхнюю часть экрана.
Но что, если Вы хотите поместить «привязанную к якорю» секцию в середину области просмотра? Это просто: добавьте новый пользовательский атрибут в раздел «data-scroll» и установите для него значение «mid».
Выберите элемент, к которому Вы хотите «привязать якорь» (а не ссылку, которая запускает прокрутку), переключитесь на вкладку «Settings» и щелкните значок +, чтобы добавить новый пользовательский атрибут.
Добавьте соответственно «data-scroll» и «mid» к имени и значению пользовательских атрибутов привязанного раздела, чтобы центрировать привязанный раздел в области просмотра.
И вуаля! Теперь при нажатии на якорную ссылку секция будет располагаться по центру области просмотра.
Добавление data-scroll: mid располагает привязанную секцию в центре экрана.
Примечание: Возможно, Вам потребуется перезагрузить Webflow Designer, чтобы код работал в режиме предварительного просмотра. Кроме того, если размер привязанной секции больше области просмотра, прокрутка будет осуществляться до верхней части области просмотра.
3. Контролируйте скорость прокрутки до «якоря»
Если для элемента определен ID секции, вы можете указать ссылку для привязки к этой секции. Когда пользователь щелкает эту якорную ссылку, страница плавно прокручивается до этого ID с помощью функции движения «ease-in-out»(анимация начинается и заканчивается медленно) с анимацией продолжительностью более 1000 мс (это целая секунда).
Но одна секунда — это очень долго, когда дело доходит до анимации. Большинство анимаций при наведении мыши и щелчке длится от 200 до 350 мс. Конечно, для прокрутки большого текста имеет смысл потратить немного больше времени, но для многих 1 секунда — это слишком много. А для тех, кто хочет использовать плавную прокрутку в качестве особого эффекта, одной секунды может быть недостаточно.
К счастью, Вы можете изменить скорость прокрутки с помощью пользовательских атрибутов. Вы можете сделать это двумя способами, в зависимости от того, хотите ли Вы, чтобы все эффекты прокрутки на странице длились одно и то же время, или Вам нужно более детальное управление:
- Добавьте пользовательский атрибут data-scroll-time в тег <body>,чтобы действие отразилось на всех операциях прокрутки на странице.
- Добавьте пользовательский атрибут data-scroll-time к отдельному элементу, привязанному к якорной ссылке, чтобы контролировать скорость прокрутки к этому элементу
Вы также можете объединить оба способа: установите одну скорость прокрутки по умолчанию для всех ссылок на странице, добавив пользовательский атрибут в <body>, и переопределите этот параметр, добавив другие значения непосредственно в целевые элементы.
Вот как добавить пользовательский атрибут. Выберите целевой элемент или тег <body>, перейдите на вкладку «Settings» и добавьте атрибут и его значение в разделе «Custom Attributes».
Добавьте data-scroll-time в пользовательские атрибуты привязанной секции, чтобы изменять настройки скорости плавной прокрутки. Значения представлены в списке ниже.
Вы можете установить любое значение, которое Вам нужно, учитывая, что оно будет умножено на значение, установленное по умолчанию и равное 1000 мс. Используйте следующую формулу для расчета продолжительности плавной прокрутки:
Продолжительность плавной прокрутки = указанное Вами значение× 1000 мс
Ниже представлены несколько примеров метки data-scroll-time
0 = сразу перейти к элементу
0,75 = прокрутка со скоростью, немного выше установленной по умолчанию (750 мс)
1 = прокрутка со скоростью, установленной по умолчанию (1000 мс)
1,25 = прокрутка со скоростью, немного ниже установленной по умолчанию (1250 мс)
2 = прокрутка со скоростью в два раза ниже установленной
20 = TurtleMode™(режим «черепахи»)
Как значения data-scroll-time отображаются на веб-сайте.
Будьте осторожны с очень высокими значениями, так как Вы не сможете отменить прокрутку после ее запуска, даже в Designer. Начнется долгая прокрутка, затем она будет прервана другим действием (скажем, щелчком мыши), а после продолжится, как только это действие завершится.
4. Изменяйте свойства элемента при взаимодействии с помощью комбо-класса
Да, Вы можете изменять свойства элемента при взаимодействии с помощью комбо-класса. После многократного использования данной функции я пришел к выводу, что это вполне надежно. Это информация более сложного уровня, так что ознакомьтесь с моим уроком «Изменяйте свойства элемента с помощью комбо-класса».
5. Делайте математические расчеты прямо в поле Webflow
Вы когда-нибудь задумывались, какое именно количество знаков после запятой необходимо использовать для элемента, размер которого должен быть равен 1/3-й ширины: 33.3% или 33.333333333333333333333? Всегда ли у Вас открыто приложение «Калькулятор» во время разработки сайта?
К счастью, Вам не нужно отвечать на этот вопрос. Или открывать приложение «Калькулятор». Потому что Webflow сделает все расчеты самостоятельно.
Просто введите данные для вычисления (например, 100/3) в любое из полей ширины/высоты на вкладке «Style», нажмите клавишу ввода или Tab и приготовьтесь увидеть нечто волшебное. Не забудьте добавить единицы измерения, в которых хотите получить ответ!
Если Вы когда-нибудь задумывались, сколько знаков после запятой Вам необходимо при значении 33.3333 ... Вы можете перестать думать об этом. И позволить Webflow дать ответ.
6. Выделите все элементы одного класса
В отличие от других советов, этот совет хорошо известен. Но его довольно легко упустить из виду, а многие люди, плохо знакомые с Webflow, не знают об нем.
Обратили внимание на индикатор под полем селектора на вкладке «Style»?В нем отображается, сколько элементов текущего селектора появилось на странице, над которой вы работаете, а также на других страницах.
Вы обратили внимание на этот полезный элемент. Но Вы когда-нибудь щелкали по нему?
Это очень удобно, поскольку поможет Вам оставить определенные элементы без изменений, если необходимо, а также принять решение о том, когда создавать комбо-класс или новый класс.
Но знали ли Вы, что при щелчке по этому индикатору, визуально выделяются все элементы с одинаковыми атрибутами? Конечно!
При нажатии на текст «other elements with this class» выделяются эти элементы!
Поэтому, если Вы выберете объект класса «.demo-image», а затем щелкните текст «X на этой странице, Y на других страницах», все остальные объекты этого класса будут выделены розовым цветом. Даже если у них есть комбо-класс (подкласс).
Функция работает даже при выборе селектора более высокого уровня.
7. Очистите стили с помощью Option/Alt + «нажатие мыши»
На ранних стадиях проектирования Вам приходится множество разменять свои проектные решения. (Или, по крайней мере, я так делаю.) И чаще всего, поскольку Вы работаете с «контрольными точками», эффективным будет простое очищение стиля с большего разрешения.
Есть также быстрый и простой способ удалить изменения стиля элемента. Просто наведите курсор на любой выделенный синим стиль, который Вы добавили, и щелкните по нему, одновременно нажимая Option (на Mac) или Alt(Windows).
Это действие сразу удалит стиль, который Вы добавили!
Примечание: Если добавленный вами стиль переопределяет унаследованный стиль или стиль, установленный по умолчанию, это действие не удалит стиль полностью, а вернет настройки к значениям, установленным для стиля по умолчанию или унаследованного стиля. Например, элементы заголовка в Webflow имеют верхний и нижний отступы. Если Вы, к примеру, переопределите стиль для H1, то Option + «нажатие мыши» восстановит настройки отступа по умолчанию, а не удалит их полностью.
8. Настройте одновременно несколько значений для внешних и внутренних отступов, используя Alt/Shift + «перетаскивание»
Установить 5% отступа на всех четырех сторонах блока, по одной за раз?
Ни у кого нет на это времени.
Итак, удерживайте Option (Alt в Windows), увеличивая/уменьшая отступ по 1 из сторон, чтобы настроить две противоположные стороны (верхнюю и нижнюю или левую и правую), или удерживайте Command (Control в Windows), чтобы отрегулировать все четыре стороны одновременно.
Option/Alt + «перетаскивание» изменяет значения противоположно расположенных внешних или внутренних отступов (справа и слева, сверху и снизу),а Command/Control + «перетаскивание» изменяет значения всех четырех сторон.
9. Ускорьте изменение значений с помощью Shift
Вам необходимо увеличить заголовок с 3 до 4 эм, но Вы не хотите набирать его заново? Или нажимать 10 раз стрелку вверх?
Просто удерживайте Shift, пока вы нажимаете стрелку вверх или вниз в любом блоке (внешний или внутренний отступ, ширина, высота, размер шрифта и т. д.), чтобы значение изменялось десятками, а не единицами.
10. Перемещайтесь по элементам сайта с помощью Option + стрелка вверх или вниз
Нужно быстро переключиться на родительский или дочерний элемент без использования навигатора? Просто выберите элемент и удерживайте Option, при нажатии стрелки вверх или вниз. Это позволяет быстро перемещаться по вложенным и родительским элементам и, в отличие от простого использования стрелок, перемещение будет происходить между секциями и после того, как Вы пропустили последний дочерний элемент в предыдущей секции.
11. Дублируйте элементы используя Option + «перемещение»
Вот очень полезная вещь, которая Вам наверняка знакома, если Вы работали с Photoshop и/или Sketch: в следующий раз, когда вам нужно будет продублировать уже созданный элемент, просто нажмите на него, затем удерживайте Option (или Alt в Windows ) при перетаскивании элемента на новое место. Вместо того, чтобы перемещать выбранный элемент, Webflow просто дублирует его в новом месте вместе со всеми дочерними элементами!
Статья переведена и адаптирована Соколовым Максимом
Оригинал статьи: https://webflow.com/blog/11-time-saving-pro-tips-for-web-designers-working-in-webflow