نحوه ایجاد پوشش و شناور Flipbox در وردپرس

آیا می خواهید پوشش های flipbox و جلوه های شناور تصویر را به سایت وردپرس خود اضافه کنید؟

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

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

نحوه ایجاد پوشش و شناور flipbox در وردپرس

Flipbox چیست؟

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

انیمیشن نمایشی Flipbox

این اصطلاح از ویژگی منحصر به فرد “تلنگر” ناشی می شود که وقتی موشواره روی تصویر می رود. شما می توانید نحوه تلنگر تصویر ، همراه با اطلاعات و طراحی هر دو طرف تصویر را کنترل کنید.

اگر وب سایت شما نسبتاً ثابت است ، می توانید از جلوه flipbox برای تعامل بیشتر آن استفاده کنید.

به عنوان مثال ، می توانید یک flipbox شناور تصویر را به یک صفحه قیمت گذاری محصول اضافه کنید. به این ترتیب وقتی کاربران بالای سطوح قیمت گذاری شما معلق می شوند ، قیمت نشان داده می شود.

یا، اگر شما یک فریلنسر هستید، می توانید آرم شرکتی را که با آن کار کرده اید اضافه کنید و به هر پروژه پیوند دهید.

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

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

گفته شد ، بیایید نگاهی بیندازیم که چگونه می توانید پوشش های flipbox و جلوه های شناور تصویر را به خود اضافه کنید وبلاگ وردپرس یا وب سایت

نحوه ایجاد پوشش های Flipbox و جلوه های شناور در وردپرس

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

با این حال ، رویکردی که ما توصیه می کنیم استفاده از Flipbox – عکسهای عالی Flip Boxes با تصویر پلاگین این پلاگین انعطاف پذیر بوده و استفاده از آن آسان است. این بهترین افزونه flipbox و hover image وردپرس است.

نسخه رایگان این افزونه سرعت و سادگی را به شما ارائه می دهد. پس از نصب افزونه ، می توانید به سرعت فلیپ باکس های زیبا را به سایت خود اضافه کنید.

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

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

اولین کاری که باید انجام دهید نصب و فعال سازی آن است Flipbox – عکسهای عالی Flip Boxes با تصویر پلاگین برای جزئیات بیشتر ، به راهنمای گام به گام ما مراجعه کنید نحوه نصب افزونه وردپرس.

پس از نصب و فعال سازی افزونه ، می توانید با رفتن به اولین flipbox خود را ایجاد کنید Flip Box »ایجاد جدید.

یک flipbox جدید ایجاد کنید

این کل انتخاب الگوها را نشان می دهد.

اگر این موارد کافی نیست ، می توانید بر روی گزینه “وارد کردن الگوها” کلیک کنید تا الگوهای بیشتری را که می توانید استفاده کنید.

الگوی flipbox را وارد کنید

با نسخه رایگان این افزونه ، ۵ الگوی مختلف برای انتخاب وجود دارد ، به علاوه ۱۰ الگوی دیگری که می توانید وارد کنید.

برای وارد کردن یک الگوی قابل تنظیم جدید ، روی دکمه “وارد کردن” در کنار شماره سبک کلیک کنید.

Flipbox روی دکمه وارد کردن کلیک کنید

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

برای بارگیری اولین طرح flipbox ، باید روی “ایجاد سبک” کلیک کنید.

با این کار یک منوی بازشو ظاهر می شود که در آن می توانید flipbox خود را نامگذاری کنید و انتخاب کنید که کدام طرح می خواهد سفارشی شود.

Flipbox را برای شخصی سازی انتخاب کنید

گزینه های “چیدمان” ۱ ، ۲ ، ۳ با جعبه های مختلف در طرح مطابقت دارند. پس از انتخاب خود ، “ذخیره” را کلیک کنید.

ذکر این نکته مهم است که طراحی نهایی شما با الگوی flipbox مطابقت زیادی دارد ، بنابراین بهتر است الگویی را انتخاب کنید که شبیه آنچه می خواهید در وب سایت شما باشد.

سه زبانه اصلی وجود دارد که برای تغییر شکل flipbox خود ، “عمومی” ، “جلو” و “بازگشت” استفاده می کنید.

منوی تنظیمات کلی Flipbox

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

بعد ، متن را در دو طرف flipbox تغییر خواهیم داد.

بالای flipbox در پایین صفحه بروید و روی “ویرایش” کلیک کنید.

Flipbox پیش نمایش متن را ویرایش می کند

با این کار یک پنجره بازشو ظاهر می شود که به شما امکان می دهد متن جلوی ، متن پشت و تصویر پس زمینه را تغییر دهید.

برای تغییر عنوان ، اگر می خواهید نماد دیگری نمایش داده شود ، کادر متن “Front Title” و جعبه “Font Icon:” را ویرایش کنید.

عنوان و نماد جلویی flipbox را تغییر دهید

اگر می خواهید یک تصویر پس زمینه اضافه کنید ، سپس روی “بارگذاری تصویر” در سمت راست گزینه “تصویر جلویی” کلیک کنید.

بعد ، یک تصویر جدید بارگذاری کنید یا یک تصویر را از کتابخانه رسانه موجود خود انتخاب کنید.

تصویر پس زمینه جلو را برای flipbox بارگذاری کنید

پس از آن ، همان مراحل مراحل پشت flipbox را در بخش “تنظیمات Backend” دنبال خواهید کرد.

در اینجا می توانید عنوان و متنی را که هنگام ورق زدن کارت نمایش داده می شود تغییر دهید.

متن Flipbox را تغییر دهید

همچنین می توانید قسمتهای “متن دکمه Backend” و “Link” را تغییر دهید.

اینها متن دکمه و اینکه کاربران شما با کلیک روی آن به کجا خواهند رفت تغییر می دهند.

دکمه و پیوند Flipbox را اضافه کنید

در آخر ، روی “بارگذاری اکنون” کلیک کنید تا تصویر پس زمینه پشت flipbox تغییر کند.

همانند بالا ، می توانید تصویری را بارگذاری کنید یا از کتابخانه رسانه خود یکی را انتخاب کنید.

تصویر پس زمینه باطن را بارگذاری کنید

پس از اتمام ویرایش ، برای ذخیره تغییرات ، حتماً روی دکمه “ارسال” کلیک کنید.

مشاهده خواهید کرد که تغییرات جدید شما بلافاصله در پنجره “پیش نمایش” نشان داده می شوند.

اگر می خواهید یک ردیف کامل از جعبه های متحرک ایجاد کنید ، سپس روی نماد ‘+’ در جعبه متا ‘Add New Flip Boxes’ کلیک کنید.

یک ردیف flipbox اضافه کنید

با این کار یک جعبه پاپ آپ مشابه جعبه فوق ظاهر می شود که به شما امکان می دهد فلیپ باکس دوم خود را سفارشی کنید.

در حال حاضر شما flipbox های خود را ایجاد و سفارشی کرده اید ، بنابراین وقت آن است که آنها را به موارد خود اضافه کنید سایت وردپرس.

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

کپی کوتاه از flipbox

بعد ، به a بروید صفحه یا پست جایی که می خواهید flipbox را اضافه کرده و کد کوتاه خود را جایگذاری کنید.

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

چسباندن کد کوتاه flipbox

flipbox های جدید شما اکنون در سایت شما فعال خواهند بود.

توجه داشته باشید که همانطور که پنجره مرورگر خود را تغییر اندازه می دهید ، جعبه های متحرک از آنجا که ۱۰۰٪ پاسخگو هستند تنظیم می شوند.

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

این افزونه همچنین شامل یک flipbox نیز می باشد ویجت که می توانید به هر منطقه ویجت پشتیبانی شده توسط طرح زمینه خود اضافه کنید.

برای انجام این کار به ظاهر »ابزارک ها ویجت با عنوان ‘Flipbox – Awesomes Flip Boxes Image Overlay’ را پیدا کنید.

ابزارک flipbox را اضافه کنید

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

در آخر ، شناسه سبک را که می توانید در فهرست اصلی افزونه Flipbox پیدا کنید ، وارد کنید و “ذخیره” را کلیک کنید.

شناسه ابزارک Flipbox

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

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

پست نحوه ایجاد پوشش و شناور Flipbox در وردپرس اولین بار در ظاهر شد WPBeginner.




منبع محتوا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یک × دو =