كيفية إنشاء صفحة نمط نمط 80 مع Elementor

من قبل بلير Jersyer | Elementor, وورد دروس

تصميم الثمانينيات - نحن نحبه! مع كل هذه الأشكال الهندسية والخلفيات المكانية وتأثيرات ضوء النيون ، لا يمكن أن تكون صفحتنا المقصودة لحدث خاص (حفلات الكريسماس) أكثر إشراقًا! دعونا نوضح لنا كيفية القيام بذلك.

أزل عصابات رأسك وأضيء مصابيح النيون وأدخل Tron في جهاز VCR ... لقد عادت سنوات 80!

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

في الواقع ، يمكنك رؤيته في كل مكان. من "Strangers Things" من Netflix أو MineCraft أو Muse ، والتي أصدرت للتو ألبومًا بنكهة الثمانينيات - أو حتى طبعة جديدة من Tron.

فلماذا لا تستفيد من هذا الاتجاه وتوضح لك كيفية تنفيذه في صفحة مقصودة تم إنشاؤها باستخدام Elementor ?

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

قسم الافتتاح

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

تأثير النيون

Effect neon black friday elementor.jpg

في وسط التكوين ، وضعت الشعار والرسالة والزر.

يمكنك أن ترى أن أهم رسالة مكتوبة في "ضوء النيون". للحصول على مظهر النيون هذا ، تحتاج إلى إضافة CSS إلى تصميمك. سيضيف CSS الكثير من الظل الوردي إلى النص. هذا كل شيء.

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

ثم افتح علامة التبويب خيارات متقدمة والصقها في علامة التبويب CSS المخصصة ، أضف هذا الرمز:

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

إذا كنت تريد استخدام ظل مختلف بجوار اللون الوردي ، فقم فقط بتغيير رقم اللون بعد علامة الجنيه. هذا كل شيئ.

العنوان الرأسي

يظهر جانب آخر مثير للاهتمام في هذا التصميم بجانب الحروف "FRI" ، حيث تظهر السنة المرفقة بها عموديًا (90 درجة).

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

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

صمم نصك ثم افتح علامة التبويب المتقدمة للعمود الثاني (الذي تريد تدويره) وفي علامة تبويب CSS المخصصة اكتب هذا الرمز:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 خلفية الرجعية

بمجرد الانتهاء من العمل على المنشور الرئيسي ، ابدأ العمل على الخلفية لإعطاء النص دفعة وجعل الخيال العلمي في الثمانينيات يبدو حقيقة واقعة. أضفت هنا صورة مصممة في Photoshop واستخدمتها كخلفية بطولية.
في هذا التصميم ، تتميز الخلفية بشبكة هندسية تذكرنا بـ Tron مع لمسة من أشجار النخيل التي تميل إلى اليسار وتدرج رئيسي من اللون الأزرق والأرجواني والوردي لتحقيق هذا الشعور القديم. هناك أيضًا بعض اللمسات اللطيفة مثل "DeLorean DMC-12" (من المحتمل أن تتعرف عليها في Back to the Future).
تستهدف السيارة ، بالإضافة إلى نجوم الرماية ، النص الرئيسي لقسمنا ، مع إبراز رسالتنا الرئيسية.

قسم الميزات

مربع المعلومات elementor.gif
عند تصميم صفحة مقصودة ، عليك التفكير في العلاقات بين كل قسم. إنها مهمة أكثر تعقيدًا عندما يتعلق الأمر بتصميم عصري مثل الثمانينيات.
لذلك ، بعد تصميم القسم الأول المذهل ورفع الشريط ، يجب أن تحافظ على المستوى العالي وأن تحتفظ بنفس سمة التصميم ، مع مراعاة كل قسم على أنه تكوين في حد ذاته.

تصميم

في هذا القسم ، قمت بتصميم مظهر "كائنات غير معروفة" أغمق أثناء قيامنا "بالزحف" إلى الصفحة. هنا يمكنك رؤية العنوان ، 3 رصاصات وزر. لإنشاء هذا التأثير ثلاثي الأبعاد العائم ، استخدمت القليل من Photoshop مع إعدادات Flip-box منElementor.

نظموا على فوتوشوب

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

بناء العيش

في المحرر ، أضفت أداة flip-box. في علامة تبويب المحتوى الأمامي ، اخترت صورة كعنصر رسومي وأضفت العنوان. في علامة تبويب الخلفية ، بالألوان ، قمت بتغيير اللون إلى شفاف وأضفت المثلث الذي صممته في قسم الصورة ، ثم غيرت الموضع بحيث يناسب تمامًا .
ثم في علامة التبويب الخلفية فعلت نفس الشيء ولكن بدلاً من إضافة عنوان أضفت النص. للانتقال إلى علامة التبويب الإعدادات. لقد لعبت هنا مع ارتفاع الصندوق. لقد استخدمت وحدة VH لأنها وحدة نسبية، والتي ستغير الصورة بالنسبة للشاشة كما هو الحال زائر سوف نستخدم.
هذا يجعلها أكثر استجابة. في جزء التأثيرات ، احتفظت بتأثير Flip ، وغيرت الاتجاه إلى اليسار وقمت بتنشيط العمق ثلاثي الأبعاد لتحقيق هذا التأثير ثلاثي الأبعاد المذهل.

CTA

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

قسم النقاد

قائمة من الاستعراضات elementor.jpg
إذا انتقل المستخدم إلى القسم الثالث - فهذا يعني أنك تفعل شيئًا صحيحًا. لذا ، بعد الحديث عن المنتج وذهولته ، حان الوقت الآن لطرف آخر للتحدث.

تصميم

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

قسم جدول الاسعار

السعر المخطط elementor.jpg
هذا القسم هو القسم جدول التسعير . هنا يمكنك رؤية جميع العناصر التي يمكن أن تدعم البيع. العنوان ، العد التنازلي وبالطبع - جدول الأسعار.
هذا هو خط النهاية للصفحة المقصودة. لذلك ، إذا لم ينقر المستخدم الخاص بك ، فقد حدث خطأ ما.

تصميم

يحتوي التصميم في هذا القسم على أكثر من تصميم التواصل 80s المجرة. تم تحرير الخلفية هنا في برنامج فوتوشوب مما يمنحها مظهرًا أرجوانيًا ساطعًا ومتميزًا عن الخلفية السوداء السوداء التي كانت موجودة قبل منحها لكمة في النهاية.
يوجد تحت العنوان والشعار عداد يوضح الوقت المتبقي حتى نهاية البيع. هنا استخدمت خط spacy يسمى "space mono" والذي أضفته من خلال خيار الخط المخصص.
في جدول الأسعار أدناه ، تحتوي كل طاولة على خلفية سوداء فاتحة تمنحها مظهر "عائم في الفضاء". عندما تحوم فوقها ، تصبح الخلفية مظلمة وهناك توهج حولها كنقطة محورية توجهك لقراءة النص بداخله.
عند تحريك مؤشر الماوس فوق الزر ، يتغير لون الزر مرة أخرى. بمجرد الانتهاء من قراءة المعلومات حول لقطاتنا الرائعة ،

الحصول على هذا النموذج رائع تماما

القالب الموضح في هذا البرنامج التعليمي متوفر الآن في المكتبة Elementor. لذلك يمكنك استخدامه بنقرة واحدة.

إرسال مراجعة

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

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

يعلقون عليه على موقع Pinterest