چگونه یک صفحه سبک سبک 80 با Elementor ایجاد کنیم

طراحی دهه 80 - ما آن را دوست داریم! با همه آن اشکال هندسی ، زمینه های فضایی و جلوه های نوری نئون ، صفحه فرود ما برای یک رویداد خاص (مهمانی های کریسمس) نمی تواند تابناک تر باشد! بیایید نحوه انجام این کار را به ما نشان دهیم.

باندهای پیشانی خود را بردارید ، چراغ های نئونی خود را روشن کنید و Tron را وارد VCR خود کنید ... سال 80 به عقب برگشته است!

من به عنوان یک طراح ، همیشه یک نکته نرم برای طراحی دهه 80 داشته ام که هیچ کس درباره آن صحبت نمی کند. با تمام این اشکال هندسی ، تعداد زیادی الگو ، زمینه مکانی با آن جلوه های ارزان قیمت نئون (باید خاطرات خوبی را به شما برگرداند).

در واقع ، همه جا می توانید آن را ببینید. از "Strangers Things" از Netflix ، MineCraft یا Muse ، که به تازگی آلبومی را با طعم 80s - یا حتی بازسازی Tron - منتشر کرده است.

پس چرا از این روند استفاده نکنید و به شما نشان دهیم که چگونه آن را در صفحه فرود ایجاد شده با آن پیاده سازی کنید Elementor ?

این فقط یک آموزش نظری نیست. ما برای دوره تخفیف فعلی (جمعه سیاه) عناصری را در نظر گرفته ایم تا ابزاری در اختیار شما قرار دهیم تا برای رویدادهای آینده خود آماده شوید.

بخش افتتاحیه

بخش افتتاحیه ما یک بخش قهرمان است. اولین چیزی که در اینجا باید به آن توجه کرد عنوان است. من توصیه می کنم در این زمینه تلاش زیادی کنید زیرا این اولین چیزی است که شما دارید بازدید کننده خواهد دید.

به پیامی که قصد انتقال آن را دارید فکر کنید. داشتن عنوان بزرگ و واضح توجه مردم را به خود جلب می کند. این بخش اول همچنین باید کاربران را به پیمایش به پایین و مرور بقیه صفحه تشویق کند.

اثر نئون

در مرکز ترکیب ، آرم ، پیام و دکمه را قرار دادم.

می بینید که مهمترین پیام در "نور نئون" نوشته شده است. برای به دست آوردن این شکل نئون ، باید CSS را به طراحی خود اضافه کنید. CSS سایه صورتی زیادی به متن اضافه می کند. این کل ماجراست.

بنابراین شما باید یک ویجت هدر اضافه کنید ، اندازه قلم انتخاب شده را تغییر دهید تا باعث درخشش آن شود و رنگ را روی سفید قرار دهید.

سپس برگه Advanced را باز کرده و آن را در برگه سفارشی 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

پس از پایان کار بر روی پست اصلی ، شروع به کار بر روی زمینه کنید تا متن را تقویت کرده و جلوه های علمی تخیلی یکپارچهسازی دهه 80 را به واقعیت تبدیل کنید. در اینجا من یک تصویر طراحی شده در فتوشاپ را اضافه کردم و از آن به عنوان پس زمینه قهرمان استفاده کردم.

در این طرح ، پس زمینه دارای یک شبکه هندسی است که Tron را یادآوری می کند با لمس درختان نخل که به سمت چپ متمایل شده اند و یک شیب اصلی آبی-بنفش-صورتی برای دستیابی به این احساس یکپارچه سازی دارد. برخی موارد جالب مانند "DeLorean DMC-12" نیز وجود دارد (شما احتمالاً آن را در Back to the Future خواهید شناخت).

این اتومبیل و همچنین ستاره های تیراندازی ، همه متن اصلی بخش ما را هدف قرار می دهند و پیام اصلی ما را برجسته می کنند.

بخش ویژگی ها

هنگام طراحی صفحه فرود ، باید در مورد روابط بین هر بخش فکر کنید. وقتی صحبت از طرحی شیک مانند دهه 80 یکپارچه می شود ، کار پیچیده تری است.

بنابراین ، پس از طراحی بخش اول شگفت انگیز و بالا بردن نوار ، شما باید سطح بالایی را حفظ کرده و همان تم طراحی را حفظ کنید ، ضمن اینکه هر بخش را به عنوان یک ترکیب در نظر بگیرید.

طرح

در این بخش، در حالی که صفحه را «خزیم» می‌کنیم، ظاهر «اشیاء ناشناخته» تیره‌تری را طراحی کردم. در اینجا می توانید یک عنوان، 3 گلوله و یک دکمه را ببینید. برای ایجاد این افکت سه بعدی شناور، از کمی فتوشاپ در ترکیب با تنظیمات Flip-box استفاده کردمElementor.

صحنه در فتوشاپ

بنابراین اولین کاری که کردم این بود که کل صحنه را در فتوشاپ ایجاد کردم تا ببینم قبل از شروع ساخت آن همه چیز چگونه است. در عنوان می توانید شکل چراغ های نئون را از قبل ببینید ، و در زیر آن 3 مثلث با نمادها و یک عنوان (دایره ها) اضافه کردم.

