ส่วนท้ายสวยๆ วิธีกดส่วนท้ายแบบลอยไปที่ด้านล่างของหน้าอย่างถูกต้อง การอัปเดตบล็อกล่าสุด

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

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

ลิงค์ที่เป็นประโยชน์

จำนวนลิงก์โดยเฉลี่ยในส่วนท้ายที่เราตรวจสอบคือ 21 ลิงก์

เรานับจำนวนลิงก์ที่ใช้งานน้อยที่สุดสำหรับร้านค้าออนไลน์ PARFUMS.UA - 5 ลิงก์ ไม่นับปุ่ม "ขึ้น"

เรานับจำนวนลิงก์น้อยที่สุดบนเว็บไซต์ของบริษัท PARFUMS.UA: หน้าร้านค้าบนโซเชียลเน็ตเวิร์กและข้อมูลการติดต่อ

เรานับลิงก์ได้มากที่สุดถึง 86 ลิงก์จากร้านค้าเครื่องสำอางและน้ำหอมออนไลน์อีกแห่ง MakeUp.com.ua ที่นี่ นอกเหนือจากบรรทัดการสมัครรับจดหมายข่าวแล้ว ยังมีลิงก์ไปยังหมวดหมู่และหมวดหมู่ย่อย ผู้ติดต่อ ข้อมูลการจัดส่ง ข่าว บทความ และโปรไฟล์บนโซเชียลเน็ตเวิร์ก ฯลฯ

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

88% ของไซต์ที่เราตรวจสอบมีลิงก์ไปยังหน้า "เกี่ยวกับเรา" ในส่วนท้าย และอีก 88% - ลิงก์ไปยังเพจที่มีผู้ติดต่อหรือผู้ติดต่อเอง มีไซต์เพียง 22% เท่านั้นที่มีลิงก์ในส่วนท้ายซึ่งผู้ใช้สามารถรับบริการจากบริษัทได้ในระดับหนึ่งหรืออย่างอื่น 56% ของเว็บไซต์ทั้งหมดที่เราดูมีลิงก์ไปยังข้อมูลการจัดส่งและการชำระเงิน และ/หรือนโยบายการคืนสินค้าในส่วนท้าย

ลิขสิทธิ์. การคุ้มครองสิทธิ

ไอคอนนี้ปรากฏอยู่ที่ส่วนท้ายของ 76% ของร้านค้าออนไลน์ที่เราวิเคราะห์

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

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

บนเว็บไซต์ร้านค้าออนไลน์ วัสดุก่อสร้าง“StroyMAG” ใช้วลี “สงวนลิขสิทธิ์” ข้างป้ายลิขสิทธิ์

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

เครือข่ายสังคมออนไลน์และการตลาดอื่นๆ

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

ส่วนท้ายที่ศึกษาทั้งหมด 92% มีลิงก์ไปยังบัญชีโซเชียลมีเดีย นี่เป็นองค์ประกอบที่ได้รับความนิยมมากที่สุดในส่วนท้ายของไซต์ที่เราวิเคราะห์

ตัวอย่างเช่น ส่วนท้ายของเว็บไซต์ของร้านดอกไม้ออนไลน์ "Kviter" เช่นเดียวกับส่วนท้ายของเว็บไซต์ส่วนใหญ่ที่เราดู มีลิงก์ไปยังบัญชีของพวกเขาบนโซเชียลเน็ตเวิร์กยอดนิยม

ร้านค้าออนไลน์ 34% มีบรรทัดสำหรับสมัครรับจดหมายข่าวทางอีเมลหรือ SMS ในส่วนท้าย บางแห่งสัญญาว่าจะให้โบนัสที่น่าพอใจสำหรับการสมัครสมาชิก เช่น คูปองในจำนวนหนึ่ง

ตัวอย่างเช่น ในร้านขายเสื้อผ้าออนไลน์ Answear การสมัครสมาชิกจะเปลี่ยนเป็น 300 UAH สำหรับการซื้อ

