جلسه 26: آموزش طراحی هدر وردپرس

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

هدر بخش بالایی سایت می باشد بخشی که تمام توجه کاربران شما ابتدای ورود به این بخش جلب می شود و بسیار مهم است که بتوانید یک هدر جذاب و اصولی طراحی کنید. داشتن یک هدر جذاب با رنگ بندی مناسب و طرح اصولی اهمیت مهمی دارد که در این ویدئو به صورت کامل توضیح داده خواهد شد.

بخش کلی هدر

هدر از سه بخش تشکیل می شود: بخش بالایی، بخش میانی و بخش پایینی که البته بودن هر سه بخش در طراحی یک سایت ضرورت ندارد و حداقل باید بخش میانی وجود داشته باشد اما در طرح هایی می تواند دو بخش باشد و این مورد دلخواه می باشد.

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

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

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

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

بخش بالایی، بخش وسط و بخش پایینی

آیا همه سایت‌ها باید این سه بخش را داشته باشند؟

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

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

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

مثلاً ما می‌خواهیم این قسمت یک متن دلخواه اول قرار دهیم، ذخیره تغییرات و بزنید، اینجا ما می‌خواهیم یک اِلمان دیگری قرار دهیم به طور مثال باکس جستجو را ما می‌خواهیم قرار دهیم، این قسمت هم ما می‌خواهیم قرار داشته باشد و فهرست و اضافه کنیم، فهرست و همانطور که در جلسه‌های قبلی آشنا شدیم از همین قسمت ما می‌توانیم فهرست‌مان را انتخاب کنیم و فهرست هم می‌دانیم که از بخش نمایش بخش فهرست‌ها می‌توانیم فهرست بسازیم و ازش استفاده کنیم.

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

برای نمونه کارها شما می‌توانید یک سربرگ جداگانه‌ای برای خودتان بسازید، ذخیره تغییرات را میزنید، حالا سایت‌مان را دوباره بارگذاری کنید، یک نکته‌ای هم که وجود دارد برای‌ این‌که تغییراتی که ایجاد می‌کنید را مشاهده کنید حتماً Ctrl+F5 بزنید که کَش مرورگرتان هم خالی شود و اگر کَشی داشته باشد و تغییرات و سیو کرده باشد آن حذف شود و بتوانید تغییرات اصلی سایت و مشاهده کنید پس Ctrl+F5

هر تغییراتی که میدید اگر مثلاً داخل صفحه هستید این تغییرات و میدید و می‌بینید اعمال نمی‌شود Ctrl+F5 بزنید یا در حال طراحی فوتر هستید، می‌بینید رنگی اعمال نمی‌شود یا اتفاقی نمی‌افتد Ctrl+F5 را کلیک کنید.

خب ما الان توانستیم اِلمان‌هایی که می‌خواستیم و اینجا قرار دهیم، کد تخفیف‌مان، منویی که می‌خواستیم از قبل ساخته بودیم و باکس جستجوی‌مان را اینجا قراردادیم.

طراحی المان های هدر

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

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

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

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

دوباره آن بخش حذف می‌شود و برای ما منوی جدید و بارگذاری می‌کند، اینجا ببینید دو ردیف هدرمان، هدر پایین و دیگر ندارد، ذخیره تغییرات را می‌زنیم و صفحه‌مان را دوباره بارگذاری می‌کنیم و Ctrl+F5 می‌زنم به این صورت برای ما نشان می‌دهد.

خب در قالبی که ما دیدیم، اینجا یکم فرق داریم می‌بینیم مثلاً آن رنگی که بالا وجود داشت به رنگ سبز برای ما وجود ندارد خب بیایم اینها را درست کنیم. از اِلمان اولی که بخواهیم شروع کنیم اینجا آدرس تماس تلفنی که می‌توانیم متنش را تغییر دهیم، آیکنش را اینجا می‌توانید تغییر دهید، برای این‌که آیکن را بخواهید تغییر دهید باید نام آیکن را وارد کنید روی این دکمه کلیک کنید وارد یک سایتی می‌شوید که این آیکن‌ها داخلش بارگذاری شده و می‌توانید استفاده کنید.

برای این‌که بتوانید آیکن‌ها را ببینید نیاز که با آی‌پی ایران وارد نشوید با یک آی‌پی دیگر وارد شوید تا بتوانید این آیکن‌ها را مشاهده کنید، پس آیکن‌ها را هم می‌توانید از این قسمت استفاده کنید و هر آیکن یک نامی دارد که آن نام و باید اینجا قرار دهید مثلاً من همین‌طوری می‌زنم لپ‌تاپ ببینیم برای‌مان می‌آورد یا نه؟

بله،‌ اینجا مثلاً من نوشتم لپ‌تاپ برای‌مان آورد، معمولاً اسم‌های ساده انتخاب می‌کنم که بتوانید حتی آن چیزی را که می‌‌خواهید را هم بنویسید شاید آیکنش برای‌تان پیدا شود. ذخیره تغییرات را هم می‌زنم اینجا هم بخش ایمیل که می‌توانید ایمیل‌تان را وارد کنید و اینجا هم دوباره آیکن که می‌توانید وارد کنید.

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

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

نوار بالایی هدر

خب ما این نوار بالا را می‌خواهیم یک رنگ خوبی بهش بدهیم باید چه کار کنیم؟

طبیعتاً برای این اِلمان‌ها که نمی‌توانیم ویرایش کنیم ما می‌خواهیم کل این باکس سفیدی که داریم می‌بینیم رنگش عوض شود، برای این کار باید ناحیه بالا را بزنید، ناحیه بالا می‌شود همین که دورش با رنگ زرد نشان داده می‌شود، ناحیه بالا یکسری تنظیماتی دارد، نمایش ناحیه را اگر غیرفعال کنید این ستون دیگر نمایش داده نمی‌شود این سطر نمایش داده نمی‌شود.

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

ما این را می‌خواهیم صورتیش را تغییر دهیم، از این قسمت ما می‌آیم این کار را انجام می‌دهیم. میایم مثلاً می‌گذاریم روی سبز که معلوم باشد ببینیم Ctrl+F5 می‌زنم، الان به این شکل درآمد که خیلی جذاب‌تر شد که وقتی موس و می‌بریم روی ایمیل برای ما به رنگ سبز نشان می‌دهد، درواقع هرچی که لینک باشد مثل این موس و ببریم روی آن به رنگ سبز نشان می‌دهد به ما، حالا ما می‌خواهیم رنگ و یک مقدار بهترش کنیم مثلاً این و اگر که یک رنگ بهتری برایش انتخاب کنیم که بیاد به تصویری که دارد، خب خیلی بهتر.

یک همچین رنگی و این را هم رنگش را روشن‌تر می‌کنیم تا بهتر شود، ببینید این را می‌کشیم این طرف تا هردو نوعش را بتوانید ببینید به صورت طیفی از بنفش تا این رنگ صورتی که انتخاب کرده و ما می‌توانیم اینجا تغییرش دهیم، صفحه را می‌آوریم به چپ اینجا رنگ صورتیش ما کم‌رنگش می‌کنیم این هم رنگ بنفشش که دوباره می‌توانیم کم‌رنگ‌ترش کنیم.

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

چون‌ آن رنگی که انتخاب کردیم تقریباً رنگ مشکی است برای همین برای آن انتخاب کنیم، تا دیده شود، الان باز بهتر شد منتهی می‌توانیم یک رنگ بهتری برایش درنظر بگیریم همان سفید فکر می‌کنم که بیشتر بهش میاد الان بهتر.

خب در منوی پایینی اینجا یک لوگو داریم که سایز تصویر را اینجا می‌توانید تغییر دهید امّا سایز درستی را انتخاب کنید که الان به شما می‌گویم استایل تصویر و مهم‌ترین بخشش، تصویر مختلف برای سربرگ شفاف که اینجا می‌توانید لوگوی‌تان را انتخاب کنید. دقت کنید که ارتفاعش زیاد نباشد تا هدرتان زشت شود، ارتفاعش را سعی کنید مثل همین تصویری که اینجا مشاهده می‌کنید بگذارید، این تصویر را می‌توانید ذخیره کنید و در فتوشاپ ببینید اندازه‌هایش چی و دقیقاً‌ اندازه همین لوگو بیاید لوگوی‌تان را اضافه کنید.

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

الان فقط گوشی موبایل داریم که به ما نمایش می‌دهد و زیرش هم خط می‌اندازد.

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

خب ما می‌رویم این کار را انجام می‌دهیم؛ یک بخش فهرست، اینجا فهرست‌ یک ما خب چیزهای دیگر و بهش اضافه می‌کنیم مثلاً فروشگاه‌مان را اضافه می‌کنیم برگه نمونه اضافه می‌کنیم و صفحه اصلی به این صورت اینجا قرار می‌گیرد ذخیره فهرست و بزنید الان به این بخش اضافه شد. به این صورت منوی‌مان را به صورت تستی ساختیم یک نکته‌ای هم که الان یادم افتاد که به شما بگویم البته در جلسه‌های قبلی هم گفته بودم اگر که هدرتان را تا اینجا ساختید و در صفحه به هیچ عنوان نشان نداد بدانید مشکل از برگه صفحه اصلی دارید باید بروید داخل افزونه جدید و بزنید که ما اینجا برگه‌مان را ساختیم می‌بینید؟

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

بررسی بخش های مختلف

خب اِلمان‌های دیگر را می‌رویم بررسی کنیم؛

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

سبد خرید، اینجا دوباره می‌توانید چیزهای مختلف انجام دهید، مثلاً این الان رنگش به رنگ صورتی شما می‌توانید رنگش را تغییر دهید و رنگ دیگری را برایش انتخاب کنید، دوباره این هم می‌تواند به صورت طیف رنگی باشد یا می‌تواند رنگ ساده و یک نواخت باشد، رنگش را این رنگی می‌گذاریم، این هم می‌توانیم مثلاً روی مودم بگذاریم عرضش را یک مقدار کم کنیم، کمترینش همان 200 دوباره ذخیره کنیم که این دوتا را هم یک تغییری داده باشیم.

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

مثلاً ما می‌خواهیم رنگ را بگذاریم روی بیشتر آبی و بنفش، برای این‌ کار اینجا هم طرح‌های رنگی دارد که می‌توانید دوباره انتخاب کنید که کدام را می‌خواهید رنگ‌ها معروف و معمولاً رنگ‌هایی که استفاده می‌شود ما می‌گذاریم روی این رنگ و تمام رنگ‌هایمان در اینجا اضافه می‌شود و هر رنگی هم که نخواستید رویش کلیک می‌کنید و رنگش را تغییر می‌دهید. دوباره سایت‌مان را چک می‌کنیم، الان ذخیره شد با Ctrl+F5 چک می‌کنیم ببینید اصلاً‌ کل سایت‌مان انگار تغییر کرده و شکل و ظاهر دیگری به خودش گرفته، به این صورت حالا سفید وقتی که میایم رویش رنگ سفید و به این صورت دارد به ما نمایش می‌دهد حتی رنگ پیش‌زمینه هدرمان هم تغییر داد و رنگ پیش‌زمینه‌ی خود سایت‌مان هم تغییر داد که اینجا می‌توانیم ما درواقع آنها را تغییر دهیم و پیدایشان کنیم حالا سفید کنیم یا یک رنگ دیگری بهش بدهیم.

رنگ محتوی را بگذاریم روی سفید، بک‌گراند و بگذاریم روی سفید، این هم مربوط به هدر بگذاریم روی سفید این مورد هم بگذاریم روی سفید و دوباره سایت‌مان را تست کنیم، با Ctrl+F5 تست می‌کنیم که اعمال شود، الان به این شکل شد. اینها را دارد خیلی کم‌رنگ به ما نمایش می‌دهد و آن چیزی هم که می‌خواستیم هم پیدا کردیم یعنی توانستیم هدر و سفید کنیم و بک‌گراند صفحه اصلی‌مان را هم سفید کنیم امّا مشکلی که الان دارد این رنگ‌های خیلی خاکستری‌اند که دیده نمی‌شوند و وقتی هم که موس و می‌آوریم روی یک اِلمانی سفید می‌شود، اینها را باید درست کنیم یا می‌توانیم دوباره طرح‌ رنگی‌مان را عوض کنیم یا می‌توانیم درواقع به صورت تکی اضافه‌اش کنیم، ما می‌گذاریم روی این رنگ، خب الان باز بهتر شد این رنگ می‌تواند رنگ بهتری برای ما باشد الان دوباره می‌توانیم هدر را پس زمینه‌اش را تغییر دهیم یا بگذاریم همین بماند.

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

تغییرات اختصاصی

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

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

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

هدر شفاف

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

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

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

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

دوره رایگان آموزش وردپرس

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

دوره رایگان آموزش وردپرس

5/5 - (1 امتیاز)
درباره نویسنده
پدرام تبریزی

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

بازدیدکنندگانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند
دیدگاهی بنویسید
0