Wix Website from Scratch - Grid Gallery

• أبريل 28, 2024

في هذا البرنامج التعليمي ، سنضيف معرضًا إلى موقع الويب الخاص بـ Wix ، والذي أنشأناه من قالب فارغ. البدء من نقطة الصفر هو وسيلة رائعة لتعلم الأساسيات.

على عكس قوالب Wix غير القابلة للتبديل ، يمكنك تبديل أنواع المعرض لإلقاء نظرة جديدة في أي وقت. هناك العديد من أنواع المعارض ، من شبكة البناء إلى قرص العسل. كل معرض له ميزاته الخاصة. دعونا نلقي نظرة على معرض الشبكة الأساسي (صورة).

1. انقر أيقونة Plus في القائمة اليمنى واختر Gallery من القائمة.
   
   
2. قم بالمرور فوق كل صورة مصغرة للمعرض لرؤية معاينة ووصف.
   
   
3. الآن ، اسحب معرض الشبكة إلى الصفحة.
   
   
4. استخدم مقابض تغيير الحجم لتغيير حجم الشبكة كما تشاء. لقد قمت بتغيير حجم الشبكة إلى عرض صفحة 980.
   
   في هذه المرحلة ، يحتوي المعرض على بعض صور العناصر النائبة. دعونا نحتفظ بها الآن ونعمل على تخصيص إعدادات المعرض لاحتياجاتنا.
   
   إعدادات معرض الشبكة
   
   تحجيم الصور - لديك خيار لصورتك أو تحجيمها لتلائم الإطار. سيؤدي إعداد Autocrop إلى اقتصاص الصور تلقائيًا لملاءمة الإطار وسيقوم خيار الملاءمة بتغيير حجم الصورة لتلائم الإطار.
   
   عند النقر - لديك ثلاثة خيارات لما يحدث عند النقر فوق صورة المعرض. خيار واحد لشيء أن يحدث. والثاني هو أن تفتح الصورة كقائمة منبثقة. والثالث هو فتح الرابط. في معظم الأوقات ، يكون الإطار المنبثق خيارًا جيدًا لأن الصورة معروضة بحجم أكبر. ولكن إذا كنت تريد إرسال الزائر إلى صفحة أخرى ، فاستخدم خيار A Link Opens.
   
   
5. حدد المعرض وانقر على أيقونة الإعداد في القائمة المنبثقة.
   
   
6. في نافذة إعدادات الشبكة ، ابحث عن قسم "كيف تتصرف الصور". اختر Autocrop أو Fit.
   
   
7. في قسم "عند النقر" ، قم بتعيين أحد الخيارات الثلاثة.
   
   معرض التصميم
   
   كما ذكر أعلاه ، يمكنك تبديل تصاميم المعرض في أي وقت. ولكن دعونا نستمر في تخصيص تصميم شبكتنا. لتصميم الشبكة ، يمكننا تخصيص الحدود والزوايا والظل والنص.
   
   
8. مع استمرار تحديد المعرض ، انقر أيقونة التصميم (فرشاة الطلاء).
   
   
9. بالنسبة لإعدادات Border ، يمكننا تغيير اللون والتعتيم وعرض الحدود. دعنا نحتفظ بالإعداد الافتراضي للعرض مضبوطاً على 0 وبالتالي لا حدود.
   
   
10. Corner Radius - انقر على أيقونة Corner Radius وقم بتعيين نصف قطر الزاوية العلوية كما تريد. كما يشير رمز الارتباط سيتم تحديث الزوايا الثلاثة الأخرى لتتناسب.
    
    
11. الظل - اختر أيقونة الظل. لإضافة ظل إسقاط ، انقر فوق تمكين تبديل الظل وضبط الزاوية والمسافة والحجم والتمويه واللون / العتامة للظل.
    
    
12. النص - انقر على أيقونة T لضبط الخيارات لإعدادات العنوان والوصف ونص آخر. دعنا نغير النص من الافتراضي إلى موضوع نص الفقرة 1. كرر لنص الوصف.
    
    إعدادات الشكل الظاهري
    
    لتصميم معرض الشبكة ، يمكننا التحكم في عدد الأعمدة والصفوف للصور المصغرة. يمكننا أيضًا التحكم في التباعد بين الصور المصغرة وكيفية عرض النص على الصورة.
    
    
13. مع استمرار تحديد المعرض ، انقر أيقونة Layout من القائمة المنبثقة.
    
    
14. استخدم شريط التمرير لضبط عدد الأعمدة والصفوف. ستؤدي إضافة المزيد من الأعمدة والصفوف إلى ظهور صور مصغرة مصغرة في الشبكة.
    
    
15. يمكنك استخدام شريط التمرير Spacing لزيادة مقدار البكسل بين الصور المصغرة. تؤدي إضافة مساحة أكبر إلى تقليل حجم الصور المصغرة.
    
    
16. تحت شريط التمرير هو قسم محاذاة النص. لديك خيار لعرض النص على اليسار أو اليمين أو الوسط.
    
    

لقطات الشاشة المستخدمة بإذن من Wix.com، Inc.

تعليمات الفيديو: Wix Design Tutorials: Creating an Image-Based Grid Layout Site (أبريل 2024).