كيفية تضمين كود HTML في Canva

تعرّف على كيفية تضمين كود HTML في Canva من خلال إنشاء مقتطف تضمين وإضافة التصاميم إلى المواقع الإلكترونية أو المدونات. اتبع هذا الشرح السريع وأنشئ أدلة باستخدام Trupeer.

Instant AI Product Videos & Docs from Rough Screen Recordings

Get Started for Free

تم إنشاء هذا الفيديو التعليمي باستخدام Trupeer AI في أقل من 5 دقائق

يوفر هذا الدليل المرئي شرحًا تفصيليًا لعملية تضمين كود HTML باستخدام Canva. تم إنشاؤه في دقائق باستخدام Trupeer AI.

من خلال اتباع هذه الخطوات، يمكنك دمج تصاميم Canva الخاصة بك بسهولة في موقعك الإلكتروني أو منصة WordPress، مع ضمان تحديثها تلقائيًا كلما أُجريت تغييرات.

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

تضمين كود HTML:

1. استخدم ميزة Embed: يتيح لك Canva تضمين التصاميم أو النماذج التي أُنشئت في مكان آخر، مثل Google Form أو Type form، عن طريق لصق روابطها.
2. أنشئ تطبيق Canva: يمكنك استخدام Canva App SDK لإنشاء ملحقات محتوى مخصصة تستخدم HTML.

تضمين محتوى آخر:

النماذج: تضمين النماذج من خدمات مثل Google Forms أو Type form عن طريق لصق روابطها.

مقاطع الفيديو: تضمين مقاطع الفيديو من منصات مثل YouTube عن طريق لصق روابطها.

التصاميم الأخرى: يمكنك تضمين تصاميم Canva الأخرى، وسيتم تحديث التصاميم المضمنة تلقائيًا عند إجراء تغييرات على التصميم الأصلي.

دليل خطوة بخطوة: كيفية تضمين كود HTML في Canva

الخطوة 1

لتضمين كود HTML باستخدام Canva، ابدأ بتحديد التصميم الذي ترغب في استخدامه.

To embed HTML code using Canva, start by selecting the design you wish to use.

الخطوة 2

بعد اختيار تصميمك، انتقل إلى خيار Share الموجود في الزاوية العلوية اليمنى. من القائمة المنسدلة، اختر See all للوصول إلى خيارات مشاركة إضافية.

Once you've chosen your design, navigate to the Share option located at the top right corner. From the drop-down menu, select See all to access additional sharing options.

الخطوة 3

في خيارات المشاركة، ابحث عن خيار Embed وانقر عليه. سيتيح لك ذلك دمج تصميمك في أي منصة بسلاسة.

In the sharing options, locate and click on the Embed option. This will enable you to integrate your design into any platform seamlessly.

الخطوة 4

يمكنك تضمين تصميمك على منصات مختلفة، مثل WordPress أو موقعك الإلكتروني الخاص، وسيتم تحديثه تلقائيًا. انقر على Embed لإنشاء كود HTML المضمن.

You can embed your design on various platforms, such as WordPress or your own website, and it will automatically update. Click on Embed to generate the HTML embedded code.

الخطوة 5

أخيرًا، انسخ كود HTML المضمن الذي تم إنشاؤه لاستخدامه مباشرةً على موقعك الإلكتروني أو موقع WordPress. شكرًا لك!

Finally, copy the generated HTML embedded code to use directly on your website or WordPress site. Thank you!

نصائح احترافية لتضمين كود HTML في Canva

استخدم ميزة التضمين للمواقع الإلكترونية:
إذا كنت تريد تضمين موقع إلكتروني أو محتوى تفاعلي، فاستخدم ميزة التضمين في Canva. انتقل إلى Elements > Embed والصق كود HTML الخاص بك. يدعم Canva بعض عمليات التضمين الخارجية مثل خرائط Google أو منشورات وسائل التواصل الاجتماعي، لكنه لا يسمح بتضمين HTML الخام مباشرةً على لوحة التصميم.
حوّل HTML إلى صورة أو فيديو:
بالنسبة إلى محتوى HTML الثابت مثل صفحة ويب منسقة أو مقتطف كود، التقط لقطة شاشة له أو استخدم مسجل شاشة لتحويله إلى صورة أو فيديو. ثم ارفعها إلى Canva وضعها في تصميمك.
تضمين عناصر HTML باستخدام تطبيقات Canva:
يوفر Canva عمليات تكامل مع أدوات خارجية مثل YouTube أو Google Drive. بالنسبة إلى المحتوى المرتبط بـ HTML بشكل محدد (مثل مقاطع الفيديو المضمنة)، استخدم هذه التكاملات لإدراج عناصر HTML الخارجية في تصميمك.
استخدم عناصر التصميم الملائمة للكود في Canva:
إذا كنت بحاجة إلى عرض كود HTML كجزء من تصميمك (مثلًا لأغراض تعليمية)، فاكتبه يدويًا أو استخدم مربعات النص للصق الكود وتنسيقه. لا يسمح Canva بـ HTML التفاعلي، لكن يمكنك إنشاء تمثيلات مرئية له.
الربط بمحتوى HTML:
لا يمكنك تضمين HTML الخام مباشرةً في Canva، لكن يمكنك إنشاء أزرار أو روابط نصية تشير إلى محتوى خارجي قائم على HTML (مثل صفحة ويب) عن طريق إضافة رابط URL إلى أي عنصر.

