تون دیزاین http://toondesign.ir طراحی وبسایت با سیستم مدیریت محتوای وردپرس Mon, 03 Sep 2018 08:01:26 +0000 fa-IR hourly 1 https://wordpress.org/?v=4.9.8 روش افزودن آیکن شبکه های اجتماعی به منوی اصلی در قالب Divi http://toondesign.ir/%d8%a2%db%8c%da%a9%d9%86-%d8%b4%d8%a8%da%a9%d9%87-%d9%87%d8%a7%db%8c-%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%db%8c/ http://toondesign.ir/%d8%a2%db%8c%da%a9%d9%86-%d8%b4%d8%a8%da%a9%d9%87-%d9%87%d8%a7%db%8c-%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%db%8c/#respond Tue, 24 Jul 2018 03:58:40 +0000 http://toondesign.ir/?p=1013 افزودن آیکن شبکه های اجتماعی به منوی اصلی سایت در صورتی که بخواین در منوی اصلی سایت آیکن شبکه های اجتماعی رو قرار بدین و کاربر با کلیک روی اون به آدرس شما در شبکه های اجتماعی بره، این آمورش رو دنبال کنید. گاهی اوقات میخواهیم که آیکن شبکه های اجتماعی به جای اینکه در […]

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

]]>
افزودن آیکن شبکه های اجتماعی به منوی اصلی سایت

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

اضافه کردن Font Awesome

برای اضافه کردن آیکن شبکه های اجتماعی من از سایت fontawesome.com استفاده میکنم. در این سایت آیکن های بسیار متنوعی وجود داره که شما میتونید با قرار دادن کد مربوطه در منوی سایت خودتون و افزودن چند خط css به هدر سایت از اونها استفاده کنید.

ابتدا به سایت فونت آسم که در بالا آدرسش رو لینک کردم برید و در منوی بالا روی گزینه”How To Use” کلیک کنید.در پایین یک کد می بینید . این کد رو در قسمت integration در بخش head سایت کپی کنید و گزینه save رو بزنید.

من این کد رو در زیر برای شما آوردم:

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.1.0/css/all.css” integrity=”sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt” crossorigin=”anonymous”>

ساخت منوی اصلی

در سایتتون به قسمت منوها برید و یک منوی جدید درست کنید:

 

سپس این منوی جدید رو به عنوان منوی اصلی انتخاب کنید.

از گزینه پیوندهای دلخواه (custom links) استفاده کنید . مثلا شما میخواین آیکن شبکه اجتماعی اینستاگرام رو به سایتتون اضافه کنید . روی پیوندهای دلخواه کلیک کنید و در قسمت نشانی، آدرس صفحه تون در اینستاگرام رو کپی کنید و در قسمت متن باید یک کد که از سایت Fontawesome میگیرید، کپی کنید .

مطابق زیر ابتدا به سایت Fontawesome  برید و در منوی بالا روی گرینه icons کلیک کنید . در ستون سمت چپ روی گزینه free کلیک کنید تا لیست آیکن های مجانی رو به شما نشون بده. حالا search رو بزنید و آیکن شبکه اجتماعی مورد نظرتون رو پیدا کنید.

وقتی روش کلیک میکنید یک صفحه میاد که اون پایین سمت چپ یک کد وجود داره. اون کد رو کپی کنید و در قسمت “متن” در ” پیوندهای دلخواه” کپی کنید.

به شکل زیر توجه کنید:

کد رو در بخش متن که کپی کردید اگه بخواین آیکن شبکه اجتماعی بزرگتر نشون داده بشه عبارت fa-2x که در شکل بالا هایلایت شده رو هم اضافه کنید. میتونید به جای ۲x هر مقدار دیگه ای هم قرار بدین .در واقع این دستور میگه که آیکن رو در اندازه ۲ برابر نشون بده.

البته شما میتونید اندازه آیکن رو بعدا در قسمت “Theme customizer” هم تغییر بدین. اما چون اونجا دستتون خیلی باز نیست و از یک حدی بیشتر نمیتونید آیکن رو بزرگ کنید توصیه من اینه که اینجا این دستور رو هم به متن اضافه کنید.

