چگونه یک هدر وب سایت سفارشی با Elementor ایجاد کنیم

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

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

Elementor راه حل مناسبی برای این مشکل دارد.

ابزاری که برای ساخت هدر با Elementor استفاده می کنید نامیده می شود تم ساز. برای این، شما نیاز به یک Elementor Pro اشتراک، ابونمان.

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

المنتور تم ساز در زیر زندگی می کند قالب ها برگه:

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

لیستی از آن ها را خواهید یافت قطعات سایت در سمت چپ صفحه به همراه مواردی که قبلاً در مرکز طراحی کرده اید:

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

با این کار ویرایشگر Elementor باز می شود.

اولین چیزی که هنگام ورود به ویرایشگر مشاهده می کنید لیستی از قالب های بلوک هدر Elementor است:

هنگامی که ماوس را بر روی هر یک از آنها نگه دارید قالب های Elementor، یک نماد ذره بین ظاهر می شود. برای پیش نمایش قالب روی آن کلیک کنید.

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

وقتی یکی را که دوست دارید پیدا کردید، آن را انتخاب کنید و سپس روی سبز رنگ کلیک کنید درج کنید دکمه در گوشه سمت راست بالا:

این یک هدر کاملاً قابل ویرایش به بوم Elementor اضافه می کند.

چند راه برای اضافه کردن لوگو به هدر وب سایت وجود دارد.

یک راه این است که آن را با استفاده از تصویر ویجت به این ترتیب لوگو در این الگوی هدر Elementor ایجاد شد:

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

برای دسترسی هویت سایت از داخل Elementor، روی نماد منوی همبرگر در گوشه بالا سمت چپ کلیک کنید. سپس برو به تنظیمات سایت و هویت سایت جایی که فایل لوگوی خود را آپلود خواهید کرد:

بعد، محل را پیدا کنید لوگوی سایت ویجت (این یک ویجت Elementor Pro) و آن را به همان ستونی که تصویر لوگوی الگو قرار دارد بکشید. هنگامی که در جای خود قرار گرفت، روی لوگوی الگو کلیک راست کرده و آن را حذف کنید:

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

هر الگوی هدر Elementor دارای یک است منوی Nav ویجت تعبیه شده در آن این ویجت به طور خودکار هر منوی پیمایش اصلی را وارد می کند.

برای تغییر اینکه کدام منو در هدر ظاهر می شود، روی آن کلیک کنید منوی Nav عنصر در هدر سپس یک منوی متفاوت را از منوی کشویی انتخاب کنید:

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

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

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

فراخوانی برای اقدام باید طوری باشد که اکثر بازدیدکنندگان جذب آن شوند. برای مثال:

• در یک سایت تجارت الکترونیک، یک نوار جستجو اضافه کنید.
• در یک سایت SaaS، دکمه «اکنون امتحان کنید» یا «زمان‌بندی نمایش» را اضافه کنید.
• در یک وب‌سایت رسانه‌ای، یک دکمه به «اشتراک» اضافه کنید.

هر چیزی که می خواهید اضافه کنید، Elementor یک ویجت برای آن دارد. آن را پیدا کنید و آن را به سمت راست منوی خود بکشید:

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

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

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

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

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

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

با این حال، ممکن است بخواهید محتوای ثانویه را نیز اضافه کنید. این به ویژه برای مشاغلی مفید است که می خواهند کانال های دیگر خود را تبلیغ کنند. برای مثال:

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

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

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

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

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

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

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

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

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

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

دلایل مختلفی وجود دارد که چرا کاربران وردپرس باید این کار را انجام دهند به Elementor Pro ارتقا دهید. به چیزی شبیه به این فکر کنید؛ ساخت هدر سفارشی برای وب سایت شما Elementor کار با چیزی را که قبلاً به راه‌حل‌ها یا کدنویسی افزونه اضافی نیاز داشت، آسان می‌کند.

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

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