تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
تغییر جهت محتوا در وردپرس 0 پاسخ 2 بازدید درخواست پلاگین 1 پاسخ 168 بازدید افزونه ساخت شماره مجازی 14 پاسخ 845 بازدید درخواست افزونه 1 پاسخ 197 بازدید بهترین رباط اینستاگرام 0 پاسخ 2 بازدید درخواست قالب با سبک کندو 1 پاسخ 465 بازدید اسکریپت vfm 3 پاسخ 302 بازدید به هم ریختگی سایت بعد از نصب قالب 2 پاسخ 421 بازدید نمایش کد های php 0 پاسخ 201 بازدید مشکل در اسکریپت مچ فرم 0 پاسخ 371 بازدید
تبلیغات
تبلیغات تبلیغات

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=50696
کلمات کلیدی پست :
مطالب مرتبط
4,352چگونه سرعت سایت وردپرسی را افزایش دهیم؟ تاریخ : 2019/09/24
7,704دانلود قالب فارسی و فروشگاهی Zigcy Lite برای وردپرس تاریخ : 2020/06/14
5,744ساخت مگامنو های حرفه ای در المنتور با افزونه HT Menu Pro تاریخ : 2020/07/7
6,516ساخت آیکون های سفارشی در المنتور چگونه است؟ تاریخ : 2020/01/9
17,864افزایش امکانات صفحه ساز Elementor با افزونه Elementor Extras نسخه 2.2.20 تاریخ : 2020/02/20
3,420دانلود افزودنی Coder برای المنتور تاریخ : 2021/07/28
3,288چگونه صفحه نخست سفارشی در وردپرس بسازیم؟ تاریخ : 2019/10/22
6,576ایجاد دکمه در المنتور با کمک آیکون‌ها تاریخ : 2020/02/13
2,712معرفی 6 تا از بهترین قالب های سازگار با افزونه المنتور تاریخ : 2021/08/23
2,756دانلود افزونه TM Elementor Addons – افزودنی مخصوص المنتور تاریخ : 2022/01/17
5,056چگونه صفحات ساخته شده با المنتور را بهینه کنیم؟ تاریخ : 2019/12/5
6,084قالب فروشگاهی وردپرس Rife فارسی تاریخ : 2020/09/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات