در این آموزش میخوام نحوه استفاده همزمان از  letter spacing و  font families برای طراحی در قالب دی وی روبه شما آموزش بدم .این کار یک احساس انتزاعی به طراحی شما میده و البته  این روش در اصول طراحی های ۲۰۱۸ وجود داره. شما نه تنها میتونید فاصله های اضافی(extera) رو به متن خودتون اضافه کنید ، بلکه این خاصیت در قالب Divi وجود داره که از  letter spacing منفی هم استفاده کنید و کاراکترها رو به همدیگه نزدیکتر کنید .

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

به عکس زیر توجه کنید. قراره نتیجه کار به این شکلها باشه:

پالت رنگ شماره ۱

  • Color #1: #f44f34
  • Color #2: #c81a33
  • Color #3: #e03933
  • Color #4: #f29d96
  • Color #5: #۴۴cae1

پالت رنگ شماره ۲

  • Color #1: #dddddd
  • Color #2: #b2b2b2
  • Color #3: #cccccc
  • Color #4: #۵b5b5b
  • Color #5: #ff0022

رویکرد

  • دو پالت رنگی برای اعمال به این طرح وجود داره.
  • یک پالت رنگی انتخاب کنید و اعداد رو همون طور که هست به کار ببرید .
  • در طول آموزش ما به یک شماره رنگ خاصی احتیاج پیدا خواهیم کرد که از پالت رنگی انتخابی شما دریافت میشه .
  • پس از آن شما میتونید یک Section رو بکشید و پالت رنگی دیگه رو بهش اعمال کنید .
  • میزان  letter spacing بستگی به اندازه فونت انتخابی شما داره.
  • معنی جمله قبلی اینه که letter spacing برای هر اندازه فونت نیاز به تغییر داره. (desktop, tablet, phone)
  • ما از هر دو letter spacing اضافی (extra) و منفی (negative) برای ایجاد جلوه خاص به طرح همزمان استفاده میکنیم .

افزودن یک Section جدید

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

  • First Gradient Color: Color #1
  • Second Gradient Color: Color #2
  • Gradient Type: Linear
  • Gradient Direction: 160deg
  • End Position: 53%

به عکس زیر توجه کنید :

فاصله گذاری

به تب Design برید و Subcategory Spacing رو باز کنید و در قسمت custom padding تنظیمات زیرو اعمال کنید :

  • Top Padding: 60px
  • Bottom Padding: 180px

افزودن اولین ردیف

ساختار ستون

بعد از ساختن بخش اولین ردیف رو به شکل زیر اضافه کنید:

قبل از افزودن هر ماژول ابتدا تنظیمات ردیف رو باز کنید و عدد bottom padding رو روی عدد ۱۵۰ پیکسل تنظیم کنید .

افزودن اولین ماژول تکست

تنظیمات متن

حالا میتونیم ماژول دلخواهمون رو به این ردیف اضافه کنیم.اولین کاری که باید بکنیم اینه که یک ماژول تکست برای نام طرف اضافه کنیم.فونت و فاصله برای هر اندازه صفحه ای متفاوت خواهد بود.از negative letter spacing استفاده میکنیم تا کاراکترها به هم نزدیکتر بشن و سایز متن هم تغییر نکنه .

تنظیمات متن رو مطابق زیر اعمال کنید:

  • Text Font Weight: Ultra Bold
  • Text Font Style: Uppercase
  • Text Size: 300px (Desktop), 210px (Tablet), 125px (Phone)
  • Text Color: Color #3
  • Text Letter Spacing: -20px (Desktop), -15px (Tablet), -8px (Phone)
  • Text Line Height: 1em
  • Text Shadow Vertical Length: 0.03em
  • Text Shadow Blur Strength: 0.02em
  • Text Shadow Color: rgba(0,0,0,0.47)
  • Text Orientation: Center

افزودن ماژول متن برای نام خانوادگی

تنظیمات متن

درست زیر ماژول متنی قبلی، یکی دیگه برای نام خانوادگی اضافه کنید و تنظیمات زیرو اعمال کنید :

  • Text Font: Allura
  • Text Size: 88px (Desktop), 78px (Tablet), 39px (Phone)
  • Text Color: rgba(255,255,255,0.86)
  • Text Line Height: 1em
  • Text Orientation: Center

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

فاصله گذاری

برای اینکه این ماژول متنی با قبلی همپوشانی داشته باشه ، top margin رو مطابق زیر تنظیم کنید:

  • Top Margin: -200px (Desktop), -150px (Tablet), -100px (Phone)

افزودن ماژول عنوان شغل

تنظیمات متن

این آخرین ماژولیه که در این ردیف اضافه میکنیم تا عنوان شغل رو به اشتراک بگذاریم (یا هر چیز دیگه ای که شما میخواین share کنید).برای این مازول ما از extra letter spacing استفاده میکنیم تا کنتراست ایجاد بشه.

  • Text Font Style: Uppercase
  • Text Size: 17px (Desktop), 16px (Tablet), 14px (Phone)
  • Text Color: Color #4
  • Letter Spacing: 22px (Desktop), 14px (Tablet), 8px (Phone)
  • Text Line Height: 1.5em
  • Text Orientation: Center

فاصله گذاری

به top margin این متن ۱۰۰ پیکسل اضافه می کنیم تا فضای کافی بین این ماژول و قبلی وجود داشته باشه.

افزودن ردیف دوم

یک ردیف دو ستونه اضافه میکنیم:

قبل از اینکه ماژولی به این ردیف اضافه کنیم ابتدا در قسمت تنظیمات رنگ پس زمینه رو به مقدار ‘#ffffff’ تغییر میدیم.

رنگ پس زمینه ستون ۱

یک رنگ پس زمینه خاکستری با کد ‘#f7f7f7’ برای ستون اول تنظیم میکنیم

 

ما میخوایم که ارتفاع ستون ها یک اندازه باشند. بنابراین گزینه ‘Equalize Column Heights’  رو تیک میزنیم.

فاصله گذاری

برای حذف کل فاصله بالا و پایین ستون ها تنظیمات زیر رو مطابق با تصویر انجام بدین:

Box Shadow

در نهایت یک Box Shadow با تنظیمات زیر استفاده میکنیم:

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.49)

افزودن اولین ماژول متنی به ستون ۱

از اولین متن شروع میکنیم که در اینجا عبارت “get to know me” هستش.

  • Text Font: Allura
  • Text Font Weight: Bold
  • Text Size: 29px
  • Text Color: Color #5

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

 

برای اینکه ماژول متنی به صورت عمودی در دستکتاپ دیده بشه، باید top margin  رو مطابق زیر تنظیم کنید .همچنین لازمه کمی فاصله در سمت چپ اعمال کنید:

  • Top Margin: 250px (Desktop), 50px (Tablet & Phone)
  • Left Margin: 17% (Desktop), 10% (Tablet & Phone)

افزودن ماژول متنی دوم به ستون ۱

تنظیمات متن

درست زیر متن قبلی یک ماژول متنی دیگه اضافه کنید و متن مورد نظرتون رو تایپ کنید و سپس تنظیمات زیر رو انجام بدین:

  • Text Font: Adamina
  • Text Font Weight: Bold
  • Text Font Style: Uppercase
  • Text Size: 71px (Desktop), 50px (Tablet), 45px (Phone)
  • Text Color: Color #2
  • Letter Spacing: -5px (The text size difference between screen sizes is neglectable, that’s why we’re using this value across all screen sizes)
  • Text Line Height: 1em

 

فاصله گذاری

تنظیمات زیرو در تب Design در spacing اعمال کنید:

  • Bottom Margin: 50px (Tablet & Phone)
  • Left Margin: 17% (Desktop), 10% (Tablet & Phone)

افزودن ماژول تصویر به ستون ۲

مراحل مربوط به ستون ۱ تمام شد و حالا نوبت اضافه کردن عکس به ستون ۲ هستش

تراز کردن تصویر

در تنظیمات تصویر به تب design برید و left image alignment رو انتخاب کنید و مطمئن بشید که ‘Always Center Image on Mobile’ در حالت غیرفعال باشه.

فاصله گذاری

میخوایم تصویر با بالای این ردیف همپوشانی داشته باشه. بنابراین تنظیمات margin رو به شکل زیر اعمال میکنیم:

  • Top Margin: -50px (فقط دستکتاپ)
  • Left Margin: 5% (تبلت)

حاشیه

یک حاشیه هم به این عکس اضافه میکنیم :

  • Border Width: 35px
  • Border Color: #ffffff
  • Border Style: Solid

سایه کادر

در نهایت برای اینکه تصویرمون عمق داشته باشه ،یک سایه هم به کادر اضافه میکنیم:

  • Border Width: 35px
  • Border Color: #ffffff
  • Border Style: Solid

افزودن ماژول متنی به ستون ۲

تنظیمات متن

درست در زیر ماژول تصویر یک ماژول متنی اضافه میکنیم و متن مورد نظرمون رو داخلش تایپ میکنیم و تنظیمات رو مطابق زیر اعمال میکنیم:

  • Text Size: 15px
  • Text Color: #۸۲۸۲۸۲
  • Text Line Height: 1.4em
  • Text Orientation: Justify

البته توجه کنید که این تنظیمات برای متن انگلیسی هست و شما مطابق با نیاز خودتون تغییرات لازم رو ایجاد کنید.

اندازه متن

در تب دیزاین عرض این صفحه رو به ۷۰ درصد کاهش بدین. مطابق تصویر زیر عمل کنید:

 

در نهایت تنظیمات زیرو برای حاشیه چپ تصویر اعمال میکنیم:

  • Top Margin: 50px (Desktop Only)
  • Left Margin: 10% (Tablet & Phone

 

افزودن ماژول دکمه به ستون ۲

آخرین ماژولی که به این section اضافه میکنیم ماژول دکمه است. بعد از اینکه متن مورد نظرو در قسمت content وارد کردیم به تب Design می ریم و محل دکمه رو مشخص میکنیم که در این آموزش مقدار left Button Alignment براش انتخاب شده .یعنی در سمت چپ قرار بگیره

تنظیمات دکمه

برای ایجاد تغییرات در ظاهر دکمه انتخابی تنظیمات زیرو اعمال کنید:

  • Use Custom Styles for Button: Yes
  • Button Text Size: 13px
  • Button Text Color: #ffffff
  • Button Background Color: Color #5
  • Button Border Width: 0px
  • Button Letter Spacing: 6px
  • Button Font Style: Uppercase

فاصله گذاری

در نهایت برای اینکه فضای پس زمینه بیشتری رو برای دکمه ایجاد کنیم از کدگذاری سفارشی زیر استفاده میکنیم:

  • Top Padding: 10px
  • Right Padding: 40px
  • Bottom Padding: 10px
  • Left Padding: 40px

مرحله اضافی ترجیحی

این آموزش همین جا میتونه تمام بشه یا میتونید یک گام جلوتر برید و طرحتون رو منحصر به فرد کنید.یکی از چیزهایی که میتونید اضافه کنید یک Divider بالا برای زیباتر شدن طرحه .به عنوان مثال:

افزودن Divider بالا به Section

برای افزودن این Divider به تب design در نظیمات بخش برید و مطابق شکل زیر تنظیمات رو اعمال کنید:

  • Divider Style: Find in List
  • Divider Color: Color #5
  • Divider Height: 500px (Desktop), 300px (Tablet), 250px (Phone)

پیش نمایش

حالا که تمام مراحل رو طی کردیم و یک گام اضافی رو هم انجام دادیم بهتره نگاهی به این طرح در اندازه های مختلف صفحه نمایش بندازیم. به تصویر زیر توجه کنید:

امیدوارم این آموزش برای شما مفید باشه .

برای مشاهده مقاله به زبان اصلی اینجا کلیک کنید.