ویژگی برجسته محصول Divi: بسته طرح بندی سرصفحه

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

بسته طرح بندی هدر را بارگذاری کنید

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

فرآیند آپلود طرح‌بندی‌ها برای همه فایل‌ها یکسان است:

1. به دیوی بروید
2. Divi Library را انتخاب کنید
3. روی Import and Export کلیک کنید
4. تب Import را انتخاب کنید
5. روی Choose File کلیک کنید و به فایل‌های JSON خارج‌شده در رایانه خود بروید
6. روی Import Divi Builder Layouts کلیک کنید

پس از تکمیل واردات، 81 عنصر جدید در کتابخانه Divi خود خواهید داشت (اگر فایل اصلی JSON را انتخاب کرده باشید). آنها بر اساس دسته بندی هایشان برچسب گذاری و نامگذاری می شوند تا شناسایی آنها آسان باشد. این طرح‌بندی‌ها طرح‌بندی‌های استاندارد Divi Library هستند، بنابراین می‌توانند با هر طرح‌بندی Divi برای یک صفحه، پست یا هر طرح‌بندی در Divi Theme Builder استفاده شوند و در Divi Cloud برای استفاده در هر وب‌سایت Divi ذخیره شوند. توصیه می کنیم از آنها در Divi Theme Builder استفاده کنید و آنها را به دسته های جهانی یا فردی اختصاص دهید.

نمونه هایی از بسته طرح بندی هدر

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

برای اسکرین شات هایم، از صفحه اصلی بسته طرح بندی رایگان Home Remodeling موجود در Divi استفاده می کنم. ما به نسخه‌های Wireframe، دسکتاپ و تلفن هدرها نگاه خواهیم کرد.

هدرهای توسعه یافته

ابتدا نگاهی به Advanced Headers می اندازیم که شامل 30 طرح بندی است.

عنوان توسعه یافته V1

اولین هدر توسعه یافته شامل یک ماژول منو، یک ماژول دکمه و دو ماژول متنی است. همچنین شامل یک ماژول کد با CSS است.

هدر شامل منوهای کشویی سبک شده است. یک دکمه با CTA نقل قول در حالت انتظار کشیده می شود.

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

عنوان توسعه یافته V20

نسخه 20 Advanced Header شامل چهار ماژول Image، سه ماژول Blurb، یک ماژول منو و یک ماژول کد است.

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

کلیدهای منوی موبایل با CSS به نسخه گوشی اضافه می شوند.

عنوان توسعه یافته V30

Advanced Header V30 شامل سه ماژول متنی، یک ماژول منو و یک ماژول کد است.

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

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

سرصفحه های پوشش تمام صفحه

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

سربرگ پوشش تمام صفحه V2

Fullscreen Overlay V2 دارای عناصر بسیاری از جمله متن، تصاویر، دکمه‌ها، پیام‌های تبلیغاتی، کد، رسانه‌های اجتماعی، منو و موارد دیگر است.

شامل یک نماد منوی همبرگر با انیمیشن در حالت انتظار است. دکمه CTA در حالت انتظار باز می شود.

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

در اینجا نسخه تلفنی است که از همان طراحی پیروی می کند.

سربرگ پوشش تمام صفحه V3

Fullscreen Header Overlay V3 از ماژول های مشابه طرح قبلی استفاده می کند، اما طراحی متفاوتی برای پوشش تمام صفحه ایجاد می کند.

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

منوی آن نیمی از صفحه را پوشش می دهد، در حالی که تصویر نیمی دیگر از صفحه را اشغال می کند.

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

هدر با عناصر کشویی

سوم، نگاهی به بسته طرح‌بندی سربرگ با اسلاید-in خواهیم انداخت که شامل سه طرح‌بندی است.

Slider Header V2

نسخه 2 یک اسلاید با یک ماژول blurb، چندین ماژول متنی، یک ماژول منو، یک ماژول دکمه و کد ایجاد می کند.

منوی کشویی زیر منوهای زیر یک پیام را نشان می دهد. در پایین منو می توانید یک CTA و یک تصویر پیدا کنید.

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

Slider Header V3

نسخه 3 شامل ماژول های Blurb برای ایجاد اسلاید است.

دسکتاپ کشویی شامل انیمیشن شناور است و متن و آیکون ها را نمایش می دهد. هر یک از عناصر قابل کلیک هستند.

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

سربرگ های ساده

چهارم، Simple Headers شامل 30 طرح بندی است.

هدرهای ساده V15

Simple Headers نسخه 15 دارای دو خط است و شامل یک ماژول رسانه اجتماعی و چندین ماژول Blurb است.

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

نسخه تلفن دکمه هایی را برای تغییر منوهای فرعی اضافه می کند.

هدرهای ساده V22

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

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

نسخه تلفن منوهای فرعی را با سوئیچ های ایجاد شده در ماژول کد نشان می دهد.

هدر با آرم مربع

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

سرصفحه آرم مربع V3

این یکی با یک بخش ویژه ایجاد شده است که شامل یک طرح چند ستونی است. لوگوی مربعی با یک ماژول تصویر در ستون خودش ایجاد شد.

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

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

سرصفحه آرم مربعی V4

نسخه 4 شامل سه ستون برای ایجاد لوگو، منو و CTA است.

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

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

وو هدر

در نهایت نگاهی به بسته چیدمان هدر خواهیم داشت که شامل 10 هدر ووکامرس است.

Woo Headers V3

اولین Woo Header ما شامل دو خط است. ردیف بالا شامل یک ماژول متنی است، در حالی که ردیف دوم یک ماژول منو و چندین ماژول آیکون را نشان می دهد.

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

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

Woo Headers V7

Woo header نسخه 7 با سه خط ساخته شده است که شامل ماژول های Blurb برای ایجاد پیوندهای جالب به WooCommerce است.

نسخه دسکتاپ یک پیام و پیوندهای Woo را در نوار بالا نشان می دهد. نوار میانی آرم و جستجوی محصول WooCommerce را نشان می دهد. نوار منو شامل دکمه های رسانه های اجتماعی است.

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

Woo Headers V10

Woo Header نسخه 10 نیز شامل سه خط است. این شامل جستجوی محصول است و از یک ماژول متنی برای ایجاد یک بنر استفاده می کند.

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

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

بسته طرح بندی سرصفحه را بخرید

بسته Layout Header در بازار Divi با قیمت 15 دلار موجود است. این شامل به روز رسانی مادام العمر، استفاده نامحدود از وب سایت و 30 روز ضمانت بازگشت پول است.

پایان افکار

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

ما می خواهیم از تو بشنویم. آیا بسته Layout Header را برای وب سایت Divi خود امتحان کرده اید؟ تجربیات خود را در نظرات با ما در میان بگذارید.