Перейти к содержимому
  • Дизайн товарных кнопок

       (0 отзывов)

    Евгений Зубов
    • 6 4,25,2,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_07/06_%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA.mp4.5631e41a0fd31d05df2eb89b3b499393.mp4 10 До 10 минут Евгений Зубов display: none; https://creatura.club/uploads/ Низкая сложность display: none;
      1. Изменить дизайн одной из кнопок
      2. Создайте на её основе стиль графики
      3. Применить стиль графики к остальным кнопкам
      4. Создайте стиль символов для товарных кнопок
      5. Примените символьный стиль ко всем кнопкам
      6. Протестируйте возможность управлять дизайном

      Теперь давайте попробуем настроить дизайн товарных кнопок, с помощью которых посетители интернет-магазина смогут добавить товары в корзину. Виджет спроектирован таким образом, чтобы вам было максимально просто менять внешний вид кнопки. С точки зрения дизайна кнопка – это самый обычный прямоугольник, как если бы вы создавали прямоугольник классическим инструментов программы Adobe Muse.

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

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

      Также можем поменять шрифт как на стандартный, так и на нестандартный, который предварительно мы должны загрузить. Еще изменим нашему шрифту размер. И в таком виде мы будем использовать кнопку в дальнейшем. Выбираем "Файл" – "Предварительный просмотр в браузере".

      Именно таким образом вы можете редактировать каждую кнопку. Но чем больше на вашем сайте появляется кнопок, тем сложнее происходит настройка каждой из них. И для этого была придумана специальная функция "Стили объектов". По умолчанию данная функция скрыта. Для того чтобы она появилась в правой стороне, вам нужно перейти в пункт "Окно" – "Стили графики". После этого у вас появится большая новая группа – "Стили символов", "Стили абзацев", "Стили графики" и "Стили маркеров".

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

      Один раз кликаете, появляется название "Стиль". Мы можем для удобства переименовать его, к примеру, "Стандартная кнопка". Теперь у нас есть стиль, в котором сохранены все параметры оформления, кроме оформления текста. Если мы хотим применить данный стиль ко всем кнопкам на нашем сайте, то мы должны выделить все кнопки, выбрать ранее созданный стиль "Стандартная кнопка". Как только мы его выбираем, кнопка перезагружается, и у нее будет зеленое оформление, скругленные углы и прочие параметры, которые вы настраивали в первый раз.

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

      Кнопка при этом перезагрузится, в "Стили графики" появится + , и теперь для применения созданного стиля мы выделяем снова нашу измененную кнопку и уже нажимаем на другую кнопку, которая переопределит новые параметры для всех кнопок. Нажимаем на нее, и все кнопки, которые ранее были зеленые становятся красными.

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

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

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

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


      Жалоба


    Отзывы пользователей

    Нет отзывов для отображения.


×