Начните здесь

Стайлинг

Давайте приступим к стилизации шаблона.

Цвета

Шаблон Web3 X построен с использованием Color Swatches, что означает, что вы можете легко отредактировать цветовой образец, который будет обновляться по всему сайту.

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

Шрифты

Шаблон Web3 X использует один единственный шрифт по всему сайту, и он установлен в селекторе Body (All Pages), что означает, что вы можете легко обновить шрифт на всем сайте в один клик.

На любой странице просто нажмите на оранжевый селектор в правом верхнем углу вкладки "Стиль", а затем выберите " Тело (все страницы)". После этого вы можете перейти в раздел Типографика и изменить шрифт на любой другой, соответствующий вашему бизнес-бренду.

Если вам нужен пользовательский или премиум шрифт, который недоступен в Webflow, вы всегда можете перейти в Настройки проекта > Шрифты, где вы сможете загрузить пользовательские шрифты или подключить свой аккаунт Adobe Fonts.

Графика и иконки

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

Это происходит потому, что эти графики являются изображениями (PNG, JPG, SVG и т.д.), поэтому обновление CSS (стилей) Webflow не повлияет на них. Если вы хотите использовать эти графики повторно, вы всегда можете скачать их и отредактировать с помощью любого дизайнерского программного обеспечения (например, Photoshop, Illustrator, Sketch, Figma и т.д.) или напрямую загрузить свои собственные изображения/графики, соответствующие вашему бренду.

Статические страницы

Статический контент - это весь контент, который не основан на CMS, что означает, что он не является динамическим (как, например, запись в блоге).

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

Если вы хотите отредактировать этот тип содержимого, вы можете просто дважды щелкнуть по нему, и вы сможете непосредственно набрать текст прямо там.

Динамический контент (CMS)

Динамическое содержимое - это все содержимое, которое является динамическим и будет автоматически генерироваться на основе содержимого, добавленного в разделе CMS в левой боковой панели (чуть ниже значка Pages).

Вы можете легко определить все это, потому что оно отображается как фиолетовое в левой боковой панели Навигатора, и оно показывает фиолетовую границу, когда вы щелкаете или наводите на него курсор.

Этот контент должен обновляться непосредственно в разделе CMS. Это сделано для того, чтобы вам было очень легко его обновлять, так как вполне вероятно, что его нужно будет постоянно обновлять (например, добавлять новую запись в блог).

Кроме того, если вы хотите отредактировать полную автоматически созданную страницу CMS (например, запись в блоге), вы найдете эту страницу доступной для редактирования в нижней части всех страниц в разделе Страницы на левой боковой панели.

Продукты (электронная коммерция)

Продукты или контент электронной коммерции функционируют аналогично динамическому контенту CMS, однако они ориентированы исключительно на продукты электронной коммерции.

Контент электронной коммерции можно идентифицировать так же, как и контент CMS, поскольку он также отображается фиолетовым цветом в левой боковой панели Навигатора, а также имеет фиолетовую рамку при нажатии или наведении на него.

Этот контент должен обновляться непосредственно на вкладке "Электронная коммерция" в левой боковой панели. Это сделано для того, чтобы вам было очень легко обновлять его, так как вполне вероятно, что его нужно будет постоянно обновлять (например, изменить цену товара или добавить дополнительные запасы).

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

Полезные заметки

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

Взаимодействия

Если вы хотите отредактировать какое-либо взаимодействие шаблона (например, удалить эффект появления), вы можете легко определить элементы, которые имеют взаимодействия, так как они имеют маленький значок взаимодействия (маленький гром) в левой боковой панели Навигатора.

Если вы нажмете на этот маленький значок взаимодействия, то откроется вкладка "Взаимодействие" правой боковой панели для этого элемента, где вы можете редактировать взаимодействие.

Мобильный или планшетный вид

Каждый раз, когда вы вносите изменения (например, создаете новый дизайн раздела), хорошей практикой является переход к верхней навигации Viewport и просмотр того, как это выглядит на планшете и мобильном устройстве.

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

Редактирование Meta Title, Desc и Featured Image

Если вы хотите настроить название, описание и изображение, которые отображаются, когда вы делитесь своим сайтом в любом месте (например, Facebook, Twitter и т.д.), вы можете легко перейти в раздел Страницы в левой боковой панели, нажать на маленький значок настроек страницы, которую вы хотите настроить, и все эти настройки появятся.

Обратите внимание, что это важно менять на странице.

Резервные копии

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

Вы можете найти его в разделе Настройки в левой боковой панели, и тогда вы сможете просто увидеть все автоматические или ручные резервные копии. Восстановить старую резервную копию можно одним щелчком мыши.