Elementor: چگونه CSS سفارشی را به نسخه رایگان اضافه کنیم

اخیراً یکی از خوانندگان ما که نسخه Pro Elementor را نداشتند از ما پرسید که چگونه می تواند CSS سفارشی را به وب سایت خود اضافه کند.

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

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

سه روش افزودن CSS سفارشی به صفحه یا وب سایت Elementor به شرح زیر است:

• کد CSS را از طریق عنصر HTML اضافه کنید.
• از طریق افزونه کد قطعه
• با استفاده از Elementor's Theme Customizer

روش 1: کد CSS را از عنصر HTML Elementor اضافه کنید

اگر می خواهید CSS را فقط به یک صفحه اضافه کنید ، از این روش استفاده کنید.

مرحله 1: عنصر HTML Elementor را بکشید و رها کنید

شما می توانید این عنصر HTML را در هر کجای صفحه قرار دهید و بسیار خوب کار خواهد کرد.

مرحله 2: روی نماد ویرایش HTML کلیک کنید

روی نماد کلیک کنید ویرایش html در سمت راست عنصر HTML Elementor قرار دارد. با کلیک بر روی آن ، یک جعبه ابزار ویرایش HTML در سمت چپ صفحه ظاهر می شود.

مرحله 3: کد CSS خود را اضافه کنید

1. روی برگه کلیک کنید محتویات و لیست کشویی را باز کنید کد HTML.
2. کد CSS خود را در چراغهای راهنما

روش 2: CSS سفارشی برای Elementor از طریق پلاگین Code Snippets

مزایای استفاده از افزونه Code Snippets:

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

مرحله 1: منوی برنامه های افزودنی را در داشبورد خود باز کنید

مرحله 2: یک پلاگین جدید اضافه کنید

روی دکمه کلیک کنید اضافه کردن در »برای دسترسی به صفحه افزودن پلاگین های جدید.

1. به دنبال افزونه باشید " قطعه کد "
2. با کلیک روی دکمه آن را نصب کنید نصب در حال حاضر هنگامی که نتایج تحقیق مثبت است.

مرحله 3: پلاگین را فعال کنید

روی دکمه کلیک کنید فعال کردن »پس از پایان نصب ، پلاگین فعال می شود قطعه کد.

مرحله 4: صفحه پلاگین را باز کنید و یک قطعه کد اضافه کنید

1. منو را باز کنید عصاره از داشبورد شما
2. کلیک بر روی دکمه جدید برای افزودن قطعه کد جدید

مرحله 5: یک قطعه ایجاد کنید و آن را فعال کنید

1. به قطعه کد خود یک نام بدهید.
2. داخل برچسب ، کد خود را بنویسید. این کد برای کپی برداری در زیر موجود است.
3. روی دکمه کلیک کنید ذخیره تغییرات برای ذخیره قطعه کد.
4. پس از ذخیره CSS ، روی "کلیک کنید فعال کردن برای فعال کردن کد CSS.

کپی کردن کد

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

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

توجه داشته باشید: قبل از استفاده از این روش مراقب باشید زیرا اگر موضوع را تغییر دهید این CSS سفارشی را از دست خواهید داد.

مرحله 1: تنظیم کننده تم را باز کنید

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

مرحله 2: بر روی زبانه CSS اضافی کلیک کنید

با این کار صفحه ورود CSS باز می شود.

مرحله 3: کد CSS خود را اضافه کنید

خوبه اکنون می دانید که چگونه می توان CSS سفارشی را به راحتی به یک صفحه یا وب سایت Elementor اضافه کرد. این امر باعث انعطاف پذیری بیشتر طراحی صفحات وب منحصر به فرد در Elementor Free می شود.

اکنون Elementor Pro را دریافت کنید!

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

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

ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.

1. FileBird

آیا تا به حال برای مدیریت هزاران فایل تصویری، ویدئویی یا سندی که در FTP وردپرس خود آپلود کرده اید، مشکل داشته اید؟ بله یا خیر، مهم نیست، مهم این است که بدانید که پلاگین وردپرس FileBird به شما کمک می کند تا فایل های رسانه ای خود را به راحتی مدیریت کنید و قدرت بیشتری را به کتابخانه خود بیاورید.

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

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

برای کسب اطلاعات بیشتر ، کشف کنید چگونه برای مدیریت فایل ها و پوشه وردپرس

بنابراین اگر می خواهید به این امر دامن بزنید مدیریت کتابخانه رسانه ای خود رااز پلاگین وردپرس FileBird می تواند سلاح مخفی شما باشد.

دانلود | نسخه ی نمایشی | میزبانی وب

2. نهایی WooCommerce دسته های قابل گسترش

Ce پلاگین وردپرس به شما این امکان را می دهد که به راحتی لیست های طولانی دسته های خسته کننده WooCommerce را تغییر دهید و آنها را با سطوح مختلف زیرمجموعه در منوی آکاردئون جایگزین کنید.

ویژگی های اصلی آن عبارتند از: امکان فعال سازی آن و سرانجام اینکه به طور خودکار کار کند (نیازی به پارامتر نیست!) ، پشتیبانی از چندین سطح دسته (دسته ها ، زیر مجموعه ها و غیره) ، برجسته سازی دسته فعال ، باز کردن همه دسته های اصلی در صورت وجود گروه فعلی ، سازگاری با هر یک از این دسته ها موضوع WooCommerce، پاسخگو به آرزو ، به روز رسانی رایگان و پشتیبانی بسیار فعال مشتری

دانلود | نسخه ی نمایشی | میزبانی وب

3. WavePlayer

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

همچنین می تواند برای اهداف پادکست استفاده شود و ویژگی های دیگری مانند: پشتیبانی از HTML5 ، طرح پاسخگو ، ادغام ووکامرس و غیره را ارائه می دهد.

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

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

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

• نحوه فشرده سازی و تغییر اندازه تصاویر در وردپرس
• نحوه دریافت آدرس ایمیل با میزبانی وردپرس شما
• چگونه به تغییر نام تصاویر را بر روی یک وبلاگ وردپرس
• چگونه برای پیدا کردن لینک به صفحه ورود وردپرس

نتیجه

اینجا ! این برای این آموزش است ، امیدواریم به شما کمک کند CSS سفارشی را به صورت رایگان به Elementor اضافه کنید. دریغ نکنید با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید. 

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

اگر پیشنهادی یا اظهار نظر دارید ، آنها را در بخش ما بگذارید نظر.

...