ویرایشگر متن زنده هر عنصر متنی روی یک صفحه وب را با یک کلیک قابل ویرایش میکند. عناوین، پاراگرافها، برچسبهای دکمه، آیتمهای ناوبری یا هر محتوای متنی را مستقیماً روی صفحه زنده تغییر دهید — متن ویرایششده با فونتها، رنگها و چیدمان اصلی صفحه در زمان واقعی رندر میشود. کامل برای آزمایش تغییرات متن، ایجاد ماکتها و گرفتن اسکرینشات با محتوای سفارشی.
چند بار فکر کردهاید «کاش میدانستم این عنوان با متن متفاوت چگونه به نظر میرسد» یا «نیاز دارم اسکرینشاتی از این صفحه با نام مشتری به جای متن placeholder داشته باشم»؟ معمولاً این به معنای ویرایش کد، ساخت مجدد یا استفاده از یک ویرایشگر تصویر برای قرار دادن متن است. ویرایشگر متن زنده همه اینها را حذف میکند — فقط روی هر متنی روی صفحه کلیک کنید و شروع به تایپ کنید. متن با استفاده از contentEditable در همان جا قابل ویرایش میشود، به این معنی که همه استایلهای CSS اصلی عنصر حفظ میشوند: خانواده فونت، اندازه فونت، وزن فونت، رنگ، letter-spacing، line-height، text-transform و هر ویژگی متنی دیگر. چیدمان با تایپ در زمان واقعی بهروزرسانی میشود — اگر متن جدید طولانیتر باشد، عنصر به صورت طبیعی گسترش مییابد. هر چند عنصر متنی که میخواهید را در یک جلسه ویرایش کنید. یک شمارنده ویرایش ردیابی میکند چه تعداد عنصر تغییر دادهاید و «لغو همه» همه چیز را فوراً بازیابی میکند. همه تغییرات فقط بصری هستند و با رفرش صفحه بازنشینی میشوند.
روی هر عنصر متنی روی صفحه کلیک کنید — عناوین، پاراگرافها، spanها، برچسبهای دکمه، متن لینک، آیتمهای لیست، سلولهای جدول — و فوراً قابل ویرایش میشود. یک مکاننما چشمکزن ظاهر میشود و میتوانید شروع به تایپ کنید. نیازی به حالت انتخاب یا کلیکهای اضافی نیست.
متن ویرایششده همه ویژگیهای CSS اصلی را حفظ میکند: font-family، font-size، font-weight، color، line-height، letter-spacing، text-transform و ویژگیهای چیدمان. متن دقیقاً به نظر میرسد که متعلق به صفحه است — نه مانند یک overlay خام.
با تایپ متن طولانیتر یا کوتاهتر، عنصر به صورت طبیعی تغییر اندازه میدهد و چیدمان اطراف دقیقاً همانطور که با محتوای واقعی بود بازجریان مییابد. دقیقاً ببینید طولهای مختلف متن چگونه چیدمان را تحت تأثیر قرار میدهند.
هر تعداد عنصر متنی که میخواهید را در یک جلسه ویرایش کنید. عنوان را تغییر دهید، سپس زیرعنوان، سپس برچسب دکمه، سپس متن footer — هر ویرایش تا زمانی که صفحه را رفرش کنید باقی میماند.
یک شمارنده کوچک نشان میدهد چه تعداد عنصر ویرایش کردهاید. «لغو همه» هر عنصر ویرایششده را به محتوای متنی اصلی با یک کلیک بازمیگرداند. تغییرات فردی با نکات «بود: متن اصلی» ردیابی میشوند.
همه ویرایشها فقط در DOM مرورگر وجود دارند و هرگز در سرور ذخیره نمیشوند. صفحه را رفرش کنید و هر عنصر متنی به محتوای اصلی خود برمیگردد. استفاده روی هر وبسایت — از جمله سایتهای تولید — ایمن است.
تغییرات مختلف عنوان را روی صفحه زنده امتحان کنید تا ببینید کدام متن قویتر به نظر میرسد. «شروع رایگان» در مقابل «آزمایش رایگان خود را شروع کنید» در مقابل «حساب خود را ایجاد کنید» — هر نسخه را با طراحی واقعی صفحه رندرشده ببینید.
متن placeholder («Lorem ipsum») را با محتوای واقعی مشتری در طول یک ارائه جایگزین کنید. نام شرکت، توضیح محصول و متن CTA آنها را در طراحی واقعی رندر شده نشان دهید — بسیار قانعکنندهتر از یک ماکت استاتیک.
به یک اسکرینشات نیاز دارید که متن خاصی برای مستندات، یک پست وبلاگ یا یک اسلاید ارائه نشان دهد؟ متن را مستقیماً ویرایش کنید، سپس از ابزار Screenshot برای گرفتن یک تصویر تمیز با محتوای سفارشی خود استفاده کنید.
وقتی نام محصول ۴۰ کاراکتر است به جای ۱۵ چه اتفاقی میافتد؟ یا وقتی یک توضیح ۳ خط است به جای ۱؟ متن طولانیتر را تایپ کنید تا ببینید چیدمان چگونه با آن کنار میآید — باگهای سرریز را قبل از اینکه محتوای واقعی آنها را فعال کند پیدا کنید.
متن ترجمهشده را در عناصر paste کنید تا ببینید طراحی چگونه با زبانهای مختلف کنار میآید. متن آلمانی اغلب ۳۰٪ طولانیتر از انگلیسی است — آیا چیدمان هنوز کار میکند؟ آیا متن دکمه هنوز جای میگیرد؟
داک شناور DevSuite Pro را باز کرده و روی آیکون ویرایشگر متن زنده کلیک کنید. ابزار فعال میشود و هر عنصر متنی روی صفحه برای ویرایش قابل کلیک میشود.
روی یک عنوان، پاراگراف، برچسب دکمه یا هر محتوای متنی کلیک کنید. یک مکاننما در متن ظاهر میشود و یک نشان «در حال ویرایش» بالای عنصر نمایش داده میشود.
برای جایگزینی یا تغییر متن شروع به تایپ کنید. محتوای جدید با استایل اصلی حفظشده در زمان واقعی رندر میشود. چیدمان به صورت طبیعی برای تطبیق با طول متن جدید تنظیم میشود.
برای پایان ویرایش عنصر فعلی خارج از آن کلیک کنید، سپس روی عنصر متنی دیگری کلیک کنید تا آن را نیز ویرایش کنید. شمارنده ویرایش همه تغییرات را ردیابی میکند.
برای بازیابی هر عنصر ویرایششده «لغو همه» را کلیک کنید، یا صفحه را برای بازنشینی کامل همه چیز رفرش کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
