صفحه اصلی / المنتور / ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
ایجاد یک کادر در المنتور

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

ایجاد یک کادر در المنتور

می‌دانم که این نکته را می‌دانید ولی برای تاکید بیشتر می‌گویم که یادتان باشد این امکان تنها با نصب المنتور روی سایتتان امکان‌پذیر است. مراحل ایجاد یک کادر در المنتور را قدم به قدم با هم پیش می‌رویم.

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

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
انتخاب بخش برای افزودن عناصر

قدم دوم: حال ساختار موردنظر خود را انتخاب کنید. مثلا من ساختار دوبخشی را انتخاب می‌کنم. شما می‌توانید با توجه به طرحی که قرار است بزنید یکی را به دلخواه انتخاب کنید.

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

قدم سوم: حال در اینجا باید به سراغ المان‌ها برویم و یکی را انتخاب کنیم. من در اینجا المان جداکننده را برای ادامه فرآیند کارم انتخاب می‌کنم.

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
انتخاب المان جداکننده

قدم چهارم: ارتفاع آن را در بخش تنظیمات به حداکثر میزانی که به من اجازه می‌دهد تغییر می‌دهم.

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
تنظیم ارتفاع

قدم پنجم: حال برای ادامه تنظیمات خود نیازمند افزونه کد سی‌اس‌اس هستیم. برای این منظور در المنتور از بخش پیشرفته بر روی بخش CSS سفارشی کلیک کنید:

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
سفارشی سازی کادر موردنظر

 

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

selector {
   border-left: 1px solid #a70ccc;
   border-right: 1px solid #ff1685;
   box-sizing: border-box;
   background-position: 0 0, 0 100%;
   background-repeat: no-repeat;
   background-size: 100% 1px;
   background-image: linear-gradient(to right, #a70ccc 0%, #ff1685 100%), linear-gradient(to right, #a70ccc 0%, #ff1685 100%);
}

این قطعه کد کاملا سفارسی است و شما می‌توانید رنگ بندی و اندازه‌های آن را تغییر دهید.

به همین راحتی می‌توانید نتیجه کار خود را مشاهده کنید:

ایجاد یک کادر در المنتور | ساخت کادر گرافیکی در المنتور
نتیجه ساخت کادر گرافیکی در المنتور

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

مشاوره آموزشی رایگان

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

 

مشاوران آموزشی

همیار آکادمی

پاسخگوی شما هستند


منبع مطلب

این مطالب را نیز ببینید!

قالب فروشگاهی Orchid Store | قالب ووکامرسی Orchid Store

قالب فروشگاهی Orchid Store | قالب ووکامرسی Orchid Store

قالب فروشگاهی Orchid Store امروز با یکی دیگر از قالب‌های رایگان ووکامرس در همیار وردپرس …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *