أهلاً بك في الدرس الرابع!
في الدرس الماضي، وضعت حجر الأساس لإنشاء المحتوى في نوشن، حيث تعلمت كيفية إضافة النصوص، العناوين، والقوائم باستخدام أمر الشرطة المائلة (/) واختصارات Markdown. لقد قمت بتنظيم صفحتك الأولى بالمحتوى النصي، وهي خطوة ممتازة.
الآن، سننتقل إلى مستوى أعلى. هدفنا التعليمي لهذا الدرس هو إضافة الوسائط: الصور، الفيديوهات، والملفات. بصفتك شخصًا لديه خلفية في التصميم والويب، ستدرك فورًا كيف يمكن للوسائط أن تحوّل صفحة بسيطة إلى تجربة بصرية غنية ومتكاملة. هذه المهارة ليست مجرد إضافة جمالية، بل هي عنصر أساسي في تصميم قوالب احترافية ومفيدة يمكنك بيعها لاحقًا.
هيا بنا نضفي بعض الحياة على صفحاتنا!
1. تحسين المظهر البصري: الأغلفة، الأيقونات، والصور
أول انطباع يتركه القالب لدى المستخدم يعتمد بشكل كبير على مظهره. الأيقونات والأغلفة والصور المنظمة جيدًا تجعل القالب أكثر جاذبية وسهولة في الاستخدام.
أ. الأغلفة (Covers) والأيقونات (Icons)
كل صفحة في نوشن يمكن أن تحتوي على أيقونة وغلاف يميزانها.
- الأيقونة (Icon): تظهر بجانب اسم الصفحة في الشريط الجانبي وفي التبويبات، مما يساعد على التعرف السريع على محتوى الصفحة.
- الغلاف (Cover): هو بانر علوي يمنح الصفحة هوية بصرية فريدة.
لترى كيف يمكنك إضافتهما وتخصيصهما، شاهد المقطع التالي.
يشرح المنذر سفان في هذا المقطع بطريقة واضحة كيفية إضافة أيقونة وغلاف لصفحة نوشن، سواء من الخيارات المتاحة أو عبر رفع صور خاصة بك.
شاهد المقطع من (03:24) إلى (04:18). ركز على: كيفية إضافة أيقونة من مكتبة الإيموجي والبحث فيها. كيفية إضافة غلاف وتغييره من معرض نوشن، أو رفعه من جهازك، أو استخدام مكتبة Unsplash المدمجة.
نصيحة احترافية: كما أشار أحمد أبو زيد في فيديو "دروس أونلاين" (من الدرس السابق)، يمكنك استخدام مواقع مثل Flaticon.com لتنزيل أيقونات احترافية بصيغة PNG ورفعها كأيقونات مخصصة لصفحاتك، مما يمنح قوالبك طابعًا فريدًا ومميزًا.
ب. إضافة الصور داخل الصفحة
الصور داخل محتوى الصفحة ضرورية لشرح الأفكار، عرض الأمثلة، أو ببساطة لتقسيم النصوص الطويلة. هناك ثلاث طرق رئيسية لإضافة الصور:
- الرفع (Upload): من جهاز الكمبيوتر الخاص بك.
- التضمين (Embed): عبر لصق رابط صورة موجودة على الويب.
- Unsplash: البحث وإضافة صور مجانية عالية الجودة مباشرة من داخل نوشن.
شاهد هذا التطبيق العملي السريع.
يوضح هذا المقطع القصير كيفية إدراج صورة في الصفحة والتحكم في حجمها ومحاذاتها.
شاهد المقطع من (06:28) إلى (06:55). لاحظ كيف استخدم أمر /image، ثم بحث في Unsplash، وكيف قام بتغيير حجم الصورة ومحاذاتها لليسار.
2. إثراء المحتوى: الفيديوهات والملفات
القوالب الرائعة لا تحتوي فقط على نصوص وصور، بل تقدم قيمة مضافة عبر وسائط أخرى مثل فيديوهات الشرح أو الملفات القابلة للتنزيل (مثل أوراق العمل بصيغة PDF).
أ. إضافة الفيديوهات
أفضل طريقة لإضافة فيديو هي عبر التضمين (Embedding). كل ما تحتاجه هو نسخ رابط الفيديو من منصة مثل YouTube أو Vimeo ولصقه في نوشن. سيقوم نوشن بإنشاء مشغل فيديو تفاعلي داخل الصفحة مباشرة.
هذا مفيد جدًا لك كمصمم قوالب، حيث يمكنك تسجيل فيديو قصير تشرح فيه كيفية استخدام القالب وتضمينه في الصفحة الرئيسية للقالب.
ب. إضافة الملفات (Files)
يمكنك رفع أي نوع من الملفات تقريبًا إلى نوشن (PDF, Word, Excel, ZIP، إلخ) أو تضمينها.
- الرفع (Upload): يتم تخزين نسخة من الملف على خوادم نوشن. هذا يضمن بقاء الملف متاحًا حتى لو حُذف من المصدر.
- التضمين (Embed): يتم عرض معاينة للملف من مصدره الأصلي (مثل Google Drive أو ملف PDF على الويب).
شاهد هذا المقطع لمعرفة كيفية رفع ملف.
يوضح هذا المقطع كيفية إضافة كتلة File ورفع ملف من جهاز الكمبيوتر، مع التنبيه على نقطة مهمة بخصوص حجم الملفات في الحسابات المجانية.
شاهد المقطع من (11:33) إلى (12:03). لاحظ أنه ذكر أن الحد الأقصى لحجم الملف الواحد في الخطة المجانية هو 5 ميجابايت. هذه معلومة مهمة يجب تذكرها عند تصميم القوالب.
مرجعك الشامل للوسائط
للحصول على تفاصيل كاملة حول كل خيارات الوسائط، بما في ذلك أنواع الملفات المدعومة وكيفية التحكم فيها، ألقِ نظرة على الدليل الرسمي من نوشن.
الصور والملفات والوسائط – مركز مساعدةNotion
هذه المقالة من مركز مساعدة نوشن هي المرجع الرسمي والأشمل لكل ما يتعلق بالصور والملفات والوسائط. ستجد فيها إجابات دقيقة لأسئلتك.
اقرأ الأقسام التالية في المقال: الصور: ركز على الطرق المختلفة للإضافة (تحميل، رابط، Unsplash). الملفات: افهم الفرق بين التحميل ورابط التضمين. مقاطع الفيديو: انظر كيف يمكنك تحميل فيديو أو تضمينه من خدمة بث. خيارات كتلة الوسائط: هذا القسم مهم جدًا. تصفحه سريعًا لتتعرف على الخيارات المتاحة مثل إضافة تعليق (Caption)، تغيير الحجم (Resize)، والاقتصاص (Crop). لا حاجة لحفظ كل شيء، استخدمه كمرجع.
3. قوة التضمين (Embedding)
التضمين لا يقتصر فقط على الصور والفيديوهات. يمكنك تضمين محتوى تفاعلي من مئات الخدمات الأخرى مباشرة في صفحتك، مثل:
- خرائط Google Maps.
- ملفات صوتية من Spotify.
- تصاميم من Figma أو Canva.
- تغريدات من Twitter.
- نماذج من Typeform.
هذه الميزة تفتح لك أبوابًا لا حصر لها لإنشاء "لوحات تحكم" متكاملة لعملائك. على سبيل المثال، في قالب لإدارة المشاريع، يمكنك تضمين لوحة Miro للعصف الذهني وملفات Google Drive المتعلقة بالمشروع، كل ذلك في مكان واحد.
شاهد هذا المثال البسيط لتضمين خريطة من Google Maps.
يوضح هذا المقطع كيف يتعرف نوشن تلقائيًا على رابط من Google Maps ويقترح عليك إنشاء "إشارة مرجعية" (Bookmark) أو تضمينه مباشرة.
شاهد المقطع من (06:55) إلى (07:26). لاحظ كيف أن مجرد لصق الرابط يفتح خيارات التضمين.
نشاط عملي (15 دقيقة)
حان وقت تحويل صفحتك إلى معرض بصري! اذهب إلى صفحة "ملاحظات الدورة" التي أنشأتها سابقًا وقم بتطبيق ما تعلمته اليوم:
- أضف لمسة بصرية:
- أضف غلافًا (Cover) للصفحة. ابحث في Unsplash عن كلمة "technology" أو "design" واختر صورة تعجبك.
- أضف أيقونة (Icon) للصفحة. يمكنك استخدام إيموجي مناسب مثل 🖼️ أو 📹.
- أنشئ قسمًا جديدًا للوسائط:
- اكتب عنوانًا فرعيًا
H2باسم "مكتبة الوسائط".
- اكتب عنوانًا فرعيًا
- أضف المحتوى:
- صورة: أسفل العنوان، استخدم أمر
/imageوابحث في Unsplash عن صورة تتعلق بـ "AI video" (بما أنه من اهتماماتك). أضف لها تسمية توضيحية (Caption) بسيطة. - فيديو: انسخ رابط أي فيديو من هذه الدورة (أو أي فيديو تعليمي آخر من يوتيوب) والصقه في الصفحة لإنشاء تضمين.
- ملف: التقط لقطة شاشة (screenshot) لصفحتك الحالية، ثم استخدم أمر
/fileلرفعها إلى الصفحة تحت عنوان "لقطة من تقدمي".
- صورة: أسفل العنوان، استخدم أمر
بعد إكمال هذه الخطوات، قارن كيف تبدو صفحتك الآن مقارنة ببداية الدرس. لقد أصبحت أكثر تنظيمًا وجاذبية!
خلاصة الدرس
عمل رائع! لقد أضفت اليوم مجموعة قوية من الأدوات إلى ترسانتك في نوشن، مما سينقل جودة قوالبك إلى مستوى آخر.
في هذا الدرس، تعلمت:
- كيفية إضفاء هوية بصرية للصفحات باستخدام الأغلفة والأيقونات.
- الطرق الثلاث لإضافة الصور: الرفع، التضمين، والبحث في Unsplash.
- كيفية تضمين الفيديوهات والملفات مثل PDF لإثراء المحتوى.
- الفرق المهم بين الرفع (Upload) والتضمين (Embed).
- لمحة عن الإمكانيات الهائلة لتضمين تطبيقات وخدمات خارجية داخل نوشن.
الدرس القادم
الآن بعد أن أتقنت إضافة المحتوى الأساسي والوسائط، الخطوة التالية هي تنظيم كل هذا المحتوى بطرق ذكية وتفاعلية. في الدرس القادم، سنتعلم كيفية استخدام الكتل التفاعلية: التبديل (Toggle)، الاقتباسات (Quote)، والتنبيهات (Callout). هذه الكتل ستساعدك على إنشاء صفحات أنظف وأكثر سهولة في القراءة، وهي مهارة لا غنى عنها لتصميم قوالب احترافية.