آموزش افزودن CSS سفارشی به المنتور : 5 روش

آموزش افزودن CSS سفارشی به المنتور :یکی از بزرگترین نقاط فروش استفاده از صفحه سازها مانند المنتور(Elementor) این است که شما به عناصر صفحه از پیش ساخته شده یا “ویجت ها” دسترسی دارید. ویجت‌های المنتور(Elementor) دارای گزینه‌های سفارشی‌سازی و استایل زیادی هستند. با این حال، گاهی اوقات تنها راه برای اعمال یک سبک خاص، استفاده از برگه های سبک آبشاری (CSS) است.

آموزش افزودن CSS سفارشی به المنتور : 5 روش

CSS به شما کنترل شگفت انگیزی بر هر جزء از وب سایت شما می دهد. اگر با این زبان آشنایی دارید، اضافه کردن آن به وردپرس ساده است. المنتور(Elementor) همچنین چندین گزینه برای افزودن CSS سفارشی ارائه می دهد.

در این مقاله، ما در مورد چیستی CSS و نحوه اضافه کردن استایل سفارشی به المنتور(Elementor) صحبت خواهیم کرد. در نهایت، ما برخی از بهترین روش‌ها برای استفاده از CSS در وردپرس را مورد بحث قرار خواهیم داد. بیا شروع کنیم!

CSS چیست؟

CSS چیزی است که ما به آن زبان “stylesheet” می گوییم. می توانید از شیوه نامه های CSS برای افزودن استایل سفارشی به اسناد HTML یا XML استفاده کنید. با استفاده از CSS، می توانید یک صفحه HTML اولیه را بگیرید و آن را به یک طراحی مدرن تبدیل کنید.

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

برای مثال، این کد CSS است که برای اختصاص رنگ پس‌زمینه به بدنه یک سند HTML استفاده می‌کنید:

body {

background-color: red;

}

می‌توانید از CSS برای اعمال سبک‌ها به اجزا، کلاس‌ها و شناسه‌های خاص در HTML استفاده کنید. به عنوان مثال، قطعه زیر یک رنگ متن و تراز خاصی را برای همه H2 های یک صفحه اعمال می کند:

h2 {

color: black;

text-align: left;

}

به طور معمول، هنگامی که یک صفحه HTML را بارگذاری می کنید، یک شیوه نامه جداگانه که شامل تمام کدهای CSS است نیز بارگذاری می شود. این بدان معنی است که می توانید از شیوه نامه ها در چندین صفحه استفاده مجدد کنید.

شما آزاد هستید که کد CSS را مستقیماً در هر صفحه HTML اعمال کنید. همچنین می توانید از آن به صورت “داخلی” استفاده کنید. این اصطلاحی است که به کد CSS اشاره دارد که برای یک عنصر HTML اعمال می شود و در آن فایل قرار دارد.

در اینجا یک نمونه از CSS درون خطی برای یک هدر خاص H2 آمده است:

<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>

افزودن CSS به یک شیوه نامه جداگانه بهترین روش در نظر گرفته می شود. با این حال، یکی از مزایای استفاده از WordPress و المنتور(Elementor) این است که می توانید CSS را بدون ویرایش دستی فایل ها اضافه کنید. بیایید نگاهی دقیق تر به نحوه عملکرد آن بیندازیم.

در این راهنما بیاموزید که CSS چیست و چگونه می‌توانید یک استایل سفارشی به المنتور(Elementor) اضافه کنید تا سایت خود را متعلق به خودتان کنید.

گزینه های CSS سفارشی در المنتور(Elementor)

اگر با المنتور(Elementor) آشنایی دارید، می‌دانید که سازنده از بخش‌ها، ستون‌ها و ابزارک‌ها برای کمک به جمع‌آوری صفحات استفاده می‌کند. بخش ها شامل یک یا چند ستون هستند و هر ستون می تواند چندین ماژول داشته باشد:

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

اگر در منوی Edit Section به تب Advanced بروید، بخش CSS سفارشی را مشاهده خواهید کرد. در داخل، فیلدی پیدا خواهید کرد که به شما امکان می دهد کد را برای آن بخش خاص اضافه کنید:

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

برای افزودن CSS سفارشی به یک ستون، ماوس را روی آن ببرید و نماد دو ستونی را در گوشه سمت راست بالای عنصر انتخاب کنید. سپس به گزینه Advanced رفته و بخش Custom CSS را باز کنید:

