كيفية استخدام الأزرار والأيقونات في مدونات سيو بلس باحترافية

استخدام الأزرار والأيقونات بفعالية

في عالم الديجيتال والويب المتطور، تعتبر الأيقونات أو ICONS سلاحاً فعّالاً لتحسين تجربة المستخدم وزيادة تفاعله مع المواقع الإلكترونية. تستخدم الأيقونات كرموز بصرية تستخدم لتمثيل مهام، برامج، خصائص أو مفاهيم معينة في المواقع الإلكترونية.

استخدام الأيقونات في المواقع له العديد من المميزات، مثل تحسين جمالية التصميم، وجذب انتباه المستخدم، وتبسيط الواجهة، وتقليل المساحة، وزيادة قابلية الاستخدام، وتحسين أداء الموقع. في هذا المقال، سنشرح كيف يمكن استخدام الأيقونات بشكل فعال في المواقع، وما هي أفضل المصادر للحصول على أيقونات مجانية ومتجهة SVG، وكيف يمكن تحسين تصميم المواقع باستخدام قالب SEO PLUS الذي يدعم الأيقونات بشكل ممتاز ويعزز تجربة التصفح ويسهم في زيادة معدل التفاعل.

في هذا المقال، سنتعرف بشكل مفصل كيف يمكن للاستفادة من ميزات الأيقونات في قالب SEO PLUS والتي تعتبر أحد أهم العوامل التي يمكن أن تعزز تجربة الإستخدام في الموقع.
سنتعرف على كيفية توليد أكواد الأزرار واستخدامها في قالب سيو بلس.
كما سنتعرف أيضا على طريقة استخدام الأيقونات داخل الأزرار أو تضمينها في اي مكان مع اضافة الروابط في قالب سيو بلس والتي لم يتم شرحها من قبل.

يمكن استخدام هذه الطريقة لإنشاء زر بإطار وخلفية ملونة أو شفافة، مع أو بدون أيقونة.

كيفية استخدام الأزرار في قالب SEO PLUS

يوفر قالب SEO PLUS إمكانية استخدام الأزرار في المقالات لتوجيه الزوار إلى صفحات أخرى أو مواقع ويب أخرى أو لإجراء عمليات معينة.

لإنشاء زر باستخدام طريقة توليد الأكواد، يمكنك أولاً زيارة صفحة توليد أكواد الأزرار من موقع SeoPlus
سيؤدي هذا إلى فتح صفحة لتوليد أكواد الأزرار العادية:

قم بالنزول إلى اسفل الصفحة ستجد فيديو لشرح الأكواد المختصره في القالب فوق الفيديو مباشرة يمكنك توليد اكواد الأزرار من خلال اداة الأكواد المصغرة.
في القائمة المنسدلة قم باختيار مولد أكواد الأزرار لإنشاء أكواد الأزرار

• لإنشاء زر مع إطار وخلفية ملونة: أدخل عنوان الرابط الذي تريد توجيه الزوار إليه في حقل "عنوان الرابط" ثم قم باختيار شكل الزر 1 ثم أنقر على توليد لتوليد الكود.

• لإنشاء زر مع إطار وخلفية شفافة: أدخل عنوان الرابط الذي تريد توجيه الزوار إليه في حقل "عنوان الرابط" ثم قم باختيار شكل الزر 2 ثم أنقر على توليد لتوليد الكود.

• لإنشاء زر مع إطار وأيقونة: أدخل عنوان الرابط الذي تريد توجيه الزوار إليه في حقل "عنوان الرابط" ثم  اكتب اسم الأيقونة التي تريد استعمالها وقم باختيار شكل الزر ثم أنقر على توليد لتوليد الكود.

بمجرد إدخال جميع المعلومات المطلوبة، انقر فوق الزر "إنشاء". سيؤدي هذا إلى إنشاء كود HTML الذي يمكنك استخدامه في مقالتك عبر إضافة رابط للنص في محرر المقالات.

معاينة الأزرار: الزر الملون الزر الشفاف  

في هذه الأمثلة، تم استخدام زر لتوجيه الزوار إلى العنوان "#" عند النقر فوق الزر.

يمكنك نسخ الكود ووضعه كرابط لنص داخر محرر المقالات، يمكنك استخدام اي رابط من إختيارك عبر تغيير الرمز #

كود الزر الملون:

{"SHLink":"b1","SHUrl":"#" }

كود الزر الشفاف:

{"SHLink":"b2","SHUrl":"#" }

يتم توليد لون الزر من خلال الون الرئيسي في المدونة لديك.

يمكنك أيضا إستخدام الأكواد التالية في محرر html لإستعمال هذه الأزرار بنفس الطريقة

<a class="button" href="#">الزر الملون</a>

<a class="button ln" href="#">الزر الشفاف</a>

كيفية تضمين الأيقونات داخل الأزرار

يوفر قالب سيو بلس امكانية استخدام الأيقونات إلا ان فريق الدعم لم يقم بشرح طريقة استخدام هذه الأيقونات واكتفى بشرح توليد الأزرار فقط وبعد مجهود استطعنا أخيرا ان نتعرف على كيفية استخدام وإدراج هذه الأيقونات في أي مكان نحب.

بل يمكننا ايضا اتخدام وانشاء وتصميم ايقونات جديدة وتضمينها في الموقع دون الحاجة لدفع أي مبلغ للمواقع التي تقدم خدمة ادراج الأيقونات في موقعك.

يتضمن الصندوق التالي جميع أسماء الأيقونات الموجودة مسبقا في قالب مدونات سيو بلس ويمكنك استخدامها في المدونة:

ic-settings
ic-clock
ic-facebook
ic-paypal
ic-linkedin
ic-twitter
ic-telegram
ic-moon-sun
ic-alt-share
ic-share
ic-home
ic-menu
ic-top
ic-line
ic-tumblr
ic-youtube
ic-whatsapp
ic-pinterest
ic-email
ic-tag
ic-search
ic-flickr
ic-blogger
ic-wordpress
ic-blog
ic-skype
ic-instagram
ic-google-play
ic-reddit
ic-google-news
ic-tiktok
ic-discord
ic-quora
ic-arrow
ic-print
ic-sitemap
ic-article

بمجرد معرفة رمز الأيقونة التي تريد استخدامها، يمكنك إنشاء الزر مع استخدام الأيقونة من خلال كتابة رمز الأيقونة في أداة توليد الأكواد.

مثال ادراج أيقونة واتساب على زر شفاف:

{"SHLink":"b2","SHUrl":"https://cutt.ly/wa-digitaneo" ,"SHIcon":"ic-whatsapp"}

وهذا مثال حي على شكل الزر مع الأيقونة: تواصل معنا عبر واتساب

في هذا المثال، يتم استخدام رمز الأيقونة "ic-whatsapp" لإنشاء زر بإطار خلفية  شفافة. يتم توجيه الزوار إلى عنوان "https://cutt.ly/wa-digitaneo" عند النقر فوق الزر.

قم نسخ الكود ووضعه كرابط لنص داخر محرر المقالات، يمكنك استخدام اي رابط وأيقونة من إختيارك في قائمة الإيقونات أعلاه، يمكنك إضافة لون لخلفية الزر عبر تغيير "b2" الى "b1" أو استخدام ايقونة اخرى عبر تغيير رمز الأيقونة: "ic-whatsapp"

كيفية استخدام الأيقونات بطرق احترافية في المدونة

فيما يلي بعض الطرق المختلفة التي يمكنك بها استخدام واستغلال الأيقونات في مدونتك:

لنفترض أنك تريد استعمال أيقونة الواتساب في مقالة أو صفحة معينة دون زر أو إطار

لطلب ادراج أيقونة الواتساب بدون إطار أو  رابط أو تنسيق:

أكواد HTML

<use xlink:href="#ic-whatsapp"></use>

لطلب ادراج أيقونة الواتساب مع التنسيق:

أكواد HTML

<svg width="25" height="25" fill="#00db5f"><use xlink:href="#ic-whatsapp"></use></svg>

لطلب ادراج أيقونة الواتساب مع الزر والتنسيق:

أكواد HTML

<p>هنا نص</p>
<p>للمزيد من المعلومات، تواصل معنا عبر <a href="#">
    <svg fill="#00eb17" height="30" width="30">
        <use xlink:href="#ic-whatsapp"></use>
    </svg>
    واتساب
</a> يمكنك أيضا التواصل معنا عبر</p>

وهذا مثال حي على شكل الأيقونة: للمزيد من المعلومات، تواصل معنا عبر واتساب أو عبر..

قم بنسخ الكود ولصقه في محرر المقالات وهكذا يمكنك ادراج أيقونة الوانساب في المدونة بالطريقة التي تناسبك، بحيث يمكنك تغيير حجم الأيقونة ولونها وإضافة رابط لها. كذلك الأمر مع باقي الأيقونات. قم بتغيير رابط الواتساب الذي هو "#" في هذا المثال، يُرجى استخدام الرمز بحذر.

كيفية استخدام ايقونات غير موجودة في قالب SeoPlus

لإستخدام ايقونات أخرى غير الأيقونات الموجودة مسبقا في قالب سيو بلس مثل أيقونة التحميل والشراء وغيرها، يجب العلم أولا أن القالب كغيره من القوالب يستعمل الأيقونات بتنسيق وامتداد SVG. ولإستخدام ايقونات مخصصة بهذا النوع في قالب سيو بلس هناك طريقتين مختلفتين لذلك:

1- تصميم الأيقونات باستخدام برنامج Adobe Illustrator:
يعد برنامج Adobe Illustrator أحد أفضل برامج التصميم الجرافيكي لإنشاء أيقونات SVG. بعد إنشاء الأيقونة، يمكنك اتباع الخطوات التالية لاستخراج كود SVG:

• افتح الأيقونة في برنامج Illustrator.
• انقر فوق علامة التبويب Window، ثم انقر فوق Document Setup.
• في مربع الحوار Document Setup، تأكد من تحديد الخيار SVG من قائمة File Format.
• انقر فوق Save.

سيؤدي ذلك إلى حفظ الأيقونة كملف SVG. يمكنك فتح ملف SVG وأيضا شفرة الأيقونة عبر ملف TXT.

2- تحميل الأيقونات الجاهزة واستخراج كود SVG:

هناك العديد من المواقع التي تقدم أيقونات SVG مجانية أو قابلة للشراء. بعد تنزيل الأيقونة، يمكنك اتباع الخطوات التالية لاستخراج كود SVG من ملف الأيقونة:

يمكنك  تحميل مختلف الأيقونات بصيغة SVG من محرك البحث عبر كتابة اسم الايقونة وامتدادها مثلا قم البحث عن: Button Download SVG وتحميل الأيقونات الجاهزة أو استخدام موقع: fontawesome لتحميل الأيقونات وأكواد الأيقونات الجاهزة.

بعد تنزيل الملفات أو تصميمها قم بفتح ملف الأيقونة في أي محرر نصوص Notepad أو قم باستخدام موقع SVG Viewer أوeditsvgcode لإستخراج كود SVG. فهي مواقع مجانية وسهلة الاستخدام.

مثال على كود أيقونة الواتساب SVG متوافق مع قالب سيو بلس:

<symbol id='ic-whatsap' viewBox='0 0 448 512'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/</symbol>

يمكنك تجربة الكود عبر إضافته في مظهر المدونة يجب وضع رمز للأيقونة كما هو مبين في المثال التالي: ic-whatsap

كيفية إضافة أكواد svg إلى المدونة

لإضافة أكواد أيقونات جديدة في المدونة لقالب سيو بلس قم باتباع المراجل التالية:

• قم بالذهاب إلى مظهر المدونة
• ثم قم بأخذ نسخة احتياطي من القائمة المنسدلة لتفادي وقوع أي مشكلة 
• ثم اختر تعديل HTML من القائمة المنسدلة
• قم بالبحث عن الكود التالي: <b:includable id='themeIcons'>
• قم بلصق أكواد svg تحته مباشرة ثم أنقر على حفظ

قم بنسخ الكود ولصقه في محرر المقالات وهكذا يمكنك ادراج أيقونة الواتساب في المدونة. بهذه الطريقة يمكنك استخدام أي أيقونة بنفس الطريقة التي شرحنا فيها استخدام أيقونة الواتساب، كما يمكنك ايضا استخدام أكواد الأيقونات من المواقع أو عن طريق تنزيل الأيقونات واستخراج الكود أو تصميم أيقونات من إبداعك عن طريق برنامج إلستراتور أو فوتوشوب وغيرها
يرجى استخدام الأكواد بحذر مع أخذ نسخة استياطية تحسبا لأي ضرر يمكن أن يحدث لموقعك.

خاتمة

نتمنى أن نكون سلطنا الضوء في هذا المقال على أهمية استخدام الأيقونات في تحسين تجربة المستخدم على الويب، مع التركيز على فوائدها مثل تحسين التصميم وجذب الانتباه. عبر استخدام الأيقونات في قالب SEO PLUS لتحسين تجربة التصفح، مع طرق لإضافة الأزرار ودمجها وتكاملها في الموقع باستخدام أكواد مصغرة،

تعديل المقال