Введение в Webflow - помощь Webflow
Узнайте, как работать с Webflow.
В Webflow вы можете структурировать, создавать и проектировать ваш сайт на страницах, ветвях и локалях. Webflow позволяет эффективно создавать и управлять динамическим контентом и данными, а также предоставляет инструменты для анализа и оптимизации производительности сайта. Вы также можете делиться своей работой, запрашивать отзывы и, наконец, публиковать свой сайт в выделенных средах (например, тестовой и производственной).
Вы можете получить доступ к Webflow с Панели управления, нажав на миниатюру вашего сайта, или из Настроек сайта, нажав Открыть сайт в верхней панели инструментов. Инструменты, к которым у вас есть доступ в Webflow, зависят от вашей роли на сайте (например, рецензент, редактор контента и т.д.), так что вы можете быстро получить доступ к нужным инструментам и забыть о тех, которые вам не нужны.
Прежде чем начать
Проверьте поддерживаемые браузеры, устройства и разрешения экрана Webflow.
Совместная работа нескольких пользователей
Несколько участников команды могут совместно работать над сайтом в Webflow. Чтобы процесс проектирования был плавным, вы можете передавать контроль над дизайном между вашими коллегами и видеть, где другие люди работают на вашем сайте в реальном времени.
Обзор интерфейса Webflow
Когда вы открываете свой сайт в Webflow, главный экран, который показывает ваш сайт, называется холстом. Вокруг холста расположены следующие панели и панели инструментов:
- Верхняя панель включает вкладки навигации, контекстную панель и действия сайта (например, инструменты для совместной работы и публикации).
- Панель холста включает отмену/повтор, навигацию по хлебным крошкам, расширенные точки прерывания и настройки холста.
- Левая панель инструментов включает главное меню, различные панели инструментов и навигации, настройки, аудит сайта и учебники.
- Правая панель инструментов включает стили элементов, настройки и взаимодействия.
Холст
Самая большая область в Webflow — это холст. Здесь вы можете взаимодействовать со страницей и проектировать в реальном времени. Вы можете выбирать элементы, перемещать их и редактировать контент прямо на странице. Webflow автоматически сохраняет вашу работу, но вы можете вручную сохранить сайт, нажав Command + S (на Mac) или Control + S (на Windows).
Верхняя панель
Верхняя панель предоставляет быстрый доступ к режимам дизайна, CMS, Analyze, Optimize, локалям, переключателю страниц и действиям сайта.
Основные вкладки навигации включают вкладку Дизайн, вкладку CMS и вкладку Инсайты.
- Вкладка Дизайн — Эта вкладка указывает текущий режим (например, дизайн, сборка и т.д.) и позволяет переключаться между режимами или создавать ветки страниц. Роль участника на сайте определяет, какие режимы доступны. Например, менеджеры сайта и дизайнеры могут получить доступ к режиму дизайна, в то время как маркетологи могут получить доступ только к режиму сборки.
- Вкладка CMS — Открывает панель CMS (Система управления контентом), где вы можете создавать и управлять Коллекциями, элементами коллекций и товарами и категориями электронной коммерции.
- Вкладка Инсайты — Открывает панель инсайтов, где вы можете получить доступ к Analyze и Optimize. Analyze предоставляет аналитику сайта с практическими рекомендациями. Optimize позволяет проводить эксперименты на вашем сайте, чтобы тестировать различные стили, макеты, потоки, формулировки, изображения и многое другое.
Контекстная панель
Контекстная панель позволяет управлять оптимизацией сайта с помощью Optimize и переключаться между локалями, страницами, страницами коллекций и элементами коллекций. Она также указывает, когда вы редактируете основной компонент (а не экземпляр компонента), а также статус утверждения дизайна.
Действия на сайте
Действия на сайте связаны с конкретной страницей, на которой вы находитесь, или с самим сайтом. Участники команды, работающие над сайтом в реальном времени, также перечислены здесь с аватаром или количеством.
- Режим анализа — Получите аналитику и инсайты на уровне страницы (например, как далеко прокручивают посетители и где они кликают).
- Комментарии — Просмотрите комментарии, оставленные другими участниками команды, или добавьте свои отзывы/заметки.
- Предпросмотр — Переключитесь в режим предпросмотра.
- Поделиться — Создайте ссылку на сайт только для чтения.
- Публикация — Опубликуйте ваш сайт.
Панель холста
Панель холста по умолчанию расположена над холстом, но вы можете переместить её ниже в настройках холста.
- Иконки отмены/повтора — Быстрое отмена или повтор изменений.
- Навигация по крошкам — Показывает иерархию выбранного элемента.
- Настройки холста — Различные опции (например, линейки, направляющие, предварительный просмотр текста).
- Точки останова — Предварительный просмотр и редактирование для разных размеров устройств.
Левая панель инструментов
Содержит главное меню и панели для структурирования сайта.
Нажмите на логотип Webflow, чтобы получить доступ к главному меню.
- Быстрый поиск элементов, компонентов, страниц и т.д.
- Действия отмены/повтора
- Экспорт кода
- Горячие клавиши
- Открыть предварительный просмотр CSS
- Получить помощь или отправить отзыв
Панели и журнал активности сайта
- Панель добавления — Горячая клавиша: A
- Панель страниц — Горячая клавиша: P
- Панель навигатора — Горячая клавиша: Z
- Панель компонентов — Горячая клавиша: Shift + A
- Панель переменных — Горячая клавиша: G
- Панель стилей — Горячая клавиша: J
- Панель ресурсов — Горячая клавиша: L
- Панель библиотек — Горячая клавиша: L
- Панель приложений — Горячая клавиша: E
- Журнал активности сайта — Изменения дизайна, внесенные на ваш сайт
Настройки, AI помощник, аудиты, быстрый поиск и учебные материалы
- Панель настроек — Интерфейс, поиск, резервное копирование, локализация.
- AI помощник — Помощь на базе AI.
- Панель аудита — Горячая клавиша: U.
- Быстрый поиск — Горячая клавиша: Command + E (Mac), Control + E (Windows).
- Панель видеоуроков — Бесплатные видеокурсы.
Правая панель инструментов
Содержит панели для стилей элементов, настроек и взаимодействий.
- Панель стилей — Быстрый доступ: S.
- Панель настроек элементов — Быстрый доступ: D.
- Панель взаимодействий — Быстрый доступ: H.
Часто задаваемые вопросы
Какие браузеры поддерживает Webflow?
Webflow официально поддерживает последние три основные версии всех современных браузеров: Chrome, Edge, Firefox и Safari. Это относится как к платформе, так и к опубликованным сайтам.
Для функций с ограниченной поддержкой см. соответствующие статьи:
Webflow не поддерживает Internet Explorer.
Какие разрешения экрана/устройства поддерживает Webflow?
Webflow требует настольный/портативный компьютер с шириной экрана не менее 1268px.
Почему Webflow — это онлайн/хостинг приложение, а не загружаемое приложение?
Webflow является онлайн/хостинг приложением для обеспечения дизайна в браузере и быстрых обновлений.
- WYSIWYG дизайн — прямое влияние на HTML/CSS.
- Быстрые обновления — всегда последняя версия, без ручных обновлений.