چگونه به درستی فوتر شناور را به پایین صفحه فشار دهید. تگ های جدید طراحی html پاورقی

همه کسانی که به صفحات وب سایت کامل عادت دارند، ظاهر یک «میخکوب» (چسبنده، چسبنده) را به پایین فوتر صفحه ترجیح می دهند. اما دو مشکل در اینترنت وجود دارد: فیلدهای ورودی که به سمت پایین رشد نمی کنند و پاورقی که میخ نمی شوند (به پایین پنجره). به عنوان مثال، وقتی صفحات کوتاهی مانند habrahabr.ru/settings/social را باز می کنیم، فوراً توجه را به خود جلب می کنیم که اطلاعاتی که در پایین صفحه نمایش قرار می گیرد به محتوا می چسبد و جایی در وسط یا حتی در بالای صفحه است. زمانی که پایین پنجره خالی است.

بنابراین، به جای .
این راهنما برای مبتدیان نشان می دهد که چگونه در 45 دقیقه یک پاورقی «میخکوب» بسازید، حتی ایرادات نشریه معتبری مانند Habr را اصلاح کنید و با آن به عنوان اجرای پروژه امیدوارکننده خود رقابت کنید.

بیایید به اجرای یک نوع فوتر میخکوب شده که از شبکه گرفته شده است نگاه کنیم و سعی کنیم بفهمیم چه اتفاقی در حال رخ دادن است. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap ( ارتفاع: 100%؛ ) body > #wrap (ارتفاع: خودکار؛ حداقل ارتفاع: 100%؛) #main ( padding-bottom: 150px; ) /* باید همان ارتفاع پاورقی باشد */ #footer ( موقعیت: نسبی؛ حاشیه بالا: -150 پیکسل؛ /* مقدار منفی ارتفاع پاورقی */ ارتفاع: 150 پیکسل؛ واضح: هر دو؛) /* CLEAR FIX*/ .clearfix:after (محتوا: "."؛ نمایش: بلوک؛ ارتفاع: 0؛ واضح: هر دو؛ مشاهده: پنهان؛) .clearfix (نمایش: inline-block؛) /* از IE-mac \*/ * html پنهان می شود .clearfix( ارتفاع: 1%؛) .clearfix(نمایش: بلوک؛) /* پایان پنهان کردن از IE-mac */
HTML:

بعید است که همه، حتی کسانی که CSS می دانند، با نگاه کردن به این کد، اصول را درک کنند و با اطمینان یک پروژه پیچیده را ویرایش کنند. هر گامی به سمت جلو منجر به عوارض جانبی خواهد شد. استدلال و تولید پاورقی زیر برای درک بیشتر قوانین CSS در نظر گرفته شده است.

بیایید با تئوری شروع کنیم

