ارزدیجیتال
حراجی دامنه های ویژهمشاهده





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

ایجاد اسکرول افقی در پس‌زمینه با المنتور

وردپرس , مقالات,آموزش,ترفند

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

 

ایجاد اسکرول افقی در پس‌زمینه با المنتور

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

 

قدم اول: افزودن یک بلوک جدید در المنتور

به سمت صفحه ساز المنتور خود بروید و یک برگه یا نوشته جدید ایجاد کنید. روی گزینه افزودن کلیک کرده تا بتوانید یک بلوک جدید بصورت ستونی یا سطری (آنچه دلخواهتان است) را انتخاب کرده و اضافه کنید.

ایجاد اسکرول افقی در پس‌زمینه با المنتور

حال تعداد ستون و سطرهای مورد نظر خود را انتخاب کنید:

ایجاد اسکرول افقی در پس‌زمینه با المنتور

قدم دوم: افزودن عنصر سربرگ

برای اینکه بتوانیم عنصر جدیدی را اضافه کنیم از منوی سمت راست، عنصر سربرگ را انتخاب کرده و به گزینه پیشرفته>> پس‌زمینه می‌رویم.

ایجاد اسکرول افقی در پس‌زمینه با المنتور

قدم سوم: تنظیمات تصویر پس‌زمینه

در اینجا می‌توانید تصویر پس‌زمینه خود را تنظیم کرده و برای ایجاد اسکرول افقی در پس‌زمینه با المنتور عملیاتی را در ادامه انجام دهید.

ایجاد اسکرول افقی در پس‌زمینه با المنتور

قدم چهارم: افزودن CSS

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

selector {
    height: 330px !important;
}
selector:hover {
    transition: background-position 1.5s linear 0s;
    background position: center bottom !important;
}

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

قدم پنجم: مشاهده تصویر بک‌گراند

حال می‌توانیم نتیجه عملکرد خود را با اسکرول کردن به صورت افقی مشاهده کنیم.

ایجاد اسکرول افقی در پس‌زمینه با المنتور

همان‌طور که مشاهده می‌کنید می‌توان تصویر بک‌گراند را بصورت افقی پیمایش کرد. اگر شما هم تمایل دارید چنین اتفاقی برای صفحه موردنظرتان بیفتد به همین راحتی این‌کار را انجام دهید.

این محتوا چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 5 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=50696
کلمات کلیدی پست :
مطالب مرتبط
11,324چگونه صفحات ساخته شده با المنتور را بهینه کنیم؟ تاریخ : 2019/12/5
13,792چگونه با کمک المنتور یک کادر ایجاد کنیم؟ تاریخ : 2020/04/6
13,032ایجاد دکمه در المنتور با کمک آیکون‌ها تاریخ : 2020/02/13
10,172چگونه تصاویر سه بعدی با المنتور بسازیم؟ تاریخ : 2020/01/22
14,740دانلود قالب فارسی و فروشگاهی Zigcy Lite برای وردپرس تاریخ : 2020/06/14
9,028افزایش سرعت سایت ساخته شده با المنتور تاریخ : 2020/01/25
21,284افزونه Premium Addons PRO امکانات جانبی صفحه ساز Elementor Pro نسخه 2.0.7 تاریخ : 2020/10/19
23,440افزایش امکانات صفحه ساز Elementor با افزونه Elementor Extras نسخه 2.2.20 تاریخ : 2020/02/20
9,024دانلود افزونه TM Elementor Addons – افزودنی مخصوص المنتور تاریخ : 2022/01/17
9,764ساخت مگامنو های حرفه ای در المنتور با افزونه HT Menu Pro تاریخ : 2020/07/7
8,452قالب فروشگاهی وردپرس Envo ecommerce فارسی تاریخ : 2021/02/4
11,148قالب فروشگاهی وردپرس Rife فارسی تاریخ : 2020/09/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب