แลนดิ้งเพจที่ขายดีที่สุด การแก้ปัญหาเฉพาะ การสร้างหน้า Landing Page ด้วยตัวเองหรือสั่งซื้อหน้า Landing Page จากมืออาชีพจะดีกว่า

การออกแบบเพจนี้มีเอกลักษณ์เฉพาะตัว แฝงไปด้วยบุคลิกของแบรนด์ และไม่เหมือนกับเพจอื่นๆ

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

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

ตัวอย่างที่ดีในการสาธิตผลิตภัณฑ์ของบริษัท บริษัทจะอัพเดทรายการสินค้าที่แสดงบนเพจทุกเดือน

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

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

กุญแจสำคัญในการออกแบบนี้คือความเรียบง่าย เมนูง่ายๆ และแถบเลื่อนสีสดใสเข้ากันได้อย่างลงตัว

หน้านี้แสดงส่วนต่างๆ ได้สำเร็จ หากต้องการข้อมูลโดยละเอียดเพิ่มเติม เพียงคลิกที่ภาพที่คุณต้องการ

การออกแบบไม่ได้มีองค์ประกอบที่ไม่จำเป็นมากเกินไปคุณสามารถดูลักษณะและราคาทั้งหมดของผลิตภัณฑ์ได้ทันที

เว็บไซต์ความบันเทิง

เรียบง่ายและมีรสนิยม วัตถุประสงค์ของเพจชัดเจนทันที: การดูวิดีโอสารคดี

การออกแบบเพจมีความคิดที่ดีมาก มันน่าหลงใหลและสะกดจิตอย่างแท้จริง การผสมผสานที่ยอดเยี่ยมของสีและรูปทรง

ไซต์นี้ได้รับการยกย่องเหนือสิ่งอื่นใด การออกแบบที่คิดอย่างชาญฉลาดและองค์ประกอบเชิงโต้ตอบมากมายจะไม่ทำให้ใครเฉยเมย

หน้าแฟรนไชส์แฮร์รี่ พอตเตอร์นี้ได้รับการออกแบบโดยใช้สี วลี และชื่อที่แฟนๆ คุ้นเคย

หน้านี้ไม่เพียงแต่ดูสวยงามเท่านั้น แต่ยังมีประโยชน์ใช้สอยมากอีกด้วย มีองค์ประกอบเชิงโต้ตอบมากมาย บูรณาการกับ Google Maps การใช้แท็บ

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

ไซต์นี้แสดงให้เห็นถึงพลังของการออกแบบกราฟิกและการพัฒนาเว็บ ไปดูเองเลยดีกว่า

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

ภาพของเว็บไซต์นี้น่าทึ่งมาก ภาพที่สดใสดึงดูดความสนใจของผู้ใช้ได้ทันที

Jay-Z รู้วิธีสนุกสนานอย่างแน่นอน บนเว็บไซต์ของเขา บทความ รูปภาพ และเนื้อหาอื่นๆ จะถูกนำเสนอในรูปแบบของไทล์แบบโต้ตอบ

การออกแบบนี้ใช้เฉดสีธรรมชาติที่เข้ากันได้ดีกับประเด็นหลักที่เกิดขึ้นบนไซต์

หน้า Landing Page ของพอร์ตโฟลิโอ

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

ตัวอย่างนี้มีการผสมสีที่น่าสนใจมาก นอกจากนี้ องค์ประกอบทั้งหมดบนหน้ายังใช้โครงสร้างพื้นหลังเดียวกัน ซึ่งมีลักษณะคล้ายไม้

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

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

หน้านี้เป็นการนำเสนอที่ยอดเยี่ยม แต่ละแบนเนอร์มีไว้สำหรับโปรเจ็กต์ที่แยกจากกันโดยเฉพาะ

ตัวอย่างการออกแบบกระเบื้องที่ไม่ธรรมดา

การพิมพ์มีบทบาทสำคัญในหน้านี้ การใช้แบบอักษรที่แตกต่างกันช่วยในการถ่ายทอดความคิด

การออกแบบมีความกระชับและกระชับ ในหน้านี้ เราจะเห็นทุกสิ่งที่เราต้องการ: พอร์ตโฟลิโอและลิงก์ไปยังส่วนอื่นๆ

ไอคอนและไม่มีอะไรเพิ่มเติม ตัวอย่างที่ดีของการออกแบบที่เรียบง่าย

หน้าผลงานจะแสดงสิ่งที่สำคัญที่สุด - ตัวอย่างงาน

ขายปลีก

หน้านี้ประกอบด้วยรูปถ่ายของผู้ใช้จำนวนมาก ซึ่งคุณสามารถเลื่อนดูได้อย่างง่ายดายโดยใช้การเลื่อนและโฮเวอร์

รูปถ่ายผลิตภัณฑ์ของบริษัทขนาดใหญ่ที่สว่างสดใสทำให้คุณอยากดื่มเบียร์เย็นๆ สักกระป๋อง

ไม่มีอะไรมารบกวนผู้เข้าชมจากการใคร่ครวญนาฬิกาที่สวยที่สุด

จุดเด่นของเว็บไซต์นี้คือการแสดงภาพสไลด์ที่ด้านบนของหน้า ซึ่งนำเสนออาหารรสเลิศที่ชวนน้ำลายสอ

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

สไตล์หรูหรา ภาพคุณภาพสูง การนำเสนอที่สวยงาม ไม่มีอะไรเบี่ยงเบนความสนใจจากองค์ประกอบหลัก

Toyota ได้สร้างเว็บไซต์สไตล์ Pinterest สำหรับผู้ชื่นชอบ Camry คุณจะพบภาพถ่าย บทความ สถิติมากมายที่นี่

แม้ว่าหน้านี้จะมีความสูงเท่ากับหน้าจอเดียว แต่ก็มีองค์ประกอบเชิงโต้ตอบที่น่าสนใจมากมายและรายละเอียดที่ผิดปกติอยู่

การออกแบบเพจสะท้อนถึงสไตล์ของแบรนด์อย่างเต็มที่: สี แบบอักษร รูปภาพจะเชื่อมโยงกับบริษัทนี้ทันที

การออกแบบใช้โทนสีอ่อนและสงบ เหมาะสำหรับผลิตภัณฑ์ที่นำเสนอ

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

ปุ่มสีแดงที่ลอยอยู่ตรงกลางหน้าจอใช้งานได้ คุณอยากจะคลิกมันจริงๆ

หากต้องการสร้างเว็บไซต์หน้าเดียวที่ประสบความสำเร็จสำหรับการขายผลิตภัณฑ์ของคุณเอง วิธีแก้ปัญหาที่ชาญฉลาดคือศึกษาตัวอย่างหน้า Landing Page ที่ใช้งานได้ก่อน มันง่ายไหมที่จะสร้างเพจด้วยตัวเอง? ลองพิจารณาถึงสิ่งที่ทำให้ไซต์ลงจอดที่สวยงามและขายได้อย่างแข็งขันแตกต่างออกไป

หน้า Landing Page คืออะไร

การลงจอด - มันคืออะไร? นี่คือชื่อของเว็บไซต์หน้าเดียวที่ลูกค้าจะได้รับสิทธิประโยชน์บางอย่าง: ส่วนลด โปรโมชั่น ผลิตภัณฑ์ที่ไม่ซ้ำใคร การลงจอดไม่ได้มีจุดมุ่งหมายเพื่อขายสินค้าเสมอไป บางครั้งหน้าดังกล่าวจะมีแบบฟอร์มใบสมัคร โดยกรอกแบบฟอร์มที่ลูกค้าจะเข้าไปในฐานข้อมูลหรือสั่งการโทรข้อมูลจากผู้จัดการบริษัท

บริษัทส่วนใหญ่ต่างชื่นชมแล้วว่าไซต์ Landing Page ช่วยในด้านการตลาดได้มากเพียงใด หน้าเดียวแก้ปัญหาได้หนึ่งปัญหา หน้า Landing Page ไม่ควรบรรทุกข้อมูลเพิ่มเติมมากเกินไป เป้าหมายหลักของพวกเขาคือการกระตุ้นให้ลูกค้าตอบสนองต่อคำกระตุ้นการตัดสินใจ

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

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

หน้า Landing Page ที่สวยงามเป็นเครื่องมือทางการตลาดออนไลน์ที่สำคัญ

ตัวอย่างของแลนดิ้งเพจที่สวยที่สุด

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

• ออกแบบมาเพื่อ move.org;
• Evr.st;
• Grooveshark.com;
• Hipstamatic.com;
• GiftRocket.com

หน้า Landing Page ที่ดีที่สุดมีโครงสร้างและฟีเจอร์ที่คล้ายคลึงกัน ผู้คนชอบตัวเลือกการออกแบบเว็บไซต์ที่แตกต่างกัน แต่ความสำเร็จของแลนดิ้งเพจไม่ได้อยู่ที่ภาพที่สวยงาม คุณสมบัติที่สำคัญของเว็บไซต์หน้าเดียวที่น่าดึงดูด:

• การออกแบบที่เรียบง่ายแต่มีสไตล์
• ใช้ถ้อยคำที่ชัดเจน ไม่มีวลีคลุมเครือ เจาะจงเฉพาะเจาะจงมาก
• รายการผลประโยชน์ (ลูกค้าเข้าใจทันทีว่าเขาจะได้รับอะไรหากเขาตอบกลับข้อเสนอ)
• แบบฟอร์มใบสมัครที่สะดวกโดยไม่มีข้อมูลที่ไม่จำเป็น (ทางออกที่ดีที่สุดคือชื่อและที่อยู่ติดต่อของผู้ซื้อเท่านั้น)
• การปรากฏตัวของคำกระตุ้นการตัดสินใจ แรงจูงใจในการตอบกลับ (“การโทร”, “ค้นหารายละเอียด”, “ขอการโทร”);
• ความซื่อสัตย์ (หน้า Landing Page ควรมีเฉพาะข้อมูลที่เกี่ยวข้องและเป็นข้อเท็จจริงเท่านั้น)
• การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา (การมีอยู่ของข้อความค้นหายอดนิยมในข้อความของเว็บไซต์ทำให้อันดับของเครื่องมือค้นหา)

บทความนี้นำเสนอตัวอย่างเว็บไซต์ที่มีหน้า Landing Page ที่ดี ศึกษาและพัฒนาเว็บไซต์หน้าเดียวของคุณเองสำหรับผลิตภัณฑ์และบริการ คำแนะนำทั่วไปบางประการสามารถเน้นได้ หน้าเว็บควรมีความสามัคคีและดึงดูดสายตา อย่าใช้เฉดสีที่เป็นกรดหรือระคายเคือง ขอแนะนำให้จำกัดตัวเองไว้ที่ 2-3 สีหลักและเลือกใช้โทนสีที่ตัดกันอย่างสวยงาม รูปภาพทั้งหมดบนหน้า Landing Page ต้องมีคุณภาพสูง

การผสมสีที่กลมกลืน ประโยชน์ที่อธิบายไว้อย่างชัดเจน และการจัดวางที่สะดวกบนหน้าจอเป็นสัญญาณของแลนดิ้งเพจที่ประสบความสำเร็จ

ตัวอย่างการขายหน้า Landing Page อย่างแข็งขัน

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

คุณสมบัติที่สำคัญคือคุณประโยชน์ที่ชัดเจน ยิ่งผู้ซื้อเข้าใจได้เร็วเท่าไรว่าตนได้รับการเสนอเงื่อนไขความร่วมมือที่ดีและยุติธรรมอย่างแท้จริง เขาก็จะยิ่งทำการซื้อได้เร็วยิ่งขึ้นเท่านั้น ดังนั้นในข้อเสนอของหน้าคุณต้องระบุต้นทุนของผลิตภัณฑ์หรือบริการ หากเป็นไปได้ คุณต้องเปรียบเทียบราคากับราคาของคู่แข่ง และอย่าลืมเน้นไปที่ความแตกต่าง (เช่น "ถูกกว่าคู่แข่ง 5,000 รูเบิล")

ตัวเลือกที่ดีคือใช้รูปแบบคำถาม-คำตอบ ผู้ใช้มักจะค้นหาข้อมูลทางอินเทอร์เน็ตในรูปแบบของคำถาม เช่น “วิธีเลือกชุดไปงานพรอม” ใช้ข้อความยอดนิยมในชื่อหน้า Landing Page และรับประกันการเข้าชมที่ดี (หากเว็บไซต์เสนอวิธีแก้ปัญหาจริงๆ)

ข้อมูลสำคัญทั้งหมดควรวางไว้บนหน้าจอแรก: ยิ่งผู้ใช้เข้าใจสาระสำคัญของข้อเสนอได้เร็วเท่าไร เขาก็จะตอบสนองเร็วขึ้นเท่านั้น

หน้า Landing Page สำหรับการขายมักทำงานโดยไม่ต้องเลื่อน - นั่นคือไม่ต้องเลื่อนหน้าลง เงื่อนไขที่เอื้ออำนวยทั้งหมดและแบบฟอร์มการสมัครจะอยู่ที่หน้าจอแรก อาจฟังดูแปลก แต่ผู้ใช้บางคนไม่ชอบการเลื่อนดูและต้องการดูส่วนสำคัญของประโยคโดยสรุป ทำไมไม่ให้โอกาสพวกเขาแบบนี้ล่ะ?

บทสรุป

การสร้างหน้า Landing Page เป็นกระบวนการที่ซับซ้อนซึ่งงานด้านเทคนิคที่ซ้ำซากจำเจผสมผสานกับความคิดสร้างสรรค์ แน่นอนว่ามีตัวอย่างมากมายของเว็บไซต์หน้าเดียวที่ประสบความสำเร็จและคำแนะนำที่เป็นประโยชน์ทั่วไป แต่คุณไม่ควรเลียนแบบและใช้เทมเพลตซ้ำๆ โดยไม่ตั้งใจ สิ่งสำคัญในหน้า Landing Page ไม่ใช่รูปลักษณ์ภายนอก แต่เป็นข้อเสนอที่กำหนดไว้อย่างชัดเจน

หากไม่มีการออกแบบที่แข็งแกร่ง ธุรกิจออนไลน์จะไม่ “เริ่มต้น” หรืออย่างน้อยก็จะไม่เปิดขึ้น 100% หมวดหมู่บล็อกของเรามีไว้สำหรับการปรากฏตัวของหน้า Landing Page - . แต่วันนี้เราจะมาดูตัวอย่างที่ประสบความสำเร็จของการออกแบบหน้า Landing Page ของผลิตภัณฑ์

ให้ความสนใจกับบทบาทของ "ภาพหลัก" หรือ "ภาพหลัก" ในแต่ละตัวอย่าง - โดยจะวางศักยภาพในการขายของหน้า Landing Page

เราหวังว่ากรณีเหล่านี้เป็นแรงบันดาลใจให้คุณทดสอบด้วยตัวเอง

1.

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

2.

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

รูปแบบที่น่าสนใจสำหรับการพิสูจน์ทางสังคม - ทดสอบด้วยตัวคุณเอง

3.

หลังจากการเปลี่ยนแปลง ก็ชัดเจนทันทีว่านี่คือร้านเสื้อผ้าสตรี การผสมผสานภาพถ่ายของผู้หญิงคุณภาพสูงเข้ากับบล็อกข้อมูลเกี่ยวกับส่วนลด โปรโมชั่น เงื่อนไขการจัดส่ง ฯลฯ เป็นสิ่งที่น่าสังเกต

4.

ร้านค้าออนไลน์ของ Ada Blackjack จำหน่ายกระเป๋าและเป้สะพายหลัง การออกแบบนั้นเรียบง่ายและอิงจากภาพถ่ายผลิตภัณฑ์ที่ดี เลย์เอาต์นี้ไม่เบี่ยงเบนความสนใจจากสิ่งสำคัญ - ผลิตภัณฑ์

5.AMBSN

AMBSN เป็นไซต์อีคอมเมิร์ซสำหรับขายเสื้อผ้า เนื่องจากการแข่งขันที่สูงเจ้าของจึงตัดสินใจโดดเด่นด้วยการออกแบบที่สดใส - โชคดีที่สไตล์เสื้อผ้าเอื้ออำนวย

6. ไรเดอร์

อีกวิธีหนึ่งที่โดดเด่นคือการออกแบบที่กำหนดเอง ตัวอย่างคือร้านขายเสื้อผ้าและของใช้ในบ้าน RYDER ที่มีการจัดวางที่สร้างสรรค์มาก (ดูเมนูในภาพหน้าจอ) คุ้มค่าที่จะทดสอบว่าสิ่งนี้ส่งผลต่อการแปลงหน้า Landing Page อย่างไร

7.

เชื่อกันว่าในหน้าหลักควรระบุสิทธิประโยชน์ (จัดส่งฟรี โปรโมชั่น ลดราคา ฯลฯ) และการโพสต์รูปภาพสินค้ายอดนิยม หรือเป็นเพียงการแสดงสินค้าเป็นทางเลือกสุดท้าย แต่เมื่อดูที่เว็บไซต์ของ Morepork ดูเหมือนว่าบริษัทจะขายตัวเองมากกว่าขายผลิตภัณฑ์

บางทีกลยุทธ์นั้นก็สมเหตุสมผล - คุ้มค่าที่จะทดสอบเพื่อค้นหาและแน่ใจ

8.

Dick Moby ขายแว่นตา และแลนดิ้งเพจของแบรนด์มีการออกแบบที่โดดเด่นมากมาย:

• สัญลักษณ์นามธรรมบนแบนเนอร์ชื่อเรื่องสร้างบรรยากาศที่ผ่อนคลาย เชิญชวนให้คุณมาสำรวจสินค้าประเภทต่างๆ
• ภาพถ่ายสินค้าคุณภาพสูง
• ไม่มีพื้นหลังในภาพถ่ายที่สวมแว่นตา - ไม่มีอะไรรบกวนผลิตภัณฑ์

9.

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

10.ESQID

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

11.

การออกแบบของ Mahabis สะท้อนให้เห็นถึงส่วนสำคัญของข้อเสนอนั่นคือคุณภาพสูง ผู้ใช้สามารถชื่นชมรายละเอียดที่เล็กที่สุด - สิ่งนี้สร้างแรงบันดาลใจให้เกิดความมั่นใจและกระตุ้นให้เกิดการซื้อ

12.

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

13.

Jackie Smith เป็นอีกหนึ่งเว็บไซต์อีคอมเมิร์ซที่ "สดใส" ดังตัวอย่างข้างต้น ความสมดุลของการมองเห็นได้รับการดูแลอย่างดี องค์ประกอบที่สำคัญถูกเน้นด้วยสีสันที่หลากหลาย - ภาพถ่ายผลิตภัณฑ์และบล็อกพร้อมโปรโมชั่น ทุกสิ่งทุกอย่างเป็นขาวดำ

14.

การออกแบบของ Grovemade เชื่อมช่องว่างระหว่างหน้าแรกและหน้าร้าน โดยไซต์จำหน่ายที่รองแก้วไม้ เครื่องเขียน และอุปกรณ์เสริมต่างๆ ภาพหน้าจอด้านล่างส่วนใหญ่เป็นผลิตภัณฑ์ของแบรนด์ การจัดวางผลิตภัณฑ์ในภาพถ่ายได้รับการพิจารณาอย่างรอบคอบ และแบบอักษรที่ไม่ได้มาตรฐาน - ค่อนข้างโค้งมน - ช่วยเสริมแนวคิดทางศิลปะ

15.

ในร้านขายรองเท้าออนไลน์ Muroexe สินค้าได้รับการจัดเรียงอย่างดีและนำเสนอในตารางที่เรียบร้อย การออกแบบมีพื้นที่ว่างจำนวนมาก ซึ่งสร้างเอฟเฟกต์แสงและปรับปรุงประสบการณ์ผู้ใช้

16.

หน้าจอแรกของร้านค้าออนไลน์ Greyrock มีเพียงรูปถ่ายเท่านั้น แสดงเฟอร์นิเจอร์ที่สามารถประกอบได้ง่ายโดยไม่ต้องใช้เครื่องมือ (USP จริง) เด็กผู้หญิงที่มีหนังสือและคำจารึกในชื่อช่วยเสริมองค์ประกอบดังกล่าว ราวกับพูดว่า: “ใจเย็นๆ สั่งเฟอร์นิเจอร์ ประกอบอย่างรวดเร็วและผ่อนคลาย”

อย่างไรก็ตาม หน้า Landing Page นี้สร้างขึ้นในรูปแบบที่เรียบง่ายมาก ในแกลเลอรีเทมเพลต LPgenerator คุณจะพบหน้าสำเร็จรูปที่คล้ายกันจำนวนมาก และหน้าที่ครอบคลุมจะช่วยให้คุณสามารถปรับเค้าโครงที่เลือกได้โดยไม่ต้องมีความรู้พิเศษ:

17.

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

18.

อีกหนึ่งร้านค้าออนไลน์ในสไตล์ “ไม่มีอะไรพิเศษ” แม้ว่าการออกแบบจะไม่มีคุณสมบัติพิเศษใดๆ แต่ก็ไม่ทิ้งความรู้สึกที่ไม่สมบูรณ์ ทุกอย่างเข้าที่ ไม่มีอะไรรบกวนจากรายการสินค้า

19.

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

20.

ร้านค้าออนไลน์ THING IND. นำเสนอผลิตภัณฑ์แบบกำหนดเองสำหรับบ้าน แนวคิดนี้สะท้อนให้เห็นในการออกแบบแลนดิ้งเพจ เว็บไซต์ใช้แบบอักษรสีน้ำเงินเข้มแทนสีดำ (รวมถึงการนำทางด้วย) นักออกแบบสร้างบรรยากาศที่ผ่อนคลาย ซึ่งไม่ใช่เรื่องปกติสำหรับอุตสาหกรรมอีคอมเมิร์ซ

21.

บริษัทสบู่ พวกเขานำเสนอผลิตภัณฑ์ในลักษณะที่ "ขายตัวมันเอง" ไม่มีองค์ประกอบการโฆษณา - มีเพียงภาพถ่ายและข้อความเท่านั้น ตัวอย่างที่ดีของความเรียบง่ายในการออกแบบ

22. ตอบรับคำเชิญ

การออกแบบที่หรูหราและมีสไตล์ มีองค์ประกอบหลายอย่าง แต่ความสนใจไม่วอกแวก แม้แต่มุมก็ยังถูกครอบครอง - มีตัวย่อของแบรนด์

23. อัตราส่วน

การออกแบบบ่งบอกถึงแก่นแท้ของข้อเสนอ: อุปกรณ์ชงกาแฟคุณภาพสูง แต่ละผลิตภัณฑ์มีหน้า Landing Page ของตัวเอง พร้อมด้วยรายการฟังก์ชันและคุณประโยชน์ต่างๆ การออกแบบนี้ทำให้พอใจด้วยภาพถ่ายคุณภาพสูง สีสันที่พิถีพิถัน และความสามารถในการเล่นตัวอักษร

24.

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

อย่างไรก็ตาม จากนี้ไปคุณไม่จำเป็นต้องเปิดบริการ Google Fonts เพื่อรับแบบอักษรของบุคคลที่สามอีกต่อไป เพราะตอนนี้แบบอักษรเชื่อมต่อโดยตรงจาก .

เราได้เพิ่มแบบอักษรทั้งหมดจากคอลเลกชัน Google Fonts ลงในแกลเลอรีภาพ และสิ่งที่คุณต้องทำคือเลือกแบบอักษรที่เหมาะสม คลิกที่ปุ่มเชื่อมต่อ และใช้สำหรับข้อความใหม่หรือที่มีอยู่ในหน้า Landing Page

25. พักผ่อน.

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

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

แลนดิ้งเพจคืออะไร? นี่คือหน้าที่ผู้คนมักจะเข้ามาหลังจากคลิกโฆษณา สร้างขึ้นเพื่อข้อเสนอเดียว: ผลิตภัณฑ์ บริการ หรือการสมัครสมาชิก หน้า Landing Page ที่มีประสิทธิภาพถือเป็นรากฐานสำคัญของการตลาดออนไลน์ที่ประสบความสำเร็จ ผลิตภัณฑ์อาจดีที่สุดในตลาด โฆษณาสมบูรณ์แบบ แต่ไม่มีหน้า Landing Page ที่ดี ความพยายามไม่ได้ให้ผลลัพธ์ 100% โดยจะแจ้งให้ผู้เยี่ยมชมทราบว่ามีข้อเสนออะไรบ้างและเหตุใดพวกเขาจึงต้องการมัน ความรู้สึกเร่งด่วนมีส่วนช่วยในการตัดสินใจอย่างรวดเร็วและการเปลี่ยนผู้ใช้เป็นหมวดหมู่ของลูกค้า

จะสร้างแลนดิ้งเพจได้อย่างไร? เป็นการผิดที่จะเชื่อว่าคำตอบอยู่ที่ความสามารถในการเรียงพิมพ์ แลนดิ้งเพจที่ดีเป็นผลมาจากการประสานงานกันในเรื่องเป้าหมาย ข้อความ การออกแบบ และโค้ด หน้า Landing Page ซึ่งจะมีตัวอย่างอยู่ด้านล่างนี้จะช่วยให้ผู้เริ่มต้นเรียนรู้พื้นฐานของการทำงานกับเลย์เอาต์ แต่จะไม่แทนที่ข้อความการแปลงและความเข้าใจของกลุ่มเป้าหมาย คุณสามารถสร้างโดยใช้นักออกแบบ Landing Page ต่างๆ ได้

ดังนั้นก่อนที่คุณจะสร้างหน้า Landing Page ให้ถามตัวเองว่า:

• บุคคลจะทำอะไรหลังจากเชื่อมโยงไปถึงหน้า Landing Page? เขาจะซื้ออะไรไหม? คุณจะกรอกแบบฟอร์มหรือไม่? สมัครรับจดหมายข่าว? ก่อนที่คุณจะติดตามอัตรา Conversion ให้กำหนดเป้าหมายที่ชัดเจน
• คู่แข่งของฉันคือใคร? ในความเป็นจริง คำถามสามข้อนี้คือใคร พวกเขาประสบความสำเร็จแค่ไหน และสามารถนำความสำเร็จเหล่านั้นไปประยุกต์ใช้ได้อย่างไร? การเลียนแบบเป็นรูปแบบหนึ่งของคำเยินยอที่จริงใจที่สุด หากคู่แข่งกำลังทำสิ่งที่ได้ผล ให้ทำซ้ำบนเว็บไซต์ของคุณ
• ผู้ชมของฉันคือใคร? ยิ่งคุณเข้าใจกลุ่มเฉพาะและกลุ่มเป้าหมายของคุณมากเท่าไร โอกาสที่ความพยายามของคุณจะได้รับผลตอบแทนก็จะมากขึ้นเท่านั้น

คุณจำเป็นต้องนำเสนอข้อมูลที่จำเป็นทั้งหมด แต่ไม่มากจนเกินไปจนทำให้ผู้มีโอกาสเป็นลูกค้าหนีไป

ตัวอย่างการสร้างแลนดิ้งเพจ + โค้ดสำหรับหุ่นจำลอง

ก่อนที่เราจะเริ่มต้น เรามาดู HTML และ CSS กันก่อน การทำความเข้าใจวิธีการทำงานจะช่วยให้คุณสร้างการลงจอดได้

HTML เป็นภาษามาร์กอัปของเบราว์เซอร์สำหรับการแสดงภาพเว็บไซต์ เขียนโดยใช้แท็กที่อยู่ในวงเล็บมุมซึ่งกำหนดเนื้อหา

แท็กเปิด () และปิด () รอบไส้:

เนื้อหา

สำหรับการปรับแต่งอย่างละเอียด คุณลักษณะจะถูกเพิ่มหลังชื่อ:

เนื้อหา

CSS - กำหนดวิธีการจัดเรียงองค์ประกอบ HTML ประกอบด้วยตัวเลือก คุณสมบัติ และค่า:

#selector (คุณสมบัติ: ค่า;)

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

5 ขั้นตอนเบื้องต้น

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

มันดูเจียมเนื้อเจียมตัว

จากปลาตัวนี้ เว็บไซต์สำหรับทุกรสนิยมถูกสร้างขึ้นในหลายขั้นตอน

โครงสร้างไดเร็กทอรีในโฟลเดอร์:

• index.html: นี่คือไฟล์หลักที่เราจะแก้ไข
• /assets: ไฟล์เสริมอยู่ที่นี่:
• /css: ไดเร็กทอรีประกอบด้วยรูปแบบบูตสแตรปและไอคอน ไฟล์ที่เราจะแก้ไขคือ main.css
• /img: โฟลเดอร์สำหรับรูปภาพไซต์
• /fonts: แบบอักษรของไอคอน
• /js: ไฟล์บูตสแตรปจาวาสคริปต์

ขั้นตอนที่ 1: การใช้ส่วนหัว

พาดหัวและหัวข้อย่อยเป็นส่วนสำคัญที่ช่วยถ่ายทอดคุณค่าของข้อเสนอในลักษณะที่ชัดเจน

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

ขั้นตอนที่ 2 ความกะทัดรัดคือน้องสาวของการกลับใจใหม่ การเพิ่มสิทธิประโยชน์และอัตรา

คุณจะต้องมี 4 ส่วน:

• ข้อดี;
• ราคา;
• บทวิจารณ์;
• คำกระตุ้นการตัดสินใจ

มาสร้างส่วนของเนื้อหาหลัก “main” ซึ่งเราจะแทรกส่วนที่จำเป็นเข้าไป:

…..
…..
…..
…..

เติมด้วยการเติมแทนจุด

สำหรับส่วนสิทธิประโยชน์ คุณจะต้องมีรหัสนี้:

ข้อดี
เร็ว

เชื่อถือได้

เซ็ดเดียมไม่ไร้สาระ

มีกำไร

Elit, sed diam nonummy

ในทางเทคนิค

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

เชื่อถือได้

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

มีกำไร

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

ในทางเทคนิค

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing

เชื่อถือได้

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing

มีกำไร

Lorem ipsum dolor นั่ง amet, consectetuer adipiscing

เนื้อหาเพื่อความชัดเจน:

มันยังดูเลอะเทอะ แต่ก็ไม่มีเหตุผลที่จะต้องตื่นตระหนก เรามาทำต่อกันเถอะ

เราเขียนราคาไว้ เนื้อหาเปลี่ยนแปลงในลักษณะเดียวกับในขั้นตอนแรก คำอธิบายทั่วไปพร้อมคลาส "ภาษี" และภาษีสามรายการ

แผนภาษี

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. มีค่าใช้จ่ายน้อยกว่า veniam, ต้องใช้ความพยายามอย่างมากในการ ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

อัตราภาษีหมายเลข 1
$10

ต่อเดือน/ต่อคน

• Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit


• Lorem ipsum โดเลอร์


• 10 Lorem ipsum

คำสั่ง
อัตราภาษีหมายเลข 2
$20

ต่อเดือน/ต่อคน

• Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit


• Lorem ipsum โดเลอร์


• 10 Lorem ipsum

คำสั่ง
อัตราภาษีศุลกากรหมายเลข 3
$30

ต่อเดือน/ต่อคน

• Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit


• Lorem ipsum โดเลอร์


• 10 Lorem ipsum

คำสั่ง

ดูเหมือนว่า.

แม้ว่าเราจะไม่สนใจรูปลักษณ์ของหน้า Landing Page ในอนาคต แต่เราจะพิจารณาตัวอย่างการเปลี่ยนแปลงสไตล์ด้านล่าง

ขั้นตอนที่ 3: เชื่อถือสัญญาณและคำกระตุ้นการตัดสินใจ

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

รีวิวลูกค้า

Lorem ipsum dolor นั่งตรง, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. อย่างน้อยที่สุดและน้อยที่สุด, การออกกำลังกายแบบ nostrud, ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo"
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo"

มาตั้งค่าคำกระตุ้นการตัดสินใจกันดีกว่า

สิทธิประโยชน์เมื่อสั่งซื้อวันนี้

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

สั่งซื้อเลย!

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

ชื่อลูกค้า.

ขั้นตอนที่ 4: บูรณาการกับ Grid และ Mobile Friendly