پیاده سازی معمول یک پاورقی میخکوب شده بر ویژگی منحصر به فرد CSS2 متکی است که عناصر فرزندان فوری هستند. بدن- درصد پشتیبانی ارتفاع ( ارتفاع: 100%یا دیگری) نسبت به پنجره، اگر همه والدینشان درصد قد یکسانی داشته باشند، با شروع از برچسب HTML. پیش از این، بدون doctypes، اما اکنون در حالت Quirks، درصد ارتفاع عناصر در هر سطحی پشتیبانی می‌شود و در doctypes مدرن - فقط در عناصر درصد تنظیم شده. بنابراین اگر یک بلوک محتوا ایجاد کنیم (بیایید آن را صدا کنیم #چیدمان) با داشتن 100% ارتفاع، مانند یک پنجره اسکرول می شود. تمام مطالب (استریمینگ) به جز فوتر و شاید هدر در آن قرار می گیرد.

فوتر بعد از این بلوک قرار می گیرد و ارتفاع آن 0 پیکسل است. به طور کلی می توانید دنبال کنید #چیدمانهر تعداد بلوک را که دوست دارید قرار دهید، اما همه آنها باید یا 0 پیکسل ارتفاع داشته باشند یا خارج از جریان سند باشند (نه موقعیت: ایستا). و ترفند مهم دیگری نیز وجود دارد که معمولا از آن استفاده می شود. لازم نیست ارتفاع را برابر 0 قرار دهید. می توانید ارتفاع را ثابت کنید، اما به دلیل خاصیت آن را از بلوک اصلی کم کنید. حاشیه-پایین: -(ارتفاع);.

از نظر انسانی، سبک‌ها یک «جیب» خالی در پایین ایجاد می‌کنند که پاورقی در آن تعبیه شده است، و همیشه معلوم می‌شود که یا به حاشیه پایین پنجره چسبیده است یا اگر سند به حاشیه پایین سند چسبیده باشد. بالاتر از ارتفاع پنجره است. در اینترنت و Habré، پیاده‌سازی‌های زیادی از فوتر وجود دارد که در همه مرورگرها موفقیت متفاوتی دارند. بیایید به ساخت آن به تنهایی ادامه دهیم و از طرح هابر به عنوان یک "اسب کار" استفاده کنیم.

از آنجا که پایین بلوک #چیدمان- این یک جیب است، باید برای پاورقی خالی باشد، اشیاء صفحه نمایش داده نشود. و در اینجا با محدودیت دیگری روبرو می شویم - ما نمی توانیم با هزینه یک جیب خالی بسازیم لایه گذاری V #چیدمان، زیرا در این صورت بیش از 100٪ می شود. ذخیره نخواهد کرد لبه- با توجه به خواص عناصر تو در تو، خالی بودن باید انجام شود. به علاوه، لازم است اطمینان حاصل شود که عناصر شناور از زیر مرز بلوک خارج نمی شوند، که برای مثال توسط بلوک انجام می شود.

، جایی که .clear (روشن: هر دو). مهم است که یا این " ارتفاع" ثابت بود، یا در همان واحدهای نسبی، یا با تغییر صفحه آن را محاسبه می‌کردیم. معمولاً تراز کردن این کادر تراز با تنظیم آن در ارتفاع دلخواه راحت است.

بیایید به ساختار صفحات آزمایشی خود نگاه کنیم. ساده ترین راه برای انجام این کار، باز کردن پنجره Firebug یا پنجره مشابه ("ابزار توسعه دهنده" (Ctrl-F12)) در کروم است.

... بلوک تبلیغاتی بالا...

بیایید به یک مثال کاری برویم

چیزی که ما می بینیم نقص های چیدماناز نظر اجرای افکت فوتر میخکوب شده؟ ما آن را می بینیم
1) فوتر سایت داخل بلوکی با id=layout است که درصد ارتفاع ندارد. در تئوری، آن، والدین و بلوک محتوای .content-left باید روی 100% ارتفاع تنظیم شوند. مشکلات با دومی ایجاد می شود - برای این کار سازگار نیست. بنابراین، یک بلوک بین لایه ای وجود ندارد یا پاورقی در سطح اشتباه است. بعلاوه،
2) ارتفاع پاورقی متغیر است (به تعداد عناصر موجود در لیست و اندازه فونت بستگی دارد، این نه از HTML بلکه از CSS قابل مشاهده است). و
3) در بالا #چیدمانیک بلوک تبلیغاتی با ارتفاع ثابت 90 پیکسل وجود دارد.
4) هیچ بلوک تراز یا در فوتر یا (به طور کلی) در بلوک وجود ندارد #چیدمان(بله، اما بالای بلوک rotated_posts; با این حال، شاید باید آن را به پاورقی نسبت داد).

نکته 4 - باید با اسکریپت نقاشی کنید.
به نظر می رسد با اضافه کردن #layout (margin-top:-90px؛) به راحتی می توان سومین نکته را فهمید، اما به یاد داشته باشید که این بلوک ممکن است وجود نداشته باشد - توسط برش بنر سرکوب می شود، یا تبلیغ کنندگان ناگهان تصمیم می گیرند که این کار را نکنند. آن را نشان می دهد. تعدادی صفحه در سایت وجود دارد که در آنها وجود ندارد. بنابراین، وابستگی حاشیه بالااز یک بلوک تبلیغاتی ایده بدی است. خیلی بهتر - آن را در داخل قرار دهید #چیدمانسپس او مانعی نخواهد شد.

اولین نکته این است که برای اینکه فوتر میخکوبی شده اصلا کار کند، باید بلوک فوتر را زیر آن قرار دهید. #چیدمان. با این حال، با کمک جاوا اسکریپت، می توانید سایر طرح های فوتر میخ شده را پیاده سازی کنید، اما در هر صورت، برای انجام بدون آن به JS یا طرح اولیه صحیح نیاز دارید.