در قسمت نشانی آدرس صفحه خودتون در اینستاگرام رو کپی کنید و بقیه آیکن ها رو هم به همین شکل به منو اضافه کنید یا اگه میخواین صفحه یا دسته ای خاص و یا برگه هایی مدنظرتون رو به منو اضافه کنید و سپس تغییرات رو ذخیره کنید.

شما میتونید در قسمت “Theme customizer” رنگ آیکن شبکه های اجتماعی و سایر تنظیمات دیگه رو اعمال کنید تا به شکل دلخواهتون در بیاد:

Theme customizer-Header&Navigation-Primary Menu Bar

به آدرس مقابل برید و تنظیمات دلخواهتون رو اعمال کنید.

در اینجا کار به پایان میرسه.

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

برای دیدن سایر آموزش ها اینجا کلیک کنید.

 

 

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

]]>
http://toondesign.ir/%d8%a2%db%8c%da%a9%d9%86-%d8%b4%d8%a8%da%a9%d9%87-%d9%87%d8%a7%db%8c-%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%db%8c/feed/ 0
چطور با استفاده از خاصیت گرادیان(Gradients) در قالب Divi اشکال متحرک بسازیم؟ http://toondesign.ir/%d8%b4%da%a9%d9%84-%d9%85%d8%aa%d8%ad%d8%b1%da%a9/ http://toondesign.ir/%d8%b4%da%a9%d9%84-%d9%85%d8%aa%d8%ad%d8%b1%da%a9/#respond Thu, 21 Jun 2018 06:46:46 +0000 http://toondesign.ir/?p=820 چه کسی انیمیشن های ظریف و شکل متحرک رو دوست نداره؟ اونها یک راه حل خوب برای اضافه کردن کمی پیچیدگی به وبسایت شما هستند. اگر بتونید درست از اونها استفاده کنید میتونه باعث بشه ظاهر سایتتون حرفه ای و زیبا به نظر برسه. در این آموزش قصد دارم به شما نشون بدم که چطور […]

نوشته چطور با استفاده از خاصیت گرادیان(Gradients) در قالب Divi اشکال متحرک بسازیم؟ اولین بار در تون دیزاین. پدیدار شد.

]]>
چه کسی انیمیشن های ظریف و شکل متحرک رو دوست نداره؟ اونها یک راه حل خوب برای اضافه کردن کمی پیچیدگی به وبسایت شما هستند. اگر بتونید درست از اونها استفاده کنید میتونه باعث بشه ظاهر سایتتون حرفه ای و زیبا به نظر برسه.

در این آموزش قصد دارم به شما نشون بدم که چطور با امکانات موجود در Divi بدون نیاز به Css این انیمیشن ها رو بسازید. وقتی که شما روش رو یاد بگیرید و با مثال های زیر تمرین کنید، میتونید هر نوع شکل دیگری رو برای سایت خودتون بسازید .

نتیجه

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

شکل متحرک#۱

شکل متحرک#۲

 

شکل متحرک#۳

شکل متحرک #۴

رویکرد

  • اشکال رو در ردیف های جدید که تمام padding ها رو حذف کردیم (برای کاهش فضای اضافی ای که ایجاد میشه) قرار میدیم.
  • بسته به اینکه میخواین شکل متحرک شما کدوم سمت باشه، ردیف رو تنظیم میکنید(row alignment).
  • تنظیم ردیف باعث میشه که شکل متحرک در همون طرفی که شما مشخص کردید بدون توجه به اندازه صفحه نمایش باقی بمونه .
  • ما از ماژول متنی خالی برای ساخت این اشکال استفاده میکنیم.
  • استفاده از ماژول متنی به شما کمک میکنه بتونید از گزینه های داخلی تم دیوی استفاده کنید.
  • custome Margin وPadding نقش مهمی برای ساخت این تصاویر دارند.
  • ما از Margin مثبت و منفی برای کاهش فضای ایجاد شده توسط ماژول ها و ردیف ها استفاده میکنیم و نوع اونها رو با دو بخش مختلف همپوشانی میکنیم.
  • Padding از طرفی برای ایجاد نوعی از اشکال مورد استفاده قرار میگیره.
  • Background،boxshadow و Border به شما کمک میکنند تا انواع شکلهایی رو که میخواین طراحی کنید.
  • ما در واقع داریم حلقه های انمیشنی خطی رو اضافه میکنیم که انیمیشن رو با سرعت کم نگه میداره.
  • شما می تونید همین روش رودر هنگام استفاده از اشکال خود در ماژول های تصویر اعمال کنید.

