Как сделать купон в фотошопе
Как сделать купон на CSS
Какая необходимость делать купоны на CSS, когда есть Photoshop и много замечательных сервисов, где на конструкторе, выбрав нужный шаблон, можно с легкостью сделать любой купон?
Прочитав эту статью, вы можете отметить для себя некоторые приемы верстки.
Первый вопрос, который может возникнуть: Какого размера делать купон? Если у вас нет точных размеров, то я рекомендую делать бокс с максимальной шириной в 320 пикселей, ориентируясь под среднее разрешение смартфонов. Тогда не нужно будет заморачиваться с адаптивностью. Достаточно в HTML файле, между тегами head, вставить код.
Подключаем Google шрифт между тегами head.
HTML разметка
Создаем бокс-оболочку с классом coupon, внутри которого сверху будет картинка, средний блок с текстом (класс box) и нижний блок с текстом (класс box_bottom). Почему мы текст не поместили в один блок? Нам понадобился отдельный, чтобы раскрасить его в другой цвет.
Стильные женские наручные часы добавят последний штрих к любому наряду!
Действителен до: 01.04.2019
Вот что у нас получилось:
CSS код
Будем двигаться по порядку, вся работа ещё впереди, предстоит стилизовать все созданные классы и теги без классов. Пишем название шрифта для всего документа.
Скругляем все углы у внешнего бокса. Если не задать ширину бокса, то он растянется на всю ширину контента. А вот высоту бокса не нужно жестко ограничивать, здесь наши интересы совпадают. Пусть растягивается вслед за текстом.
.coupon <
border-radius: 15px; /* скругление углов */
background-color: #feefc4; /* цвет фона */
margin: 0 auto; /* купон в центре браузера */
max-width: 320px; /* ширина бокса */
box-shadow: 0px 1px 5px #6e312f; /* внешняя тень у бокса */
>
В принципе у картинки можно было бы не задавать размеры, ведь заданная выше ширина бокса, уже не даст картинке его растянуть, даже если размер картинки будет больше указанной ширины бокса.
Скругленные углы бокса потянули за собой необходимость сделать тоже самое и у картинки, иначе прямые углы картинки, будут дико смотреться на закругленном купоне. Однако нельзя у картинки скруглить нижние углы, а то они не впишутся в прямые линии купона.
img <
width: 320px;
height: 232px;
border-radius: 15px 15px 0 0; /* внизу два угла не закруглены */
>
.box <
padding: 2px 16px; /* поля от текста до бокса */
>
Заголовок сделаем пожирнее, чем остальной текст и установим для него другой шрифт.
h2 <
font-family: ‘Roboto Slab’;
font-weight: bolder;
color: #626c7a;
>
У нижнего бокса, не забываем про радиус углов.
.box_bottom <
padding: 2px 16px;
background-color: #f8df98;
border-radius: 0 0 15px 15px;
>
Для выделения номера промо-кода, у нас заготовлен специальный класс, с другим фоном и цветом шрифта.
.promo <
background: #e38d83;
color: #fff;
font-weight: bold;
padding: 3px;
>
Мы не поленились и изменили цвет шрифта у последнего параграфа.
Итоги
Легко заметить, что у купона стильное сочетание цвета и это не случайно так вышло, а благодаря готовым палитрам цвета.
Ссылка на сайт: https://colorpalettes.net
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как сделать купон со скидкой В фотошоп онлайн на русском
Для просмотра онлайн кликните на видео ⤵
Как сделать купон со скидкой (coupon) в Etsy магазине + 40 бесплатных листингов (открытие Etsy shop) Подробнее
фотошоп онлайн первый урок Подробнее
Купон Фотошоп Мастер Подробнее
Как привлекать покупателей на Etsy при помощи скидок, купонов и специальных предложений Подробнее
Бесконечные КУПОНЫ! Получайте бесконечное число КУПОНОВ от КИТАЙСКИХ онлайн магазинов Подробнее
Бесплатный фотошоп онлайн на русском Photopea Подробнее
#1 Как сделать купон|открытку (часть 1) Подробнее
Как добавлять, использовать купоны в интернет-магазине на WooCommerce? Подробнее
12. Как добавлять, использовать купоны в онлайн-магазине на WooCommerce. Настройка скидок на покупку Подробнее
Купон На Скидку при приобретении шаблонов для сайта Подробнее
ИНСТРУКЦИЯ: Как создать купон на скидку в Амазоне! Создаём промо-коды со скидкой Подробнее
Любовь и голуби (комедия, реж. Владимир Меньшов, 1984 г.) Подробнее
Как сделать обложку группы ВК без Фотошопа онлайн на тему Скидки Подробнее
Фотошоп онлайн от Adobe в браузере бесплатно Подробнее
Как использовать купон на скидку в онлайн магазине. Подробнее
Как создать купон в etsy магазине. Автоматическая рассылка купона Видео урок по-русски. Подробнее
Etsy купоны. Отправлять или не отправлять на лайк и на положили в корзину в Etsy магазине? Подробнее
Хостинг для сайта Avahost Авахост, купон на скидку 30% Подробнее
Купоны и подарочные сертификаты
Чем купон отличается от подарочного сертификата:
В платформе AdVantShop есть возможность создавать как купоны, так и подарочные сертификаты.
Купон
Создание Купона
Рисунок 1.
Рисунок 2.
Для того, чтобы создать новый купон, необходимо нажать кнопку «Добавить», откроется окно создания купона (рис.3).
Рисунок 3.
Здесь необходимо задать параметры купона: процентный или фиксированный, минимальную стоимость заказа, срок действия, дату начала действия купона, количество возможных использований, на какие группы товаров распространяется купон.
После заполнения всех полей нажать кнопку «Сохранить». Готово, купон создан.
В разделе “Купоны”, должен появиться новый купон с заданными параметрами.
Если Вам необходимо изменить параметры, то данный купон можно отредактировать, нажав на иконку карандаша.
Далее данный купон (код купона) можно распространять для пользователей и потенциальных клиентов.
Сгенерированные купоны
Рисунок 4.
Подробнее о тригерах в статье:»Создание триггера».
Купоны от партнеров
На странице «скидки, купоны, сертификаты» на вкладке «Купоны от партнеров» (рис.5) автоматически появляются все купоны в момент добавления партнерв и реферальнных ссылок.
Рисунок 5.
Рассмотрим как добавить партнера.
Перейдите в пункт меню «Каналы продаж», нажмите на «+», в открывшемся окне выбираем «Партнерская программа» (рис.6).
Рисунок 6.
На странице партнеров нажмите на кнопку «Добавить партнера» (рис.7).
Рисунок 7.
Заполняете данные партнера и в графе «Код купона (для реферальной ссылки)» вписываете код купона (рис.8).
Рисунок 8.
Купон создается с автоматическими параметрами, которые вы можете потом изменить на странице «скидки, купоны, сертификаты».
Создание подарочного сертификата
В платформе AdVantShop есть возможность создания и покупки подарочного сертификата. Для того, чтобы данная возможность появилась, необходимо, чтобы на сайте был доступен блок для создания подарочного сертификата (рис.9).
Рисунок 9.
Рисунок 10.
Кликнув по данному блоку на главной странице, для клиента откроется страница для создания подарочного сертификата.
На появившейся форме клиенту необходимо будет заполнить поля «Кому», «От кого», указать сумму подарочного сертификата и указать текст сертификата, e-mail получателя и отправителя.
Так же клиент выбирает, каким способом оплатить сертификат.
Рисунок 11.
Чтобы клиент смог приобрести данный сертификат, необходимо настроить методы оплаты.
Перед покупкой клиент может просмотреть, как будет выглядеть сертификат, нажав на кнопку “Предпросмотр” (рис.12).
Рисунок 12.
После того, как клиент оформит покупку, в панели администрирования в разделе «Заказы» появится новый заказ.
После оплаты заказа, на емайл «Кому» придет письмо с содержимым, которое показывается при предпросмотре, код подарочного сертификата конечно будет не 000-000-0000, а числовой (рис. 12).
А сам сертификат отобразится в «настройках»->»скидки, купоны, сертификаты», вкладка «Подарочные сертификаты» (рис.13).
Рисунок 13.
Настройка методов оплаты подарочного сертификата
Для начала настроим методы оплаты самого сертификата, чтобы клиент мог его приобрести, далее настроим метод оплаты “Подарочным сертификатом”, чтобы тот, кому подарили сертификат, мог им воспользоваться.
Для настройки метода оплаты самого сертификата необходимо перейти в панель администрирования, пункт меню «настройках»->»скидки, купоны, сертификаты», вкладка «Подарочные сертификаты», далее в право верхнем углу нажать на кнопку “Настройки сертификатов”. В открывшемся окне необходимо выбрать методы оплаты, которыми разрешено оплачивать сертификат (рис.14).
Рисунок 14.
Отмечаем нужные методы, нажимаем “Сохранить”. Готово.
Добавление метода оплаты «Подарочный сертификат»
Рисунок 15.
На этом всё, магазин теперь может создавать подарочные сертификаты и принимать их к оплате.
Редактирование изображения/иконки подарочного сертификата в клиентской части магазина
В данной статье рассмотрим, как можно разместить свою картинку вместо стандартного подарочного сертификата.
Иконка в подвале
В подвале иконка выглядит следующим образом (рис.16):
Рисунок 16.
Для того, чтобы заменить вид подарочного сертификата и загрузить свою картинку, Вам необходимо перейти в панель администрирования, «Каналы продаж»->»Интернет-магазин»->»Параметры магазина», вкладка «CSS», и прописать следующий код:
Предварительно необходимо загрузить картинку на сайт, как это сделать ознакомьтесь в инструкции.
Готово. Мы рассмотрели, как заменить картинку подарочного сертификата.
Рисунок 17.
Внешний вид подарочного сертификата
По умолчанию, подарочный сертификат выглядит так как показано на рисунке 18.
Рисунок 18.
Внешний вид подарочного сертификата можно так же заменить.
1 случай:
К сожалению, картинку банта заменить можно только через исходный код, если есть доступы можно сделать самостоятельно, если доступов к файлам сайта нет, то обратитесь в техническую поддержку, чтобы они добавили Вам картинку Вашего сертификата. Картинку назовите certifacate_bow.jpg
Путь к картинке в исходном коде:
где certifacate_bow.jpg это и есть картинка сертификата.
Рекомендуемые размеры картинки: по ширине 265 px, по высоте на Ваше усмотрение.
Теперь необходимо изменить цвет, где написана фраза «Подарочный сертификат»
Цвет можно изменить через панель администрирования, пункт меню «Каналы продаж»->»Интернет-магазин»->»Параметры магазина», вкладка «CSS» и в открывшемся окне пропишите следующий код:
2 случай:
Можно обойтись стандартными средствами панели администрировании.
А именно, Вы можете отключить отображение подарочного сертификата на главной странице. Для этого перейдите в пункт меню «Каналы продаж»->»Интернет-магазин»->»Параметры магазина», вкладка «Главная», и отключите галочку в поле «Блок подарочных сертификатов»(рис.19).
Рисунок 19.
Далее перейти в пункт меню «Каналы продаж»->»Интернет-магазин»->»статические блоки», нажать на карандаш в блоке «VK»
И перед кодом виджета (если он установлен) разместить свою картинку сертификата с ссылкой на страницу: http://домен/giftcertificate (рис.20).
Рисунок 20.
Готово. Мы рассмотрели, как заменить картинку подарочного сертификата на свою картинку.
Подарочный сертификат при отправке клиентам на почту
По умолчанию подарочный сертификат поступает на почту клиенту в таком виде: (рис.21)
Рисунок 21.
Аналогично описанным способам в инструкции, можно заменить картинку банта используя стили и редактор файла стилей, заменить картинку с надписью «Подарочный сертификат» (используя только исходный код, а именно данную картинку можно разместить через исходный код), заменить фон сертификата.
Как работать со стилями ознакомьтесь в инструкции.