از آنجایی که نمی‌توانیم قوی‌تر از آخرین طراح صفحه‌آر سایت باشیم که پاورقی را به محتوا «سیلی زده»، ایده قرار دادن درست پاورقی را در سایت آینده خود به تعویق می‌اندازیم (که در نتیجه «سردتر» خواهد بود. از Habr!)، و ما Habr را با جاوا اسکریپت (کاربر اسکریپت) به حالت های صحیح تجزیه می کنیم. (بیایید بلافاصله بگوییم که مقصر طراح چیدمان و سوئیچمن نیست، بلکه نوع سایت است که البته تصمیم استراتژیک مدیریت پروژه را تعیین می کند.) به این ترتیب به ایده آل نخواهیم رسید، زیرا در یکی دو ثانیه اول در حین بارگذاری، صفحه با چیدمان اشتباه خواهد بود. اما مفهوم و توانایی پیشی گرفتن از محبوب ترین سایت در دنیای IT برای ما مهم است.

بنابراین، در جای مناسب در اسکریپت (قبلتر، در انتهای بارگذاری صفحه)، انتقال بلوک های تبلیغاتی DOM و فوتر را به مکان های مناسب می نویسیم. (بیایید برای این واقعیت آماده شویم که به دلیل اسکریپت های کاربر، راه حل پیچیده تر از یک راه حل تمیز خواهد بود.)
var dQ = function(q)(return document.querySelector(q);) //برای کوتاه کردن var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ) if(topL && lay) //banner - داخل بلوک محتوا lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //move the footer lay.parentNode.insertBefore(footer, lay.nextSibling);
ما بلوک ها را در مکان های خود قرار می دهیم - اکنون باقی مانده است که ویژگی های لازم را به عناصر اختصاص دهیم. ارتفاع پاورقی باید دقیقاً تنظیم شود، صرفاً به این دلیل که ما از قبل از زمان اعمال اسکریپت کاربر (پایان بارگذاری صفحه) آن را می‌دانیم. با توجه به نقطه ماشه اسکریپت کاربر، همانطور که در بالا توضیح داده شد، پرش نمایش فوتر در صفحه اجتناب ناپذیر است. آیا می توانید سعی کنید "چهره خوب" بسازید، اما با "بازی بد"؟ برای چی؟ "بازی بد" سایت به شما امکان می دهد بدون تلاش فوق العاده یک مفهوم بسازید که برای ارزیابی کیفیت کافی است و در صورت "درست بازی" در پروژه خود نیازی به آن نخواهد بود.
if(foot)( //block-aligner

در فوتر h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetHeight; //...و اندازه گیری ارتفاع پاورقی ) if(topL && lay && footer && lay.nextSibling)( //align بلوک ارتفاع مورد نظر در محتوا ("layout") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight = "100%"; h.addRules ("#layout(margin-bottom:- "+ footH +"px !important)html، بدن (ارتفاع:100%)")؛ )
در اینجا به خودمان اجازه دادیم که یک تابع خودنویس را اعمال کنیم h.apnd_el، که تقریباً مشابه جی کوئری است -
$("

").css((ارتفاع: footH ||0)).appendTo($(footer))
و سپس - یکی دیگر از تابع های معمولی تزریق قانون CSS - h.addRules. در اینجا شما نمی توانید بدون آن انجام دهید، زیرا باید یک قانون را با " اعلام کنید !مهم" - فقط به دلیل ویژگی های اولویت های سبک از اسکریپت کاربر.

با این تکه‌های کد، می‌توانیم پاورقی میخ‌شده را در کاربراسکریپت ببینیم (پس از پرش به پایین) و به طور کامل نحوه ساخت طرح‌بندی صفحه را درک کنیم. استفاده از طرح پرش هر روز آزاردهنده است، بنابراین توصیه می شود این کار را صرفاً برای اهداف نمایشی و آزمایشی انجام دهید. در کاربر اسکریپت HabrAjax، من یک اسکریپت مشابه را نصب کردم و آن را با تنظیمات "underFooter" (یک "تیک" در لیست تنظیمات در مقابل "footer nailed to the bottom" قرار دهید)، از نسخه 0.883_2012-09- شروع کردم. 12.

آیا پاورقی میخ‌شده بر نیاز به به‌روزرسانی سبک‌های ZenComment تأثیر می‌گذارد، در صورت تنظیم؟ بله، این کار را می کند.با توجه به زنجیره تقدم سبک پیچیده، که در آن سبک های درج شده توسط کاربر اسکریپت کمترین اولویت را دارند، مجبور شدیم سبک های کاربری را کمی تنظیم کنیم. ممکن هابا پاورقی میخ کار کنید اگر سبک های کاربری را به روز نکنید (به 2.66_2012-09-12+) - پاورقی نادرست کار می کند.

مسدود کردن rotated_post (سه پست محبوب از گذشته) با فوتر منطقی تر به نظر می رسد، بنابراین در اسکریپت واقعی نیز به فوتر منتقل می شود.

مورد دوم (از لیست اشکالات چیدمان) استدلال صرفاً برای Habr است (آنها برای اسکریپت کاربر اعمال نمی شوند و تا حدی موارد قبلی را تکرار می کنند).

صفحات مشکلی دارند که مانع از ایجاد یک پاورقی میخ شده در CSS خالص می شود - ارتفاع پاورقی نامشخص بسته به اندازه فونت پیش فرض در مرورگر. برای پیاده سازی فوتر در CSS، باید ارتفاع نسبی فونت ها را انتخاب کنید، اما اگر کامپیوتر کاربر فونت های ارائه شده را نداشته باشد، ممکن است کار نکنند. بنابراین، راه حل باید شامل یک جاوا اسکریپت باشد که بتواند موقعیت تقریبی فوتر را در موقعیت دقیق با انتقال تنظیم کند. یا پس از بررسی مقبولیت راه حل ساخته شده بر روی اسکریپت کاربر در پلتفرم های مختلف، نصب حساب شده ای از فوتر میخکوب شده انجام دهید - مشاهدات اولیه نشان می دهد که راه حل کاربردی است.

نتیجه‌گیری: می‌توانید طرح‌بندی را به‌طور کامل روی Habré ترتیب دهید، اما برای این کار به یک طراح چیدمان نیاز دارید که رفتار طرح‌بندی را به وضوح درک کند و بلوک‌ها را به ترتیب درست مرتب کند. (اکنون فوتر و بنر بالای صفحه "آنجا" نیستند و به گونه ای نیستند که بتوانند به سادگی یک پاورقی میخ دار با استایل ها دریافت کنند.) اگر ارتفاع فوتر را در واحدهای نسبی تنظیم کنید، می توانید بدون JS این کار را انجام دهید. فضایی برای نامشخص بودن فونت

پیاده سازی

اگر HabrAjax 0.883+ را فعال کنید، ما شاهد کار «پای‌صفحه میخ‌شده» خواهیم بود. با کمک اسکریپت ها ارتفاع را تطبیق می دهد. این به شما امکان می دهد تا ارزیابی کنید که صفحات با فوتر میخ شده در مقایسه با صفحات معمولی چقدر بهتر است. سبک های کاربری ZenComment با اسکریپت ها سازگار هستند، اما برای اینکه فوتر میخ شده با آنها به درستی کار کند، باید ZenComment نسخه 2.66_2012-09-12 + را نصب کنید.

حقایق رفتار پیاده سازی

شمنیسم با پاورقی، سبک ها و اسکریپت ها شمنیسم است (فقط توسط نظریه پشتیبانی می شود). در مرورگرهای مختلف، رفتار کمی متفاوت است، اما در برخی مکان ها - غیر منتظره. بدون اسکریپت های کاربری و بلاک های تنظیم مجدد، نتایج متفاوت خواهد بود. این چیزی است که آزمایش‌های پیاده‌سازی روی کاربر اسکریپت نشان داد.

1) فایرفاکس - عدم پرش غیرمنتظره پاورقی. عجیب است که آنها آنجا نیستند - رندر پس از قرار دادن پاورقی در پایین رخ می دهد.

2) کروم - با یک "طومار سرگردان" شگفت زده شد - فضاهای خالی با بازه زمانی یک بار در ثانیه در پایین به صفحه اضافه می شود - با محاسبه ارتفاعات اشتباهی رخ می دهد. با افزودن html، body (ارتفاع: 100٪) به سبک کاربر درمان می شود، اما بدون تضمین اینکه همیشه کار می کند. قابل اعتمادتر است که بررسی کنید آیا ارتفاع سند از پنجره تجاوز نمی کند یا نه، سپس پاورقی را حرکت دهید، در غیر این صورت - هیچ چیز. با پریدن - همه چیز مرتب است، همین طور است.

3) Opera - بدون پرش (نسخه 12.02) در بارگذاری صفحه اول، اما بارگذاری مجدد عجولانه ممکن است پرش پاورقی را نشان دهد. در غیر این صورت، به درستی کمتر از Fx نیست.

خوب، شما باید به طور خاص به Chrome آموزش دهید که به درستی (با یک اسکریپت) رفتار کند و نسخه را برای بررسی در این فرم منتشر کنید. بنابراین، بخش در اسکریپت کاربر کمی پیچیده تر از بخشی است که در مقاله ارائه شده است.

لازم به یادآوری است که این یک پیاده سازی کامل نیست - به عنوان مثال موارد تغییر اندازه پنجره توسط کاربر را در نظر نمی گیرد. همچنین می‌توانید ترکیب‌های نادر (در عمل) تغییر ارتفاع پاورقی قبل و بعد از حرکت را پیدا کنید، جایی که منطق بدون ایجاد ناراحتی شروع به شکست می‌کند. کاستی ها به عمد رها شده اند، زیرا تعادل پیچیدگی بازنگری و راه حل موقت حفظ می شود.

در نتیجه، مشخص شد که این یک طرح کار کاملاً قابل اجرا، حداقل برای رایانه‌های رومیزی سریع است. اگر رفتار پاورقی نادرست شناسایی شد، تنظیم "underFooter" باید غیرفعال شود.

برای چه صفحاتی مفید است؟

در یک سایت استاندارد، بدون سبک های کاربر، حتی صفحات پرسش و پاسخ کوتاه، بیش از 1500 پیکسل هستند که در اکثر موارد با مانیتورهای افقی قابل مشاهده نیست. اما حتی با مانیتورهای معمولی، اغلب صفحات شخصی کاربران با ارتفاع حدود 1300 پیکسل مواجه می شوند، جایی که فوتر بدون میخ با شکوه تمام ظاهر می شود. نه خیلی طولانی و تعدادی صفحه در تنظیمات کاربر.

هنگامی که سبک های کاربر ZenComment اعمال می شود، ارتفاع صفحه مورد نیاز را تا حد زیادی کاهش می دهند و اسکریپت کاربری HabrAjax ممکن است برخی یا همه نوارهای کناری را در نوار کناری نشان ندهد. بنابراین، با اسکریپت ها و سبک ها، تأثیر یک فوتر بدون میخ بسیار بیشتر مشاهده می شود. بنابراین منطقی است که رفع فوتر برای اولین بار در HabrAjax ظاهر شود. اما حتی یک سایت معمولی دارای تعدادی صفحه است که در آن پاورقی میخ شده مفید خواهد بود.

آیا حمایت خواهد شد؟

رفتار سایت در سال گذشته نشان می دهد که توسعه دهندگان (و در نتیجه مدیریت) شروع به پیاده سازی ویژگی هایی کرده اند که قبلاً فقط در اسکریپت های کاربر و سبک های کاربر وجود داشت. به عنوان مثال، در ابتدای سال نوشتم، جایی که بسیاری از آرزوهای کوچک را جمع آوری کردم. شش ماه بعد، من به آن بازگشتم و با رضایت خاطر نشان کردم (درست در متن؛ می توانید "UPD" و تاریخ ها را بخوانید) که تعدادی از ویژگی های توصیف شده به عنوان آرزوها قبلاً در سایت پیاده سازی شده است.

در مرحله بعد، بیایید به جای مربع برای ارزیابی نظرات، به "فلش ها" نگاه کنیم. آنها حدود 3 سال پیش در نیروهای کاربری almalexa ("Prettifier") ظاهر شدند و حدود 2 سال پیش در ZenComment پذیرفته شدند. حدود 2-3 ماه پیش در سایت ظاهر شدند. او شروع به این می‌کند که پس از مدتی، فلش‌ها در فاصله مشخصی پخش می‌شوند، همانطور که در ZenComment انجام می‌شود (یک فلش به سمت چپ عدد، دومی به سمت راست)، تا کمتر از دست برود.