مراحل ساخت تصاویر متحرک:

یک صفحه جدید ایجاد کنید:

بعد از انتخاب عنوان نوشته Visual Builder را فعال کنید.

از قسمت Load Layout که شامل طرح های از پیش آماده است (Premade Layout) تم Design conference رو انتخاب کنید . دقت کنید که در اینجا تمرکز ما روی آموزش ساخت انیمیشن هست و به همین خاطر از یک طرح از پیش آماده استفاده میکنیم .در نهایت شما پس از اینکه روش رو یاد گرفتین میتونید برای هر صفحه و طرح دیگه ای ازش استفاده کنید.

افزودن شکل متحرک#۱

یک ردیف جدید اضافه کنید.

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

 

ساختار ستونها

حالت ۲ ستونه را انتخاب کنید

ترازبندی ردیف

به تب Design برید و در قسمت alignment  حالت left Row Alignment رو انتخاب کنید تا شکل متحرک در سمت چپ صفحه دیده بشه.

حالا به قسمت spacing برید و مقادیر پیش فرض هر کدام را با افزودن “۰px” به هر یک از گزینه ها حذف کنید.

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

به ستون ۱ بروید و یک ماژول تکست خالی را به آن اضافه کنید.

رنگ پس زمینه

رنگ پس زمینه ماژول تکست رو به مقدار rgba(255,255,255,0.14) تغییر بدین.

فاصله

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

  • Top Margin: -100px
  • Right Margin: 100px
  • Bottom Margin: -500px
  • Left: -100px
  • Top Padding: 200px
  • Bottom Padding: 400px

 

حاشیه

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

انیمیشن

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

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 20000ms
  • Animation Intensity: 500%
  • Animation Start Opacity: 100%
  • Animation Speed Curve: Linear

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

جهت این ردیف رو تغییر میدیم و میبریمش سمت راست :

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

تغییر فاصله در ماژول متنی

این تغییرات را اعمال میکنیم تا ماژول بره سمت راست

  • Right Margin: -50px
  • Bottom Margin: -350px
  • Left: 50px
  • Top Padding: 250px
  • Bottom Padding: 250px

شکل متحرک #۲

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

هر دو ماژول متنی را تغییر بدین

حاشیه

اولین چیزی که نیاز به تغییر داره ایجاد گوشه های گرد در زیرمجموعه حاشیه (Border) است. از مقدار ۲۰px به جای ۵۰۰px در تصویر قبلی استفاده کنید.

شکلی که ایجاد کردیم چون دیگه دایره نیست خیلی سریعتر از شکل ۱ میچرخه بنابراین مدت زمان انیمیشن رو افزایش میدیم :۱۰۰۰۰۰ms

افزودن شکل متحرک#۳

یک ردیف جدید اضافه کنید

مکان ردیف

برای این شکل متحرک به سمت پایین صفحه اسکرول کنید و در سکشن ‘About Divi 100 Design’ یک ردیف در پایین این بخش اضافه کنید.

 

چهار ستون رو برگزینید:

تراز کردن ردیف

در اینجا هم باید جهت ردیف با اون سمتی که ما میخوایم تصویر متحرک رو بزاریم منطبق باشه که در اینجا باید سمت چپ باشه:

فاصله

در اینجا هم تمام فواصل پیش فرض رو با قرار دادن مقدار “۰px” از بین می بریم:

در دو شکل قبلی این انیمیشن ها در تبلت و تلفن همراه هم به خوبی نمایش داده میشند اما در مورد شکل سوم برای صفحه نمایش های کوچکتر مناسب نیست بنابراین از قسمت visibility این انیمیشن رو برای تبلت و تلفن همراه غیرفعال میکنیم.

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

یک ماژول متنی خالی به ستون ۱ اضافه کنید

فاصله

باید مطمئن بشیم که هیچ فاصله اضافی ای با این ردیف جدید و ماژول متنی به وجود نیامده .بنابراین در زیرمجموعه spacing مقادیر زیرو وارد کنید:

  • Top Margin: -150px
  • Right Margin: 25%
  • Bottom Margin: -50px
  • Left Margin: -25%
  • Top Padding: 250px

حاشیه

مقادیر زیرو در زیرمجموعه تنظیمات حاشیه اضافه کنید:

  • Border Width: 5px
  • Border Color: #۴۶۴۶c4

بسته به سلیقه شخصیتون میتونید در قسمت Box Shadow یکی از گرینه ها رو انتخاب کنید تا به شکل عمق داده بشه:

انیمیشن

در نهایت یک انمیشن حلقه ای (یعنی تکرار بشه پشت سر هم) رو هم در تنظیماتش اعمال میکنیم:

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 25000ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 50%
  • Animation Speed Curve: Linear

این ماژول متنی رو که ساختین کلون کنید( یک کپی ازش بزنید) و بزارید در همون ستون اول باقی بمونه .منتها باید یک سری تغییراتی روش انجام بشه .مطابق زیر عمل کنید:

  • Top Margin: -50%
  • Right Margin: 25%
  • Bottom Margin: -200px
  • Left Margin: -25%
  • Top Padding: 250px

تغییر رنگ حاشیه

رنگ حاشیه این شکل رو به مقدار ‘#aaaaaa’ تغییر بدین.

تغییر انیمیشن

به تب انیمیشن برید و تاخیر انیمیشن با مقدار ‘۱۰۰۰ms’ رو قرار بدین.

افزون تصویر متحرک#۴

در هوم پیج این تمی که انتخاب کردیم یک مقدار برید پایین تر و درست بالای ماژول تکست ‘Our Sponsors’ یک ردیف جدید چهار ستونه اضافه کنید.

در Row alignment سمت راست رو انتخاب کنید:

فاصله

مطابق با تصاویر قبلی در اینجا هم در تنظیمات Spacing تمام مقادیر Custom Padding رو مساوی صفر قرار بدین:

امکان مشاهده شدن

در اینجا هم Visibility رو برای تبلت و تلفن هوشمند غیرفعال میکنیم.

 

یک ماژول متنی خالی به ستون ۴ اضافه میکنیم.

پس زمینه گرادیان

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

  • First Color: #d002ba
  • Second Color: #۱۶۶cc2

 

فاصله

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

  • Top Margin: -80%
  • Right Margin: -25%
  • Bottom Margin: -120px
  • Left Margin: 25%
  • Top Padding: 250px

 

حاشیه

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

ایجاد سایه

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

انیمیشن

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

  • Animation Style: Roll
  • Animation Repeat: Loop
  • Animation Direction: Center
  • Animation Duration: 25000ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 70%
  • Animation Speed Curve: Linear

کلون کردن ماژول

این ماژول متنی رو کلون کنید و در همین ستون هم باقی بمونه .فقط باید یک سری تغییرات کوچیکی روش انجام بدین .top Margin رو به ‘-۵۰%’ تغییر بدین.

تغییر انیمیشن

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

نتیجه کار:

شکل #۱

شکل #۲

شکل#۳

شکل #۴

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

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

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

نوشته چطور با استفاده از خاصیت گرادیان(Gradients) در قالب Divi اشکال متحرک بسازیم؟ اولین بار در تون دیزاین. پدیدار شد.

]]>
http://toondesign.ir/%d8%b4%da%a9%d9%84-%d9%85%d8%aa%d8%ad%d8%b1%da%a9/feed/ 0
نحوه استفاده از Letter Spacing برای ایجاد یک طراحی منحصر به فرد در قالب Divi http://toondesign.ir/letter-spacing/ http://toondesign.ir/letter-spacing/#respond Mon, 30 Apr 2018 12:11:47 +0000 http://toondesign.ir/?p=668 در این آموزش میخوام نحوه استفاده همزمان از  letter spacing و  font families برای طراحی در قالب دی وی روبه شما آموزش بدم .این کار یک احساس انتزاعی به طراحی شما میده و البته  این روش در اصول طراحی های ۲۰۱۸ وجود داره. شما نه تنها میتونید فاصله های اضافی(extera) رو به متن خودتون اضافه کنید ، […]

نوشته نحوه استفاده از Letter Spacing برای ایجاد یک طراحی منحصر به فرد در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
در این آموزش میخوام نحوه استفاده همزمان از  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)

