طراحی فوتر مخفی با استفاده از المنتور

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

طراحی فوتر مخفی با استفاده از المنتور

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

در مرحله دوم، نوع قالب را روی پاورقی قرار داده، یک نام بنویسید و دکمه ایجاد قالب را بزنید.

در این مرحله میتوانید از قالب های آماده کتابخانه المنتور انتخاب کنید، یا فوتر اختصاصی خودتان را طراحی کنید.

بخوانید : چگونه یک فوتر سفارشی با المنتور طراحی کنیم ؟

خب یکی از قالب های آماده را درج می کنیم.

بعد از درج فوتر، بر روی بخش اصلی کلیک کرده و به تنظیمات پیشرفته بخش برید، سپس مقدار z-index را روی 1 قرار دهید.

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

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

.elementor-location-header {
	position:relative;
	z-index:3;
}
.site-main {
	overflow:hidden;
	background-color:#fff;
	position:relative;
	z-index:2;
}
.elementor-location-footer {
	position:relative;
	z-index:1;
}

خب کار با فوتر تمام شد. حالا به صفحه مورد نظر برید و بخش فوتر را مشاهده کنید.

در آخر توجه داشته باشید، باید پس زمینه تمامی بخش های اصلی (Section) لندینگ ها را سفید کرده تا فوتر در زیر بخش های سایت مخفی شود.