Thiết kế của thập niên 80 - chúng tôi yêu thích nó! Với tất cả các hình dạng hình học, nền không gian và hiệu ứng ánh sáng đèn neon này, trang đích của chúng tôi cho một sự kiện đặc biệt (tiệc Giáng sinh) không thể rạng rỡ hơn! Hãy chỉ cho chúng tôi cách làm điều đó.

Gỡ bỏ băng đô của bạn, bật đèn neon và chèn Tron vào VCR của bạn ... những năm 80 đã trở lại!

Là một nhà thiết kế, tôi luôn có một điểm yếu cho thiết kế của thập niên 80 mà không ai nói đến. Với tất cả những hình dạng hình học này, hàng tấn hoa văn, hình nền không gian với những hiệu ứng neon rẻ tiền đó (nó sẽ mang lại những kỷ niệm đẹp).

Trên thực tế, bạn có thể nhìn thấy nó ở khắp mọi nơi. Từ "Strangers Things" của Netflix, MineCraft hay Muse, nơi vừa phát hành một album mang hương vị thập niên 80 - hay thậm chí là bản làm lại của Tron.

Vì vậy, tại sao không tận dụng xu hướng này và chỉ cho bạn cách triển khai nó trong trang đích được tạo bằng Elementor ?

Nó không chỉ là một hướng dẫn lý thuyết. Chúng tôi đã xem xét một số yếu tố cho khoảng thời gian giảm giá hiện tại (Thứ Sáu Đen), để cung cấp cho bạn công cụ chuẩn bị cho các sự kiện trong tương lai.

Phần mở đầu

Phần mở đầu của chúng tôi là phần anh hùng. Điều đầu tiên cần lưu ý ở đây là tiêu đề. Tôi khuyên bạn nên dành nhiều nỗ lực vào lĩnh vực này vì đây là điều đầu tiên bạn phải làm. khách thăm quan sẽ thấy.
Suy nghĩ về thông điệp chính xác mà bạn định truyền tải. Tiêu đề của bạn lớn và rõ ràng sẽ thu hút sự chú ý của mọi người. Phần đầu tiên này cũng nên khuyến khích người dùng cuộn xuống và duyệt qua phần còn lại của trang.

Hiệu ứng neon

Hiệu ứng neon đen friday Elementor.jpg

Ở giữa bố cục, tôi đặt logo, thông điệp và nút.

Bạn có thể thấy rằng thông điệp quan trọng nhất được viết bằng "đèn neon". Để có được giao diện neon đó, bạn cần thêm CSS vào thiết kế của mình. CSS sẽ thêm rất nhiều bóng hồng vào văn bản. Đó là toàn bộ sự việc.

Vì vậy, bạn cần thêm một tiện ích tiêu đề, thay đổi kích thước của phông chữ đã chọn để làm cho nó tỏa sáng và đặt màu thành trắng.

Sau đó mở tab Nâng cao và dán vào tab CSS tùy chỉnh, thêm mã này:

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; }

Nếu bạn muốn sử dụng một bóng râm khác bên cạnh màu hồng, chỉ cần thay đổi số màu sau dấu thăng. Đó là tất cả.

Tiêu đề dọc

Một khía cạnh thú vị khác của thiết kế này xuất hiện bên cạnh các chữ cái "FRI", với năm gắn liền với nó xuất hiện theo chiều dọc (90 độ).

Để đạt được diện mạo này, bạn cần thêm một tiện ích phần nội thất. Điều này được thực hiện để thực hiện hiệu ứng dọc chỉ trên một cột.

Sau khi thêm phần bên trong, thêm một tiện ích tiêu đề vào mỗi cột.

Tạo kiểu cho văn bản của bạn và sau đó mở tab nâng cao của cột thứ hai (cột bạn muốn xoay) và trong tab CSS tùy chỉnh, hãy viết mã này:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

Nền retro 80

Khi bạn đã hoàn tất công việc trên bài đăng chính, hãy bắt đầu làm việc trên nền để tạo sự nổi bật cho văn bản và biến khoa học viễn tưởng những năm 80 trở thành hiện thực. Ở đây tôi đã thêm một hình ảnh được thiết kế bằng Photoshop và sử dụng nó làm hình nền cho anh hùng.
Trong thiết kế này, nền có một lưới hình học gợi nhớ đến Tron với nét vẽ của những cây cọ nghiêng về bên trái và chuyển màu chính là xanh-tím-hồng để đạt được cảm giác cổ điển đó. Ngoài ra còn có một số nét đẹp như “DeLorean DMC-12” (bạn có thể sẽ nhận ra nó trong Back to the Future).
Chiếc xe, cũng như các ngôi sao băng, tất cả đều nhắm vào văn bản chính của phần của chúng tôi, làm nổi bật thông điệp chính của chúng tôi.

Phần tính năng

hộp thông tin Elementor.gif
Khi thiết kế trang đích, bạn cần suy nghĩ về các mối quan hệ giữa mỗi phần. Đó là một nhiệm vụ phức tạp hơn khi nói đến một thiết kế thời trang như những năm 80 cổ điển.
Vì vậy, sau khi thiết kế một phần đầu tiên tuyệt vời và nâng cao thanh, bạn phải duy trì mức độ cao và giữ cùng một chủ đề thiết kế, trong khi xem mỗi phần là một thành phần trong chính nó.

Thiết kế

Trong phần này, tôi thiết kế giao diện "vật thể không xác định" tối hơn khi chúng tôi "thu thập dữ liệu" trang. Ở đây bạn có thể thấy một tiêu đề, 3 dấu đầu dòng và một nút. Để tạo hiệu ứng 3D nổi này, tôi đã sử dụng một chút Photoshop kết hợp với cài đặt Flip-box từElementor.