بنابراین، شاید «پانویس میخ‌شده» روی هابره آنطور که 3 سال پیش به نظر می‌رسید، خیالی نباشد.

ویژگی های دیگر در اسکریپت HabrAjax که ظاهر شدبرای 3 ماه گذشته (غیرفعال در تنظیمات):
* رشد خودکار فیلدهای ورودی (در Opera می تواند در متون بزرگ کند شود).
* روزهای هفته برای تاریخ هایی غیر از "امروز" و "دیروز"؛
* رویدادهای موجود در فید، به 1 خط و 2 کاراکتر کاهش یافت.
* مخفف کلمه "habr*" به "χ·" و "ha";
* نکات تاریخ بر اساس شماره مقاله - با شماره موجود در URL گزارش می شود که مقاله قبل از بارگیری چه ماه و سالی بوده است.
* "پست های مرتبط" به 2 کلمه کوچک شد. اسکرین شات از پنجره "پست های مرتبط" (12 پیوند را نشان می دهد، نه 4).

اگر کفش جزء نهایی هر لباس است، پس پاورقی برای یک سایت تجارت الکترونیک عنصر نهایی طراحی فروش آن است. وب‌سایت‌های مدرن با تمرکز بر پایین‌ترین عنصر پاورقی، آماده هستند تا فردیت خود را از هر نظر نشان دهند. در یک محیط رقابتی تجارت الکترونیک، ایده های اصلی، خلاقیت و گرایش های طراحی به اندازه کافی وجود دارد. قبل از ایجاد تنوع در فوتر یک سایت تجارت الکترونیکی، توجه به نکات مهمی ضروری است. چه چیزی را در ابتدا قرار دهیم و چگونه بهترین کار را انجام دهیم؟ بررسی طرح های الهام بخش فوتر ما را برای گزینه های جالب بررسی کنید.

همچنین بخوانید: 13 روند بازاریابی تجارت الکترونیک در سال 2019

آمار عجیب از شرکت Chartbeat. مطالعه رفتار 25 میلیون کاربر نشان داد که آنها چقدر عمیق صفحات را مرور می کنند. به نظر می رسد که توجه کاربر به فضای زیر خط چین جلب می شود. با دریافت اطلاعات کاربردی تر، بازدیدکنندگان بیشترین زمان را در ناحیه 1200 پیکسلی از بالای صفحه (با میانگین 700 پیکسل به صورت عمودی روی صفحه در مرورگر) یا پشت صفحه دوم درنگ می کنند.

زمان مشاهده (ثانیه) / فاصله از بالای صفحه (پیکسل)

شکاف بزرگ در مدت زمان مشاهده صفحه اول و دوم. خود TOP 4 ثانیه است، مدت زمان آن در 1200 پیکسل از بالا به حداکثر (16 ثانیه) می رسد و با اسکرول بیشتر، به آرامی کاهش می یابد.

سهم بازدیدکنندگان (%) / فاصله از بالای صفحه (پیکسل)

بخش قابل توجهی از بازدیدکنندگان (بیش از 25٪) حتی منتظر بارگذاری محتوا نمی مانند و شروع به اسکرول صفحه می کنند. این به این معنی است که فقط 75٪ در ابتدا بهترین ها را خواهند دید. بیشترین بازدید صفحه 550 پیکسل است (درست بالای خط تاشو).

این مطالعه این افسانه را که کاربران به پایین صفحه اسکرول نمی‌کنند و تمام محتوا را تماشا نمی‌کنند، از بین می‌برد. فوتر همچنین برای یک سایت تجارت الکترونیک مدرن مهم است و حتی مزایای خاص خود را دارد.

ایده هایی در مورد نحوه طراحی "زیرزمین" (پانویس)، نمونه هایی از فروش طرح ها

این 10 نکته به شما نشان می دهد که چگونه فوتر سایت را به زیبایی طراحی کنید - طبق قوانین ترکیب بندی در طراحی وب و با وضوح وظایف اولویت دار. مناسب ترین تاکتیک ها را برای بهبود قابلیت استفاده، UX (تجربه کاربری) و حتی افزایش فروش به کار بگیرید.

1. اطلاعات مورد نیاز

