جلسه نهم – سربرگ

اگه دنبال اینی که ظاهر سایتت رو حرفه‌ای و تر و تمیز بچینی، تنظیمات سربرگ (Header) یکی از اون بخش‌های خیلی مهمه.

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

سربرگ

سربرگ ها از 3 ردیف سربرگ ، نوار پایین سربرگ و نوار بالای سربرگ تشکیل شدن همچنین هر ردیفی به 3 ستون راست ، چپ و وسط تقسیم شده .

در سربرگ ها از تعداد زیادی المان وجود داره که در ادامه بهشون می پردازیم

• الگو سفارشی سربرگ
• لوگو
• شبکه های اجتماعی
• نوار بالای سربرگ
• سربرگ
• نوار پایین سربرگ
• سربرگ چسبان
• سربرگ موبایل
• منو ثابت موبایل
• سمت فیکس
• عنوان و مسیر های سایت

برای دسترسی به سربرگ از بخش تنظیمات به قسمت سربرگ میریم .

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

بخش اول :

توی بخش اول ( الگوی سفارشی سربرگ ) گزینه ای هست که میتونید باهاش یک برگه رو به عنوان سربرگ قرار بدید . هم برای دسکتاپ و هم برای موبایل .

اما کاربرد این بخش چیه ؟

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

مثال :

شما میتونید از بخش برگه ها یک سربرگ جدید ایجاد کنید.

و با المنتور (elementor) یا ویژوال کامپوزر (visual composer) اون سربرگ رئو طراحی کنید .

آموزش المنتور به صورت جداگانه و کامل تر قرار گرفته .

( آموزش جامع المنتور | پردازش هوشمند علائدین )

همچنین دقت کنید که اگر از ین بخش ( الگو سفارشی سربرگ ) استفاده بکنید ، دیگه امکان استفاده از بخش هایی که بعد از این بخش معرفی خواهند شد رو ندارید .

 

بخش دوم :

شما در بخش دوم ( لوگو ) میتونید 2 تا لوگو مشخص کنید .

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

و اما چرا 2 تا لوگو وجود داره ؟

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

…

تولتیپ :

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

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

استایل ها :

در پایین بخش لوگو ، یه بخش دیگه ای هست به اسم استایل ها . شما از این بخش میتونید ظاهر المان های بخش لوگو رو تنظیم بکنید

مثلا میتونید رنگ پس زمینه ، اندازه و اسپیسینگ (spacing) لوگو و تولتیپ رو تنظیم کنید .

نکته : اگه شما لوگویی برای سایت قرار ندید ، در بخش لوگو ، اسم سایت به نمایش در میاد که از بخش استایل میتونید فونت و باقی ویژگی هاشو تنظیم کنید.

بخش سوم :

بخش سوم ( شبکه های اجتماعی ) برای قرار دادن آدرس شبکه های اجتماعی در سربرگ هستن .

توی این بخش میتونید شبکه های اجتماعیتون رو قرار بدید از قسمت بالای این بخش . اگر خواستید یکیشون رو حذف کنید ، میتونید با دکمه × حذفش کنید . اگر هم خواستید شبکه ای اضافه بکنید ، کافیه دکمه افزودن رو بزنید و از اونجا میتونید عنوان ، آیکن و لینک شبکه مورد نظر رو قرار بدید .

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

در پایین همین قسمت میتونید یعنی تولتیپ میتونید مشخص کنید که عنوانی که انتخاب کردید ، چطوری نمایش داده بشن .

در اخرین قسمت همین بخش هم 2 تا کیت استایل وجود داره که میتونید با اونها ظاهر آیکن ها رو تنظیم کنید .

بخش چهارم ، پنجم و ششم :

برای درک بهتر این بخش ها به تصویر پایین دقت کنید .

قالب اکسترا به سه ستون راست ، وسط و چپ تقسیم شده و در سربرگ به صورت عمودی به سه ردیف نوار بالای سربرگ ، سربرگ و نوار پایین سربرگ تقسیم شده .

(گاهی اوقات بخاطر مشکلات ترجمه ، جای راستو چپ عوض میشن )

…

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

از نوار بالا میگذریم و به خو سربرگ میریم .

همونطور که مشاهده میکنید سربرگ 3 تا ستون داره که مشا میتونی به این ستون ها المان های مختلفی اضافه بکنید و هرکدوم رو مدیریت بکنید .

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

(شما میتونید المان های دیگه ای ام اضافه بکنید و این المان ها قابلیت جابجایی با درگ کردن هم دارند )

برای مثال شما میتونید آیتم جستجو ، منو ، شبکه های اجتماعی و … رو هم به سربرگ اضافه کنید که معمولا توی سربرگ ها وجود دارن و همچنین میتونید این آیتم هارو تنظیم و مدیریت بکنید .

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

• لوگو ( توضیح داده شده )
• لوگوی جایگزین ( توضیح داده شده )
• منو
• شبکه‌های اجتماعی ( توضیح داده شده )
• آیکون و متن
• آیکون و متن ۲
• جستجو
• خط
• دکمه ( میتونید دکمه بزارید و تنظیمش کنید )
• تصویر ( میتونید تصویر بزارید و تنظیمش کنید )
• سبد خرید
• علاقه‌مندی‌ها
• انتخابگر زبان WPML
• نوار کناری محو شونده
• محتوای آبشاری
• آواتار کاربران وارد شده
• کد کوتاه سفارشی
• صفحه سفارشی

اشاره کنم .

آیتم خط :

یک خط ایجاد میکنه که شما میتونید ظاهرش رو تنظیم کنید.

علاقمندی ها :

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

انتخابگر زبان WPML :

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

کد کوتاه سفارشی :

این آیتم برای قرار دادن کد مخصوص به زبان CSS و HTML هستش .

صفحه سفارشی :

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

آیکن و متن و آیکن و متن 2 :

شما در این آیتم ها میتونید یک آیکن و یک متن قرار بدید که در آیکن و متن 2 شما میتونید 2 تا متن قرار بدید و تنظیمش کنید .

و در پایین اون بخش شما کیت های استایل رو می بینید که باهاش میتوند ظاهر و طرح بندی این آیتم هارو مدیریت کنید .

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

به بخش نوار پایینی میریم .

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

و در ادامه میتونید موارد داخل منو رو اونجا اضافه یا حذف بکنید .

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

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

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

برای مثال شما می‌تونید برای منوتون یک بک گراند انتخاب کنید یا حالت آبشاری منو رو تنظیم کنید یا تصویر شاخصش رو عوض کنید یا طرح‌بندیش رو کاملاً عوض کنید و در کل می‌تونید به صورت کامل قسمت منو رو طراحی کنید .

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

و اما قسمت مهمی که داخل منو وجود داره ، مگامنو هستش .

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

مگامنو این امکان رو میده که شاخه‌ها و زیر شاخه‌ها به صورت غیرمعمولی نمایش داده بشن و شما می‌تونید این ظاهر رو از همون جایی که مگامنو رو فعال کردید مشخص کنید ( قابلیت هایی مثل عرض و …)

سبد خرید :

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

و همچنین شما می‌تونید با این آیتم استایل سبد خرید رو ا کیت‌هایی که در اختیارتون میده به صورت کامل تنظیم کنید.

جستجو :

آیتم جستجو یکی از ضروری‌ترین آیتم‌های داخل هر سربرگ هست .

شما می‌تونید این المانو قرار بدید و اون رو به ۴ حالت آبشاری فرم ۱ و ۲ و همچنین تمام صفحه به نمایش بزارید همچنین با استفاده از کیت‌های استایل ، ظاهر اون رو تنظیم کنید .

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

جستجوی ایجکس :

جستجوی ایجکس این امکان را به شما میده که زمانی که یک کاربر یک کلمه را جستجو می‌کنه نتایج اون رو به صورت خودکار زیر جستجو نمایش بده .

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

نواری کناری محو شونده :

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

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

و همچنین شما می‌تونید محتوای نوار کناری محو شونده رو هم از همین قسمت مشخص کنید.

بخش هفتم :

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

و شما می‌تونید نوع اونو مشخص کنید که کدوم قسمت رو به صورت چسبان نگه داره برای مثال نوار بالایی سربرگ یا خود سربرگ یا نوار پایینی .

و همچنین شما می‌تونید مثل قسمت‌های دیگه ظاهر این قسمت رو هم از کیت‌های استایل به صورت کامل نظیم کنید و همچنین المان‌هایی اضافه یا حذف کنید.

بخش هشتم :

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

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

شما می‌تونید مثل باقی قسمت‌هایی که توضیح داده شد استایل‌ها و المان‌های این بخش رو هم به صورت کامل تنظیم کنید.

بخش نهم :

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

و این بخش هم تنظیمات مختص به خودشو داره که مثل بقیه بخش‌ها شامل اضافه کردن آیتم‌ها و تنظیمات ظاهری میشه.

بخش دهم :

با استفاده از بخش سمت فیکس می‌تونید المان‌هایی مشخص کنید که دائماً در یک سمت صفحه نمایش وجود دارند و این المان‌ها رو هم می‌تونید به صورت کامل تنظیم کنید.

مثل بقیه آیتم‌هایی که توضیح داده شد این بخش هم قابلیت مدیریت المان‌ها و ظواهر و طرح‌بندی داره.

بخش یازدهم :

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

در واقع عنوان و مسیرهای سایت برای تنظیم صفحاتی که واردشون میشیم استفاده میشه.

شما با تنظیماتی مثل مکان می‌تونید مشخص کنید که تصویر سربرگ کجا قرار می‌گیره و به چه شکل قرار می‌گیره.

و با تنظیماتی مثل نوع عنوان می‌تونید مشخص کنید که برای مثال یک تصویر مخصوص نمایش داده بشه.

بخش دوازدهم :

در بخش آخر یعنی بخش بیشتر شما می‌تونید یک استایل مشخص کنید برای کل سربرگ.

و همچنین یک پیشخوان اضافی در سربرگ قرار بدید برای مثال یک آیکن .

که شما باز هم می‌تونید آیکون و ظاهر آیکون رو تنظیم کنید.

…

به پایان قسمت هشتم و بخش سربرگ‌ها رسیدیم .

امیدوارم که برای شما مفید بوده باشه این آموزش و ممنونیم که تا اینجا همراه ما بودید.

موفق و پیروز باشید .