В этой статье мы представим руководство для начинающих по Webflow, инструменту
Инструменты без кода помогают вам проектировать и создавать
Webflow — один из самых популярных
Такие инструменты, как Webflow, отлично подходят для тех, кто не занимается кодированием, таких как широкая публика, и для тех, кто занимается творчеством и хочет лучше контролировать свои сайты, не тратя сначала кучу времени на изучение языков программирования (например, графические дизайнеры, которые хотят заняться
Webflow, похоже, позиционирует себя таким образом, чтобы обслуживать как широкую публику, так и опытных
Домашняя страница
Webflow делает большую часть (если не всю) тяжелой работы за вас, когда дело доходит до разработки вашего сайта. Разработанный с пользовательским интерфейсом (UI) — называемым Designer — который больше похож на дизайн приложения «что видишь, то и получишь», он пишет код для вас в фоновом режиме, когда вы начинаете размещать свои элементы. и настройка стилей. В Webflow есть бесплатные шаблоны, которые помогут вам начать работу (что отлично подходит для начинающих пользователей и тех, кто не считает, что их дизайнерские навыки лучше, чем шаблоны), но вы также можете начать с нуля, если вы более опытный пользователь или разберитесь с интерфейсными языками кодирования.
Webflow как инструмент визуального
С Webflow, вероятно, есть два разных типа пользователей, которые будут регулярно использовать Webflow: те, у кого нет
Тем, кому нужна помощь в разработке собственного
Для
Цены
Плата за Webflow взимается ежемесячно, в зависимости от того, как вы хотите использовать платформу. Вы можете платить ежемесячно за сайт или ежемесячно за отдельную учетную запись с несколькими проектами. Хотя с самого начала это неясно, эти два тарифных плана предназначены для двух разных типов пользователей, о которых говорилось выше.
Для тех, кто владеет своим сайтом и хочет только один или два сайта, план сайта, скорее всего, подойдет вам. Для тех, кто является
В любом случае вы получаете бесплатный тарифный план, который позволяет вам экспериментировать и работать с Webflow, чтобы получить свой сайт таким, каким вы хотите его видеть, прежде чем вы решите обновить его. (Однако бесплатный план ограничивает, что вы можете и чего не можете делать. Например, вы не можете подключить свой сайт к личному домену.)
Цены Webflow отлично подходят для тех, кому нужен только один или два сайта. Однако это может быть довольно дорого для тех, кто хотел бы иметь несколько
В целом, популярность Webflow означает, что люди пользуются преимуществами инструмента без кода, и он продолжает привлекать внимание не только широкой публики, но и тех, кто является новичком в
Поскольку вы, вероятно, попали на эту статью, потому что вы тоже заинтересованы в Webflow и в том, как он может быть полезен в вашей ситуации, давайте углубимся в то, как начать работу с Webflow, чтобы вы познакомились с платформой и как вы можете использовать ее для твои нужды. Затем мы закончим информацией о наилучшем пути, если вы продолжите свое путешествие по Webflow.
Уровень мастерства
Несмотря на то, что Webflow позиционируется как инструмент «без кода», следует отметить, что он не означает «без навыков». Webflow требует некоторого обучения, даже для опытного
Хотя я бы сказал, что Webflow легко освоить и освоить (это предвзятое мнение, поскольку за свою карьеру я кодировал десятки
Однако замечательно то, что Webflow понимает это и потратил много времени на создание того, что они называют «Университетом Webflow», чтобы помочь вам изучить их инструменты и развить свои навыки
Регистрация и регистрация
Зарегистрировать учетную запись в Webflow так же просто, как и на большинстве других сайтов, на которых вы создали учетные записи. Нажав «Начать» в верхней части главной страницы, вы проведете вас через процесс регистрации и регистрации. Процесс регистрации поможет вам правильно настроить учетную запись, задавая вопросы, чтобы узнать о вас больше.
Экран регистрации Webflow
После того, как вы заполните анкету, вы попадете в визуальный редактор Webflow, называемый Designer, чтобы начать обучение. Независимо от того, насколько вы опытны в
Некоторые из наиболее важных частей учебника, через которые вас проведет Webflow, — это панель элементов, классы, как сделать ваш сайт отзывчивым с точками останова и, наконец, информация о том, как запустить ваш проект в жизнь. Именно во время обучения вы, вероятно, получите хорошее представление о необходимых навыках, особенно потому, что оно объясняет вам различные
Учебник по Webflow во время адаптации
После того, как вы завершили краткое приветственное руководство, пришло время начать свой первый проект (как будет предложено, когда вы завершили вводные темы). Нажав «Создать новый проект», вы попадете прямо в визуальный редактор Webflow.
Webflow Создать новый проект
Отсюда, это тип установки «выбери свое собственное приключение» на том пути, по которому ты хочешь двигаться вперед. Чтобы изучить и понять, как работает Webflow, я настоятельно рекомендую выбрать шаблон для редактирования, а не сразу переходить к пустому проекту сайта.
Шаблоны
В этом практическом руководстве мы собираемся отредактировать существующий шаблон Webflow, чтобы узнать, как работает конструктор, и основные функции основного интерфейса, которые вы будете использовать внутри Webflow.
Дизайнер
Конструктор в Webflow — это визуальный редактор, в котором вы, вероятно, будете проводить большую часть времени при работе в Webflow. Чтобы освоиться с Конструктором, давайте отредактируем существующий шаблон. Для этой статьи я выбираю шаблон «Business Starter» из списка проектов. Наведите указатель мыши на шаблон, нажмите «Выбрать «, дайте ему имя и нажмите «Создать сайт «.
Webflow Имя вашего сайта
Ваш недавно созданный сайт с использованием шаблона Business Starter откроется в конструкторе Webflow. Вы увидите панели инструментов слева и сверху, а также панель параметров справа. Хотя в Конструкторе так много всего, что поможет вам редактировать шаблон и работать с ним, мы сосредоточимся на нескольких наиболее важных и наиболее часто используемых частях Конструктора, чтобы вы могли научиться редактировать свой сайт по своему вкусу...
Стартовый
Давайте рассмотрим наиболее важные части конструктора Webflow, которые вы, вероятно, будете использовать чаще всего: панель элементов, панель стилей, панель навигации и панель страниц.
Панель элементов
Основные строительные блоки вашего
Например, я хочу добавить дополнительную кнопку в главный раздел этого
Панель элементов
На панели «Элементы» также есть другие типы элементов, которые вы, возможно, не ожидаете уже загруженными и готовыми к использованию, например цитаты блоков, загрузка файлов, вкладки, ползунки и элементы социальных сетей. Все это общие элементы на
В дополнение к элементам у вас также есть макеты на той же панели. Нажав «Макеты» вверху, вы переключитесь на доступные макеты, которые вы можете использовать, такие как галерея или контактная форма. Это удобно в тех случаях, когда вам нужен определенный макет, но вы не хотите собирать каждый элемент по отдельности, чтобы это произошло. Webflow позволяет легко вставлять эти макеты на ваш
Макеты
Панель «Элементы» довольно плотная, содержит множество элементов и макетов, которые можно использовать на вашем сайте. Подробнее о панели Elements и всех доступных элементах можно прочитать в Webflow University здесь.
Панель стилей
Вы, вероятно, заметили, что когда мы добавили кнопку в основной раздел сайта, правая панель изменилась и предоставила гораздо больше возможностей для вашей кнопки. Эта панель называется панелью стилей, и именно здесь происходит большинство настроек и изменений дизайна.
Эта панель, в зависимости от элемента, с которым вы работаете, предоставляет такие параметры, как типы и размеры шрифта, выравнивание, цвета, поля и отступы (для создания пространства между элементами). Другими словами, эта панель содержит все настройки, необходимые для «стилизации» ваших элементов (отсюда и название, а также намек на использование таблиц стилей CSS в современной
Однако, если у вас нет такого опыта, поэкспериментируйте с этими различными вариантами, чтобы узнать, что делает каждый из них и как их изменение влияет на элементы, с которыми вы работаете. Некоторые из них более понятны и работают аналогично другим типам программ, например шрифтам и цветам, в то время как другим потребуется немного проб и ошибок или экспериментов, чтобы полностью понять, что они могут делать, например позиционирование и переполнение.
Если вы не уверены, что означают все настройки, или хотите посмотреть, какие настройки доступны, Webflow University расскажет вам обо всем здесь.
Панель навигатора
Еще одна важная часть конструктора, которую вы часто будете использовать при использовании Webflow, — это панель «Навигатор». Эта панель позволяет группировать элементы, видеть, какие элементы объединены в группы, и изменять порядок элементов на странице по мере необходимости.
В левой части Конструктора щелкните значок с тремя полосами (значок «Навигатор»). Откроется панель со всеми вашими элементами, найденными на текущей странице, на которой вы находитесь. Двойной щелчок по любому элементу выделяет его в главном окне, чтобы вы могли его увидеть.
Нажав здесь «Нижний колонтитул», вы сразу же перейдете к нижнему колонтитулу, где вы сможете начать работу с этим конкретным элементом. Вы можете нажать и удерживать элемент на панели навигации, чтобы реорганизовать страницу или поместить элементы в разные места на странице. Это поможет вам увидеть, где все ваши элементы находятся на странице и как они связаны друг с другом.
Чтобы узнать больше о панели Navigator, щелкните здесь.
Панель страниц
Наконец, последняя важная часть конструктора, которую вы будете часто использовать, — это панель «Страницы». В левой части конструктора щелкните значок «Страницы» (четвертый сверху), чтобы открыть панель «Страницы».
Панель страниц
Здесь живут все ваши статические страницы, а также другие типы страниц, которые могут быть на вашем сайте (например, страница 404). Здесь вы можете упорядочить свои страницы и контент, а также изменить любые конкретные настройки, которые могут быть у вас для любой данной страницы, такие как заголовок страницы и слаг (или постоянная ссылка). Вы также можете добавлять и удалять страницы на этой панели.
Просмотр всех ваших страниц вместе на одной панели помогает вам оставаться организованным и видеть, какой контент есть на вашем
Четыре панели, рассмотренные выше, едва касаются всей функциональности, которую Webflow может предложить в конструкторе. Чтобы узнать больше обо всех различных панелях в конструкторе, в Webflow University есть отличная статья, в которой изложено все, что вам нужно знать здесь.
Какой путь вы выберете?
Webflow помогает обслуживать два разных типа пользователей: пользователей с ограниченным опытом, у которых есть много шаблонов для начала, и тех, у кого больше опыта, у которых есть возможность начать проект с нуля. Выше я упоминал, что лучше всего, независимо от уровня навыков, начать с шаблона и работать над его настройкой, чтобы вы могли узнать, как работают все панели и все возможности, которые может предложить Webflow.
В зависимости от вашего набора навыков вам может быть удобно взять существующие начальные шаблоны, а затем настроить их по своему усмотрению, или вы можете начать проект полностью с нуля. Когда вы будете довольны, вы можете опубликовать свой
Пользователям, которые хотят создать свой собственный сайт, но не имеют большого опыта в дизайне/программировании, лучше всего начать с готовых шаблонов. Выберите шаблон и настройте его в зависимости от того, что вы хотите, используя конструктор и его панель «Элементы», чтобы получить то, что вы хотите. Для пользователей, которые приходят в Webflow с уже готовым дизайном (наряду с опытом
Если вы
Панель управления
Webflow позиционирует себя как способ обслуживать как новичков, так и опытных дизайнеров/разработчиков, и позволяет свободно и гибко переключаться между ними по мере необходимости. Однако путь, который вы выберете, будет во многом зависеть от вашего варианта использования, уровня навыков и конечного результата, которого вы хотите достичь, поэтому обязательно учитывайте эти вещи при запуске новых проектов в Webflow.
Заключение
В Webflow есть отличная библиотека ресурсов под названием Webflow University, которая поможет тем, кто начинает работу с Webflow, и тем, кому просто нужно понять, какие варианты доступны для них. Просмотр некоторых учебных пособий в Университете Webflow, особенно их уроков, таких как «Начало работы», может помочь вам глубже погрузиться в определенные части Webflow и самой
Библиотека университетских уроков Webflow находится по адресу University.webflow.com/lesson.
В целом, если вы ищете инструмент без кода (или с низким кодом), который поможет вам создавать
Webflow был создан для того, чтобы дизайнеры могли создавать полностью адаптивные
