دنبال یافتن راهی برای ایجاد تقسیم کننده عمودی در المنتور به وبسایت خود با استفاده ویرایشگر المنتور هستید؟ بیشتر کاربران تقسیم کننده را برای نشان دادن تفاوت بین چندین ویژگی استفاده می کنند. اما اگر تقسیم کننده را به درستی استفاده کنید، می تواند به راحتی طراحی و ظاهر وبسایت خود را بهبود ببخشد. یک طراحی زیبا می تواند وبسایت شما را برای کاربران جذاب کند.
ویرایشگر المنتور ابزارک تقسیم کننده ی خود دارد که می توانید از آن برای افزودن تقسیم کننده های افقی و عمودی استفاده کنید. افزودن یک تقسیم کننده افقی کاری بسیار ساده است که به طور پیش فرض می توانید آن را انجام دهید، اما برای افزودن یک تقسیم کننده عمودی یکم پیچیده تر است. در این مقاله، به شما آموزش خواهیم داد که چگونه با استفاده از ویرایشگر المنتور یک تقسیم کننده عمودی ایجاد کنید.
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
نحوه اضافه کردن ایجاد تقسیم کننده عمودی در المنتور
در ویرایشگر المنتور، دو روش متفاوت برای افزودن تقسیم کننده عمودی وجود دارد. روش اول استفاده از ابزارک جدا کننده (Divider) (نیاز به نسخه پرمیموم المنتور دارد) و روش دیگر استفاده از ابزارک فاصله گذار (Spacer) (نیاز به نسخه رایگان المنتور دارد). در این آموزش، هر دو روش را به شما نشان خواهیم داد.
ایجاد تقسیم کننده عمودی با استفاده از ابزارک جدا کننده (Divider)
با استفاده از ابزارک جدا کننده (Divider) می توانید به سادگی یک تقسیم کننده افقی ایجاد کنید، اما برای ایجاد یک تقسیم کننده عمودی، نیاز به اضافه کردن یک کد CSS سفارشی دارید. قابلیت های CSS سفارشی تنها در نسخه پرمیوم ویرایشگر المنتور موجود است. (برای استفاده از این ویژگی با این روش باید المنتور خود را به نسخه ی پرمیوم ارتقا دهید.)برای افزودن ابزارک جدا کننده، ابتدا صفحه مورد نظر را با ویرایشگر المنتور باز کنید. سپس بر روی آیکون “+” کلیک کنید تا یک بخش جدید ایجاد شود و سه ستون را انتخاب کنید.
حالا ابزارک جدا کننده را در ستون وسط اضافه کنید و برای ستون اول و آخر، ابزارک مورد نظر خود را اضافه کنید. در اینجا ما ابزارک ویرایشگر متن را در ستون اول و آخر اضافه می‌کنیم.
در اینجا تقسیم کننده به صورت پیش فرض در موقعیت افقی قرار دارد. اکنون باید مقداری کد CSS سفارشی اضافه کنیم تا تقسیم کننده عمودی شود. به قسمت پیشرفته (Advanced) رفته و در قسمت CSS سفارشی کد زیر را اضافه کنید:
selector{<br>transform: rotate(90deg);
این کار باعث چرخش تقسیم کننده و تبدیل آن به شکل عمودی می شود. حال می توانید به قسمت استایل (Style) بروید و تقسیم کننده را به صورتی طراحی کنید که زیبا و منحصر به فرد باشد.
ایجاد تقسیم کننده عمودی با استفاده از ابزارک فاصله گذار (Spacer)
در این روش، شما نیازی به استفاده از المنتور پرمیوم ندارید و می توانید با استفاده از نسخه رایگان المنتور یک تقسیم کننده عمودی ایجاد کنید. در این روش، از ابزارک فاصله گذار (Spacer) استفاده خواهیم کرد. صفحه ای را با ویرایشگر المنتور باز کنید و یک بخش با سه ستون ایجاد کنید. ابزارک فاصله گذار را در ستون وسط قرار داده و برای بقیه ستون ها ابزارک مناسب کار خود را قرار دهید، ما در اینجا از ابزارک ویرایشگر متن را استفاده می کنیم. اکنون باید عرض هر دو ابزارک ویرایشگر متن را روی 50 درصد و عرض ابزارک فاصله گذار را روی 5 درصد تنظیم کنید.
اکنون به قسمت تنظیمات ابزارک فاصله گذار (spacer) بروید و فاصله را در قسمت محتوا تنظیم کنید.
به قسمت پیشرفته (Advanced) رفته و از قسمت پس زمینه، پس زمینه کلاسیک را انتخاب کرده و رنگ پس زمینه را تنظیم کنید.
حالا در قسمت حاشیه خارجی (margin) زیر مجموعه طرح بندی (layout) بروید و حاشیه سمت راست و چپ را تنظیم کنید تا طراحی شما جذاب به نظر برسد.
تمام شد! تقسیم کننده عمودی شما آماده است.