برای افزودن CSS سفارشی به ویجت المنتور(Elementor) می توانید همین روند را دنبال کنید. کافی است ویجتی را که می‌خواهید سفارشی کنید انتخاب کنید و مستقیماً به تب Advanced > Custom CSS بروید:

افزودن CSS سفارشی به عناصر خاص در صفحه ساز المنتور(Elementor) بسیار ساده است. با این حال، به خاطر داشته باشید که یک ظاهر طراحی شده فقط برای آن عناصر اعمال می شود. اگر می خواهید CSS سفارشی اضافه کنید که کل سایت شما را تحت تأثیر قرار می دهد، باید از روش دیگری استفاده کنید.

نحوه اضافه کردن CSS سفارشی با استفاده از المنتور(Elementor) (5 روش)

در این بخش، راه‌های دیگری برای افزودن CSS سفارشی المنتور(Elementor) را بررسی می‌کنیم. ما روش‌هایی را پوشش می‌دهیم که CSS را در کل وب‌سایت شما، در صفحات خاص و ویجت‌های المنتور(Elementor) اعمال می‌کنند.

روش 1: از ویجت المنتور(Elementor) HTML استفاده کنید

المنتور(Elementor) شما را قادر می سازد تا CSS سفارشی را به هر یک از ویجت های خود اضافه کنید. با این حال، در برخی موارد، ممکن است بخواهید عناصر را به صورت دستی با استفاده از HTML و CSS اضافه کنید. در این موارد، باید از ویجت HTML استفاده کنید:

ویجت HTML می تواند HTML، CSS و جاوا اسکریپت را تجزیه کند. می‌توانید هر کدی را که می‌خواهید در قسمت کد HTML اضافه کنید و اگر معتبر باشد، المنتور(Elementor) آن را به عنوان یک ویجت نمایش می‌دهد:

ویجت HTML از CSS درون خطی و مستقل پشتیبانی می کند. هر کدی که با استفاده از ویجت اضافه کنید، تنها بر آن عنصر تأثیر می گذارد.

روش 2: از منوی تنظیمات سایت المنتور(Elementor) استفاده کنید

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

 

در صفحه بعد گزینه Site Settings را انتخاب کنید:

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

می توانید در مورد نحوه استفاده از منوی تنظیمات سایت برای سفارشی کردن صفحه خود در سایت رسمی المنتور(Elementor) بخوانید. در حال حاضر، تنها بخشی که به آن اهمیت می دهیم، تب Custom CSS است. آن را باز کنید و فیلدی را خواهید دید که دقیقاً شبیه گزینه‌های CSS سفارشی برای بخش‌ها، ابزارک‌ها و ستون‌ها است:

هر CSS سفارشی که در اینجا اضافه می کنید کل وب سایت شما را تحت تأثیر قرار می دهد. اگر فقط قصد سفارشی کردن عناصر خاصی را دارید، توصیه می کنیم از رویکرد هدفمندتری استفاده کنید (مانند افزودن مستقیم CSS به یک ویجت).

روش 3: از Customizer WordPress استفاده کنید

سفارشی ساز وردپرس همچنین شما را قادر می سازد تا CSS سفارشی را در سراسر سایت اضافه کنید. برای انجام این کار، به Appearance > Customize بروید و گزینه Additional CSS را در منوی سمت چپ انتخاب کنید:

با این حال، شایان ذکر است که فیلدهای کد المنتور(Elementor) نسبت به موارد موجود در Customizer کاربرپسندتر هستند. اگر قبلاً از المنتور(Elementor) برای ساخت سایت استفاده می کنید، دلیلی برای اضافه کردن CSS سفارشی از طریق Customizer وجود ندارد.

روش 4: فایل های CSS سفارشی را در صف قرار دهید

اگر در ویرایش فایل‌های وردپرس و دسترسی به وب‌سایت خود از طریق یک کلاینت پروتکل انتقال فایل (FTP) راحت هستید، می‌توانید یک شیوه نامه CSS را در صف قرار دهید تا با المنتور(Elementor) بارگذاری شود. این روش مستلزم افزودن کد به فایل functions.php وردپرس است.

برای دسترسی به فایل functions.php از طریق FTP به وب سایت خود متصل شده و به پوشه ریشه وردپرس بروید. پوشه را باز کنید، فایل functions.php را پیدا کنید و آن را ویرایش کنید.

در اینجا نمونه ای از کدی است که می خواهید به فایل اضافه کنید:

add_action( 'elementor/frontend/before_enqueue_scripts', function() {

wp_enqueue_script(

'custom-stylesheet',

get_stylesheet_uri()

);

} );

