ماژول Divi Splitter در بین ماژول های موجود در Divi Builder منحصر به فرد است. برای چندین هدف کار می کند. نه تنها یک خط سبک برای اضافه کردن جداسازی جالب بین ماژول ها ارائه می دهد، بلکه برای افزودن فضاها نیز استفاده می شود. بسیاری از طرح‌بندی‌های Divi از تقسیم‌کننده‌های نامرئی برای ایجاد فضا در طرح‌بندی استفاده می‌کنند. در این پست نحوه استفاده از تقسیم کننده های نامرئی برای ایجاد فاصله بین ماژول های Divi را خواهیم دید.
چرا فضایی با تقسیم کننده های نامرئی ایجاد کنیم؟
تقسیم کننده های نامرئی یک راه عالی برای اضافه کردن فضای سفید به چیدمان های شما هستند. بدون فضای سفید، یک چیدمان می تواند به هم ریخته و از نظر بصری جذاب نباشد. اگر عناصر بسیار نزدیک به عناصر دیگر باشند به راحتی می توان آنها را نادیده گرفت. آنها از هم جدا نخواهند شد و باعث می شود که CTA ها مورد توجه قرار نگیرند.
یک جعبه سفید می تواند به تمرکز توجه بر روی مناطق خاصی از صفحه کمک کند. وقتی یک عنصر فضای خالی زیادی در اطراف خود داشته باشد، برجسته می شود. این امر مخصوصاً برای دکمه‌ها، توضیحات، اعلامیه‌ها یا هر چیزی که می‌خواهید بازدیدکنندگانتان با آن تعامل داشته باشند، مهم است. فضای سفید حتی خوانایی را بهبود می بخشد، بنابراین مصرف محتوا آسان تر است.
تنظیمات اسپلیتر
ماژول های پارتیشن می توانند فضای عمودی و افقی را به روش های مختلفی ایجاد کنند. مقدار فضایی که ماژول اشغال می کند را می توان با اندازه، حاشیه و بالشتک تنظیم کرد. نتیجه اساساً یکسان است و در صورت نیاز به تنظیم دقیق فاصله، می‌توان از هر دو روش به صورت ترکیبی استفاده کرد.
نمایش ماژول شکافنده
ماژول ممکن است جداکننده را نمایش دهد یا ندهد. این به ما امکان می دهد در صورت تمایل از ماژول فقط فضا استفاده کنیم. مقدار فضایی که ماژول اشغال می کند با جداکننده مرئی و نامرئی متفاوت است.
برای اینکه جداکننده نامرئی شود، به آن بروید محتوا بخش. بخش اول است دید. این به طور پیش فرض فعال است. در اینجا تنظیمات با قابلیت مشاهده فعال است. من به Row یک پس‌زمینه قهوه‌ای روشن دادم تا به شما در تجسم ماژول تقسیم‌کننده کمک کند.
فقط آن را غیرفعال کنید. تقسیم کننده نمایش داده نمی شود و اکنون می توانید از ماژول برای اضافه کردن فاصله در طرح بندی Divi خود استفاده کنید. تنها چیزی که اکنون قابل مشاهده است، پس زمینه قهوه ای روشن برای ردیف است.
تقسیم کننده نامرئی همراه با اندازه
مانند بسیاری از ماژول های Divi، ماژول Divider شامل چندین تنظیمات برای کنترل اندازه ماژول است. اولین مورد تنظیمات اندازه است. هنگامی که ماژول Divi طوری تنظیم می شود که تقسیم کننده را نشان ندهد، تنظیمات اندازه فقط نشان می دهد:
- عرض
- حداکثر عرض
- حداقل ارتفاع
- ارتفاع
- حداکثر ارتفاع
مثال زیر ماژول پارتیشن نامرئی را نشان می دهد. من یک پس زمینه آبی به ماژول اضافه کردم تا برجسته شود.
تصحیح ارتفاع یک راه عالی برای کنترل فاصله برای ماژول تقسیم نامرئی است. مثال زیر یک ماژول تقسیم کننده با ارتفاع 220 پیکسل را نشان می دهد.
یک جداکننده نامرئی که با یک فاصله ترکیب شده است
لبه و پد همچنین می تواند برای اضافه کردن فاصله برای ماژول فاصله دهنده نامرئی استفاده شود. آنها مانند هر ماژول Divi کار می کنند.
این مثال ماژول پارتیشن نامرئی را بدون تنظیم ارتفاع نشان می دهد. 50 پیکسل اضافه کردم حاشیه بالا و پایین. ماژول همچنان پس‌زمینه آبی را در اندازه معمولی نشان می‌دهد، اما حاشیه‌های بیشتری در اطراف ماژول وجود دارد که می‌توانید از پس‌زمینه قهوه‌ای روشن ردیف متوجه شوید.
این مثال 50 پیکسل اضافه می کند پد بالا و پایین. اندازه ردیف یکسان است، اما ماژول اکنون مقدار بیشتری از ردیف را اشغال می کند. نتیجه اساساً یکسان است، بنابراین می‌توانید هر دو را امتحان کنید و ببینید کدام یک برای هر موقعیتی بهتر عمل می‌کند.
این مثال هر دو را در 50 پیکسل نشان می دهد حاشیه بالا و پایین و پشت. ماژول اکنون منطقه بیشتری را اشغال می کند. می توانید از یکی یا دیگری استفاده کنید، اما این به شما کمک می کند در صورت وجود مشکل، فاصله را به خوبی تنظیم کنید.
نمونه هایی از جداکننده های نامرئی
ما دو نمونه از یک بسته چیدمان ایجاد خواهیم کرد. مثال‌های ما فضای سفید اضافه می‌کنند تا به محتوا تمرکز کنند یا به تراز کردن کمک کنند. برای مثال‌ها، از صفحه فرود و صفحه اصلی بسته طرح‌بندی رایگان مزرعه گل که در Divi موجود است، استفاده خواهم کرد. ما از ترفندهای مختلف استفاده خواهیم کرد تا ببینیم چگونه کار می کنند.
اولین نمونه از جداکننده های نامرئی
برای مثال اول، ما بین دو ماژول متنی و یک ماژول دکمه فاصله اضافه می کنیم تا فضای بیشتری را در ناحیه خود اشغال کنند. ما از دو ماژول تقسیم کننده نامرئی استفاده خواهیم کرد.
این مثال از صفحه فرود از بسته طرح بندی مزرعه گل استفاده می کند. من یک فاصله به CTA در بخش خدمات اضافه می کنم. برای مرجع، قبل از افزودن ماژول های تقسیم کننده نامرئی، نگاهی به آن بخش بیندازید.
جدا کننده اول
محل a ماژول جداسازی زیر اولین ماژول متنی
ماژول را تنظیم کنید دید برای نشان دادن جداکننده.
انتخاب کنید طرح برگه و تغییر دهید ارتفاع تا 120 پیکسل برای دسکتاپ. نگرش ارتفاع برای تبلت و تلفن به خودکار. تنظیمات ماژول را ببندید.
- ارتفاع: 120 پیکسل (رومیزی)، خودکار (تبلت و تلفن)
جداکننده دوم
سپس قرار دهید ماژول جداسازی دوم بالای ماژول دکمه
ماژول را تنظیم کنید دید برای نشان دادن جداکننده.
انتخاب کنید طرح و به پایین اسکرول کنید فاصله. 10% را برای حاشیه بالا و پایین برای کامپیوترهای رومیزی تنظیم خودکار برای تبلت و تلفن. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- حاشیه: 10% بالا و پایین، تبلت و گوشی خودکار
جداکننده های نامرئی مثال دو
برای مثال دوم، از بخش Call-to-Action طرح بندی استفاده می کنیم. این بخش دارای یک ردیف سه ستونی با عنوان و دکمه در سمت چپ، تصویر در وسط و توضیحات در سمت راست است. محتوای ستون های چپ و راست از بالای سطر شروع می شود. ما از سه ماژول جداکننده برای اضافه کردن فضای سفید و مرکز محتوا استفاده خواهیم کرد. تفاوت کوچک خواهد بود، اما تاثیر بصری بر روی چیدمان خواهد داشت.
این یکی از صفحه اصلی بسته طرح‌بندی مزرعه گل استفاده می‌کند. برای مرجع، قبل از افزودن ماژول های تقسیم کننده نامرئی، نگاهی به آن بخش بیندازید.
جدا کننده اول
محل a ماژول جداسازی بالای اولین ماژول متنی در ستون سمت چپ. ممکن است لازم باشد ماژول جداکننده را پس از اضافه شدن بر روی اولین ماژول متنی بکشید.
ماژول را تنظیم کنید دید برای نشان دادن جداکننده. تنظیمات ماژول را ببندید.
انتخاب کنید طرح و تغییر دهید ارتفاع تا 102 پیکسل برای دسکتاپ. ارتفاع تبلت و گوشی را روی خودکار تنظیم کنید. تنظیمات ماژول را ببندید.
- ارتفاع (رومیزی): 102 پیکسل
- ارتفاع (تبلت، تلفن): خودکار
جداکننده دوم
محل ماژول جداسازی دوم زیر ماژول دکمه در ستون سمت چپ. در ابتدا به نظر می رسد که این امر ضروری نیست، زیرا بر نسخه دسکتاپ تأثیر نمی گذارد، اما بر تبلت ها و تلفن ها تأثیر می گذارد.
ماژول را تنظیم کنید دید برای نشان دادن جداکننده.
انتخاب کنید طرح بخش. به پایین بروید فاصله و 5 پیکسل به آن اضافه کنید پد بالا و پایین. تنظیمات ماژول را ببندید.
- پد: 5px بالا، 5px پایین
جداکننده سوم
در نهایت قرار دهید ماژول پارتیشن سوم در اولین ماژول متنی در ستون سمت راست. ممکن است لازم باشد آن را در جای خود بکشید.
ماژول را تنظیم کنید دید برای نشان دادن جداکننده.
انتخاب کنید طرح برگه و تغییر دهید ارتفاع تا 194 پیکسل ارتفاع تبلت ها را روی 50 پیکسل و گوشی ها را روی 40 پیکسل تنظیم کنید. تنظیمات ماژول را ببندید.
- ارتفاع: 194 پیکسل (رومیزی)، 50 پیکسل (تبلت)، 40 پیکسل (تلفن)
جداکننده های نامرئی نتایج
اولین نمونه از تقسیم کننده های نامرئی برای دسکتاپ
اولین نمونه از تقسیم کننده های تلفن نامرئی
تقسیم‌کننده‌های نامرئی رومیزی مثال دوم
جداکننده تلفن نامرئی مثال دو
پایان افکار
تمام است، یا ببینید چگونه از تقسیم کننده های نامرئی برای ایجاد فاصله بین ماژول های Divi استفاده کنید. فضای سفید برای برجسته کردن عناصر خاص و بهبود خوانایی یک وب سایت عالی است. ماژول جداکننده چندین گزینه برای اضافه کردن فضا از جمله اندازه و فاصله ارائه می دهد و می توانید حاشیه، بالشتک یا هر دو را تنظیم کنید. می توانید از هر یک یا همه تنظیمات در هر ترکیبی که می خواهید استفاده کنید تا به نتایج مورد نیاز خود برسید.
ما می خواهیم از تو بشنویم. آیا از تقسیم کننده های نامرئی برای اضافه کردن فضای سفید به طرح بندی های Divi خود استفاده می کنید؟ تجربیات خود را در نظرات با ما در میان بگذارید.