Красивый дизайн панели авторизации WordPress

Блог Владимира Шишкова

Как создать, раскрутить и зарабатывать на своем блоге

Дизайн и графика

Красивый дизайн панели авторизации WordPress

Красивый дизайн панели авторизации WordPress
5 (100%) 49 голос[ов]

Красивый дизайн панели авторизации WordPress

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

Плагин Colorlib Login Customizer

Для того, чтобы изменить внешний вид панели авторизации WordPress, воспользуемся плагином Colorlib Login Customizer. Для начала установим плагин и активируем его.

Установленный и активированных плагин

Рис. 1

Заходим в настройки нашего плагина (Рис.1-п.2).

Настройки плагина

Настройки плагина Colorlib Login Customizer

Рис. 2

На (Рис.2) мы видим слева панель настроек нашего плагина (п.1) и справа саму форму авторизации (п.2).

Как видите, форма выглядит стандартно и нет какой-то изюминки. Своего бренда. Особенно не к месту логотип WordPress.

Поэтому, хорошо бы изменить всю форму авторизации и придать ей свой стиль. Давайте теперь рассмотрим плагин Colorlib Login Customizer, более подробно и изменим нашу форму до неузнаваемости.

Внимание ! Читайте статьи:
 Комментирование на блоге через социальные сети
 Комментирование на блоге через социальные сети
 Фото в комментариях блогов с помощью сервиса Gravatar

 

Меню плагина

Панель настроек плагина

Рис. 3

Выбираем первый пункт настроек “Templates” (Рис.3) и заходим в них.

Шаблоны

Шаблоны формы

Рис. 4

Здесь мы можем найти уже готовые шаблоны форм (Рис.4-п.1), которые тоже можно использовать в работе. Но чтобы иметь неповторимую форму, то лучше настроить ее самостоятельно и вставить свои картинки.

Выше находятся быстрые кнопки (п.2), которые тоже можно использовать для перехода на другие опции. Мы же не будем их сейчас использовать, а будем двигаться по каждому пункту не перескакивая.

Переводчик

Рис. 5

Для большего удобства работы с плагином, лучше использовать переводчик на русский язык. Для этого кликаем правой кнопкой мыши в любом месте и нажимаем “Перевести на русский” (Рис.5-п.1).

Переводчик переводит довольно сносно и все можно разобрать.

Настройки логотипа

Настройки логотипа

Рис. 6

Заходим во второй пункт панели настроек, который называется “Logo Options” (Рис.6-п.1).

Здесь мы можем настроить наш логотип и поставить его на место логотипа WordPress. Здесь мы можем:

  1. Скрыть логотип (во включенном состоянии скрывает логотип, по умолчанию выключен) (п.2)
  2. Использовать текстовый логотип (если включен, то заменяет логотип-картинку на текст) (п.3)
  3. Текст логотипа (текст, который будет использоваться в логотипе) (п.4)
  4. Цвет текста логотипа (можно менять цвет, если Вы выбрали текстовый логотип) (п.5)
  5. Цвет текста логотипа (данный цвет будет использоваться при наведении на него мышью) (п.6)

Настройки логотипа

Рис. 7

Дальше можем изменить (Рис.7):

  1. Размер текста логотипа (п.1)
  2. URL логотипа (используется адрес страницы, которая будет открываться при нажатии на логотип, обычно это главная страница блога) (п.2)
  3. Название логотипа (подсказка, которая будет появляться при наведении мышью на логотип) (п.3)
  4. Ширина логотипа (п.4)
  5. Высота логотипа (п.5)

Выравнивание формы

Расположение формы авторизации

Рис. 8

Переходим в пункт “Layout options” (Рис.8). Здесь можно выровнять форму как Вам угодно. Сделать в две колонки, выравнять по горизонтали или вертикали.

Общий фон формы

Настройка фона

Рис. 9

Заходим в следующее меню “Background options”, где мы можем настроить общий фон (Рис.9). Форму можно сделать просто поменяв цвет (п.1) или вставить свою картинку (п.2).

Настройка формы

Настройка формы

Рис. 10