من به هر مثلث یک شیب آبی - بنفش - صورتی اضافه کردم. بالای آن ، یک الگوی خط به آن نمای تلویزیون دهه 80 و تاری پشت آن می دهد تا ظاهری علمی-تخیلی ایجاد کند.

نمادها همچنین دارای نئون و همچنین عنوان در پایین مثلث هستند. جلوه ای شناور را از نوع پررنگ اضافه کنید. پس زمینه دارای جلوه ای دودی ، ابری و تاریک با همان الگوی خطی است که برای مثلث استفاده شده است.

برای انیمیشن سه بعدی ، مثلث ها دارای پس زمینه شفاف هستند. این بدان معنی است که متن پشت آن وقتی پوشیده نشود ، نشان داده می شود. بنابراین کمی دود سیاه به اضلاع مثلث اضافه کردم تا پتو با هم مخلوط شود و پشت آن را همچنان بپوشاند.

بنابراین در اصل سه لایه برای ایجاد در ویرایشگر وجود دارد: پس زمینه ، نماد و عنوان.

ساخت زندگی می کنند

در ویرایشگر ، ویجت flip-box را اضافه کردم. در برگه محتوای جلویی ، من تصویری را به عنوان عنصر گرافیکی انتخاب کردم و عنوان را اضافه کردم. در تب Background ، در Color ، رنگ را به شفاف تغییر داده و مثلثی را که در قسمت تصویر طراحی کردم اضافه کردم ، سپس موقعیت را تغییر دادم تا کاملاً متناسب باشد .

سپس در تب پشت همین کار را انجام دادم اما به جای اضافه کردن عنوان، متن را اضافه کردم. برای رفتن به برگه تنظیمات. اینجا با ارتفاع جعبه بازی کردم. من از واحد VH استفاده کردم زیرا یک واحد نسبی است که تصویر را نسبت به صفحه نمایش به عنوان تغییر می دهد بازدید کننده استفاده خواهد کرد.

این باعث می شود پاسخگوتر باشد. در قسمت جلوه ها ، من جلوه Flip را حفظ کردم ، جهت را به سمت چپ تغییر داده و عمق 3D را فعال کردم تا به این جلوه 3D شگفت انگیز دست پیدا کنم.

CTA

کل ترکیب در اینجا دکمه است (زیرا آنچه شما می خواهید کاربر برای کلیک بر روی دکمه باشد). در اینجا می توانید ببینید که این دکمه پررنگ و "در چهره شما" نیست ، اما با پس زمینه دودی با کمی درخشش در اطراف ترکیب می شود. اما وقتی از روی آن عبور می کنید ، رنگ صورتی ظاهر می شود.

بخش انتقادات

اگر کاربر به قسمت سوم پیمایش کند - به این معنی است که شما کاری را درست انجام می دهید. بنابراین ، پس از صحبت درباره محصول و حیرت آن ، اکنون زمان آن فرا رسیده است که طرف دیگری صحبت کند.

طرح

در این بخش ویجت نظرات در زمینه هندسی رادیکال با عنوان نئون داریم. پس زمینه در فتوشاپ طراحی شده و سپس به عنوان پس زمینه ثابت در پس زمینه بخش قرار داده می شود تا یک اثر شناور پیمایشی ایجاد کند.

من می خواستم این بخش را "پشت صحنه" نشان دهم ، بنابراین وقتی پایین می روید ، در معرض آن قرار می گیرید.

بخش جدول قیمت

این بخش ، بخش است جدول قیمت گذاری . در اینجا می توانید تمام مواردی را که می توانند از فروش پشتیبانی کنند ، مشاهده کنید. عنوان ، شمارش معکوس و البته - جدول قیمت.

این خط پایان صفحه فرود است. بنابراین ، اگر کاربر شما کلیک نکرد ، مشکلی پیش آمد.

طرح

طرح موجود در این بخش بیش از یک مورد دارد تماس دهه 80-کهکشان. پس‌زمینه اینجا در فتوشاپ ویرایش شده است و ظاهری بنفش تربچه‌ای روشن به آن می‌دهد و از پس‌زمینه سیاه و مشکی که قبل از ضربه زدن به آن در پایان وجود داشت متمایز است.

در زیر عنوان و شعار یک پیشخوان وجود دارد که زمان باقی مانده تا پایان فروش را نشان می دهد. در اینجا من از یک فونت spacy به نام 'space mono' استفاده کردم که از طریق گزینه font custom اضافه کردم.

در جدول قیمت زیر ، هر جدول دارای زمینه سیاه و سفید روشن است که به آن ظاهری "شناور در فضا" می دهد. وقتی روی آن قرار می گیرید ، پس زمینه تاریک می شود و به عنوان یک نقطه کانونی درخششی ایجاد می شود که شما را به خواندن متن درون خود هدایت می کند.

هنگامی که ماوس را روی دکمه حرکت می دهید، دکمه دوباره رنگ را تغییر می دهد. هنگامی که خواندن اطلاعاتی درباره عکس های بزرگ ما را خواندید،

این مدل کاملاً عالی را دریافت کنید

الگوی نشان داده شده در این آموزش اکنون در کتابخانه موجود است Elementor. بنابراین می توانید با یک کلیک از آن استفاده کنید.

چگونه یک صفحه سبک سبک 80 با Elementor ایجاد کنیم