آن کد از Before_enqueue_scriptshook برای بارگذاری یک شیوه نامه به نام custom-stylesheet استفاده می کند. ما همچنین از get_stylesheet_urifunction برای اشاره به محل stylesheet در سرور استفاده می کنیم.

افزودن CSS سفارشی به المنتور

در حالت ایده‌آل، صفحه سبک سفارشی را در دایرکتوری تم فرزندتان یا در خود پوشه Themes اضافه کنید. شیوه نامه می تواند حاوی هر کد CSS المنتور(Elementor) باشد که شما می خواهید. قطعه ای که به functions.php اضافه کردید تضمین می کند که کد فقط زمانی بارگیری می شود که المنتور(Elementor) در وب سایت شما فعال باشد.

روش 5: از یک پلاگین CSS استفاده کنید

چندین افزونه وجود دارد که به شما امکان می دهد بدون استفاده از Customizer یا صفحه سازها، CSS سفارشی را به وب سایت خود اضافه کنید. یکی از ابزارهای مورد علاقه ما برای این کار، Simple Custom CSS و JS نام دارد:

با CSS و JS سفارشی ساده، می‌توانید کد را مستقیماً به عناصر سرصفحه و پاورقی موضوع خود اضافه کنید. برای شروع، به Custom CSS & JS > Add Custom CSS بروید و روی Add CSS Code کلیک کنید.

یک ویرایشگر اصلی CSS در سمت چپ ظاهر می شود. در سمت راست، می توانید پیکربندی کنید که آیا کد CSS در یک شیوه نامه خارجی بارگیری شود یا داخلی. شما همچنین می توانید تصمیم بگیرید که آیا کد باید در هدر یا پاورقی قرار گیرد:

وقتی ویرایش کد CSS را تمام کردید، دکمه Publish را بزنید. ممکن است لازم باشد برای مشاهده عملکرد کد، به نمای جلویی بروید.

بهترین روش افزودن CSS سفارشی به المنتور(Elementor)

هر زمان که با CSS سفارشی سر و کار دارید یا هر نوع کدی را به وب سایت خود اضافه می کنید، بهتر است بهترین روش های زیر را در نظر داشته باشید. بیایید با استفاده از یک تم چایلد شروع کنیم.

از تم چایلد وردپرس استفاده کنید

اگر می خواهید با استفاده از CSS قسمتی از استایل طرح زمینه خود را تغییر دهید، توصیه می کنیم از یک تم فرزند استفاده کنید. تم «کودک» الگویی است که تمام سبک‌های یک تم تعیین‌شده را به ارث می‌برد.

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

برای نوشتن آسانتر از پیش پردازشگر کد استفاده کنید

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

استفاده از یک وب سایت استیجینگ را در نظر بگیرید

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

برخی از میزبان‌های وب به شما امکان دسترسی به عملکردهای مرحله‌بندی را از کنترل پنل خود می‌دهند.

مطالب مرتبط :

آموزش زمان بندی پست ها در وردپرس

سفارشی سازی فوتر در وردپرس

علت کند بودن سایت وردپرس + تصویر

رایج‌ترین خطاها در وردپرس و نحوه رفع آنها(70+ )

آموزش سئو وردپرس 61 نکته طلایی (100%رایگان + pdf)

وردپرس چیست و چه کاربردی دارد به همراه pdf

سئو سایت وردپرس

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

افزودن CSS سفارشی المنتور(Elementor) ساده تر از چیزی است که تصور می کنید. سازنده صفحه چندین روش برای اضافه کردن کد به بخش ها، ستون ها، ابزارک ها و برای کل وب سایت شما ارائه می دهد.

برای جمع بندی، در اینجا پنج راه اصلی برای افزودن CSS سفارشی به المنتور (یا وب سایت شما به طور کلی) وجود دارد:

از ویجت المنتور HTML استفاده کنید.

از منوی تنظیمات سایت المنتور استفاده کنید.

از سفارشی ساز وردپرس استفاده کنید.

فایل های CSS سفارشی را در صف قرار دهید.

از افزونه CSS استفاده کنید.

خدمات سئو سایت توسط سئو فراز

جهت انجام خدمات طراحی سایت :سایت شرکتی,سایت فروشگاهی,سایت گردشگری  و سایت وردپرس و … و همچنین خدمات سئو سایت :سئو سایت فروشگاهی,سئو سایت گردشگری,سئو سایت وردپرس و … تولید محتوا با کارشناسان سئو فراز تماس بگیرید