پیش نمایش

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

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

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

 

نوشته نحوه استفاده از Letter Spacing برای ایجاد یک طراحی منحصر به فرد در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
http://toondesign.ir/letter-spacing/feed/ 0
روش افزودن hover.css به ماژول Blurb در قالب Divi http://toondesign.ir/hover-css/ http://toondesign.ir/hover-css/#comments Tue, 06 Feb 2018 21:45:09 +0000 http://toondesign.ir/?p=632 روش افزودن hover.css به ماژول Blurb در قالب Divi در این آموزش میخواهم روش استفاده از افکت hover.css  در قالب Divi را به شما آموزش دهم . Hover.css را میتوان برای تعداد زیادی از عناصر وبسایت به کار برد . دو روش اصلی برای افزودن hover.css به وبسایت وجود دارد . روش اول افزودن کدهای […]

نوشته روش افزودن hover.css به ماژول Blurb در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
روش افزودن hover.css به ماژول Blurb در قالب Divi

در این آموزش میخواهم روش استفاده از افکت hover.css  در قالب Divi را به شما آموزش دهم . Hover.css را میتوان برای تعداد زیادی از عناصر وبسایت به کار برد . دو روش اصلی برای افزودن hover.css به وبسایت وجود دارد . روش اول افزودن کدهای سی اس اس مورد نیاز به ماژول مریوطه به صورت دستی است و در روش دوم میتوان از وبسایت هایی مانند github.com فایل های hover.css را دانلود نمود که البته این فایل ها معمولاً پولی هستند و خرید آنها برای ما ایرانیها مقدور نیست .پس به صورت زیر عمل کنید:

یک Section جدید اضافه کنید و سپس در آن یک سطر با سه ستون قرار دهید . به آدرس زیر بروید و عرض سطر را در حالت Fullwidth قرار دهید.

Row Setting-Design-Sizing:make this Row Fullwidth

مطابق با تصویر زیر میزان Column Pdding را ویرایش کنید:

افزودن Box Shadow و Border Radius به ستون

به آدرس مقابل بروید و کدهای زیر را کپی کنید :

Row Setting→Advanced→Column 1 main element

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

افزودن ماژول تصویر

یک ماژول تصویر به ستون اول اضافه کنید و عکس مورد نظر را آپلود نمایید . این ماژول اگرچه قسمتی از ماژول بلارب نیست اما در نهایت طوری زیر هم قرار میگیرند که به نظر میرسد به یکدیگر تعلق دارند.

افزودن ماژول بلارب

ماژول بلارب را انتخاب و اضافه کنید .عنوان و متن مورد نظر را تایپ و یک آیکن مناسب برای آن در نظر بگیرید .

تنظیمات سفارشی آیکن

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

Icon Color: #FFFFFF
Circle Icon: YES
Circle Color: #004370
Image/Icon Placement: Top
Use Icon Font Size: YES
Icon Font Size: 45px (desktop), 40px (tablet), 37 (phone)

 

تنظیمات سفارشی هیدر

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

Header Font Size: 16 (desktop & tablet), 14 (phone)
Header Text Color: #۰۰۴۳۷۰
Header Line Height: 2.2em

اضافه کردن حاشیه سفارشی

Top: 25%
Right: 5%
Left: 5%
Bottom: 5%

افزودن حاشیه پایین به عنوان Blurb

به آدرس مقابل بروید و تنظیمات زیر را اعمال نمایید:

Blurb Setting→Blurb tilte :margin-bottom:3px

افزودن افکت Hover.Css به ماژولها

حال نوبت به آن رسیده که hover.css را بر روی ماژول هایی که در مراحل قبل ساختیم ، اعمال نماییم.

افزودن Css Class به ماژول Image

به آدرس Image setting→advanced→Css Class بروید و عبارت ‘hvr-ripple-out’ را در این جا تایپ کنید.

افزودن Css Class به ماژول Blurb

به آدرس Blurb setting→advanced→Css Class بروید و عبارت ‘hvr-shrink’ را در این جا تایپ کنید.

افزودن کدهای سی اس اس به تنظیمات صفحه اصلی

به صفحه ای که در حال ساخت این ماژول ها هستید بروید و از بالای سفحه “Enable Visual Builder”  را فعال کنید .در این صورت در پایین صفحه یک دایره بنفش ظاهر میشود که با کلیک روی آن آیکن های تصویر زیر را مشاهده خواهید نمود.

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

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
 
@-webkit-keyframes hvr-ripple-out {
۱۰۰% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
۱۰۰% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: ”;
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

استفاده ار افکت Hover.css برای عناصر داخل ماژول Blurb

اگر به عکس توجه کنید ، زمانی که موس را بر روی عنوان نوشته ببرید یک خط آبی رنگ در زیر آن ظاهر میشود .با توجه به اینکه ماژول بلارب دارای عناصر متعددی است نمیتوانیم به سادگی از کلاس hover.css موجود در تنظیمات برای این افکت نیز استفاده کنیم . در اینجا باید یک شناسه Css به این ماژول اختصاص دهیم و کلاس Css به عنوان بلارب اختصاص داده شود .

به صورت زیر عمل میکنیم:

افزودن Css ID به ماژول Blurb

مطابق با تصویر زیر مقدار “Center” را در تب Css ID  تایپ کنید.

سپس کدهای Css زیر را مطابق با مرحله قبل در تنظیمات صفحه اصلی در قسمت Custom css کپی کنید .

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: “”;
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

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

در صورتی که بخواهید از این کدها برای همه بلارب ها اعمال نمایید، از خطوط کد زیر CSS استفاده کنید:

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: “”;
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

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

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

در صورتی که میخواهید روش  ایجاد تصاویر متحرک چرخشی در قالب دی وی را نیز بیاموزید ، این مقاله را بخوانید .

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

 

نوشته روش افزودن hover.css به ماژول Blurb در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
http://toondesign.ir/hover-css/feed/ 1
آموزش ساخت تصاویر چرخشی (image carousel) با قابلیت کلیک کردن در قالب Divi http://toondesign.ir/image-carousel/ http://toondesign.ir/image-carousel/#respond Mon, 05 Feb 2018 19:18:05 +0000 http://toondesign.ir/?p=585 image carousel یک ویژگی محبوب در ساخت وبسایت است .در واقع با استفاده از این ویژگی میتوانید در فضای کمتری محتوای بیشتری را به نمایش بگذارید. افزونه های زیادی برای ساخت تصاویر کاروسل در دسترس است اما امروز من میخواهم به شما آموزش دهم که چطور با استفاده از جاوااسکریپت و کدهای سی اس اس […]

نوشته آموزش ساخت تصاویر چرخشی (image carousel) با قابلیت کلیک کردن در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
image carousel

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

یک برگه جدید ایجاد نمایید و یا برگه ای را که میخواهید تصاویر متحرک داشته باشید باز کنید.

یک section جدید با اندازه استاندارد و یک ستونه اضافه کنید .

به آدرس زیر بروید :

Setting section→Advanced→CSS class

و عبارت ds-carousel-section را تایپ کنید . سپس تغییرات اعمال شده را save نموده واز section  خارج شوید .

حالا تنظیمات مربوط به سطر مورد نظر را باز کنید و مطابق با تصویر زیر در تب Advanced کلاس ds-carousel-row  را به این سطر اضافه نمایید .

Row Module Setting→Advanced→CSS Class

حالا بر روی Insert Module کلیک کنید و Image Module را انتخاب کنید.

در تب محتوای ماژول تصویر یک تصویر اضافه کنید :

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

همچنین میتوانید یک آدرس به عکس اختصاص دهید تا کاربر با کلیک بر روی آن به صفحه مورد نظر هدایت شود.

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

در نهایت تب Advanced را باز کنید و کلاسds-carousel-module را در فیلد CSS Class  تایپ نمایید .سپس تنظیمات اعمال شده را ذخیره نموده و از ماژول خارج شوید .

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

اکنون یکی از ماژول های ما آماده شد ، اما برای داشتن تصاویر چرخشی( image carousel) به بیش از یک تصویر نیاز داریم .ما میخواهیم که در کد تعریف شده ۵ تصویر همزمان حرکت کنند بنابراین حداقل باید ۶تصویر داشته باشیم تا این دستورات به درستی عمل کنند و تصاویر اسلاید شوند .بنابراین ماژول عکس مورد نظر را به تعداد لازم کپی کنید.

نتیجه به صورت زیر خواهد بود:

پس از این کار هر کدام از ماژول ها را باز کنید و به جای تصویر قبلی یک جدید جایگزین نمایید .

تنظیمات مربوط به محتوا در اینجا کامل میشود .حال قصد داریم ناوبری ایجاد کنیم .

یک بخش جدید شامل دو ستون درست در زیر بخش قبلی اضافه کنید .تنظیمات سطر را باز کنید و در تب advanced کلاس ds-arrow-row  را به css class اضافه نمایید .

مطابق با تصویر زیر:

تنظیمات را ذخیره کنید و خارج شوید .

افزودن دکمه های ناوبری

ماژول text را به هر کدام از ستونها در این سطر اضافه کنید (مطابق با تصویر زیر عمل کنید.)

ماژول متنی سمت چپ را باز کنید و در قسمت محتوا کد HTML زیر را کپی کنید :

<input id=”ds-arrow-left” type=”button” value=”8″>

تنظیمات را ذخیره کنید و خارج شوید .

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

<input id=”ds-arrow-right” type=”button” value=”9″>

توجه کنید که ابتدا وارد تب متن(text) شوید و سپس کد HTML را قرار دهید

تنظیمات را ذخیره نموده و خارج شوید.

در واقع ما به این فیلدهای ورودی آیدی های منحصر به فرد ds-arrow-left و ds-arrow-right را میدهیم تا هنگامی که روی آن کلیک شود عمل نمایند .

مقادیر ۸ و ۹ به فلش دو طرف چپ و راست از فونت خانواده ET Modules اشاره دارند.

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

افزودن Css

به آدرس زیر بروید

Divi > Theme Options > General > Custom CSS

 

و کدهای زیر را کپی کنید .

/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi’s width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}

@media all and (max-width: 479px) {
/*Override Divi’s width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: ‘ETModules’;
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}

@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}

ویرایش کدهای Css بر حسب نیاز

بسته به اینکه شما چه تعداد ماژول در اسلاید متحرک خود استفاده میکنید ممکن است نیاز به تغییراتی در کدهای Css داشته باشید .

به عنوان مثال دستور زیر عرض ردیف حاوی ماژول را تغییر میدهد .

/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}

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

اگر اکنون دوباره صفحه را بررسی کنید باید carousel را مشاهده کنید اما برای اینکه فعال شود نیاز است که جاوااسکریپ نیز افزوده شود

افزودن جاوااسکریپت

در تنظیمات پوسته دی وی به آدرس زیر بروید :

Divi > Theme Options > Integrations > Add code to the < head > of your blog

کدهای زیر را کپی و تنظیمات را ذخیره کنید.

<script type=”text/javascript”>
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) – 1; //End index

if (mn_index < mn_end_index ) {
mn_index++;
item.animate({‘left’:’-=100vw’}, 1000);
}
}

function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index–;
item.animate({‘left’:’+=100vw’}, 1000);
}
}

function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({‘left’:’+=’+move_vw+’vw’}, 1000);
mn_index = 0;
}
}

function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}

function mn_carousel_init() {
mn_set_visible();

var item = $(‘.ds-carousel-module’);

$(‘#ds-arrow-right’).click(function() {
mn_next_slide(item);
});

$(‘#ds-arrow-left’).click(function() {
mn_previous_slide(item);
});

$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});

}

$(document).ready(function() {
mn_carousel_init();
});

})(jQuery)
/script>

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

شاید بخواهید بعضی از کدها را ویرایش کنید. به عنوان مثال کدهای زیر را ببینید:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

mn_visible = 5; این کد مربوط به متغیر مربوط به تعداد ماژول های نمایش داده شده در هر صفحه در نمایشگر دستکتاپ است .بنابرین اگر در کدهای Css عدد دیگری را گذاشته باشید اینجا نیز باید این عدد را تغییر دهید .

به همین ترتیب این دستور تعداد تصاویر در تبلت و تلفن همراه را نیز مشخص میکند .بنابراین اگر این اعداد را در Css تغییر دهید در اینجا نیز باید مقدار mn_visible تغییر کند.

function mn_set_visible() {
    if ($(window).width() < 480) {     
        mn_visible = 1;
    } else if ($(window).width() < 1025) {
        mn_visible = 3;
    }
}

در نهایت باید سرعت حرکت Carousel را تعریف کنیم که در اینجا روی ۱۰۰۰ میلی ثانیه تنظیم شده است که میتوانید سرعت  آن را تندتر و یا کندتر نمایید .

function mn_next_slide(item) {
        mn_end_index = ( item.length / mn_visible ) – 1; //End index
     
        if (mn_index < mn_end_index ) {
            mn_index++;
            item.animate({‘left’:’-=100vw’}, 1000);
        }
}
 
function mn_previous_slide(item) {
        if (mn_index > 0) {
             mn_index–;
             item.animate({‘left’:’+=100vw’}, 1000);
        }
}
 
function mn_first_slide(item) {
        if (mn_index > 0) {
             var move_vw = (100 * mn_index);
             item.animate({‘left’:’+=’+move_vw+’vw’}, 1000);
             mn_index = 0;
        }
}  

 

در اینجا کار به پایان رسیده و اگر پیج خود را باز کنید باید یک image carousel را ببینید.

استفاده از carousel در ماژول وبلاگ

به جای اضافه کردن یک ماژول تصویری، ماژول وبلاگ را انتخاب کنید و کلاس mod-ds-carousel را در تب پیشرفته تنظیمات ماژول اضافه کنید.

وارد تب Design شوید و حالت grid را برای وبلاگ انتخاب کنید .در تب Content تنظیمات  زیر را مطابق با تصویر اعمال نمایید سپس ذخیره و خروج را بزنید . 

بعد از انجام این مراحل به تعداد مورد نیاز از ماژول وبلاگ کپی کنید.

هر بار که از ماژول وبلاگ کپی میگیرید ،در قسمت تنظیمات عدد Offset number را از صفر به ۱ و الی آخر تغییر دهید

۱st = Offset Number: 0
۲nd = Offset number: 1
۳rd = Offset Number: 2
۴th = Offset Number: 3 

چند CSS اضافی دیگر

با توجه به اینکه محتوای ماژول وبلاگ در حالت Grid در ستونهایی نمایش داده میشود بایستی کدهای زیر را به Css اضافه کنیم تا تنظیمات ستونهای دی وی در نمایشگرهای کوچکتر جایگزین شود .    در صورتی که حالت نمایش وبلاگ را بر روی fullwidth قرار دهیم نیازی به افزودن کدهای زیر نیست .

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

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

 

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

نوشته آموزش ساخت تصاویر چرخشی (image carousel) با قابلیت کلیک کردن در قالب Divi اولین بار در تون دیزاین. پدیدار شد.

]]>
http://toondesign.ir/image-carousel/feed/ 0
تون دیزاین طراح صفحات وب http://toondesign.ir/%d8%aa%d9%88%d9%86-%d8%af%db%8c%d8%b2%d8%a7%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/ http://toondesign.ir/%d8%aa%d9%88%d9%86-%d8%af%db%8c%d8%b2%d8%a7%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/#comments Fri, 12 Jun 2015 16:53:58 +0000 http://toondesign.ir/?p=5 نوشته تون دیزاین طراح صفحات وب اولین بار در تون دیزاین. پدیدار شد.

]]>

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

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

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

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

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

وجود صدها افزونه قدرتمند در اکثر موارد ،کمبودها و نقص های موجود در قالب های وردپرس را جبران میسازد.

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

نمونه های قابل فروش

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

ساخته شده با پوسته قدرتمند Divi

تعدادی از نمونه کارها

سایت شرکت تجاری:

فروشگاه فایل:

سایت اداری:

وبسایت فروشگاهی

لطفا با ما تماس بگیرید:

 ایمیل:mansureh.gholizadeh@gmail.com

۵۰۰۰۱۰۰۰۳۰۱۶۷۹۹:سامانه پیامکی

نوشته تون دیزاین طراح صفحات وب اولین بار در تون دیزاین. پدیدار شد.

]]>
http://toondesign.ir/%d8%aa%d9%88%d9%86-%d8%af%db%8c%d8%b2%d8%a7%db%8c%d9%86-%d8%b7%d8%b1%d8%a7%d8%ad-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/feed/ 1