منو سایت

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

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

 تاریخ انتشار :
/
  وبلاگ
ویژگی برجسته محصول 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 یک منوی سفارشی موبایل با دکمه‌هایی ایجاد می‌کند که شامل فلش‌هایی است که نشان می‌دهد آیا می‌توان منو را باز کرد یا جمع کرد.

عنوان توسعه یافته v1 - نمایش موبایل

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

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

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

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

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

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

عنوان توسعه یافته نسخه 20 - نمای موبایل

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

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

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

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

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

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

Advanced Header v30 - Mobile

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

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

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

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

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

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

سربرگ پوشش تمام صفحه نسخه 2 - دسکتاپ

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

سربرگ پوشش تمام صفحه نسخه 2 - رومیزی باز

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

سربرگ پوشش تمام صفحه نسخه 2 - موبایل

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

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

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

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

سربرگ پوشش تمام صفحه نسخه 3

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

Full Screen Overlay Header v3 - Open

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

Full Screen Overlay Header v3 - Mobile

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

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

Slider Header V2

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

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

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

اسلاید در نسخه 2

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

Slide In v2 - Mobile

Slider Header V3

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

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

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

Slide In v3 - Desktop

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

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

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

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

هدرهای ساده V15

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

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

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

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

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

منوی ساده 15 - موبایل

هدرهای ساده V22

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

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

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

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

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

منوی ساده 22 - موبایل

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

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

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

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

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

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

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

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

منوی لوگو مربع نسخه 3 - موبایل

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

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

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

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

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

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

منوی لوگو مربع نسخه 4 - موبایل

وو هدر

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

Woo Headers V3

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

وو هدر

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

وو هدر

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

Woo Header v3 - Mobile

Woo Headers V7

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

وو هدر

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

وو هدر

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

Woo Header v7 - موبایل

Woo Headers V10

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

وو هدر

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

وو هدر

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

Woo Headers v10 - موبایل

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

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

بسته چیدمان هدر

پایان افکار

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

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