Начните с этого

Стилизация

Давайте начнём с оформления шаблона.

Цвета

Шаблон «Property X» создан с использованием цветовых переменных, что означает: вы можете легко изменить цветовой образец, и это изменение будет применено ко всему сайту.

Для этого вам нужно просто перейти на вкладку «Переменные» в левой боковой панели, затем прокрутить страницу до раздела «Цвета» и, дважды щелкнув по цвету, изменить его на любой нужный — это изменение будет применено ко всему сайту.

Шрифты

Шаблон Property Xtemplateиспользует один-единственный шрифт на всем сайте, и он настроен как переменная, что означает: вы можете легко обновить шрифт на всем сайте одним щелчком мыши.

Для этого вам нужно просто перейти на вкладку «Переменные» в левой боковой панели, выбрать переменную «Основной шрифт» и заменить шрифт на любой, подходящий для бренда вашей компании.

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

Графика и значки

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

Редактирование страниц

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

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

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

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

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

Динамическое содержимое (CMS)

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

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

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

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

Товары (электронная коммерция)

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

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

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

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

Полезные замечания

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

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

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

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

Просмотр на мобильном устройстве или планшете

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

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

Редактирование мета-заголовка, описания и избранного изображения

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

Обратите внимание: важно вносить эти изменения для каждой страницы отдельно.

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

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

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

Часто задаваемые вопросы

Как можно добавить больше значков в шаблон?

Ищете более обширную коллекцию значков для использования в этом шаблоне Webflow? Ознакомьтесь с нашими шрифтами значков BRIX Templates и получите коллекцию из более чем 100 значков для вашего шаблона.

Вы собираетесь выпустить шаблон для X?

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