Оформление страницы оплаты на Геткурс

В прошлой публикации мы рассмотрели как добавить Договор оферты на страницу оплаты.

Продолжим тему оформления этой страницы.

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


1. Начнём с заголовка.


В нашем примере заголовок добавлен как отдельный html-блок.


Прописываем текст заголовка, делаем его жирным (при желании) и переходим в режим кода.


Задаём тегу класс "title".

Затем во вкладке стилей прописываем свойства для оформления.

Всё:) Заголовок готов.

2. Добавляем вторую колонку

У вас может возникнуть необходимость добавить дополнительную информацию на странице в отдельной колонке справа.

Делается это очень просто:

  • Выделяем блок, к которому нужно добавить колонку.
  • Вставляем ещё один контейнер.
  • Выделяем его и при зажатой левой кнопкой перетягиваем на нужное место. Слева должна выделиться красная полоса.
  • Отпускаем кнопку мыши.


Теперь в этот контейнер можно добавлять необходимые блоки.

3. Сменить порядок платёжных систем.

Теперь самое интересное)

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

Рассмотрим на примере нашего аккаунта.

К проекту подключено несколько платёжных систем. В том числе две, которые принимают оплату картой – Яндекс.касса и Тинькофф банк.

В силу ряда причин нам предпочтительно, чтобы оплату проводили через Тинькофф.

Но на странице оплаты платёжные системы отображаются не в том порядке, как бы этого хотелось.

И оплата картой через Тинькофф прячется за ссылкой “Альтернативный способ оплаты картой”


Как мы уже знаем из предыдущей статьи – блок на странице оплаты, в котором содержатся платёжные системы имеет id "payblock".

Чтобы можно было легко поменять порядок отображения, зададим этому селектору css свойство display:grid

И уберем отображение ссылки “Альтернативный способ оплаты”

.alternative-payments-block-main > a {display: none;}

Теперь можно задать порядок отображения.

Полностью css код будет выглядеть так:

 

В вашем случае количество и наименование платёжных систем может быть другое.

Основной принцип – посмотреть в инспекторе кода браузера название id или класса блока и задать ему порядок отображения через grid-row.

И остался ещё один момент – сделать подписи к методам оплаты картой.


Для этого используем псевдоэлемент before соответствующих блоков.

Прописываем в стилях:

На этом сегодня всё.)

Если что-то осталось не понятным или появились вопросы – пишите в комментариях к этой статье или в соц. сетях (ссылки в подвале страницы).

Оцените статью
Сергей Сипита/ автор статьи
Понравилась статья? Поделиться с друзьями: