ساخت پس زمینه متن گرادیانت و تصویر در المنتور

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

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

آموزش ساخت پس زمینه متن تصویر و گرادیانت با المنتور

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

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

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

ایجاد بخش های مورد نظر

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

در تصویر بالا ویجت ها را نام گذاری کردم تا اگر خواستید همانند تصویر طراحی کنید بتوانید از ویجت ها استفاده کنید. کلا از المان های زیر استفاده شده است :

• بخش 3 ستونه
• ویجت سربرگ
• ویجت تصویر
• ویجت ویرایشگر متن

تغییر رنگ متن عنوان

در این مرحله باید رنگ متن عنوان مورد نظر را حالت بدون رنگ یا “ترنسپرنت” قرار دهید. (با این کار رنگ متن بی رنگ می شود و اگر این رنگ فعال باشد، استایل ما نمایش داده نخواهد شد.)

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

الان باید متن شما پنهان شود، چون رنگی ندارد که نمایش داده شود.

قرار دادن کد های مورد نظر (تصویر پس زمینه)

در این بخش باید کدهای مورد نظر را بر روی عناوین اعمال کنیم، برای این کار بر روی ویجت عنوان کلیک کنید، سپس در بخش تنظیمات به زبانه “پیشرفته” بیاید و سپس “CSS سفارشی” را انتخاب کنید تا زیر محتوا نمایش داده شود.

سپس کدهای زیر را عینا کپی کنید و در بخش CSS سفارشی قرار دهید.

selector {
    background-image: url(مسیر تصویر پس زمینه);
    background-position: center center;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
}

کد بالا یک تصویر پس زمینه که شما انتخاب می کنید را بر روی عناوین اعمال می کند. در خط دوم به جای “مسیر تصویر پس زمینه” باید آدرس دقیق تصویر را وارد کنید.

برای آپلود تصویر می توانید از منوی “رسانه ها > افزودن” اقدام کنید و تصویر مورد نظر را با کلیک بر روی دکمه “گزینش پرونده ها” انتخاب کنید و همانند تصویر زیر آدرس را کپی کنید.

حالا آدرس کپی شده را به جای “مسیر تصویر پس زمینه” در کد ها قرار دهید و کار تمام هست و الان مشاهده می کنید که پس زمینه عنوان به تصویر شما تغییر داده شد.

[irinfobox]دقت داشته باشید که اگر بخواهید بر روی عنوان دیگر استایل را بدهید با تصویر پس زمینه جدا، همه کد ها را کپی کنید و همانند روال قبلی رنگ متن را ترنسپرنت قرار دهید و تصویر مورد نظر را آپلود کنید وآدرس تصویر را عوض کنید.[/irinfobox]

قرار دادن کد های مورد نظر (گرادیانت)

اگر می خواهید که پس زمینه عناوین به صورت گرادیانت باشند باشد به جای تصویر در کد، از کدهای پس زمینه گرادیانت استفاده کنید. برای این کار به سایت “https://cssgradient.io/” مراجعه کنید. (می توانید گرادیانت ها را انتخاب و یا ایجاد کنید.)

سپس بعد از انتخاب و ساخت پس زمینه دلخواه، در پایین همانند تصویر بالا بر روی دکمه “Copy To Clipboard” کلیک کنید تا کد هایی که در بالا هست را کپی کند.

سپس کد ها را به جای کد “background-image: url(مسیر تصویر پس زمینه);” در کد های بالا قرار دهید. یعنی باید کد شما همانند کد زیر باشد :

selector {
    background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(105,105,105,1) 50%, rgba(252,176,69,1) 100%);
    background-position: center center;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
}

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

? فیلم آموزشی