ในการใช้กริด เราจำเป็นต้องมีคอนเทนเนอร์ Bootstrap สิ่งสำคัญคือต้องจำจำนวนส่วนของคอลัมน์ที่ถูกต้องทั้งหมด - 12 คลาสจะกำหนดความกว้างของการแสดงเนื้อหา ข้อดีของตารางที่สร้างไว้ล่วงหน้านี้คือคอนเทนเนอร์ได้รับการออกแบบโดยคำนึงถึงการตอบสนอง และสามารถใช้งานได้บนอุปกรณ์เคลื่อนที่ทันที คำอธิบายโดยละเอียดบนเว็บไซต์อย่างเป็นทางการ ตารางมีลักษณะเช่นนี้

เนื้อหาของ “หลัก” จะถูกห่อในภาชนะ เมื่อต้องการทำสิ่งนี้ ให้เขียนข้อความต่อไปนี้ไว้ด้านบน:

… .

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

เราจะล้อมองค์ประกอบทั้งหมดที่ต้องวางทับกันด้วยตัวคั่นเส้น

ตอนนี้เราสามารถปรับความกว้างของคอลัมน์ได้โดยเน้นที่ตารางบูตสแตรป หลังจากการห่อ ไส้หยุดติดที่ขอบของหน้าจอและมีรอยเยื้องเรียบร้อยปรากฏขึ้น

เรากำหนดราคาติดต่อกันโดยใช้คลาสคอลัมน์ col-lg-4 ภายในแถว ไม่จำเป็นต้องเขียน div แยกกันสำหรับการตัดคำอีกต่อไป สามารถรวมกับบรรทัดที่มีอยู่แล้วคั่นด้วยช่องว่างได้

ในการเปรียบเทียบ เราได้จัดทำคอลัมน์สำหรับส่วนบทวิจารณ์และสิทธิประโยชน์ หากคุณต้องการย้ายองค์ประกอบไปทางด้านข้าง ให้ใช้คลาสคอลัมน์ออฟเซ็ต col-lg-offset-2 ตัวเลขที่ส่วนท้ายจะกำหนดจำนวนคอลัมน์พื้นฐานที่การเปลี่ยนแปลงจะเกิดขึ้น

ขั้นตอนที่ 5 แบบอักษรและไอคอน

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

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* นำเข้าแบบอักษรสำหรับส่วนหัว */
.navbar แบรนด์
h1,
h2,
h3,
h4,
h5,
h6 (
ตระกูลฟอนต์: "Roboto Condensed", sans-serif; /* เอาต์พุต Googlefont */
}

เพื่อความชัดเจน ข้อดีต่างๆ ได้รับการอธิบายโดยคลาสที่มีชื่อที่อธิบายได้ในตัว text-center และไอคอน FontAwesome จากชุดบูตสแตรป

เมื่อถึงจุดนี้การเตรียมการก็เสร็จสมบูรณ์

หน้า Landing Page: ตัวอย่างรหัสพร้อมข้อเสนอ พารัลแลกซ์ และตัวนับ

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

ตัวอย่างที่ 1: ด้วยประโยค

มาตั้งค่าพื้นหลังของส่วนหลักและช่องว่างภายในเพื่อให้ครอบคลุมหน้าจอแรกกัน

จัมโบตรอน (
พื้นหลัง: #f5f5f5 url(../img/fon.jpg) ตรงกลางด้านบน ไม่ทำซ้ำ;
ความกว้างสูงสุด: 100%;
ช่องว่างด้านบน: 250px;
ช่องว่างด้านล่าง: 200px;
การจัดแนวข้อความ: กึ่งกลาง;
}

มาเปลี่ยนขนาดส่วนหัว jumbotron จาก h2 เป็น h1 ต่อไป เราจะเขียนสไตล์สำหรับองค์ประกอบที่ต้องเปลี่ยนแปลง

เริ่มจากไอคอนกันก่อน

สิทธิประโยชน์ i(
สี: #cac4c4;
}

หลังจากเครื่องหมายแฮช จะมีการระบุสี คุณสามารถเลือกตัวเลือกของคุณเองได้โดยใช้ตารางสี html หรือโปรแกรมแก้ไขรูปภาพ

การเยื้องสำหรับส่วนหัวของส่วน

ส่วน h2 (
ช่องว่างด้านบน: 30px;
ขอบล่าง: 25px;
}

เรากำลังจัดระเบียบลักษณะที่ปรากฏของภาษี เพื่อความสะดวก เราสร้างคลาสของเราเองสำหรับองค์ประกอบที่เราต้องการเน้นเป็นพิเศษ

อัตราภาษีหมายเลข 1
$10

ต่อเดือน/ต่อคน

• Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit


• Lorem ipsum โดเลอร์


• 10 Lorem ipsum

คำสั่ง

และ CSS มากมาย ตำแหน่งที่ส่วนต่างๆ รับผิดชอบนั้นระบุไว้ในความคิดเห็น - /* ระหว่างเครื่องหมายทับที่มีเครื่องหมายดอกจัน */

