دانلود جدید ترین ورژن :

ساخت‌فلیپ‌ باکس‌ با‌ افزونه

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

در خدمت شما هستیم با اموزش کار با افزونه وردپرسی codelights-shortcodes-and-widgets که یکی از افزونه های حرفه ای در زمینه ساخت فلیپ باکس میباشد .در ادامه با ما همراه باشید تا به بررسی این پلاگین حرفه ای در زمینه فلیپ باکس بپردازیم .

 

طریقه نصب این پلاگین:

برای نصب این افزونه و ساخت فلیپ باکس ها یا همان جعبه های واکنشی  از قسمت افزونه ها > افزودن افزونه را کلیک کنید تا به آدرس wp-admin/plugin-install.php بروید در این قسمت مطابق عکس زیر دکمه بارگذاری افزونه را کلیک کنید.

 

نصب codelights-shortcodes-and-widgets

 

سپس در صفحه جدید بر روی choose file کلیک کنید .

 

بازگذاری افزونه وردپرس

 

تا در مسیر اصلی کامپیوتر خود بتوانید فایل مورد نظر خود را پیدا کنید میتوانید از طریق عکس زیر عمل کنید.

 

codelights-shortcodes

 

پس از نصب و فعال سازی افزونه به قسمت نوشته ها و برگه ها در قسمت نوشتاری علامتی آبی رنگ اضافه خواهد شد مطابق انچه که در زیر میتوانید مشاهده کنید . پس از فعال سازی افزونه codelights-shortcodes شش قابلیت برای شما فعال میشود که مطابق شکل ها برای شما توضیح خواهیم داد تا هیچ مشکلی برای شما پیش نیاید و از تمام قابلیت های این افزونه حداکثر استفاده را ببرید.

 

قابلیت های codelights-shortcodes

 

این ۶ قابلیتی که افزونه codelights-shortcodes  در اختیار شما قرار میدهد به شرح زیر میباشد سعی میکنیم هر کدام را به صورت جداگانه آموزش دهیم تا شما بهتر بتوانید با آن کار کنید و این راحتی منجر به خلاقیت شما میشود .

 

اولین قابیلت افزونهcodelights-shortcodes

 

قابلیت های افزونه codelights-shortcodes :

 

اولین قابلیت افزونه codelights-shortcodes: فلیپ باکس شما میتوانید با این قابلیت باکس ها یا جعبه های واکنشی درست کنید و خدمات و آموزش ها و دسته های مختلفی از کار های متفاوت را با ان انجام دهید. بر روی آن کلیک کنید تا صفحه ای مطابق شکل زیر برای شما فعال شود.

 

قابلیت های افزونه وردپرسی

 

 تب General

شما میتوانید حالت نمایش و …… را مدیریت کنید با ما باشید تا بررسی کنیم هر کدام از قسمت های افزونه codelights-shortcodes:

 

در قسمت Link : شما ۳ گزینه دارید که هر کدام کاری را برای شما انجام میدهد . اولین گزینه None میباشد به معنی این که من نمیخوام به جایی لینک بدهم. گزینه بعدی add link ti the whole flipBox میباشد که به معنی این است که من میخوام موقع رفتن لینک بر بروی این فیلیپ باکس به جایی که من تایین میکنم برو که وقتی این قابلیت را فعال کنید در زیر این منوی کشویی یک گزینه تحت عنوان Link URL اضافه میشود که میتوان مسیر را مشخص کرد گزینه بعدی در قسمت link به نام add link as a button on the back side میباشد که بعد از انتخاب این چند گزینه جدید به اضافه میشود .

 

امکانات بیشتر 

اولین گزینه link URL میباشد که مسیر این را باید مشخص کینم.

 Button Label : که به صورت پیش فرض READ MORE میباشد که باید نامی برای دکمه خودمان انتخاب کنیم و این نامی میباشد که در سایت نمایش داده میشود.

 Button Background Color : که باید رنگ بگراند این دکمه را مشخص کنید.

 Button Text Color : که باید رنگ متن نمایش داده شده در دکمه را مشخص کنید.

 

نمایش کارتی و مکعبی فلیپ باکس

بعد از مشخص کردن شرایط مختلف در قسمت لینک به سراق قسمت Animation Type میرویم در این قسمت نوع نمایش این فیلپ باکس را مشخص میکنیدکه به چه صورتی نمایش داده شود مثلا به صورت کارتی نمایش داده شود یا به صورت مکعبی حالت های مختلفی دارد که این سلیقه شما را در بر میگیرد که به چه شکل میخواهید نمایش داده شود.

 

جهت گیری انیمیشن و مدت زمان اجرا

 

Animation Direction : که جهت گیری انیمیشن را مشخص میکند که از چه سمتی اجرا شود. (راست ، چپ ،بالا،پایین)

Animation Duration : به معنی مدت زمان اجرا میباشد که میتوانید از ۱۰۰ تا هر عددی که مد نظر شما بود انتخاب شود هر ۱۰۰ واحدی به معنی یک ثانیه میباشد.

 Animation Easing : به معنی سبک اجرای این فیلیپ باکس است که در حالت های مختلف قابل تنطیم میباشد.

 

دوستان نکته ای که بسیار مهم میباشد این است که حتما با یک سری پیش فرض ها اجرا کنید و بعدا با تغییر دادن های متخلف میتوانید تاثیر هر کدام را مشاهده کنید.

 

تب بعدی Front Side

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

https://fontawesome.com/icons?from=io

Icon Size : باید سایر نمایش این ایکن را بنویسید.
Icon Style : نوع نمایش این ایکن را مشخص کنید که به چه صورت هایی باشد(دایره ای ، پیش فرض و یا …..).
Icon Color : رنگ ایکن را مشخص میکنید.
Icon Background Color : رنگ پس زمینه این ایکن را باید مشخص کرد.

 

و اما اگر مایل به نمایش دادن آیکن نبودید و قصد وارد کردن عکس را داشتید از قسمت آیکن بر روی گزینه custom image کلیک کنید تا صفحه مقابل نمایش داده شود.

 

فلیپ باکس

 

 

تنظیمات عکس 

Image : عکس مورد نظر خود را انتخاب کرده و در این قسمت بگذارید.
Image Width : عرض عکس را مشخص میکنید.
Title : عنوان فیلپ باکس خود را مشخص میکنید.
Title Size : اندازه و سایر تایتل یا عنوان خود را مشخص کنید.
Description : توضیحاتی که قصد نوشتن آن را دارید مشخص کنید.
Elements Order : مشخص کنید آیا میخواهید آیکن ، عنوان ، و توضیحات باهم نمایش داده شوند و یا متفاوت باشند که خودتان آن را مشخص میکنید.
Background Color : رنگی برای قسمت نمایش اولیه فلیپ باکس مشخص میکنید.
Text Color : رنگی برای نمایش متن های درون فلیپ باکس.
Background Image : اگر قصد گذاشتن عکس را دارید به جای رنگ برای بکگراند از این قسمت میتوانید اقدام کنید.
Image Size : اندازه عکس را مشخص کنید.

احسنت به شما تا این لحظه ۲ تا از سربرگ های افزونه حرفه ای codelights-shortcodes را بررسی کردیم و در این جا به سراغ تب بعدی میرویم.

 

تب Back Side

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

 

آموزش فلیپ باکس

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

Title : عنوان خود را وارد نمایید
Title Size : اندازه عنوان را مشخص میکنید
Description : توضیحاتی که درباره عنوان قرار است بنویسید
Elements Order : نوع نمایش توضیحات ، عنوان ، و ……..
Background Color : رنگ برگراند این فلیپ باکس
Text Color : رنگ متن

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

 

امکانات استایل 

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

 

سربزپ استایل فلیپ باکس

 

در این سربرگ عرض و ارتفاع آن را مشخص میکنید و در صورتی که میخواهید محتویات فلیپ باکس به صورت عمودی نمایش داده شود گزینه Center the content vertically را کلیک کنید در قسمت های بعد هم اگر قصد دادن بوردر دارید به آن عدد مورد نظر را داده و رنگ آن را نیز مشخص میکنید پدینگ یا فاصله ی مد نظر خود را هم با درصد مشخص کنید تا کار ما در این قسمت کامل شود و خروجی ما به صورت زیر نمایش داده شود.

 

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

این عکس در حال چرخش فیلپ باکس ما میباشد که اگر بخواهیم بهتر نمایش دهیم تا شما مشاهده کنید به عکس های زیر توجه کنید (به این موضوع توجه کنید که این قابلیت های بیشترین خروجی را با سلیقه شما میدهد این قسمت صرفا آموزش بیش نبود)

 

فلیپ باگس چیست

فلیپ باکس

 

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

 

موفق باشید

کارسازشو

پیشنهاد سایر دانلود ها :