الأخطاء الشائعة وكيفية تجنبها عند تضمين كود HTML في Canva

توقع تفاعلية كاملة لـ HTML:
لا يدعم Canva تضمين HTML كاملًا مع التفاعلية (مثل النماذج المضمنة أو الكود المباشر). بدلًا من ذلك، حوّل محتوى HTML إلى صورة ثابتة أو فيديو، أو استخدم تكاملات الجهات الخارجية للحصول على وظائف محدودة.
عدم تنسيق الكود للعرض:
إذا كنت تستخدم HTML لأغراض تعليمية أو عرضية، فتأكد من تنسيق الكود بشكل مرتب داخل مربعات النص لضمان الوضوح وسهولة القراءة.
محاولة استخدام HTML الخارجي في قسم العناصر في Canva:
تدعم ميزة Embed في Canva بعض المحتوى الخارجي، لكنها لا تسمح بكود HTML عشوائي. استخدم هذه الميزة لتضمين المحتوى المدعوم مثل الفيديوهات أو الخرائط، وليس الكود الخام.
تجاهل الروابط الخارجية:
بدلًا من تضمين محتوى HTML تفاعلي، استخدم الروابط لتوجيه المستخدمين إلى صفحات خارجية قائمة على HTML.
عدم اختبار الروابط المضمنة:
إذا كنت تضمّن روابط أو محتوى HTML خارجيًا، فاختبر الروابط دائمًا وتأكد من أنها توجه بشكل صحيح من تصميمك في Canva.

الأسئلة الشائعة

هل يمكنني تضمين كود HTML الخام مباشرةً في تصميم على Canva؟
لا، لا يدعم Canva تضمين كود HTML الخام. يمكنك إما تحويله إلى صورة أو فيديو، أو استخدام ميزة التضمين في Canva للمحتوى المدعوم مثل YouTube أو خرائط Google.
كيف أعرض كود HTML في Canva لأغراض تعليمية؟
يمكنك كتابة الكود يدويًا في مربعات النص أو استخدام لقطة شاشة للكود لعرضه بشكل نظيف وواضح.
هل يمكنني استخدام محتوى قائم على HTML مثل النماذج أو العناصر التفاعلية في Canva؟
لا، لا يدعم Canva عناصر HTML التفاعلية. بالنسبة للمحتوى التفاعلي، ستحتاج إلى الربط بصفحات خارجية أو استخدام أدوات أخرى.
كيف يمكنني تضمين صفحة HTML في Canva؟
على الرغم من أنك لا تستطيع تضمين كود HTML مباشرةً، يمكنك رفع لقطة شاشة لصفحة HTML أو استخدام تكاملات المحتوى الخارجي في Canva لإدخال بعض المحتوى القائم على HTML في تصميمك.
هل يمكنني إضافة رابط إلى صفحة HTML خارجية في تصميمي على Canva؟
نعم، يمكنك إضافة عنوان URL قابل للنقر إلى النص أو الأزرار في Canva، والذي سيربطك بصفحة HTML خارجية.
كيف أسجّل الشاشة على جهاز ماك؟
لتسجيل الشاشة على جهاز ماك، يمكنك استخدام Trupeer AI. فهو يتيح لك التقاط الشاشة بالكامل ويوفر قدرات بالذكاء الاصطناعي مثل إضافة صور رمزية بالذكاء الاصطناعي، وإضافة تعليق صوتي، وإضافة تأثيرات التكبير والتصغير في الفيديو. وبفضل ميزة ترجمة الفيديو بالذكاء الاصطناعي من Trupeer، يمكنك ترجمة الفيديو إلى أكثر من 30 لغة.
كيف أضيف صورة رمزية بالذكاء الاصطناعي إلى تسجيل الشاشة؟
لإضافة صورة رمزية بالذكاء الاصطناعي إلى تسجيل الشاشة، ستحتاج إلى استخدام أداة تسجيل شاشة بالذكاء الاصطناعي. Trupeer AI هي أداة تسجيل شاشة بالذكاء الاصطناعي، وتساعدك على إنشاء مقاطع فيديو بعدة صور رمزية، كما تساعدك في إنشاء صورتك الرمزية الخاصة للفيديو.
كيف أسجّل الشاشة على ويندوز؟
لتسجيل الشاشة على ويندوز، يمكنك استخدام Game Bar المدمج (Windows + G) أو أداة ذكاء اصطناعي متقدمة مثل Trupeer AI للحصول على ميزات أكثر تقدمًا مثل صور رمزية بالذكاء الاصطناعي، والتعليق الصوتي، والترجمة، إلخ.
كيف أضيف تعليقًا صوتيًا إلى الفيديو؟
لإضافة تعليق صوتي إلى مقاطع الفيديو، قم بتنزيل إضافة Chrome الخاصة بـ Trupeer AI. بعد التسجيل، ارفع فيديوك مع الصوت، واختر التعليق الصوتي المطلوب من Trupeer ثم صدّر الفيديو المعدّل.
كيف أستخدم التكبير في تسجيل الشاشة؟
للتكبير أثناء تسجيل الشاشة، استخدم تأثيرات التكبير في Trupeer AI التي تتيح لك التكبير والتصغير في لحظات محددة، مما يعزز التأثير البصري لمحتوى الفيديو الخاص بك.