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

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

بیشتر بخوانید:

8 گام تا ویرایش حرفه ای تصاویر سایت

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

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

اضافه کردن آیکون با متن در وردپرس

اولین قدم برای افزودن نمادها با متن در وردپرس با استفاده از افزونه Qi Addons for Elementor، بارگیری و نصب Elementor است. به عنوان یکی از برجسته ترین سازندگان صفحه در جهان، ممکن است آن را داشته باشید، اما اگر ندارید، به سادگی آن را بارگیری و فعال کنید.

بیشتر بخوانید:

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

گام بعدی این است که Qi Addons for Elementor را بارگیری و فعال کنید. می توانید این کار را با رفتن به افزونه ها> افزودن جدید، جستجوی آن و نصب و فعال سازی آن پس از مشاهده نتایج آن انجام دهید.

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

بیشتر بخوانید:

حملات اسکیوال اینجکشن در وردپرس

ویرایش محتوای آیکون با متن در وردپرس

بخش محتوا در گزینه افزونه دارای برگه های زیادی است، اما نگران نباشید – این بدان معناست که می توانید طرح خود را با جزئیات دقیق سفارشی کنید. اولین برگه، General، جایی است که برای انتخاب طرح آیکون و متن باید به آن بروید، اگر می خواهید پیوندی به آیکون و برخی از گزینه های مربوطه را انتخاب کنید در همین مکان دنبال آن بگردید.

بیشتر بخوانید:

ابزار دیس اوو را چه زمانی بکار ببریم؟ چگونه لینک اسپم را disavow کنیم؟

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

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

بیشتر بخوانید:

آموزش گرفتن فول بکاپ از سی پنل

عنوانی که به این آیکون و ترکیب متن داده ایم “Limitless option” بود. ما متن را به “Hundreds of fonts to choose from and options to use custom icons or SVGs” تغییر داده ایم.

زبانه های Button and Button Icon جایی هستند که می توانید انتخاب کنید که دکمه شما چگونه به نظر می رسد، چقدر باید بزرگ باشد، آیا باید دارای آیکون باشدآیکون باید کجا قرار داشته باشد و به کدام پیوند باید اشاره کند.

جالب ترین گزینه در این دو برگه گزینه Button Text در برگه Button است. با پاک کردن متن، می توانید دکمه را به طور کامل حذف کنید. ما هم همینطور عمل کردیم.

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

بیشتر بخوانید:

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

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

یکپارچه سازی نماد با متن

هنگام تنظیم حالت آیکون با متن، برگه Style اولین موردی است که ظاهر می شود. گزینه هایی که در آنجا پیدا خواهید کرد به شما امکان می دهد برچسب عنوان، رنگ معمولی عنوان و رنگ در حالت شناور، و همچنین گزینه های تایپوگرافی عنوان مانند فونت، اندازه و وزن را انتخاب کنید. برای متن، می توانید رنگ و گزینه تایپوگرافی را انتخاب کنید.

بیشتر بخوانید:

ثبت سایت وردپرسی در سرچ کنسول گوگل (Google Search Console)

ما حداقل تغییرات را در پیش فرض های اینجا ایجاد کرده ایم. برای مثال تگ عنوان را به H5، رنگ عنوان را با کد #000000 به سیاه تغییر دادیم و سایز عنوان را 21 پیکسل قرار دادیم.

در برگه Spacing Style، همه چیز در مورد تنظیم حاشیه قرار دارد. شما می توانید حاشیه بالای عنوان، حاشیه بالای متن، حاشیه اطراف نماد و در صورت داشتن دکمه، حاشیه بالای دکمه را انتخاب کنید.

بیشتر بخوانید:

هک سایت وردپرسی | 5 دلیل که وردپرس هک می شود

ما مجدداً با تغییر حاشیه عنوان روی 22 پیکسل، حداقل تغییر را انتخاب کردیم.

در برگه Icon Style، گزینه هایی که مشاهده می کنید بسیار متفاوت است که آیا می خواهید نماد خود را در یک جعبه قرار دهید یا نه. اگر این کار را انجام دهید، می توانید انواع مختلفی را برای شکل، اندازه و رنگ جعبه انتخاب کنید. اگر این کار را نکنید، به گزینه هایی که با خود نماد سروکار دارند محدود می شوید – اندازه، رنگ و تصویر متحرک شناور.

ما از قرار دادن نماد خود در جعبه خودداری کرده ایم. اندازه آیکون خود را به 60 پیکسل و رنگ آن را به #ececec تغییر دادیم. هنگام حرکت موس روی آن، یک حرکت عمودی جزئی به آن دادیم.

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

بیشتر بخوانید:

افزونه افزایش سرعت وردپرس | بهترین افزونه‌ ها برای افزایش سرعت در وردپرس

قدم نهایی

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

برای تکرار طرح، روی آن راست کلیک کرده، گزینه های تکراری را انتخاب کرده و یکبار دیگر آن را انجام دادیم. Elementor این موارد تکراری را در زیر مجموعه اصلی قرار می دهد – به سادگی آنها را به ستون های خود بکشید.

باقی مانده کار این است که نمادها، عنوانها و متن را تغییر دهید.

سخن آخر

با تشکر از Qi Addons for Elementor، افزودن طرح های جالب و مفید به وب سایت شما، مانند نماد یا آیکون با متن، می تواند آسان و جالب باشد. گزینه های متنوعی وجود دارد که می توانید انتخاب کنید – بسیار بیشتر از گزینه هایی که ما در این مقاله بررسی کرده ایم، و می توانید با خیال راحت همه آنها را کاوش کرده و بهترین ترکیب عناصر این افزونه را پیدا کنید.

منبع:

https://qodeinteractive.com/magazine/how-to-add-icon-with-text-in-wordpress/

وبلاگ