Dàn dựng trên Photoshop

Vì vậy, điều đầu tiên tôi làm là tạo toàn bộ khung cảnh trong Photoshop để xem mọi thứ sẽ như thế nào trước khi tôi bắt đầu xây dựng nó. Trong tiêu đề, bạn có thể thấy giao diện của đèn neon trước đó và bên dưới nó, tôi đã thêm 3 hình tam giác với các biểu tượng và tiêu đề (các vòng tròn).
Tôi đã thêm một gradient xanh lam-tím-hồng vào mỗi hình tam giác. Phía trên nó, một đường kẻ mang lại cho nó vẻ ngoài như một chiếc TV những năm 80 và một vệt mờ phía sau, để tạo ra một cái nhìn khoa học viễn tưởng lấp lánh.
Các biểu tượng cũng có giao diện neon, cũng như tiêu đề ở dưới cùng của hình tam giác. Thêm hiệu ứng nổi ở kiểu in đậm. Nền có hiệu ứng khói, mây và tối với cùng một đường kẻ được sử dụng cho hình tam giác.
Đối với hoạt hình 3D, các hình tam giác sẽ có nền trong suốt. Điều này có nghĩa là văn bản ở mặt sau sẽ hiển thị khi nó không bị che. Vì vậy, tôi thêm một chút khói đen vào các cạnh của hình tam giác để làm cho chăn hòa quyện vào nhau mà vẫn che được mặt sau.
Vì vậy, về cơ bản có ba lớp để xây dựng trong trình chỉnh sửa: nền, biểu tượng và tiêu đề.

Xây dựng cuộc sống

Trong trình chỉnh sửa, tôi đã thêm tiện ích hộp lật. Trong tab nội dung phía trước, tôi đã chọn một hình ảnh làm phần tử đồ họa và thêm tiêu đề. Trong tab Nền, về màu sắc, tôi đã đổi màu thành trong suốt và thêm hình tam giác mà tôi đã thiết kế vào phần hình ảnh, sau đó thay đổi vị trí sao cho vừa vặn .
Sau đó, ở tab phía sau, tôi đã làm điều tương tự nhưng thay vì thêm tiêu đề, tôi đã thêm văn bản. Để di chuyển đến tab cài đặt. Ở đây tôi chơi với chiều cao của hộp. Tôi đã sử dụng đơn vị VH vì nó là đơn vị tương đối, nó sẽ thay đổi hình ảnh tương ứng với màn hình như khách thăm quan sẽ sử dụng.
Điều này làm cho nó phản hồi nhanh hơn. Trong phần hiệu ứng, tôi giữ nguyên hiệu ứng Lật, đổi hướng sang trái và kích hoạt độ sâu 3D để đạt được hiệu ứng 3D tuyệt vời này.

Cố vấn trưởng

Toàn bộ thành phần ở đây là nhằm vào nút (vì những gì bạn muốn là người dùng nhấp vào nút). Ở đây bạn có thể thấy nút này không đậm và 'in face' mà kết hợp hài hòa với lớp nền khói với một chút ánh sáng xung quanh. Nhưng khi bạn bước qua nó, màu hồng sẽ xuất hiện.

Bộ phận phê bình

danh sách đánh giá Elementor.jpg
Nếu người dùng cuộn đến phần thứ ba - có nghĩa là bạn đang làm đúng. Vì vậy, sau khi nói về sản phẩm và sự ngạc nhiên của nó, bây giờ là lúc để một bên khác lên tiếng.

Thiết kế

Trong phần này, chúng tôi có một tiện ích nhận xét trên nền hình học cấp tiến với tiêu đề neon. Nền được thiết kế trong Photoshop và sau đó được đặt vào nền của phần làm nền cố định để tạo hiệu ứng di chuột cuộn.
Tôi muốn làm cho phần này trông 'hậu trường', để khi bạn cuộn xuống, bạn sẽ thấy nó.

Bảng giá

biểu đồ giá Elementor.jpg
Phần này là phần Bảng giá . Tại đây bạn có thể xem tất cả các mặt hàng có thể hỗ trợ bán hàng. Tiêu đề, đếm ngược và tất nhiên - bảng giá.
Đây là dòng kết thúc của trang đích. Do đó, nếu người dùng của bạn không nhấp vào, thì đã xảy ra lỗi.

Thiết kế

Thiết kế trong phần này có nhiều hơn một liên lạc thập niên 80-galaxy. Nền ở đây đã được chỉnh sửa trong Photoshop để tạo cho nó một màu tím củ cải sáng và nổi bật so với nền đen-đen tồn tại trước khi hoàn thiện nó.
Dưới tiêu đề và khẩu hiệu có một quầy hiển thị thời gian còn lại cho đến khi kết thúc bán hàng. Ở đây tôi đã sử dụng một phông chữ spacy có tên là 'space mono' mà tôi đã thêm thông qua tùy chọn phông chữ tùy chỉnh.
Trong bảng giá dưới đây, mỗi chiếc bàn đều có nền đen nhạt tạo cảm giác "lơ lửng trong không gian". Khi bạn di chuột qua nó, nền sẽ tối đi và xung quanh nó có một vầng sáng làm tâm điểm hướng bạn đọc văn bản bên trong.
Khi bạn di chuyển con trỏ chuột qua nút, nút sẽ đổi màu một lần nữa. Một khi bạn đã đọc xong thông tin về những bức ảnh tuyệt vời của chúng tôi,

Lấy mô hình hoàn toàn tuyệt vời này

Mẫu hiển thị trong hướng dẫn này hiện có sẵn trong thư viện Elementor. Vì vậy, bạn có thể sử dụng nó với một cú nhấp chuột.