วิธีการสร้างหน้าสไตล์สไตล์ 80 ด้วย Elementor

ดีไซน์ยุค 80 - เราชอบมาก! ด้วยรูปทรงเรขาคณิตพื้นหลังเชิงพื้นที่และเอฟเฟกต์แสงนีออนทั้งหมดนี้หน้า Landing Page ของเราสำหรับกิจกรรมพิเศษ (ปาร์ตี้คริสต์มาส) จะไม่สดใสไปกว่านี้! มาดูวิธีทำกัน

ถอดสายคาดศีรษะเปิดไฟนีออนและใส่ตรอนลงใน VCR ของคุณ ... ช่วงเวลา 80 ปีกลับมาแล้ว!

ในฐานะนักออกแบบฉันมักจะมีจุดอ่อนสำหรับการออกแบบในยุค 80 ที่ไม่มีใครพูดถึง ด้วยรูปทรงเรขาคณิตเหล่านี้ลวดลายมากมายพื้นหลังเชิงพื้นที่พร้อมเอฟเฟกต์นีออนราคาถูกเหล่านี้ (ควรนำความทรงจำที่ชื่นชอบกลับมา)

ในความเป็นจริงคุณสามารถเห็นได้ทุกที่ ตั้งแต่“ Strangers Things” จาก Netflix, MineCraft หรือ Muse ซึ่งเพิ่งเปิดตัวอัลบั้มที่มีกลิ่นอายของยุค 80 หรือแม้แต่การรีเมคของ Tron

เหตุใดจึงไม่ใช้ประโยชน์จากเทรนด์นี้และแสดงวิธีใช้งานในหน้า Landing Page ที่สร้างด้วย Elementor ?

ไม่ใช่แค่การสอนเชิงทฤษฎีเท่านั้น เราได้นำองค์ประกอบบางอย่างสำหรับช่วงเวลาส่วนลดปัจจุบัน (Black Friday) เพื่อเป็นเครื่องมือในการเตรียมความพร้อมสำหรับกิจกรรมในอนาคตของคุณ

ส่วนเปิด

ส่วนเปิดของเราคือส่วนฮีโร่ สิ่งแรกที่ควรทราบที่นี่คือชื่อ ฉันขอแนะนำให้ใช้ความพยายามอย่างมากในด้านนี้เพราะมันเป็นสิ่งแรกของคุณ ผู้มาเยือน จะเห็น.

นึกถึงข้อความที่คุณตั้งใจจะสื่อ การมีชื่อของคุณใหญ่และชัดเจนจะดึงดูดความสนใจของผู้คน ส่วนแรกนี้ควรกระตุ้นให้ผู้ใช้เลื่อนลงและเรียกดูส่วนที่เหลือของหน้า

เอฟเฟกต์นีออน

ฉันวางโลโก้ข้อความและปุ่มไว้ตรงกลางองค์ประกอบภาพ

คุณจะเห็นว่าข้อความที่สำคัญที่สุดเขียนด้วย "แสงนีออน" เพื่อให้ได้รูปลักษณ์นีออนคุณต้องเพิ่ม 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 และใช้เป็นพื้นหลังฮีโร่

ในการออกแบบนี้พื้นหลังมีตารางเรขาคณิตที่ชวนให้นึกถึง Tron โดยมีต้นปาล์มเอนไปทางซ้ายและมีการไล่ระดับสีฟ้า - ม่วง - ชมพูเป็นหลักเพื่อให้ได้ความรู้สึกย้อนยุค นอกจากนี้ยังมีสัมผัสดีๆเช่น“ DeLorean DMC-12” (คุณอาจจะจำได้ใน Back to the Future)

รถเช่นเดียวกับดาวยิงทั้งหมดล้วนกำหนดเป้าหมายข้อความหลักของส่วนของเราโดยเน้นข้อความหลักของเรา

ส่วนคุณสมบัติ

เมื่อออกแบบหน้า Landing Page คุณต้องคิดถึงความสัมพันธ์ระหว่างแต่ละส่วน มันเป็นงานที่ซับซ้อนมากขึ้นเมื่อพูดถึงการออกแบบที่ทันสมัยเช่นย้อนยุค 80

