لذلك كنت جديدا على Webflow، إيه؟ دعونا الغوص في.

وهذا دليل البصرية المشي لكم من خلال مفاهيم التصميم تستجيب الويب الهامة وكيفية تنفيذها بصريا داخل Webflow.

# 1 نموذج الصندوق

فهم هيكل الموقع

جميع العناصر الموجودة في هذه الصفحة هي جميع الكتل داخل الكتل الأخرى (المعروف أيضا باسم "صندوق الموديل"). عندما سحب العناصر على شبكة الإنترنت، يمكنك سحبها من كتلة واحدة وإفلاتها في آخر. هذه هي الطريقة التي تعمل HTML!

PLAN السوبر

$ 75 / اثنين

مثالية لأية شركة مع 20 موظفا أو أكثر.

500GB التخزين
1 مليون زيارات
20 المتعاونين
50 الشبكات الاجتماعية
قسط الدعم

ماذا ترى

ملاحظة: عليك فهم كيفية تصميم شيء من هذا القبيل مع المفاهيم أدناه.

ما كتل انها مصنوعة من

شعبة بلوك

H2 مداخل PLAN السوبر

نص بلوك 75 $ / اثنين

الفقرة مثالية لأية شركة مع 20 موظفا أو أكثر.

قائمة

قائمة مقتنيات
500GB التخزين
قائمة مقتنيات
1 مليون زيارات
قائمة مقتنيات
20 المتعاونين
قائمة مقتنيات
50 الشبكات الاجتماعية
قائمة مقتنيات
قسط الدعم

انها محاولة لنفسك

سحب هذه الفقرة ...

كافة الميزات من دون قيود. كل ما يمكنك تناول الطعام. (وهذا هو العنصر الفقرة)

TIP: انقر واسحب عنصر الفقرة أعلاه وتسقطها تحت السعر على اليمين. يمكنك أيضا استخدام اختصارات مثل نسخ ولصق (CTRL + C و CTRL + V)، نسخ أثناء سحب (عقد بديل)، وحذف (حذف مفتاح).

في كتلة الأرجواني ...

سوبر PLAN

$ 75 / اثنين

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

# 2 عناصر التخطيط

عناصر التخطيط الأساسية

إضافة عناصر إلى موقع الويب الخاص بك عن طريق النقر على [+] رمز في أعلى الزاوية اليسرى. وفيما يلي بعض من أهم العناصر الأساسية في هيكل تصميم مواقع الإنترنت - أقسام والحاويات والأعمدة.

A القسم يستغرق 100٪ من عرض نافذة المتصفح إذا كنت إضافته إلى الهيئة (قماش من موقع على شبكة الانترنت).
انه لشيء رائع بالنسبة للأقسام أفقية كبيرة من موقع على شبكة الانترنت.

القسم العنصر

حاوية هو كتلة 960px تركزت في منتصف المتصفح. عادة ما يضاف معظم محتويات موقع داخل حاوية بحيث انها تركز عليه. عادة ما تضاف الحاويات إلى الهيئة أو عنصر القسم.

العنصر الحاويات

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

أعمدة تستجيب

# 3 تصميم مع CSS

التصميم العناصر الخاصة بك

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

زر سبيل المثال تصميم

إضافة إلى العربة ➜

أسلوب بنفسك

hugger

TIP: هذا الزر بالفعل فئة "زر" مع بعض الأنماط الأساسية. حدد زر ومحاولة إضافة الانحدار، والحدود، تدوير الزوايا، داخل / خارج الظلال، تحوم أنماط الدولة، والانتقال لأنماط تحوم - كل باستخدام لوحة الاسلوب.

ما قمت بإنشائه

زر نص ➜

تطبيق 'زر' الفئة

زر النص

TIP: في تصميم مواقع الإنترنت يمكنك تطبيق فئة إلى العديد من العناصر لجعلها تبدو متشابهة. تطبيق "زر" الفئة التي تطلق على الرابط أعلاه بالضغط على [+] في الجزء العلوي من لوحة نمط وكتابة "زر" للعثور على تلك الفئة.

المثال تصميم نموذج

شكر!

صخرة بك الجوارب بلدي!