به طور سنتی مسائل سازمانی و حقوقی مورد نیاز در فوتر سایت آمده است. اعلان‌ها با متن کمتر قابل مشاهده استایل‌بندی می‌شوند، که بخش‌های دیگر صفحه را برای عناصر معنادارتر آزاد می‌کند. در اینجا یک لیست نمونه برای بررسی وجود دارد:

یادداشت های حق چاپ
سلب مسئولیت های قانونی
اطلاعات صورت حساب
اطلاعیه کوکی

وب‌سایتی که کالا را به فروش می‌رساند باید شرایط قانونی را داشته باشد و اطلاعاتی در مورد رویه، شرایط بازگشت ارائه دهد. مکان آن در فوتر هم برای منبع فروش و هم برای بازدیدکنندگان مناسب است.

مثال پاورقی: Yves Rocher

فروشگاه اینترنتی Yves Rocher: فوتر تمام صفحه با طراحی زیبا از لایه های متناوب. اطلاعات مربوط به شرکت، زیرساخت سایت فروش - از پیگیری سفارش تا سیاست داده های شخصی. در اینجا نکاتی در مورد استفاده از محصول، جوایز، تبلیغات وجود دارد

مثال پاورقی: Lumity

به بازرگانان مواد افزودنی مواد غذایی افزایش قانونی اختصاص داده شده است مسئوليت. چیزهای زیادی وجود دارد که آنها باید/نباید در سایت فروش خود بگویند. پیوندهای اطلاعات حقوقی برای مشاهده بهتر به صورت پررنگ هستند.

یک پاورقی با یک تصویر پس زمینه زیبا بسیار ارگانیک در طراحی کلی سایت قرار می گیرد. هیچ مرز مشخصی وجود ندارد، بلکه خود محتوا به عنوان یک جداکننده عمل می کند

مثال پاورقی: Saddleback Leather Co

سایت فروش با طراحی هدر و پاورقی رترو زیبا. 100 سال ضمانت در برابر نقص در مواد و پرداخت. شرایط بازگشت با داستان های جالبی همراه است ... با اطلاعات تجارت الکترونیک لازم همه چیز آنقدر غم انگیز نیست.

2. فضای منفی - فاصله بصری کافی

هنگام محدود کردن تعداد پیوندهای پاورقی، با فضای منفی خسیس نشوید - این تأثیر شگفت انگیزی بر درک بصری و بهبود خوانایی خواهد داشت. به عنوان یک قاعده کلی، هنگام حفظ سلسله مراتب بصری، عناصر مرکزی سریعتر مورد توجه قرار می گیرند (می توان از آنها به نفع استفاده کرد!).

مثال پاورقی: QUAY AUSTRALIA

با سبک مینیمالیستی و یک منوی کشویی ثابت، یک فروشگاه آنلاین می‌تواند یک پاورقی جادار بخرد.

مثال پاورقی: Incase

مقدار زیادی از فضای میکرو منفی (بین عناصر کوچک) را می توان اینگونه گفت: تا زمانی که تمام اطلاعات لازم وجود داشته باشد، خوانا و به سرعت درک می شود - همه چیز خوب است.

مثال پاورقی: بو داده های قهوه استامپ تاون

فوتر جادار سایت قهوه تکمیل کننده عالی ترکیب طراحی تمیز است که دارای فضای ماکرو منفی زیادی است ("هوا" بین بخش ها / بخش ها)

3. فراخوان نهایی برای اقدام

همچنین بخوانید: بیش از 30 مثال و ایده طراحی برای دکمه های عمل هدف

طراحی شیک پاورقی به خوبی در مورد خود منبع صحبت می کند. توجه به این نکته ضروری است که خریدار کمی بیشتر از بقیه صفحه در اینجا می ماند. فرصت خوبی برای یک فراخوان نهایی دیگر. اغلب این یک لیست اشتراک / پستی است، اما شما همچنین می توانید یک تماس CTA را با ثبت حساب مرتبط کنید.

مثال پاورقی: Greetabl

Greetabl دارای طراحی متوسطی در پایین صفحات، از جمله تماس برای اشتراک است. با حداقل عناصر، تماس قابل توجه می شود و در هماهنگی با زمینه فیروزه ای، به دکوراسیون سایت تبدیل می شود.

مثال پاورقی: Ecwid