ดังนั้นหลังจากออกแบบส่วนแรกที่น่าตื่นตาตื่นใจและยกระดับบาร์คุณจะต้องรักษาระดับสูงและคงรูปแบบการออกแบบเดียวกันไว้โดยพิจารณาแต่ละส่วนว่าเป็นองค์ประกอบในตัวเอง

การออกแบบ

ในส่วนนี้ ฉันได้ออกแบบรูปลักษณ์ "วัตถุที่ไม่รู้จัก" ให้เข้มขึ้นในขณะที่เรา "รวบรวมข้อมูล" หน้า ที่นี่คุณสามารถดูชื่อ สัญลักษณ์แสดงหัวข้อย่อย 3 รายการและปุ่มหนึ่งปุ่ม ในการสร้างเอฟเฟกต์ 3D แบบลอยตัว ฉันใช้ Photoshop เล็กน้อยร่วมกับการตั้งค่า Flip-box จากElementor.

จัดแสดงบน Photoshop

สิ่งแรกที่ฉันทำคือสร้างฉากทั้งหมดใน Photoshop เพื่อดูว่าทุกอย่างจะเป็นอย่างไรก่อนที่ฉันจะเริ่มสร้าง ในชื่อเรื่องคุณจะเห็นรูปลักษณ์ของนีออนจากก่อนหน้านี้และข้างใต้ฉันได้เพิ่มสามเหลี่ยม 3 รูปพร้อมไอคอนและชื่อเรื่อง (วงกลม)

ฉันเพิ่มการไล่ระดับสีน้ำเงิน - ม่วง - ชมพูให้กับแต่ละสามเหลี่ยม ด้านบนลายเส้นทำให้ดูทีวียุค 80 และด้านหลังเบลอเพื่อสร้างลุคไซไฟที่เปล่งประกาย

ไอคอนยังมีลักษณะเป็นนีออนเช่นเดียวกับชื่อที่ด้านล่างของสามเหลี่ยม เพิ่มเอฟเฟกต์ลอยตัวเป็นตัวหนา พื้นหลังมีเอฟเฟกต์ควันเมฆครึ้มและมืดโดยมีรูปแบบเส้นเดียวกับที่ใช้สำหรับสามเหลี่ยม

สำหรับภาพเคลื่อนไหว 3 มิติรูปสามเหลี่ยมจะมีพื้นหลังโปร่งใส ซึ่งหมายความว่าข้อความด้านหลังจะแสดงเมื่อไม่ครอบคลุม ดังนั้นฉันจึงเพิ่มควันดำเล็กน้อยที่ด้านข้างของรูปสามเหลี่ยมเพื่อให้ผ้าห่มกลมกลืนและยังคงคลุมด้านหลัง

โดยพื้นฐานแล้วจะมีสามเลเยอร์ที่จะสร้างในตัวแก้ไข: พื้นหลังไอคอนและชื่อเรื่อง

สร้างสด

ในตัวแก้ไขฉันได้เพิ่มวิดเจ็ตฟลิปบ็อกซ์ ในแท็บเนื้อหาด้านหน้าฉันเลือกรูปภาพเป็นองค์ประกอบกราฟิกและเพิ่มชื่อเรื่อง ในแท็บพื้นหลังเป็นสีฉันเปลี่ยนสีเป็นแบบโปร่งใสและเพิ่มสามเหลี่ยมที่ฉันออกแบบในส่วนรูปภาพจากนั้นเปลี่ยนตำแหน่งเพื่อให้พอดี .

จากนั้นในแท็บด้านหลัง ฉันก็ทำแบบเดียวกัน แต่แทนที่จะเพิ่มชื่อเรื่อง ฉันกลับเพิ่มข้อความลงไป เพื่อย้ายไปที่แท็บการตั้งค่า ที่นี่ฉันเล่นกับความสูงของกล่อง ผมใช้หน่วย VH เพราะเป็นหน่วยสัมพันธ์ซึ่งจะเปลี่ยนภาพที่สัมพันธ์กับหน้าจอเป็น ผู้มาเยือน จะใช้.

