Дизайн 80-х - нам это нравится! Со всеми этими геометрическими формами, пространственным фоном и эффектами неонового света наша целевая страница для особого события (рождественских вечеринок) не может быть более яркой! Покажем, как это сделать.

Снимите повязки, включите неоновые огни и вставьте Tron в видеомагнитофон ... 80 вернулись!

Как дизайнер, я всегда питал слабость к дизайну 80-х, о котором никто не говорит. Со всеми этими геометрическими формами, множеством узоров, космическим фоном с этими дешевыми неоновыми эффектами (это должно вызвать приятные воспоминания).

Фактически, вы можете увидеть это везде. Из "Strangers Things" от Netflix, MineCraft или Muse, которые только что выпустили альбом в духе 80-х - или даже ремейка Tron.

Так почему бы не воспользоваться этой тенденцией и не показать, как реализовать ее на целевой странице, созданной с помощью Elementor ?

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

Открытие раздела

Наш первый раздел — это раздел героев. Первое, на что здесь следует обратить внимание, это заголовок. Я рекомендую приложить много усилий в этой области, потому что это первое, что вам нужно. посетитель увидим.
Подумайте о том, какое сообщение вы собираетесь передать. Большой и четкий заголовок привлечет внимание людей. Этот первый раздел также должен побуждать пользователей прокручивать страницу вниз и просматривать остальную часть страницы.

Неоновый эффект

Эффект неоновая черная пятница elementor.jpg

В центре композиции я разместил логотип, сообщение и кнопку.

Вы видите, что самое важное сообщение написано в «неоновом свете». Чтобы получить этот неоновый вид, вам нужно добавить 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 ретро фон

Как только вы закончите работу над основным постом, начните работать над фоном, чтобы придать тексту импульс и сделать фантастику ретро 80-х реальностью. Здесь я добавил изображение, созданное в Photoshop, и использовал его в качестве фона героя.
В этом дизайне фон имеет геометрическую сетку, напоминающую Трон, с оттенком пальм, наклоненных влево, и основным градиентом сине-пурпурно-розового для достижения ощущения ретро. Есть также некоторые приятные штрихи, такие как «DeLorean DMC-12» (вы, вероятно, узнаете его в «Назад в будущее»).
Автомобиль, а также падающие звезды, все нацелены на основной текст нашего раздела, подчеркивая наше основное сообщение.

Раздел возможностей

информационное поле elementor.gif
При разработке целевой страницы вам необходимо подумать о взаимосвязях между каждым разделом. С модным дизайном, вроде ретро 80-х, задача посложнее.
Поэтому, спроектировав удивительный первый раздел и подняв планку, вы должны поддерживать высокий уровень и придерживаться той же темы дизайна, рассматривая каждый раздел как композицию сам по себе.

Дизайн

В этом разделе я разработал более темный вид «неизвестных объектов», когда мы «ползаем» по странице. Здесь вы можете увидеть заголовок, 3 маркера и кнопку. Чтобы создать этот плавающий 3D-эффект, я использовал немного Photoshop в сочетании с настройками Flip-box изElementor.

Постановка на фотошоп

Итак, первое, что я сделал, - это создал всю сцену в Photoshop, чтобы увидеть, как все будет выглядеть, прежде чем я начал ее создавать. В заголовке вы можете увидеть внешний вид неоновых огней, а под ним я добавил 3 треугольника с иконками и заголовком (кружки).
Я добавил сине-пурпурно-розовый градиент к каждому треугольнику. Выше рисунок из линий придает ему вид телевизора 80-х и размывается сзади, чтобы создать искрящийся научно-фантастический вид.
Иконки также приобретают неоновый вид, как и заголовок внизу треугольника. Добавьте эффект плавания жирным шрифтом. Фон имеет дымчатый, облачный и темный эффект с тем же рисунком линий, что и для треугольника.
Для 3D-анимации у треугольников будет прозрачный фон. Это означает, что текст на обратной стороне будет отображаться, когда он не закрыт. Итак, я добавил немного черного дыма по сторонам треугольника, чтобы одеяло сливалось и прикрывало спину.
Таким образом, в редактор нужно встроить три слоя: фон, значок и заголовок.

Построить живой

В редакторе добавил виджет флип-бокс. На передней вкладке содержимого я выбрал изображение в качестве графического элемента и добавил заголовок. На вкладке «Фон» в разделе «Цвет» я изменил цвет на прозрачный и добавил треугольник, созданный мной в разделе изображения, а затем изменил положение, чтобы оно подходило идеально. .
Затем на задней вкладке я сделал то же самое, но вместо заголовка я добавил текст. Для перехода на вкладку настроек. Здесь я поигрался с высотой коробки. Я использовал единицу VH, потому что это относительная единица, которая будет изменять изображение относительно экрана по мере посетитель буду использовать.
Это делает его более отзывчивым. Что касается эффектов, я сохранил эффект Flip, изменил направление влево и активировал глубину 3D, чтобы добиться этого потрясающего 3D-эффекта.

CTA

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

Отдел критики

список отзывов elementor.jpg
Если пользователь пролистывает до третьего раздела - значит, вы что-то делаете правильно. Итак, после разговора о продукте и его изумлении, настало время высказаться другой стороне.

Дизайн

В этом разделе у нас есть виджет комментариев на радикальном геометрическом фоне с неоновым заголовком. Фон был разработан в Photoshop и затем помещен на задний план раздела в качестве фиксированного фона для создания эффекта прокрутки при наведении курсора.
Я хотел, чтобы этот раздел выглядел «за кулисами», чтобы, когда вы прокручиваете вниз, вы подвергались его воздействию.

Раздел таблицы цен

ценовой график elementor.jpg
Этот раздел является разделом Таблица цен . Здесь вы можете увидеть все предметы, которые могут поддержать продажу. Заголовок, обратный отсчет и конечно же - таблица цен.
Это финишная черта целевой страницы. Следовательно, если ваш пользователь не нажимает, что-то пошло не так.

Дизайн

Дизайн в этом разделе имеет более одного обращайтесь 80-е-галактика. Фон здесь был отредактирован в Photoshop, что придало ему ярко-фиолетовый вид и выделило его из черно-черного фона, который существовал до того, как в конце был добавлен удар.
Под заголовком и слоганом есть счетчик, показывающий время, оставшееся до конца продажи. Здесь я использовал объемный шрифт под названием «space mono», который я добавил с помощью опции пользовательского шрифта.
В приведенной ниже таблице цен каждая таблица имеет светло-черный фон, что придает ей вид «парящего в космосе». Когда вы наводите на него курсор, фон темнеет, и вокруг него появляется свечение как фокус, который направляет вас к прочтению текста внутри.
Когда вы наводите курсор мыши на кнопку, кнопка снова меняет цвет. Как только вы закончили читать информацию о наших великолепных снимках,

Получить эту совершенно удивительную модель

Шаблон, показанный в этом руководстве, теперь доступен в библиотеке. Elementor. Таким образом, вы можете использовать его одним щелчком мыши.