Создание сайта-заглушки: Урок #2


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


Скачать все файлы к курсу «Сайт-заглушка»





Создание стилей

Шаг #1. В главном меню перейдите в раздел «Конструктор стилей» → нажмите на кнопку «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (22 px), тип стиля: текст) → нажмите «Далее».


Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-light-webfont, размер текста: 22 px, цвет текста: #ffffff).


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


Нажмите «Сохранить» → над экраном внешнего вида стиля нажмите «Назад».

 

 

Шаг #2. Нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (32 px), тип стиля: текст) → нажмите «Далее».

 

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 32 px, цвет текста: #ffffff

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


Нажмите «Сохранить».

 


Шаг #3. При желании вы можете скопировать стиль, нажав на кнопку «+» в правом нижнем углу экрана → присвойте название для нового стиля (Текст белый (32 px) medium) → нажмите «Копировать».

 

Установите параметры стиля → в данных настройках замените стиль шрифта на Ristrettopro - medium - webfont.


Остальные настройки оставьте неизменными → над экраном внешнего вида стиля нажмите «Назад».

 

 

Шаг #4. Подобным образом создайте еще один стиль для кнопки → нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст белый (82 px), тип стиля: текст) → нажмите «Далее».

 

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 82 px, цвет текста: #ffffff).

 нажмите «Сохранить».



Шаг #5. Подобным образом создайте еще один стиль для кнопки → нажмите «Добавить стиль» → задайте название и тип стиля (название стиля: Текст серый (16 px), тип стиля: текст) → нажмите «Далее».

 

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 16 px, цвет текста: #656565) → нажмите «Сохранить».

  


Шаг #5. Создайте новый стиль для кнопки → задайте название и выберите тип (название стиля: Кнопка, тип стиля: кнопка) → нажмите «Далее».


Установите параметры кнопки по умолчанию и при наведении курсора. 

В разделе «Базовые параметры» укажите ширину и высоту кнопки (ширина: 250 px, высота: 40 px) → выберите параметры шрифта (стиль шрифта: Ristrettopro-regular-webfont, размер текста: 32 px, цвет текста: #ffffff).  

Настройте параметры рамки (ширина рамки: 1 px, цвет: #656565, прозрачность: 0.6) → настройте параметры фона (цвет: #656565, прозрачность цвета: 0.6).  


 

Шаг #6. Настройте параметры кнопки при наведении на нее курсора → замените цвет шрифта (цвет текста: #000000) → отключите «Фон» → переключите синюю плашку в неактивное состояние.

На боковом экране визуально отображается внешний вид создаваемого стиля → нажмите «Сохранить». 

 

 

В следующем вы узнаете, как создавать шаблоны (Template).

Была ли полезна для вас данная статья?

Мы используем файлы Cookie, чтобы сделать работу с сайтом проще и удобнее. Нажимая кнопку «Принять Cookie» или продолжая просмотр сайта, вы разрешаете их использование.
Подробная информация
 тут

Cookies в CMS Smart Engine