آیا می خواهید یک جعبه ویژگی با نمادهای زیبا در صفحه اصلی سایت وردپرس خود اضافه کنید؟ این جعبه های ویژگی ، نکات مهم فروش محصولات و خدمات شما را نشان می دهد. ثابت شده است که این یک روش بسیار جذاب در ارائه ویژگی ها به مشتریان جدید است. در این مقاله ، ما به شما نشان خواهیم داد که چگونه به راحتی جعبه ویژگی ها را با نمادها در سایت وردپرس خود اضافه کنید.
جعبه های ویژه با نمادها چیست؟ h4>
اکثر افراد هنگام مراجعه به وب سایت ها در واقع آنها را نمی خوانند. ما به عنوان انسان در حال تبدیل شدن به اسکنرهای حرفه ای هستیم.
این بدان معناست که شما به عنوان یک صاحب مشاغل ، باید اطلاعات مهم را در قالب آسان قابل اسکن و بسیار جذاب ارائه دهید.
به همین دلیل محبوب ترین وب سایت های تجاری معمولاً دارای یک تصویر بزرگ یا نوار لغزنده در بالا با دکمه تماس برای اقدام.
درست در زیر آن ، می توانید از یک جعبه ویژگی استفاده کنید که به شما امکان می دهد ویژگی های مهم محصول یا خدمات خود را به نمایش بگذارید. هر جعبه ویژگی می تواند دعوت به عمل خود را داشته باشد که می تواند کاربران را به یادگیری بیشتر سوق دهد.
در اینجا مثالی از وب سایت OptinMonster ما آمده است:
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
افزودن جعبه های ویژه با نمادها در صفحه اصلی وردپرس h4>
اولین کاری که باید انجام دهید نصب و فعال سازی ستون WP پیشرفته پلاگین. پس از فعال سازی ، برای پیکربندی پلاگین باید از تنظیمات »ستون های پیشرفته WP بازدید کنید.
کافی است به پایین به گزینه ‘Column class بروید و mycolumns را در کنار آن وارد کنید. فراموش نکنید که برای ذخیره تنظیمات خود ، روی دکمه ذخیره تغییرات کلیک کنید.
بعد ، به یک پلاگین برای قرار دادن نمادهای SVG زیبا در جعبه ویژگی های خود نیاز دارید. WP SVG Icon را نصب و فعال کنید a> plugin.
اکنون آماده ایجاد کادرهای ویژگی خود هستید.
با ویرایش صفحه ای که می خواهید کادرهای ویژگی را به آن اضافه کنید شروع کنید.
در صفحه ویرایشگر پست متوجه دو دکمه جدید خواهید شد. اولین مورد دکمه Add Icon است که درست بالای ویرایشگر قرار دارد. دکمه دوم به عنوان آخرین مورد در منوی ویرایشگر بصری قرار دارد.
اگر ویرایشگر تصویری فقط یک ردیف از دکمه ها را نشان می دهد ، سپس برای گسترش آن باید روی دکمه نوار ابزار ضامن کلیک کنید.
ابتدا باید روی دکمه Advanced WP Columns کلیک کنید. با این کار یک پنجره بازشو ظاهر می شود که باید روی خالی کلیک کنید و سپس تعداد ستون هایی را که می خواهید اضافه کنید انتخاب کنید.
بعد از آن باید روی هر ستون کلیک کنید تا متن اضافه شود. اگر اکنون متنی اضافه نکنید ، دیدن ستون ها در ویرایشگر پست دشوار است. پس از پایان کار بر روی دکمه افزودن ستون ها در پایین کلیک کنید.
اکنون ستون ها را در ویرایشگر پست خود مشاهده خواهید کرد. مرحله بعدی اضافه کردن نمادها در بالای متن است.
موس را به ابتدای قسمت متن در ستون اول ببرید و روی دکمه enter کلیک کنید. با این کار متن به پایین منتقل می شود و فضای درج آیکون های شما فراهم می شود.
اکنون باید بر روی دکمه Add icon کلیک کنید ، که یک پنجره زیبا مانند این ظاهر می شود:
از آنجا می توانید نمادی را که می خواهید استفاده کنید با کلیک بر روی آن انتخاب کنید. بعد ، باید روی دکمه span کلیک کنید ، بنابراین نماد شما درون عنصر قرار دارد.
در آخر ، روی دکمه insert کلیک کنید. اکنون کد کوتاه برای نماد SVG در ویرایشگر پست خود را مشاهده خواهید کرد. بسته به نام آیکونی که انتخاب کرده اید ، چیزی شبیه به این خواهد بود:
[wp-svg-icons icon = "rocket" wrap = "span"]
فرآیند را تکرار کنید تا نمادها در جعبه های ویژگی دیگر نیز اضافه شوند.
پس از پایان کار ، کافیست بر روی دکمه بروزرسانی کلیک کنید تا صفحه خود ذخیره شود.
کار شما تقریباً تمام است ، اما اگر صفحه خود را پیش نمایش کنید ، متوجه می شوید که آیکون ها خیلی کوچک هستند و جعبه های ویژگی های شما به سختی قابل مشاهده هستند.
برای حل این مشکل باید کمی CSS اضافه کنید. نگران نباشید ، این قطعه CSS را به موضوع خود اضافه کنید یا تم کودک ایجاد کنید.
span.wp-svg-rocket.rocket {
اندازه قلم: 100px؛
}
span.wp-svg-cloud.cloud {
اندازه قلم: 100px؛
}
span.wp-svg-headphones.headphones {
اندازه قلم: 100px؛
}
.mycolumns {
حاشیه: 1px solid #eee؛
حداقل ارتفاع: 250 پیکسل
padding-top: 20px! مهم؛
}
فراموش نکنید که CSS را متناسب با نام نمادهای مورد استفاده خود تنظیم کنید.
امیدواریم این مقاله به شما کمک کند تا یک بخش جعبه ویژگی های زیبا را در صفحه اصلی خود اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در 5 بهترین صفحه ساز وردپرس کشیدن و رها کردن زیرا بسیاری از صفحه سازان این ویژگی جعبه ویژگی را در خود دارند.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-add-feature-boxes-with-icons-in-wordpress/.