طراحی زیبا با فراخوان برای اقدام در پایین صفحات. ساختار سازنده وب سایت فروش جهانی است. برای میلیون ها مشتری خود به 35 زبان ترجمه شده است.

4. سبد خرید شناور - افزایش در دسترس بودن قابلیت فروش

دسترسی به سبد خرید از پایین سایت یک راه عالی برای بهبود قابلیت استفاده و کیفیت فروش سایت است.

مثال پاورقی: لیمونادلا

وب سایت فروش شرکت کیترینگ از نظر ظاهری دلپذیر و برای خریدار راحت است

5. پیمایش پاورقی

پایین سایت برای اطلاعات کم مشاهده شده ایده آل است: درباره شرکت، شرایط خدمات و سیاست حفظ حریم خصوصی. در این حالت، عملکرد فوتر ذخیره همه افراد است. با احساس گم شدن در محیط تجارت الکترونیک، شخص به زیرساخت تجارت الکترونیک علاقه مند می شود و به طور غریزی در …

فضای منفی برای خوانایی مطالب ضروری است. به طور کلی، "پانویس" برخلاف منو یا نقشه سایت برای اهداف ناوبری نیست. فقط در موارد نادر، سایت‌های تجارت الکترونیک دسته‌بندی خاصی از محصولات را در فوتر قرار می‌دهند (

این یک جور کابوس است! چرا فوتر سایت شما دوباره ظاهر می شود و طراحی را تغییر می دهد؟ آیا واقعاً غیرممکن است که با چیزی فوتر را به درستی به پایین صفحه فشار دهید؟ محتوا یا آجر حداقل! آجر در مانیتور بالا نمی رود؟

می بینم، سپس بنشین و هیچ کاری نکن تا اینکه مقاله ما را تا آخر بخوانید.

ساخت فوتر مناسب برای سایت شما

بسیاری از صاحبان سایت زمانی با این مشکل مواجه می شوند که پاورقی صفحه فقط "بالا" می شود. و بعد معلوم نیست چه باید کرد. اغلب، طراحی های وب سایت با عجله و به تنهایی ساخته می شوند ( دایره "دست های دیوانه") یا وب مسترهای تازه کار.

در همان زمان، در ابتدای زندگی سایت، هیچ چیز وحشتناکی اتفاق نمی افتد. و تا زمانی که محتوا «با وزن خودش» به زیرزمین فشار می‌آورد و از بالا آمدن آن جلوگیری می‌کند، چنین نمایشی ادامه می‌یابد. اما ارزش قرار دادن مطالب کمتری در صفحه را دارد و فوتر "آرام" اخیراً فوراً بالا می رود و کل طراحی سایت را به ظاهری نامناسب تبدیل می کند.

برای رفع این "نقص" قالب ساخته شده، نیازی به صرف هزینه برای خدمات یک وب مستر نیست. اغلب اوقات، پاورقی سایت را می توانید خودتان در جای خود قرار دهید. بیایید همه گزینه های ممکن را برای از بین بردن چنین مشکلی در نظر بگیریم:

راه اول

اولین راه برای "لنگر انداختن" پاورقی "به پایین" صفحه بر اساس CSS است. بیایید با کد مثال شروع کنیم و سپس به پیاده سازی آن نگاهی دقیق بیندازیم:

html ( ارتفاع: 100%؛ ) سرصفحه، ناوبری، بخش، مقاله، کنار، پاورقی (نمایش: بلوک؛) بدنه (ارتفاع: 100%؛ ) #wrapper (عرض: 1000 پیکسل؛ حاشیه: 0 خودکار؛ حداقل ارتفاع: 100 ٪؛ ارتفاع: خودکار !مهم؛ ارتفاع: 100٪؛ ) #هدر (ارتفاع: 150 پیکسل؛ رنگ پس‌زمینه: rgb(0,255,255)؛ ) #content (بالشتک: 100px؛ ارتفاع:400px؛ پس‌زمینه رنگ: rgb(51,255,10) ; ) #پانویس (عرض: 1000 پیکسل؛ حاشیه: -100 پیکسل خودکار 0؛ ارتفاع: 100 پیکسل؛ موقعیت: نسبی؛ رنگ پس‌زمینه: rgb (51،51،204)؛ )

برای چسباندن پاورقی به پایین تگ صفحه