ایکون
قالب اکسترا
120 وبسایت آماده شرکتی و فروشگاهی
فقط با 1,378,000 تومان
مشاهده و خرید
نحوه ساخت هدر سایت در المنتور
مجموعه مقالات وردپرس

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

ساخت هدر شفاف در وردپرس می تواند به جذاب تر شدن ظاهر سایت شما کمک کند. هدر شفاف (Transparent) بر روی اسلایدر قرار می گیرد و جلوه های زیباتری در سایتتان ایجاد می کند. در این مقاله طراحی هدر شفاف را در وردپرس و با استفاده از المنتور آموزش دادیم.

5
06 مرداد 1400
آخرین بروزرسانی: 19 اسفند 1402

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

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

طراحی هدر شفاف در وردپرس

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

محصول پیشنهادی
بنر
افزونه المنتور، دانلود افزونه Elementor Pro
دسته بندی : افزونه صفحه ساز وردپرس
24356
فروش
88%
رضایت

المنتور امکانات متعددی دارد که یکی از آنها استفاده از قالب‌ها برای طراحی هدر است. با تهیه این افزونه به قالب‌های آماده دسترسی دارید و می‌توانید قابل‌های جدید هم ایجاد کنید.

  • در پیشخوان وردپرس در مسیر پیشخوان > قالب‌ها > گزینه قالب‌های ذخیره شده (saved template) را کلیک کنید.
  • در تب سربرگ (Header)، ویرایش با المنتور را کلیک کنید.

ایجاد قالب هدر شفاف در المنتور

  • بر بالای صفحه بر روی ویرایش سکشن (بخش) کلیک کند و در سربرگ استایل رنگ و میزان شفافیت را با موس تعیین کنید. (از rgba  255،255،255،0 یا 0،0،0،0 برای تنظیم شفافیت پس زمینه استفاده کنید).

تغییر بکگراند

تنظیمات پیشرفته برای طراحی هدر شفاف در المنتور

  • مقدار فاصله (Margin) یا همان حاشیه را از پایین به صورت منفی (-100 پیکسل یا کمتر) وارد کنید. در سربرگ طرح بندی ارتفاع 90 پیکسل است پس در سربرگ پیشرفته هم ارتفاع هدر را 90- پیکسل قرار دادیم (علامت زنجیر کنار را در تنظیم فاصله غیر فعال کنید). در اینصورت هدر می‌تواند با پس زمینه همپوشانی داشته باشد.
  • مقدار ایندکس z بر اساس الویت بندی نمایش المان‌ها بر روی یکدیگر است و ما برای هدر آن را بیشترین میزان یعنی 999 قرار دهیم.
  • شناسه css را header_stick قرار می‌دهیم و برای آن در بخش کدهای سفارشی css یک کد قرار خواهیم داد.

 

تنظیمات پشرفته برای طراحی هدر شفاف در المنتور

  • در بخش Motion Effects (موشن افکت) در Sticky، گزینه top (بالا) را انتخاب کنید. در Sticky on دستگاه‌هایی مانند دسکتاپ، تبلیت و موبایل که هدر در آن‌ها شناور است دیده می‌شود. مقدار افست افکت‌ها را بر روی هم بر اساس ارتفاع هدر تنظیم کنید. در مثال ما ارتفاع هدر 90 است پس effects offsets باید 90 باشد.

 

Motion Effects

تا این مرحله هدر شفاف و چسبنده شما ایجاد شده اما ممکن است با اسکرول به پایین، به دلیل رنگ بکگراند هدر، المان‌های آن دیده نشود بنابرین با کد css رنگ بکگراند را تغییر می‌دهیم. کد زیر نمونه ای از آن است.

  • در سربرگ Advanced بخش Custom CSS را انتخاب کنید. سپس کد زیر را وارد کنید:
.elementor-sticky--effects{ background-color: #000; }

 

سربرگ Advanced

با انجام مراحل بالا براحتی می‌توانید هدر طراحی شده خود را به یک هدر شفاف تبدیل کنید. مثلا طراحی هدر شفاف در طراحی سایت شرکتی با المنتور به شما کمک می‌کند و سپس نتیجه کار را می‌توانید را در سایت خود ببینید.

ساخت هدر شفاف در المنتور پرو با قالب‌های آماده

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

  • برای اینکار مسیر پیشخوان > قالب‌ها >افزودن جدید را کلیک کنید. پنجره قالب جدید به شما نمایش داده خواهد شد.
  •  نوع قالب را سربرگ(Header) انتخاب کنید، برای آن یک نام قرار دهید و روی ایجاد قالب کلیک کنیم.
  • در کتابخانه، قالب آماده موردنظرمان را انتخاب می‌کنیم و مراحل بالا را برای آن انجام دهید.

 

طراحی هدر شفاف در المنتور پرو

 

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

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

مهسا کاظمی پور
مهسا کاظمی پور
مهسا هستم، عاشق زندگی، نوشتن، نقاشی و صد البته مهارت‌ها و تجربه های جدید :)
مقالات مرتبط
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
قالب وودمارت یک راه حل قدرتمند برای طراحی یک فروشگاه اینترنتی است. این قالب با انعطاف پذیری بالا، مجموعه ویژگی‌های غنی و رابط کاربری بصری، به شما این امکان را می‌دهد تا فروشگاه رویایی خود را به راحتی راه اندازی کنید. در این مقاله، آموزش قالب وودمارت را شروع و شما را با جنبه های مختلف این قالب ...
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
5 دیدگاه
saminselin
saminselin
16 مهر 1402 20:48

سلام و وقت به خیر
با تشکر از آموزش خوب شما
من قبلا تو یه سایت آموزشی دیگری این مطلب رو یاد گرفته بودم و به دنبال حل مشکل عدم کارکرد کد css بودم که متاسفانه نه در آموزش قبلی جواب گرفتم و نه با کد css شما ! و احتمال میدم که خیلی ها این مشکل رو داشته باشن اگر براتون امکان داره فایل ویدئویی آموزشی مربوط به قسمت آخر و بارگذاری کد CSS بزارین
پیشاپیش از لطفتون ممنونم
حتما و دوباره بهتون سر میزنم خیلی مطالب مفید و آموزنده ای دارین بهتون تبریک میگم.

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
18 مهر 1402 13:57

سلام دوست عزیز
حتما در برنامه قرار میدیم که ویدئوش آماده بشه

آیا مفید بود ؟
md8
md8
12 اردیبهشت 1402 13:14

سلام من انجامدادم انجام نشد رو قالب اماده انجام نمیشه؟

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
12 اردیبهشت 1402 15:27

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

آیا مفید بود ؟
احمدرضا
احمدرضا
14 خرداد 1401 01:17

عالی خسته نباشین

آیا مفید بود ؟
0