• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

ایجاد هدر چسبان و شفاف در المنتور (جلسه 41)

بهمن 23, 1398
نویسنده حامد نجفی
وردپرس ، آموزش المنتور پرو ، آموزش ویدیویی المنتور
1.15k بازدید
https://ofoghweb.com/wp-content/uploads/2020/05/Sticky-Header_final.mp4

سلام به همه ی دوستداران المنتور

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

هدر چسبان باعث زیبایی و جذابیت در سایت می شود و این قسمت را که لینک های مهم در آن قرار می گیرد را در اختیار کاربر قرار می دهد تا به آن دسترسی بیشتری داشته باشد .

یک هدر چسبان زیبا باعث جذب کاربر و کلیک بیشتر سایت شما می شود.

مواردی مهمی که معولا در هدرچسبان استفاده می‌کنند شامل: عکس یا عکس‌های مناسب با فعالیت سایت، قرار دادن لوگو ، قرار دادن گزینه سرچ ، شعار سایت، معرفی خدمات سایت ، گزینه ثبت ‌نام یا ورود به صفحه خدمات و … است.

حالا که با هدر چسبان آشنا شدید در ادامه با دیدن کلیپ و متن آموزشی به راحتی می توانید یک هدر چسبان جذاب برای سایت خود بسازید با ما همراه باشید.

 

نحوه ساخت هدر چسبان

 

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

در قسمت تنظیمات کدهای css باید یک مقدار css به آن اضافه کنید تا صفحه شما زیبایی بیشتری پیدا کند ، کدهای لازم برای ایجاد css هدر چسبان به صورت زیر است :

selector.elementor-sticky–effects{
background-color: rgba(133,130,255,0.5) !important
}
selector{
transition: background-color 4s ease !important;
}
selector.elementor-sticky–effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}

 

حالا همه تنظیمات را ثبت می کنید، می بینید که تنظیمات در صفحه شما ایجاد شده است هدر چسبان شما آماده است.

 

https://ofoghweb.com/wp-content/uploads/2020/05/Sticky-Header_final.mp4

3.8/5 - (32 امتیاز)
اشتراک گذاری:

لینک دانلود

  • عنوان:ایجاد منوی هدر چسبان و شفاف در المنتور
  • نام مدرس:حامد نجفی
  • مدت آموزش:00:04:48
  • حجم:11MG
 
دانلود فایل

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

ورود / عضویت

پسورد فایل : ندارد گزارش خرابی لینک

برچسب: آموزش المنتورآموزش المنتور پروآموزش کار با المنتورالمنتورالمنتور پروتدریس خصوصی وردپرس
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

نمایش فیلدهای سفارشی و اختصاصی در وردپرس

نمایش فیلدهای سفارشی و اختصاصی در وردپرس

افزونه‌ بک‌آپ‌گیری در وردپرس

مقایسه‌ی مزایا و معایب ۷ تا از بهترین افزونه‌ بک‌آپ‌گیری از وردپرس

نکات افزایش امنیت سایت وردپرس

8 نکته برای افزایش امنیت سایت وردپرس(قسمت 2)

نکات مهم برای تقویت امنیت وردپرس(قسمت اول)

8 نکته مهم برای تقویت امنیت وردپرس(قسمت 1)

ویژگی ها و کاربردهای UI و UX

ویژگی ها و کاربردهای UI و UX

یادگیری وردپرس به صورت رایگان در یک هفته ( یا حتی کمتر)

دوره های آموزشی مرتبط

100%
تخفیف

آموزش سئو سایت وردپرس با افزونه Rank Math

4.25 4 Votes
99000 – رایگان
حامد نجفی
21
99000 – رایگان
18%
تخفیف

دوره طراحی سایت با المنتور در کمتر از 1 ساعت

5.00 1 Votes
۵۵۰,۰۰۰ تومان ۴۴۹,۰۰۰ تومان
حامد نجفی
47
۵۵۰,۰۰۰ تومان ۴۴۹,۰۰۰ تومان
قدیمی تر ایجاد محدودیت دسترسی کاربران در المنتور (جلسه 40)
جدیدتر آموزش ایجاد هدر و فوتر با المنتور (جلسه 42)

1 Comment

Join the discussion and tell us your opinion.

  • کیوان گفت:
    مرداد 19, 1400 در 5:09 ب.ظ

    سلام من نمونه هایی مثل این هدر رو دیده بودم خیلی کاربردی و جالبه مرسی که آموزشش رو گذاشتین

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • مریم در آموزش ایجاد صفحه تماس با ما در المنتور(جلسه 10)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

یک × یک =