/* =========รูปแบบพิกัด======== */
/* มุมมองทั่วไปของอัตราภาษี */
.pricing_item(
พื้นหลัง: #f2f2f2;
ตำแหน่ง: ญาติ;
จอแสดงผล: -webkit-ดิ้น;
จอแสดงผล: ดิ้น;

ทิศทางแบบยืดหยุ่น: คอลัมน์;

จัดรายการ: ยืด;
การจัดแนวข้อความ: กึ่งกลาง;
-webkit-ดิ้น: 0 1 330px;
ดิ้น: 0 1 330px;
ช่องว่างภายใน: 2em 3em;
ระยะขอบ: 1em;
สี: #262b38;
เคอร์เซอร์: ค่าเริ่มต้น;
ล้น: ซ่อนเร้น;

}
/* เปลี่ยนพื้นหลังเมื่อคลิก */
.pricing_item:โฮเวอร์ (
สี: #444;
พื้นหลัง: #daebef;
}
/* พื้นหลังป้ายราคาแต่ละรายการในแต่ละอัตราค่าไฟฟ้า */
.pricing_item:ลูกคนแรก .price (
พื้นหลัง: #9ba9b5;
}
.pricing_item:nth-child(2).price (
พื้นหลัง: #1f6098;
}
/* บนหน้าจอกว้าง คอลัมน์ภาษีตรงกลางจะถูกเยื้องและไฮไลต์ */
@หน้าจอสื่อ และ (ความกว้างขั้นต่ำ: 66.250em) (
.pricing_item(
ระยะขอบ: 1.5em 0;
}
.แนะนำ(
ดัชนี z: 10;
ระยะขอบ: 0;
ขนาดตัวอักษร: 1.15em;
}
}
/* ชื่อ */
.pricing_item h3 (
ขนาดตัวอักษร: 2em;
ระยะขอบ: 0.5em 0 0;
สี: #1d211f;
}
/* พื้นหลังป้ายราคา */
.ราคา (
ขนาดตัวอักษร: 2em;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #fff;
ตำแหน่ง: ญาติ;
ดัชนี z: 100;
ความสูงของบรรทัด: 95px;
ความกว้าง: 100px;
ความสูง: 100px;
ระยะขอบ: 1.15em อัตโนมัติ 1em;
รัศมีชายแดน: 50%;
พื้นหลัง: #77a5cc;
-webkit-transition: สี 0.3 วินาที, พื้นหลัง 0.3 วินาที;
การเปลี่ยนแปลง: สี 0.3 วินาที, พื้นหลัง 0.3 วินาที;
}
/* สกุลเงิน */
.สกุลเงิน(
ขนาดตัวอักษร: 0.5em;
แนวตั้ง-จัด: super;
}
/* ชี้แจงข้อเสนอ */
.ประโยค (
น้ำหนักตัวอักษร: ตัวหนา;
ระยะขอบ: 0 0 1em 0;
ช่องว่างภายใน: 0 0 0.5em;
สี: #2a6496;
}
/* รายการ */
.pricing_item ul (
ขนาดตัวอักษร: 0.95em;
ระยะขอบ: 0;
ช่องว่างภายใน: 1.5em 0.5em 2.5em;
การจัดแนวข้อความ: ซ้าย;
}
/* รายการสินค้า */
.pricing_item ลี (
ช่องว่างภายใน: 0.15em 0;
}
/* ปุ่มสั่งซื้ออัตรา */
ปุ่ม .pricing_item(
น้ำหนักตัวอักษร: ตัวหนา;
ขอบด้านบน: อัตโนมัติ;
ช่องว่างภายใน: 1em 2em;
สี: #fff;
รัศมีเส้นขอบ: 5px;
พื้นหลัง: #428bca;
-webkit-transition: สีพื้นหลัง 0.3s;
การเปลี่ยนแปลง: สีพื้นหลัง 0.3s;
}
/* เปลี่ยนสีเมื่อกดปุ่ม */
ปุ่ม .pricing_item:โฮเวอร์,
ปุ่ม .pricing_item:โฟกัส (
สีพื้นหลัง: #285e8e;
}
/* ประวัติภาษี*/
.bg-2 (
พื้นหลัง: #dddddd;
}

ผลลัพธ์

รีวิวจากลูกค้า. มาดูพวกเขาให้เรียบร้อยและระบุตำแหน่งของพวกเขากันดีกว่า

/* =========รูปแบบคำรับรอง======== */
ข้อความรับรอง (
ช่องว่างภายใน: 4em 0;
การจัดแนวข้อความ: กึ่งกลาง;
}
.ข้อความรับรอง .avatar img (
รัศมีชายแดน: 50%;
ลอย: ซ้าย;
จอแสดงผล: อินไลน์;
ขอบขวา: 1em;
ความกว้าง: 65px;
ส่วนสูง: 65px;
ขอบล่าง: 30px;
}
.ข้อความรับรอง .avatar p (
การจัดแนวข้อความ: ซ้าย;
ช่องว่างด้านบน: 1em;
สี: #5d5d5d;
น้ำหนักตัวอักษร: 900;
}

สิ่งที่เหลืออยู่คือการตกแต่งคำกระตุ้นการตัดสินใจสุดท้ายและส่วนท้าย

/* การกระทำ */
.การกระทำ(
พื้นหลัง: #476177;
ความสูงขั้นต่ำ: 180px;
ความกว้าง: 100%;
ช่องว่างภายใน: 4em 0;
การจัดแนวข้อความ: กึ่งกลาง;
}
.การกระทำ h2 (
สี: #fff;
น้ำหนักตัวอักษร: 300;

}
.การกระทำ พี(
สี: #fff;
ข้อความเงา: 0 1px 2px rgba (0, 0, 0, .2);
ขนาดตัวอักษร: 1.2em;
}
.การกระทำ .คอนเทนเนอร์ (
ขอบบน: 3em;
}
/* ส่วนท้าย */
ส่วนท้าย(
พื้นหลัง: #333333;
ช่องว่างภายใน: 1em 0;
การจัดแนวข้อความ: ขวา;
}
ส่วนท้าย p(
สี: #fff;
ความสูงของเส้น: 1;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
ขนาดตัวอักษร: 0.7em;
ขอบบน: 0.5em;
}

ปุ่มส่วนท้ายได้รับการกำหนดคลาสบูตสแตรปในตัว btn-default

ทำให้เทมเพลตมีชีวิตชีวา เราจะแนะนำการเลื่อนและปุ่มต่างๆ ที่ราบรื่นสำหรับส่วนต่างๆ รวมถึงภาพเคลื่อนไหวข้อความบนหน้าจอแรก

เพื่อให้การเปลี่ยนผ่านใช้งานได้ เราจะแทนที่คลาสส่วนบางส่วนด้วย id - เพื่อผลประโยชน์และภาษี และเราจะเพิ่มลิงค์ไปยังรหัสไปที่ปุ่มต่างๆ ภาพหน้าจอ - สิ่งที่แนบมากับสิ่งที่เน้นด้วยเครื่องหมายสีเหลือง

เราตั้งค่าการเยื้องสำหรับปุ่ม - jbutton การเลื่อนเมื่อกดใช้งานได้ แต่กะทันหันมาก

การเปลี่ยนภาพที่ราบรื่นจะถูกสร้างขึ้นโดยใช้จาวาสคริปต์หรือ jquery ส่วนหลังเชื่อมต่อกับเทมเพลต Bootstrap ตามค่าเริ่มต้น

ตอนนี้การเลื่อนเป็นไปอย่างราบรื่น

การเพิ่มภาพเคลื่อนไหวให้กับข้อความโดยใช้ Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) นี่คือโค้ดโอเพ่นซอร์สสำเร็จรูปซึ่งสามารถใช้กับเว็บไซต์ใดก็ได้ วางไฟล์จาก Github ลงในโฟลเดอร์ css และระบุเส้นทาง

เราเลือกเอฟเฟกต์ที่นี่: https://daneden.github.io/animate.css/ เราได้เลือก fadeInDown แล้ว มันเขียนไว้ในโค้ดดังนี้:

ตอนนี้เมื่อเพจถูกโหลดหรือรีเฟรช ข้อความจะเป็นภาพเคลื่อนไหว พร้อม.

