تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

مقالات,آموزش,ترفند , وردپرس

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

 

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

 

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

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

 

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

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

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

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

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

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

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

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

قدم پنجم: حال برای ادامه تنظیمات خود نیازمند افزونه کد سی‌اس‌اس هستیم. برای این منظور در المنتور از بخش پیشرفته بر روی بخش 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%);
}

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

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

چگونه با کمک المنتور یک کادر ایجاد کنیم؟

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

امیدوارم از آموزش کوتاه امروز ما خوشتان آمده باشد. بی‌صبرانه منتظر نظرات و پیشنهادات شما عزیزان هستیم.

دانلود


هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=51221
کلمات کلیدی پست :
مطالب مرتبط
2,128ساخت آیکون های سفارشی در المنتور چگونه است؟ تاریخ : 2020/01/9
2,116چگونه صفحات ساخته شده با المنتور را بهینه کنیم؟ تاریخ : 2019/12/5
2,496Visual Composer یا Elementor ، کدامیک را انتخاب می‌کنید؟ تاریخ : 2019/08/11
1,868چگونه تصاویر سه بعدی با المنتور بسازیم؟ تاریخ : 2020/01/22
1,368چگونه صفحه نخست سفارشی در وردپرس بسازیم؟ تاریخ : 2019/10/22
2,284ایجاد اسکرول افقی در پس‌زمینه با المنتور تاریخ : 2020/02/3
2,004افزایش سرعت سایت ساخته شده با المنتور تاریخ : 2020/01/25
2,192قالب فروشگاهی وردپرس Rife فارسی تاریخ : 2020/09/30
2,944افزونه Premium Addons PRO امکانات جانبی صفحه ساز Elementor Pro نسخه 2.0.7 تاریخ : 2020/10/19
2,028چگونه سرعت سایت وردپرسی را افزایش دهیم؟ تاریخ : 2019/09/24
1,772ایجاد دکمه در المنتور با کمک آیکون‌ها تاریخ : 2020/02/13
16,968افزایش امکانات صفحه ساز Elementor با افزونه فارسی JetElements نسخه 2.2.11 تاریخ : 2020/03/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات