Дизайн 80-х - нам это нравится! Со всеми этими геометрическими формами, пространственным фоном и эффектами неонового света наша целевая страница для особого события (рождественских вечеринок) не может быть более яркой! Покажем, как это сделать.
Снимите повязки, включите неоновые огни и вставьте Tron в видеомагнитофон ... 80 вернулись!
Как дизайнер, я всегда питал слабость к дизайну 80-х, о котором никто не говорит. Со всеми этими геометрическими формами, множеством узоров, космическим фоном с этими дешевыми неоновыми эффектами (это должно вызвать приятные воспоминания).
Фактически, вы можете увидеть это везде. Из "Strangers Things" от Netflix, MineCraft или Muse, которые только что выпустили альбом в духе 80-х - или даже ремейка Tron.
Так почему бы не воспользоваться этой тенденцией и не показать, как реализовать ее на целевой странице, созданной с помощью Elementor ?
Это не просто теоретический учебник. Мы взяли некоторые элементы для текущего периода скидок (Черная пятница), чтобы дать вам инструменты для подготовки к вашим будущим мероприятиям.
Открытие раздела
Неоновый эффект
В центре композиции я разместил логотип, сообщение и кнопку.
Вы видите, что самое важное сообщение написано в «неоновом свете». Чтобы получить этот неоновый вид, вам нужно добавить CSS в свой дизайн. CSS добавит тексту много розовых теней. Вот и все.
Поэтому вам нужно добавить виджет заголовка, изменить размер выбранного шрифта, чтобы он сиял, и установить цвет на белый.
Затем откройте вкладку «Дополнительно» и вставьте ее в пользовательскую вкладку CSS, добавьте этот код:
selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }
Если вы хотите использовать другой оттенок рядом с розовым, просто измените номер цвета после знака решетки. Вот и все.
Вертикальное название
Еще один интересный аспект этого дизайна появляется рядом с буквами «FRI», с прикрепленным к нему годом, расположенным вертикально (90 градусов).
Чтобы добиться этого вида, вам нужно добавить виджет раздела интерьера. Это сделано для реализации вертикального эффекта только на одном столбце.
После добавления внутреннего раздела добавьте виджет заголовка в каждый столбец.
Создайте свой текст, а затем откройте расширенную вкладку второго столбца (тот, который вы хотите повернуть) и на пользовательской вкладке CSS напишите этот код:
selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
80 ретро фон
Раздел возможностей
Дизайн
Постановка на фотошоп
Построить живой
CTA
Отдел критики
Дизайн
Раздел таблицы цен
Дизайн
Получить эту совершенно удивительную модель
Шаблон, показанный в этом руководстве, теперь доступен в библиотеке. Elementor. Таким образом, вы можете использовать его одним щелчком мыши.