Как добавить стили состояния фокуса CSS к элементам при заполнении формы Divi

Одной из основных целей большинства веб-сайтов является отправка формы. Так компании получают потенциальных клиентов, подписчиков по электронной почте и многое другое. Эффективный веб-дизайн может сделать отправку форм более привлекательной для посетителей, и один из способов повысить вовлеченность, даже больше, - это добавить дополнительный стиль к формам во время процесса «заполнения». Для этого мы можем использовать мощь состояния фокуса в CSS. Фактически, Divi имеет параметры стиля фокуса для полей формы, встроенные в модули формы Divi (Contact, Email Optin и т. Д.), Поэтому вам не нужно полагаться на внешний CSS для стилизации этих полей формы в состоянии фокуса.

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

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Использование псевдокласса: focus-within CSS

Поскольку Divi уже имеет встроенные параметры для стилизации поля формы в состоянии фокуса, в этом руководстве рассказывается о распространении этого стиля фокуса и на другие элементы. Чтобы добиться дополнительного стиля состояния фокуса, мы будем использовать Divi Builder и несколько фрагментов пользовательского CSS, которые используют псевдокласс : focus .

Не волнуйтесь, это не так сложно, как может показаться.

Разница между: focus и: focus-within

: focus

Подобно : hover , псевдокласс : focus в CSS используется для применения стиля к элементу, когда он находится в состоянии фокуса. Состояние фокуса обычно запускается щелчком по элементу, например, по полю ввода в форме. Например, когда пользователь щелкает мышью внутри поля формы, он активирует состояние фокуса для поля. Это позволяет использовать псевдо-класс : focus для нацеливания на стиль этого поля в CSS.

: focus-within

Псевдокласс : focus нацелен (или представляет) на стиль элемента, находящегося в состоянии фокуса. Однако псевдокласс : focus-within делает еще один шаг вперед. Псевдокласс : focus-within нацелен на стиль элемента в фокусе, а также любого элемента, который содержит элемент в фокусе . Это означает, что вы можете настроить таргетинг на любой родительский элемент элемента в фокусе и применять эти стили, пока элемент находится в фокусе. Другими словами, я могу щелкнуть внутри поля формы и изменить цвет фона поля формы (используя : focus ) и одновременно использовать изменение цвета фона родительского раздела поля формы (используя : focus-within ).

Добавление стиля состояния фокуса к элементам при заполнении формы Divi

Теперь, когда у нас есть некоторое представление о том, как работают : focus и : focus , давайте протестируем это, добавив стили состояния фокуса вместе в этом руководстве.

Добавить готовый макет

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

Обновить настройки контактной формы

На макете страницы контактов откройте настройки модуля контактной формы и обновите заголовок текстом «На связи».

Стиль фокусировки поля

На вкладке дизайна обновите стиль фокуса поля следующим образом:

• Цвет фона фокуса полей: rgba (255,107,90,0,15)
• Цвет текста фокуса полей: # 000000

Это будет стилизовать состояние фокуса фактического поля (опция, удобная для настроек Divi Builder).

Контактная форма CSS-класс

Затем добавьте собственный CSS в контактную форму на вкладке «Дополнительно» следующим образом:

• Класс CSS: divi-form-focus

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

Обновить настройки столбца

Затем откройте настройки родительского столбца контактной формы.

Обивка

• Заполнение: 5% сверху, 5% снизу, 3% слева, 3% справа.

Столбец CSS-класс

На расширенной вкладке присвойте столбцу следующий класс CSS:

• Класс CSS: divi-column-focus

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

Добавить раздел CSS-класс

Чтобы использовать CSS для нацеливания на стили раздела, когда поле формы (также дочерний элемент раздела) сфокусировано, откройте настройки раздела, содержащего контактную форму, и добавьте следующий класс CSS:

• Класс CSS: divi-section-focus

Добавление пользовательского CSS с помощью модуля кода

Как обсуждалось ранее, мы будем использовать псевдокласс CSS : focus для стилизации других элементов Divi, когда поле формы находится в фокусе . Элементы, которые мы собираемся стилизовать (форма, столбец и раздел), уже получили настраиваемый класс, который мы можем использовать для нацеливания на них в нашем CSS («divi-form-focus», «divi-column-focus» , «Divi-section-focus»).

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

Затем вставьте следующий код в область содержимого кода:

Обязательно добавьте в код необходимые теги стиля .

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

Обратите внимание, что каждый из фрагментов CSS, которые имеют класс CSS элемента (например, «divi-column-form»), имеет псевдокласс : focus-within , чтобы представить стиль этого класса элемента, когда поле формы находится в фокусе . Один фрагмент стилизует форму h2 (или заголовок) в состоянии фокуса формы. Один фрагмент стилизует родительский столбец в состоянии фокуса формы. И один фрагмент стилизует родительский раздел в состоянии фокуса формы.

Конечный результат

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

Последние мысли

Добавление стилей фокуса CSS к элементам при заполнении формы в Divi действительно может улучшить пользовательский опыт отправки формы. Ключевым моментом является использование псевдокласса : focus-within вместе с настраиваемыми классами, которые вы добавляете к элементам, которые хотите стилизовать, когда форма находится в состоянии фокуса. Это можно сделать с помощью минимального количества настраиваемого CSS, добавленного на страницу, и если вы знакомы с добавлением собственного настраиваемого CSS, возможности огромны.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!