30% ของส่วนท้ายที่วิเคราะห์มีลิงก์ไปยังเนื้อหาทางการตลาดบางรูปแบบด้วย ส่วนใหญ่มักเป็นลิงก์ไปยังบล็อก บทความ บทวิจารณ์วิดีโอ ฯลฯ

ตำแหน่งงานว่าง

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

ข้อสังเกตที่ไม่คาดคิด

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

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

ในส่วนท้ายของเว็บไซต์ BonPrix shopping club คุณจะพบไอคอนที่สัญญาว่าจะซื้ออย่างปลอดภัย

ไอคอนวิธีการชำระเงินในส่วนท้ายก็ถูกใช้โดยร้านค้าออนไลน์จำนวนไม่มากเช่นกัน - เพียง 18% เท่านั้น

ส่วนท้ายของคุณ

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

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

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

วิดีโอเพิ่มเติมในช่องของเรา - เรียนรู้การตลาดทางอินเทอร์เน็ตกับ SEMANTICA

ส่วนท้ายของเว็บไซต์คืออะไรโดยใช้ตัวอย่าง

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

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

สิ่งที่ควรอยู่ส่วนท้ายของเว็บไซต์

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

• แผนที่เว็บไซต์

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

• รายชื่อผู้ติดต่อ

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

• แบบฟอร์มตอบรับ

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

• ลูกศรขึ้น.

ช่วยให้ผู้เยี่ยมชมสามารถกลับไปยังส่วนหัวของไซต์ได้ทันทีโดยไม่ต้องเลื่อนดูหน้ายาวๆ

• แบบฟอร์มสั่งซื้อโทรกลับ.

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

• ลิงก์ไปยังเครือข่ายโซเชียล

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

บล็อกการนำทางเวอร์ชันค่อนข้างล้าสมัยซึ่งทำให้สามารถค้นหาหน้าที่จำเป็นได้อย่างรวดเร็ว

• ลิงค์ผู้พัฒนา

ส่วนท้ายมีบทบาทอย่างไร?

ส่วนท้ายที่สวยงาม - หรือส่วนท้ายของทรัพยากร - ไม่เพียงแต่ปรับปรุงเท่านั้น รูปร่างแต่ยังมีประโยชน์ต่อประสบการณ์ผู้ใช้อีกด้วย

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

ให้ความสนใจกับ:

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

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

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

ส่วนท้ายที่น่าสนใจยังสามารถดึงดูดความสนใจของผู้ใช้ได้

นี่เป็นฝันร้ายบางอย่าง! เหตุใดส่วนท้ายของไซต์ของคุณจึง “เด้งขึ้นมา” อีกครั้งและเปลี่ยนการออกแบบ เป็นไปไม่ได้จริงหรือที่จะกดอะไรลงไปที่ด้านล่างของหน้าอย่างถูกต้อง? เนื้อหาหรืออิฐอย่างน้อย! อิฐไม่พอดีกับมอนิเตอร์เหรอ?

ฉันเห็นแล้วนั่งไม่ทำอะไรเลยจนกว่าคุณจะอ่านบทความของเราจนจบ

สร้างส่วนท้ายที่เหมาะสมสำหรับเว็บไซต์ของคุณ

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

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

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

วิธีแรก

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

html ( ความสูง: 100%; ) ส่วนหัว, การนำทาง, ส่วน, บทความ, ด้านข้าง, ส่วนท้าย ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; Margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( ความสูง: 150px; สีพื้นหลัง: rgb(0,255,255); ) #content ( การขยาย: 100px; ความสูง: 400px; สีพื้นหลัง: rgb(51,255,102) ; ) #footer ( ความกว้าง: 1,000px; ระยะขอบ: -100px อัตโนมัติ 0; ความสูง: 100px; ตำแหน่ง: ญาติ; สีพื้นหลัง: rgb(51,51,204); )

เพื่อแนบแท็กส่วนท้ายที่ด้านล่างของหน้า