Далее идем в самый интересный пункт меню “Form options”, где и будем настраивать нашу форму. Здесь можно использовать параметры:

  1. Ширина формы
  2. Высота формы
  3. Фоновое изображение формы (это фон непосредственно самой формы авторизации)

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

Настройка формы авторизации

Рис. 11

Двигаемся дальше, где можно изменить (Рис.11):

  1. Цвет фона формы (п.1)
  2. Заполнение форм (изменение полей формы от ее краев) (п.2)
  3. Форма границы (изменение толщины и вида границы формы) (п.3)
  4. Радиус границы (округляет края формы, делая ее более привлекательной) (п.4)

Настройка полей формы

Рис. 12

Следуем далее, где можем поменять (Рис.12):

  1. Тень формы (п.1)
  2. Ширина поля формы в px (п.2)
  3. Поле формы (можем увеличивать расстояние между полями и границами формы) (п.3)

Изменение полей формы

Рис. 13

Далее в настройках (Рис.13):

  1. Граница поля формы (придать цвет, ширину и вид границы) (п.1)
  2. Радиус границы поля формы (округляет края поля формы, где подписчик вводит свои данные) (п.2)
  3. Фон поля формы (п.3)
  4. Цвет поля формы (п.4)

Если по какой-либо причине Вам не понравился установленный Вами фон, то всегда можно вернуться к настройке по-умолчанию нажав кнопку “clear”, т.е. очистить.

Метки формы

Метки формы

Рис. 14

Можем поменять (Рис.14):

  1. Цвет метки формы (п.1)
  2. Метка имени пользователя (метка находиться над полем ввода формы, где можно изменить текст по-умолчанию на свой)(п.2)
  3. Метка пароля

Метки формы написаны на английском языке, поэтому лучше их поменять на русский.

Запомнить меня

Рис. 15

Переписываем поля по-умолчанию на свои:

  1. “Запомнить меня” (п.1)
  2. Текст потерянного пароля (п.2)
  3. Назад к тексту сайта (п.3)

Метка входа

Рис. 16

Далее меняем метку кнопки (Рис.16-п.1) и можем скрыть дополнительные ссылки формы, которые находятся в самом низу формы Register/Забыли пароль? (п.2).

Настройка кнопки формы

Настройка кнопки формы

Рис. 17

Теперь переходим на другой пункт “Form Button&Links” (Рис.17):

  1. Фон кнопки (п.1)
  2. Состояние наведения фона (цвет кнопки при наведении на нее курсором мыши) (п.2)
  3. Цвет границы кнопки (п.3)

Тень кнопки

Рис. 18

Далее (Рис.18):

  1. Состояние наведения границы кнопки (меняет цвет границы кнопки при наведении мыши) (п.1)
  2. Тень кнопки (п.2)
  3. Тень текста кнопки (п.3)

Цвет кнопок и ссылок формы

Рис. 19

Можем поменять:

  1. Цвет кнопки (п.1)
  2. Цвет ссылки (ссылки, которые находятся под полями формы) (п.2)
  3. Цвет ссылки при наведении (п.3)
  4. Скрыть “Запомнить меня” (скрывает квадратик для галочки “Запомнить меня”) (п.4)

Код формы в CSS

Код CSS

Рис. 20

В последнем пункте меню, можно будет взять код CSS данной формы и использовать по своему усмотрению (Рис.20).

Соответственно я сделал, таким образом необходимые настройки и вот что у меня получилось в итоге, смотрите ниже (Рис.21).

Готовая форма авторизации

Готовый дизайн формы авторизации

Рис. 21

Вот такая прекрасная форма у меня получилась. Со своим логотипом и своими настройками.

Таким образом мы сделали свою уникальную форму авторизации на блоге. Заменив, при этом логотип WordPress и это прекрасно.

Пользуйтесь данным замечательным плагином Colorlib Login Customizer и создавайте свои удивительные формы авторизации.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Красивый дизайн панели авторизации WordPress
5 (100%) 49 голос[ов]

Дизайн и графика

Рекомендую статьи

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован.



Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: