ویجت ویرایشگر متن (Text editor) در المنتور

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

المان ویرایشگر متن در المنتور

المان ویرایشگر متن (Text Editor) در المنتور یکی از ویجت‌ های اصلی و پرکاربرد است که عملکردی شبیه به ویرایشگر کلاسیک ورد پرس دارد و به شما امکان می‌ دهد پاراگراف‌ها، لیست‌ها و سایر محتوای متنی غنی را به صفحات خود اضافه کنید در بخش «محتوا»ی این المان، می‌توانید متن را مستقیماً تایپ یا جای‌ گذاری کنید و با استفاده از نوار ابزار ساده آن، متن را برجسته یا کج کنید، لینک اضافه نمایید و ساختار اولیه محتوا را مدیریت کنید در بخش استایل، کنترل کاملی بر ظاهر متن دارید؛ از جمله تنظیم رنگ متن، استفاده از تنظیمات جامع تایپوگرافی نوع فونت، اندازه، وزن، ارتفاع خط و تنظیم تراز بندی متن چپ، راست، وسط. این ویجت برای نمایش محتوای متنی اصلی صفحات، مانند توضیحات محصول، متن مقالات یا بخش درباره ما، ایده‌آل است.

محتوا در ویجت ویرایشگر متن المنتور

در بخش محتوا (Content) المان ویرایشگر متن المنتور، تمرکز اصلی بر روی وارد کردن و مدیریت متن اصلی است. در اینجا یک رابط کاربری ساده مشابه ویرایشگر استاندارد وردپرس در اختیار شما قرار می‌گیرد که به شما امکان می‌دهد متن مورد نظر خود را تایپ یا جای‌ گذاری کنید . با استفاده از این بخش می‌ توانید عملیات پایه‌ای مانند قالب‌ بندی پاراگراف‌ها، افزودن لینک، برجسته کردن یا کج کردن کلمات، ایجاد لیست‌های نقطه‌ ای یا عددی، و استفاده از نقل قول‌ها را انجام دهید. این بخش کاملاً بر روی محتوا متمرکز است و تنظیمات ظاهری پیشرفته مانند رنگ و فونت در تب استایل مدیریت می‌ شوند، اما در همین بخش محتوا می‌توانید ساختار پایه‌ ای متن خود را نیز از طریق نمای متنی ویرایش کنید.

پیشنهاد مطالعه: آموزش کامل المان نقشه گوگل در المنتور

بخش استایل ویجت Text editor در المنتور

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

آموزش تراز بندی ویجت ویرایشگر متن 

در بخش استایل ویجت سربرگ (Heading) المنتور، گزینه تراز بندی (Alignment) به شما این امکان را می‌ دهد که موقعیت افقی متن تیتر را در داخل ستون یا کانتینری که در آن قرار دارد، تنظیم کنید. با استفاده از دکمه‌ های مربوطه می‌ توانید متن را به سادگی چپ‌ چین، راست‌ چین، وسط‌ چین یا Justify تراز از دو طرف کنید این ویژگی برای زیبایی بصری و بهبود چید مان صفحه ضروری است و به طراح اجازه می‌ دهد تا متن تیتر را به طور هماهنگ با سایر عناصر موجود در بخش مربوطه تنظیم کند و تجربه‌ ی خوانایی بهتری برای کاربر فراهم آورد .

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

گزینه تایپو گرافی ویجت Text editor در المنتور

تایپوگرافی (Typography) هنر و تکنیک تنظیم حروف و متن است تا زبان نوشتاری را خوانا، قابل درک و از نظر بصری جذاب کند در طراحی وب، تایپوگرافی فراتر از انتخاب صرف یک فونت زیبا است و شامل عواملی نظیر اندازه فونت، وزن (ضخامت) حروف، ارتفاع خط فاصله عمودی بین خطوط، فاصله بین حروف و رنگ متن می‌شود هدف اصلی تایپوگرافی مؤثر در المنتور و وردپرس، بهبود تجربه کاربری (UX) و اطمینان از این است که محتوا به راحتی در دستگاه‌های مختلف قابل خواندن باشد، ضمن اینکه لحن و شخصیت برند را نیز منعکس کند.

آموزش سایه متن ویجت ویرایشگر متن المنتور

گزینه‌ ای برای اعمال سایه متن (Text Shadow) وجود دارد این ویژگی به شما امکان می‌ دهد تا عمق بصری به متن اضافه کنید و آن را از پس‌ زمینه متمایز سازید تنظیمات سایه متن شامل کنترل‌ هایی برای انتخاب رنگ سایه، میزان تاری (Blur)، و موقعیت افقی و عمودی سایه است که به شما اجازه می‌ دهد جلوه‌های مختلفی از سایه‌ های نرم و ظریف گرفته تا سایه‌های سخت و برجسته ایجاد کنید استفاده خلاقانه از سایه متن می‌تواند جذابیت بصری تیترها را در المنتور به شدت افزایش دهد، اما استفاده نادرست از آن ممکن است خوانایی متن را کاهش دهد.

گزینه فاصله پاراگراف در ویجت ویرایشگر متن 

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

بخش رنگ متن در ویجت Text editor المنتور

گزینه رنگ متن (Text Color) یکی از اصلی‌ ترین تنظیمات بصری است که به شما امکان می‌ دهد رنگ دقیق تیتر خود را مشخص کنید. با استفاده از انتخابگر رنگ المنتور، می‌ توانید از پالت رنگی وب‌ سایت خود استفاده کنید، یک کد رنگ هگزادسیمال یا RGB وارد نمایید یا از رنگ‌ های گرادیانت برای ایجاد جلوه‌ ای جذاب‌ تر بهره ببرید. انتخاب رنگ مناسب برای متن تیتر از اهمیت بالایی برخوردار است، زیرا باید تضاد کافی با رنگ پس‌زمینه داشته باشد تا خوانایی به حداکثر برسد و پیام شما به وضوح برای همه کاربران قابل مشاهده باشد.

بخش رنگ لینک در ویجت ویرایشگر متن وردپرس

در المنتور، تنظیم رنگ لینک (Link Color) را می‌ توان به صورت سراسری یا محلی مدیریت کرد تا از یک پارچگی طراحی اطمینان حاصل شود. بهترین روش برای تنظیم رنگ لینک‌ ها در کل وب‌ سایت این است که به بخش تنظیمات سایت بروید و در قسمت رنگ‌های سراسری یا تایپوگرافی، رنگ اصلی لینک‌ ها و رنگ لینک هنگام هاور را تعریف کنید. این کار تضمین می‌ کند که تمام لینک‌ های موجود در متن‌ها از یک هویت بصری یکسان پیروی کنند. با این حال، اگر نیاز به تغییر رنگ لینک یک متن خاص در یک ویجت خاص دارید، می‌ توانید از بخش استایل همان ویجت مثلاً ویرایشگر متن استفاده کرده و رنگ لینک را به صورت دستی و محلی تنظیم نمایید.

بخش پیشرفته المان Text editor در المنتور

بخش پیشرفته (Advanced) در ویجت سربرگ (Heading) المنتور، مجموعه‌ ای از تنظیمات قدرتمند را ارائه می‌ دهد که فراتر از محتوا و استایل پایه هستند و به شما کنترل دقیقی بر چیدمان، فاصله و جلوه‌های ویژه می‌ دهند در این بخش می‌توانید حاشیه‌ های داخلی (Padding) و خارجی (Margin) را برای کنترل دقیق فضای اطراف تیتر تنظیم کنید همچنین، گزینه‌ هایی برای افزودن افکت‌ های حرکتی جذاب مانند انیمیشن‌ های ورود، تنظیمات ریسپانسیو برای پنهان کردن تیتر در دستگاه‌ های خاص، و افزودن کلاس‌ های CSS سفارشی یا شناسه‌های ID برای استایل‌ دهی اختصاصی وجود دارد. این تنظیمات پیشرفته به طراحان اجازه می‌ دهد تا کنترل کامل بر موقعیت‌ یابی و تعامل‌ پذیری تیتر در صفحه داشته باشند.

طرح بندی در ویجت ویرایشگر متن 

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

آموزش موشن افکت المان Text editor در المنتور

قابلیت موشن افکت (Motion Effects) به شما اجازه می‌ دهد انیمیشن‌ها و جلوه‌های حرکتی ظریفی را به بلوک‌ های متنی خود اضافه کنید. این تنظیمات به دو دسته اصلی تقسیم می‌ شوند: اول، انیمیشن‌های ورودی مانند محو شدن ، اسلاید شدن یا بزرگ نمایی که نحوه ظاهر شدن متن هنگام ورود کاربر به محدوده دید آن را کنترل می‌ کنند. دوم، افکت‌های اسکرول که حرکت متن را همزمان با اسکرول کردن صفحه توسط کاربر هماهنگ می‌ کنند و جلوه‌هایی مانند حرکت پارالاکس یا تغییر شفافیت ایجاد می‌ کنند. استفاده از این افکت‌ ها می‌ تواند توجه بازدید کنندگان را به بخش‌های کلیدی متن جلب کرده و تجربه کاربری پویاتری ایجاد نماید، اما استفاده بیش از حد از آنها ممکن است باعث حواس‌پرتی یا کاهش خوانایی محتوا شود .

بخش تبدیل در ویجت ویرایشگر متن المنتور

گزینه تبدیل مجموعه‌ای از ابزارهای قدرتمند CSS را در اختیار شما قرار می‌ دهد تا بتوانید ظاهر و موقعیت عناصر را بدون تأثیرگذاری بر چیدمان کلی صفحه تغییر دهید این قابلیت شامل توابعی مانند چرخش برای چرخاندن عنصر در زوایای مختلف، مقیاس برای کوچک یا بزرگ کردن اندازه آن، کج کردن برای ایجاد جلوه‌های زاویه‌ دار، و انتقال برای جابجایی دقیق عنصر در محورهای افقی و عمودی است با استفاده از این ابزارها، می‌توانید جلوه‌های بصری خلاقانه و تعاملی ایجاد کنید و با فعال‌ سازی گزینه هاور ، این تبدیل‌ها را به صورت انیمیشنی هنگام قرار گرفتن ماوس کاربر روی عنصر اعمال نمایید.

گزینه پس زمینه المان Text editor در المنتور

در بخش پیشرفته المان ویرایشگر متن المنتور، قابلیت تنظیم پس‌ زمینه (Background) به شما اجازه می‌ دهد که پشت متن خود را با رنگ یا تصویر دلخواه پر کنید. این ویژگی با پس‌زمینه کلی ستون یا سکشن متفاوت است و فقط ناحیه‌ ای را که متن اشغال کرده، تحت تأثیر قرار می‌ دهد. می‌توانید از یک رنگ کلاسیک ساده یا یک گرادیانت جذاب استفاده کنید تا متن شما از پس‌ زمینه اصلی صفحه متمایز شود. همچنین امکان افزودن پوشش پس‌ زمینه برای تنظیم میزان شفافیت یا ترکیب رنگ‌ ها وجود دارد که به شما کمک می‌ کند خوانایی متن را با ایجاد تضاد بصری مناسب افزایش دهید، به خصوص اگر از یک تصویر پیچیده به عنوان پس‌ زمینه استفاده می‌ کنید .

بخش حاشیه ویجت ویرایشگر متن در المنتور

تنظیمات حاشیه (Border) کنترل کاملی بر خطوط اطراف هر عنصر به شما می‌ دهد این تنظیمات به شما امکان می‌ دهند که سبک حاشیه را انتخاب کنید مثلاً توپر ، نقطه‌چین ، خط‌ چین و غیره، ضخامت دلخواه را برای هر چهار طرف تعیین کنید و رنگ حاشیه را متناسب با طراحی خود تنظیم نمایید . علاوه بر این، ویژگی بسیار کاربردی شعاع مرز وجود دارد که با استفاده از آن می‌ توانید گوشه‌ های تیز عنصر را گرد کنید و جلوه‌های بصری نرم‌ تر یا مدرن‌ تری ایجاد نمایید این تنظیمات به شما کمک می‌ کنند تا عناصر مختلف صفحه را کادربندی کرده و ساختار بصری واضح‌ تری در طراحی خود ایجاد کنید.

گزینه ماسک در ویرایشگر متن (Text editor) در المنتور

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

آموزش واکنش‌ گرا المان ویرایشگر متن المنتور

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

بخش ویژگی ها در ویرایشگر متن المنتور

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

گزینه css سفارشی در المان Text editor در المنتور

در بخش پیشرفته (Advanced) المنتور پرو، گزینه CSS سفارشی یک ویژگی بسیار قدرتمند است که به کاربران امکان می‌ دهد کدهای استایل‌ دهی دلخواه خود را مستقیماً به یک ویجت، ستون، کانتینر یا سکشن خاص اضافه کنند این ویژگی برای طراحانی مفید است که نیاز به کنترل دقیقی فراتر از تنظیمات پیش‌ فرض المنتور دارند، مانند اعمال جلوه‌های بصری منحصر به فرد یا رفع مشکلات جزئی چیدمان . با استفاده از این قابلیت، کد CSS نوشته شده تنها بر روی همان عنصر خاص اعمال می‌ شود و بدون نیاز به دسترسی به فایل‌ های اصلی قالب یا نصب افزونه‌های اضافی، امکان شخصی‌ سازی بی‌ نهایت ظاهر وب‌ سایت را فراهم می‌ کند .

آموزش کار با المان ویرایشگر متن در المنتور

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

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

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

نکته های مهم در استفاده از ویجت Text editor المنتور

• همیشه از پاراگراف های کوتاه استفاده کنید تا متن خسته کننده نباشد.
• از تیترهای داخلی برای نظم دادن به محتوا کمک بگیرید.
• کلمات کلیدی را در متن جای دهید تا اصول سئو رعایت شود.
• لینک دهی داخلی به صفحات دیگر باعث می شود کاربر زمان بیشتری در سایت بماند.

پیشنهاد مطالعه: سئو و طراحی سایت: چرا این دو باید با هم هماهنگ باشند؟

سخن پایانی

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