یکی از جالب ترین راه ها برای نمایش اطلاعات زمانی، جدول زمانی است. چه دستورالعمل های گام به گام باشد، چه فهرستی از تجربیات برای رزومه، فهرستی از پروژه ها برای نمونه کارها، یا پست های وبلاگ، جدول زمانی می تواند اطلاعات را از نظر بصری جذاب کند. با استفاده از افزونه ای به نام Divi Timeline Module می توانید تایم لاین های خود را در Divi Builder ایجاد کنید.
ماژول خط زمانی Diviیک افزونه شخص ثالث توسط Tortoise IT از طریق Elegant Marketplace چندین ماژول جدید (یک ماژول اصلی و سه ماژول کمکی) را به Divi Builder اضافه می کند تا دو نوع مختلف جدول زمانی پاسخگو ایجاد کند:
- جایی که برای هر نقطه در جدول زمانی محتوا ایجاد می کنید. هر عنصر در جدول زمانی دارای محتوا، پیوندها، رنگ‌ها، فونت‌ها، نمادها و غیره است. می تواند باشد.
- شخصی که از محتوای موجود شما از صفحات، پست ها، رسانه ها یا پروژه ها استفاده می کند.
در این بررسی، من هر دو نوع نمودار را ایجاد می کنم و سپس نمونه ای از ایجاد یک صفحه وبلاگ را نشان می دهم. من از تصاویر رایگان Unsplash.com برای این نمای کلی استفاده می کنم. بیا شروع کنیم.
نصب پلاگین Divi Timeline Module
نصب ساده است. به سادگی افزونه را دانلود کرده و مانند هر افزونه دیگری فعال کنید. نصب دیگری لازم نیست.
ایجاد خط زمانی
چهار ماژول وجود دارد: (پست) – عمودی، محتوا، تصویر شاخصو عمودی. اگرچه با طرح‌بندی‌های چند ستونی کار می‌کند، اما طرح‌بندی‌های تک ستونی بهترین کار را دارند. جدول زمانی – عمودی یا جدول زمانی (پست ها) – عمودی صفحات استفاده خواهد شد. بقیه برای ایجاد طرح استفاده می شود.
جدول زمانی عمودی
اضافه کردن جدول زمانی – عمودی ماژول را به یک ردیف تک ستونی منتقل کنید.
در تنظیمات عمومی، می‌توانیم یک عنصر خط زمانی جدید اضافه کنیم، یک عنوان برای خط زمانی ارائه کنیم و رنگ خط زمانی را انتخاب کنیم. روی Add New Timeline Item کلیک کنید برای ایجاد هر یک از عناصر جدول زمانی.
کلیک کردن یک آیتم جدول زمانی جدید اضافه کنید یک ویرایشگر محتوا با متن، رسانه، برچسب، دکمه نمایش بیشتر، نماد، رنگ نماد، رنگ پس‌زمینه و انیمیشن تصویر/آیکون را باز می‌کند. این شامل تمام استانداردها می شود تنظیمات طراحی پیشرفته همچنین CSS سفارشی.
هر تعداد آیتم جدول زمانی را که دوست دارید اضافه کنید. در اینجا می بینید که من پنج مورد را اضافه و تغییر دادم رنگ خط مرکزی به رنگ سبز من نمادها و رنگ ها را برای هر عنصر در عناصر Timeline انتخاب کردم.
جدول زمانی نتیجه عمودی
این یک نمودار سریع است که من درست کردم. این دارای پنج عنصر است – هر کدام با محتوا و نمادهای خاص خود. رنگی که برای ردیف انتخاب کردم نیز به پایین پنجره های محتوا اضافه شد. من یک تصویر پس زمینه را به بخشی که ماژول را نگه می دارد اضافه کردم.
البته با استفاده از تنظیمات طراحی پیشرفته ماژول را می توان به گونه ای طراحی کرد که متناسب با صفحه باشد، بنابراین شما نیازی به داشتن پس زمینه سفید یا این فونت ها ندارید.
این شامل مراحل آموزشی شماره گذاری شده، رزومه، لیست محصولات، نمونه کارها و غیره است. یک انتخاب عالی برای
جدول زمانی پست
همچنین می توانید یک جدول زمانی از محتوای خود ایجاد کنید. این شامل پست ها، صفحات، رسانه ها یا پروژه ها می شود. نحوه کار می تواند کمی پیچیده باشد، اما ایجاد آن آسان است.
شما باید دو کار را انجام دهید:
- یک طرح بندی ایجاد کنید
- صفحه را ایجاد کنید و آن طرح را انتخاب کنید
تمام ماژول های مورد نیاز برای طرح بندی و ایجاد صفحه گنجانده شده است. بیایید با استفاده از نمونه پست های وبلاگ نمونه ای ایجاد کنیم.
یک طرح بندی ایجاد کنید
ابتدا یک طرح بندی ایجاد کنید. به اینجا در داشبورد بروید دیوی، کتابخانه دیویو انتخاب کنید جدید اضافه کن. به طرح بندی نامی بدهید که برای شما منطقی باشد (من پوسته زمانی Post Timeline را انتخاب کردم). انتخاب کنید چیدمان چه کسی نوع قالب. ولش کن جهانی بدون علامت. کلیک ارسال.
طرحی که ایجاد کرده اید، پست ها (یا فونتی که انتخاب کرده اید) را نمایش می دهد. فکر کنید که ماژول وبلاگ خود را ایجاد می کنید، فقط شما می توانید طرح بندی پست ها را طراحی کنید. اینطور نیست، اما این مثال به من کمک کرد تا آن را به راحتی درک کنم. بله، اینطور است، اما واقعاً اینطور نیست. ادامه هید.
با استفاده از چیدمان ساخته شده است جدول زمانی محتوا، تصویر شاخصو عنوان پست ماژول های موجود در افزونه
برای ایجاد طرح، طرح دو ستونی را انتخاب کرده و قرار دهید جدول زمانی – تصویر ویژه ماژول سمت راست و جدول زمانی – عنوان پست و جدول زمانی – مطالب ماژول ها در سمت چپ البته، ممکن است بخواهید کمی با طرح‌بندی‌ها، مانند استفاده از یک تصویر یا عنوان، یا قرار دادن آنها در پیکربندی‌های مختلف، کمی سرهم‌بندی کنید، اما اجازه دهید ابتدا یک طرح‌بندی ساده را تنظیم کنیم.
توجه – این ماژول ها مانند اکثر ماژول های Divi Builder در صفحه استفاده نمی شوند. آنها در نظر گرفته شده اند که در یک طرح بندی مورد استفاده قرار گیرند تا توسط آنها فراخوانی شود جدول زمانی (پست ها) – عمودی مدول.
این طرح همانطور که در Divi Builder دیده می شود است. همانطور که انتظار می رود، هر یک از این ماژول ها گزینه های خاص خود را دارند تنظیمات عمومی، تنظیمات طراحی پیشرفتهو CSS سفارشی.
من از طرح بندی 1/3، 2/3 استفاده می کنم، اما 1/2، 1/2 نیز کار می کند. این تا حدی به اندازه تصویری که می‌خواهید استفاده کنید و مقدار محتوایی که می‌خواهید نمایش دهید و همچنین پارامترهای دیگری مانند اندازه فونت بستگی دارد.
پس از قرار دادن ماژول ها و انتخاب تمام تنظیمات خود، را انتخاب کنید تازه کردن پایین سمت راست انتشار.
بیایید نگاهی دقیق تر به هر ماژول بیندازیم.
ماژول تصویر ویژه
این ماژول تصویر ویژه دقیقاً همان چیزی را که انتظار دارید انجام می دهد – تصویر ویژه پست را نمایش می دهد. این شامل یک کادر کشویی است که می توانید اندازه تصویر را انتخاب کنید. همچنین شامل متن جایگزین، عنوان، باز کردن در لایت باکس، URL پیوند، باز کردن در همان پنجره یا برگه جدید، انیمیشن، حذف فضای زیر تصویر، تراز، غیرفعال کردن دستگاه ها و تگ مدیریت است.
اندازه تصویر متوسط را انتخاب می کنم و انیمیشن را خاموش می کنم.
ماژول عنوان پست
این ماژول عنوان پست به شما امکان می دهد به محتوا پیوند دهید و تگ مدیریت را تغییر دهید و پارامترهای CSS را تنظیم کنید. توصیه میکنم ترک کنید پیوند به محتوا پارامتر تنظیم شده است آره. بقیه را به استانداردهای خودشان واگذار کردم.
ماژول محتوا
این ماژول محتوا برای نمایش خبرگان یا محتوا انتخاب کنید و الف ادامه مطلب دکمه. من آن را طوری تنظیم کردم که یک قطعه و یک دکمه ادامه مطلب را نشان دهد.
صفحه را ایجاد کنید
با استفاده از Divi Builder یک صفحه جدید ایجاد و منتشر کنید جدول زمانی (پست ها) – عمودی ماژول را به طرح ستونی تبدیل کنید.
تنظیمات ماژول عمودی جدول زمانی (پست ها).
این ماژول طرحی را که ایجاد کرده اید فراخوانی می کند. در اینجا گزینه‌های زیادی دارید، از جمله عنوان، طرح‌بندی، رنگ خط مرکزی، نماد موارد موجود در جدول زمانی، نمایش اعداد یا نمادها، رنگ نماد/شماره و رنگ پس‌زمینه، انیمیشن، صفحه‌بندی، نوع پست، تعداد پست‌ها برای نمایش و غیره. پست افست (از کدام پست شروع شود)، طبقه بندی و تگ مدیریت.
برای فراخوانی طرحی که ایجاد کرده اید، آن را از لیست کشویی تماس انتخاب کنید طرح بندی حلقه. به پایین اسکرول کنید و انتخاب کنید نوشته ها چه کسی نوع پست برای نمایش پست های وبلاگ
پس از اینکه تمام انتخاب های خود را انجام دادید، صفحه را منتشر کنید.
نتیجه جدول زمانی ارسال
نتیجه یک صفحه وبلاگ با آخرین پست های من در یک جدول زمانی است. من گرافیک را روی تصویر پس زمینه (پیوست به بخش تصویر) قرار داده ام. آیکون ها با این ماژول جهانی هستند. من تایم لاین را با پس زمینه آیکون سیاه و آیکون های آبی روی آبی تنظیم کردم. می توان آن را به گونه ای طراحی کرد که با استفاده از ماژول پست متناسب با صفحه باشد تنظیمات طراحی پیشرفته.
مثال وبلاگ
از جدول زمانی می توان در طرح های دیگر استفاده کرد. من می خواستم یک طرح وبلاگ ایجاد کنم که چند پست را در بالا و سپس بقیه را در یک جدول زمانی نشان دهد.
من یک طرح را در یک ستون با تصویر در بالا، محتوا در وسط و عنوان در پایین ایجاد کردم.
سپس یک صفحه با a ایجاد کردم وبلاگ ماژول و جدول زمانی (پست ها) – عمودی مدول. من تعیین کردم وبلاگ ماژول برای نمایش سه پست در یک شبکه. من تعیین کردم جدول زمانی مدول 3 باید یک افست داشته باشد تا نوشته ها را نادیده بگیرد وبلاگ ماژول در پست شماره 4 نشان داده شده و شروع خواهد شد. من یک هستم متن ماژول بین آنها با یک پیام به بازدید کننده هشدار می دهد که محتوای زیر پست های وبلاگ هنوز بخشی از وبلاگ است.
نتیجه صفحه وبلاگ
اینجا صفحه وبلاگ است. نتیجه یک طرح بندی تمیز است که خواننده را از طریق محتوا راهنمایی می کند. البته لازم نیست که فقط یک صفحه وبلاگ باشد. همچنین شامل صفحه نمونه کارها، آثار هنری، خدمات و موارد دیگر است. می توان برای نمایش پروژه ها استفاده کرد.
افکار نهایی
خطوط زمانی عناصر طراحی عالی برای نمایش داده های زمانی یا عددی هستند. ماژول Divi Timeline این ویژگی را به Divi Builder اضافه می‌کند و راهی آسان برای ایجاد جدول زمانی سفارشی یا ایجاد جدول زمانی برای نمایش در طرح‌بندی‌های خود با استفاده از محتوای شما، مانند صفحات، پست‌ها، رسانه‌ها یا پروژه‌ها ارائه می‌کند.
استفاده از این افزونه آسان است و تمام تنظیمات طراحی که از هر ماژول Divi انتظار دارید را دارد. یادگیری و ایجاد طرح‌بندی‌ها و صفحات زمان زیادی نمی‌برد، به همان سرعت و سادگی استفاده از Divi Builder است. اگر می خواهید یک جدول زمانی به وب سایت خود اضافه کنید، ماژول تایم لاین Divi یک گزینه عالی است.
افزونه های تایم لاین دیگری در بازار وجود دارد تا بتوانید ببینید کدامیک ویژگی های مورد نظر شما را دارند.
دوست داریم بیشتر از شما بشنویم. آیا از ماژول Divi Timeline استفاده کرده اید؟ از تجربیات خود در نظرات به ما بگویید.
تصویر ویژه از طریق Ollie The Designer / shutterstock.com