ตัวอย่างที่ 2: ด้วยรูปร่างและเอฟเฟกต์พารัลแลกซ์

ยิ่งผู้เยี่ยมชมแสดงช่องแบบฟอร์มต่างๆ มากเท่าไร โอกาสที่ผู้เข้าชมจะกรอกข้อมูลก็จะน้อยลงเท่านั้น ขอเพียงข้อมูลที่จำเป็นขั้นต่ำเท่านั้น

มันถูกประกอบขึ้นโดยการเปรียบเทียบ เราจะเปลี่ยนพื้นหลังและสี และแน่นอนว่าเราจะเพิ่มรูปทรงด้วย

เริ่มจากพารัลแลกซ์กันก่อน

มาเปลี่ยนพื้นหลังของจัมโบตรอนให้โปร่งใส:

พื้นหลัง: โปร่งใส;

ข้างในหัวเราจะแทรกสคริปต์:

$(หน้าต่าง).scroll(ฟังก์ชั่น(e)(
พารัลแลกซ์();
});
ฟังก์ชั่นพารัลแลกซ์())(
เลื่อน var = $(หน้าต่าง).scrollTop();
$(".bgparallax").css("top",-(เลื่อน*0.2)+"px");
}

บรรทัดแรกในร่างกายคือคอนเทนเนอร์สำหรับพารัลแลกซ์:

และใน CSS พฤติกรรมของมันคือ:

บีจีพารัลแลกซ์ (
พื้นหลัง: url(/../img/fon.jpg) ทำซ้ำ;
ตำแหน่ง: คงที่;
ความกว้าง: 100%;
ความสูง: 300%;
ด้านบน:0;
ซ้าย:0;
ดัชนี z: -1;
}

พารัลแลกซ์พร้อมแล้ว แต่การเปลี่ยนแปลงโค้ดและพื้นหลังใหม่จำเป็นต้องกำหนดรูปแบบสีใหม่

ทำให้เมนูมืด:

Navbar-ค่าเริ่มต้น (
สีพื้นหลัง: #333;
ขอบสี: #444;
สี: เทาเข้ม;
รัศมีเส้นขอบ: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:โฟกัส (
สี: เทาเข้ม;
สีพื้นหลัง: rgba (0, 0, 0, 0.5);
}

เราแทนที่ประโยคใน jumbotron ด้วยประโยคใหม่ - ด้วยรหัสแบบฟอร์ม:

Landing Page เปลี่ยนผู้เยี่ยมชมให้เป็นลูกค้า
Quisque tincidunt dui augue Suspisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate Massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

  
  

และเรากำหนดลักษณะที่ปรากฏ

/* รูปร่าง */
.headform-รายการ(
รายการสไตล์ประเภท: ไม่มี;
ความสูงของบรรทัด: 26px;
น้ำหนักตัวอักษร: 400;
ช่องว่างภายใน: 0px;
ขอบล่าง: 40px;
}
.รูปศีรษะ(
ล้น: ซ่อนเร้น;
ตำแหน่ง: ญาติ;
สีพื้นหลัง: rgba (0,0,0,.4);
การขยาย: 35px 40px;
รัศมีเส้นขอบ: 8px;
}
อินพุต, ปุ่ม, เลือก, พื้นที่ข้อความ (
ความกว้าง: 100%;
ขอบล่าง: 10px;
}
.headform-รายการ li .fa (
ตำแหน่ง: แน่นอน;
ด้านบน: 0px;
ซ้าย: 0px;
ความกว้าง: 42px;
ขนาดตัวอักษร: 24px;
การจัดแนวข้อความ: กึ่งกลาง;
}
.headform รายการ li (
ตำแหน่ง: ญาติ;
ความสูงขั้นต่ำ: 38px;
ช่องว่างภายใน: 62px;
ขอบล่าง: 20px;
}
.จัมโบตรอน พี (
สี: #fff;
ขนาดตัวอักษร: 16px;
รูปแบบตัวอักษร: ตัวเอียง;
}

ข้อความของจัมโบตรอนก็ลงเอยที่นี่เช่นกัน เนื่องจากต้องการการเปลี่ยนแปลง

เรากำลังเปลี่ยนอัตราภาษี

/* มุมมองทั่วไปของอัตราภาษี */
.pricing_item(
สีพื้นหลัง: rgba (0,0,0,.4); /* เปลี่ยนบรรทัดแล้ว */
รัศมีเส้นขอบ: 4px; /* เปลี่ยนบรรทัดแล้ว */
ตำแหน่ง: ญาติ;
จอแสดงผล: -webkit-ดิ้น;
จอแสดงผล: ดิ้น;
-webkit-flex-direction: คอลัมน์;
ทิศทางแบบยืดหยุ่น: คอลัมน์;
-webkit-align-items: ยืด;
จัดรายการ: ยืด;
การจัดแนวข้อความ: กึ่งกลาง;
-webkit-ดิ้น: 0 1 330px;
ดิ้น: 0 1 330px;
ช่องว่างภายใน: 2em 3em;
ระยะขอบ: 1em;
สี: #f2f2f2; /* เปลี่ยนบรรทัดแล้ว */
เคอร์เซอร์: ค่าเริ่มต้น;
ล้น: ซ่อนเร้น;
กล่องเงา: 0 0 15px rgba (0, 0, 0, 0.05);
}
/* เปลี่ยนพื้นหลังเมื่อคลิก */
.pricing_item:โฮเวอร์ (
สี: #444;
พื้นหลัง: #ddd; /* เปลี่ยนบรรทัดแล้ว */
}

ตอนนี้พวกมันมีลักษณะเช่นนี้ - พื้นหลังโปร่งใสและมุมโค้งมน

เทมเพลตพร้อมแล้ว

ตัวอย่างที่ 3: มีตัวนับถอยหลัง

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

HTML





เวลาไม่เคยรอ
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. มีค่าใช้จ่ายน้อยกว่า veniam, ต้องใช้ความพยายามอย่างมากในการ ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor ใน Hendrerit ใน vulputate velit esse molestie ผลที่ตามมา, vel illum dolore eu feugiat nulla facilisis ที่ Vero eros etcumsan et iusto odio dignisisim qui blandit luptatum

• 
  

  Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

  
  


• 
  

  Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit, sed diam nonummy

  
  

var myCountdown1 = การนับถอยหลังใหม่ ((
เวลา: 86400 * 3, // 86400 วินาที = 1 วัน
กว้าง: 300
, ส่วนสูง: 60
, rangeHi: "วัน"
, สไตล์: "พลิก" //