ทำให้ตอบสนองได้ดีขึ้น ในส่วนของเอฟเฟกต์ฉันเก็บเอฟเฟกต์ Flip เปลี่ยนทิศทางไปทางซ้ายและเปิดใช้งานความลึกของ 3D เพื่อให้ได้เอฟเฟกต์ 3D ที่น่าทึ่งนี้

CTA

โครงสร้างทั้งหมดที่นี่มุ่งเป้าไปที่ปุ่ม (เนื่องจากสิ่งที่คุณต้องการคือให้ผู้ใช้คลิกปุ่ม) ที่นี่คุณจะเห็นว่าปุ่มไม่ได้เป็นตัวหนาและ 'อยู่หน้าคุณ' แต่กลมกลืนไปกับพื้นหลังที่มีควันและมีแสงเรืองแสงเล็กน้อยรอบ ๆ แต่เมื่อคุณเดินผ่านมันสีชมพูก็ปรากฏขึ้น

มาตรานักวิจารณ์

หากผู้ใช้เลื่อนไปที่ส่วนที่สามนั่นหมายความว่าคุณกำลังทำสิ่งที่ถูกต้อง ดังนั้นหลังจากพูดคุยเกี่ยวกับผลิตภัณฑ์และความประหลาดใจแล้วตอนนี้ก็ถึงเวลาที่อีกฝ่ายจะพูด

การออกแบบ

ในส่วนนี้เรามีวิดเจ็ตความคิดเห็นบนพื้นหลังรูปทรงเรขาคณิตที่รุนแรงพร้อมชื่อนีออน พื้นหลังได้รับการออกแบบใน Photoshop จากนั้นวางไว้ที่พื้นหลังของส่วนเป็นพื้นหลังคงที่เพื่อสร้างเอฟเฟกต์การเลื่อนแบบเลื่อน

ฉันต้องการทำให้ส่วนนี้ดูเป็น 'เบื้องหลัง' ดังนั้นเมื่อคุณเลื่อนลงคุณจะได้สัมผัสกับมัน

ส่วนตารางราคา

ส่วนนี้เป็นส่วน ตารางราคา . คุณสามารถดูรายการทั้งหมดที่รองรับการขายได้ที่นี่ ชื่อเรื่องการนับถอยหลังและแน่นอน - ตารางราคา

นี่คือเส้นชัยของหน้า Landing Page ดังนั้นหากผู้ใช้ของคุณไม่คลิกแสดงว่ามีบางอย่างผิดพลาด

การออกแบบ

การออกแบบในส่วนนี้มีมากกว่าหนึ่ง ติดต่อเรา 80s-กาแล็กซี พื้นหลังที่นี่ได้รับการแก้ไขใน Photoshop ทำให้ได้สีม่วงหัวไชเท้าที่สดใสและโดดเด่นจากพื้นหลังสีดำดำที่มีอยู่ก่อนที่จะเจาะในตอนท้าย

ใต้ส่วนหัวและสโลแกนมีตัวนับที่แสดงเวลาที่เหลืออยู่จนกว่าจะสิ้นสุดการขาย ที่นี่ฉันใช้แบบอักษร spacy ที่เรียกว่า 'space mono' ซึ่งฉันเพิ่มผ่านตัวเลือกแบบอักษรที่กำหนดเอง

ในตารางราคาด้านล่างแต่ละตารางจะมีพื้นหลังสีดำอ่อนทำให้มีลักษณะ "ลอยอยู่ในอวกาศ" เมื่อคุณวางเมาส์เหนือพื้นหลังจะมืดลงและมีแสงรอบ ๆ เป็นจุดโฟกัสที่นำทางให้คุณอ่านข้อความข้างใน

เมื่อคุณเลื่อนเคอร์เซอร์ของเมาส์ไปที่ปุ่มปุ่มจะเปลี่ยนสีอีกครั้ง เมื่อคุณอ่านข้อมูลเกี่ยวกับช็อตเด็ดของเราเสร็จแล้ว

รับโมเดลที่ยอดเยี่ยมนี้โดยสิ้นเชิง

เทมเพลตที่แสดงในบทช่วยสอนนี้มีอยู่ในห้องสมุดแล้ว Elementor. คุณจึงสามารถใช้งานได้เพียงคลิกเดียว

วิธีการสร้างหน้าสไตล์สไตล์ 80 ด้วย Elementor