عفوا! حدث خطأ ما أثناء تقديم النموذج :(

أسلوب بنفسك

شكرا! وقد وردت تقريركم!

عفوا! حدث خطأ ما أثناء تقديم النموذج :(

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

الطباعة سبيل المثال

يكوود ستاوت

البيرة المظلم من يكوود بولاية كولورادو

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

"أنا وضعت هذه البيرة المجيدة أن أعرب عن خالص لا يموت الحب لبلدي المدينة الجميلة."

- جبال مان

أسلوب بنفسك

يكوود ستاوت

البيرة المظلم من يكوود بولاية كولورادو

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

"أنا وضعت هذه البيرة المجيدة أن أعرب عن خالص لا يموت الحب لبلدي المدينة الجميلة."

- جبال مان

TIP: المضي قدما وإضافة الطباعة حسب الطلب والأساليب لالخلفية. نصيحة باردة: إذا قمت بإضافة أنماط الطباعة إلى كتلة الأم، كل عناصر النص أبنائها سيرث هذه أنماط النص. في CSS ويسمى هذا السلوك "المتتالية".

# 4 تخطيط مع CSS

تخطيطات بناء شبكة الإنترنت مع CSS

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

الهامش والحشو سبيل المثال

أخبار عاجلة

وكلاء الاتحادية تداهم Gunshop، البحث الأسلحة

صاحب المحل ستيف Witmere اعتقل سابقا لتداول blackmarket بازوكا. يعترف بتورطه في المافيا الروسية.

من بين العديد من البازوكا وجدت في gunshop كان عشرات الآلاف من اللوحات التي تم الحصول عليها بطريقة غير مشروعة تقدر قيمتها ما لا يقل عن 10،000 $. ثت ثمنا باهظا لدفع ثمن هذه اللوحات البكم.

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

إضافة تباعد نفسك

أخبار عاجلة

وكلاء الاتحادية تداهم Gunshop، البحث الأسلحة

صاحب المحل ستيف Witmere اعتقل سابقا لتداول blackmarket بازوكا. يعترف بتورطه في المافيا الروسية.

من بين العديد من البازوكا وجدت في gunshop كان عشرات الآلاف من اللوحات التي تم الحصول عليها بطريقة غير مشروعة تقدر قيمتها ما لا يقل عن 10،000 $. ثت ثمنا باهظا لدفع ثمن هذه اللوحات البكم.

TIP: ابدأ بإضافة الحشو على جميع الاطراف من كتلة رمادية الرئيسي (العنصر الأصلي). ثم إضافة الهامش السفلي لإضافة التباعد بين عناصر النص الفردية (عناصر الأطفال). تلميح: اضغط SHIFT أثناء استخدام التحكم في الهامش / حشوة لتطبيقه على جميع الاطراف وALT لتنطبق أيضا على الجانب الآخر.

'عرض: كتلة "أمثلة

تم تعيين هذا البند عرض: بلوك

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

زر مع العرض: كتلة كتلة: زر مع شاشة يقع هذا الارتباط لعرض: كتلة يقع هذا الارتباط لعرض: بلوك

الوصف: وتحديد عناصر 'عرض إعداد لكتلة جعلها كومة فوق بعضها البعض وملء 100٪ عرض كتلة الأم. معظم العناصر فعلا هذا الإعداد الافتراضي.

جعلها 'عرض: كتلة "نفسك

هذا هو زر هذا هو زر على الروابط العرض: مضمن افتراضيا الروابط العرض: مضمن افتراضيا

TIP: اختر هذه العناصر (بعضها مضمن كتلة وبعضها مضمن) وجعلها العرض: كتلة بحيث كومة فوق بعضها البعض.

'عرض: مضمنة كتلة "مثال

تحميل تحرير حذف

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

جعلها مضمنة منع نفسك

تحميل تحرير

TIP: حدد العناصر المذكورة أعلاه وجعلها العرض: مضمن كتلة حتى كومة بجوار بعضها البعض. سترى أن الصور كومة بجانب أزرار. نصيحة: سوف يسقط الأزرار والصور في كتل شعبة منفصلة جعلها كومة فوق بعضها البعض (لكتل شعبة هي العرض: كتلة افتراضيا).

تطفو سبيل المثال

شكرا! وقد وردت تقريركم!

عفوا! حدث خطأ ما أثناء تقديم النموذج :(

الوصف: إعداد العرض: مضمن بلوك أو عائمة (هذا المثال) هي الطرق الأكثر شيوعا لكومة العناصر جنبا إلى جنب. في هذا المثال سوف تظهر لك كيفية تعويم شيء.

تطفو بنفسك

شكرا! وقد وردت تقريركم!

عفوا! حدث خطأ ما أثناء تقديم النموذج :(

TIP: أولا حدد حقل النص، وجعلها تطفو: اليسار وإعطائها عرض النسبة المئوية (مثلا: 60٪). ثم تعيين الزر لتعويم: يسار وكذلك وتعيين آخر عرض النسبة المئوية (مثلا: 40٪) لذلك هم على حد سواء تضيف ما يصل الى 100٪. هذا هو وسيلة يدوية لإجبار أي عنصر إلى كومة جنبا إلى جنب.

مطلق الوظيفة مثال

كأس نظري جو

هذا هو نص كلام الصورة.

مميزة

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

أسلوب بنفسك

كأس نظري جو

هذا هو التعليق على الصورة للي كوب من جو المفضلة لديك.

مميزة

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

# 5 الأنماط المتتالية

استخدام الأنماط المتتالية

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

مشترك أنماط زر سبيل المثال

تصميم أزرار نفسك

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

# 6 استفسارات وسائل الإعلام

تصميم لأجهزة مختلفة

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

استجابة سبيل المثال مداخل

هذه هي بعض النص العنوان الذي يحصل على أصغر في الأجهزة النقالة.

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

إصلاح ذلك بنفسك

جعل هذا النص عنوان كبير الحصول على أصغر في الأجهزة النقالة.

TIP: حدد هذا البند على الجهاز اللوحي وجعل حجم الخط وارتفاع خط أصغر. تفعل الشيء نفسه لأجهزة المناظر الطبيعية الهاتف والهاتف عمودي. يمكنك أن ترى أن ل

استجابة سبيل المثال زر

زر النص

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

زر النص

إصلاح ذلك بنفسك

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

أعمدة تستجيب سبيل المثال