خوش آمدید به انجمن ای فری

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

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

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

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه

  • شروع کننده موضوع magbot
  • تاریخ شروع

magbot

کاربر اخراجی
عضویت
5/31/19
ارسال ها
10
امتیاز واکنش
4
طراحی یک صفحه محصول شگفت انگیز با پیوست های CSS پس زمینه

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


ابتدا باید یک تصویر پسزمینه را به یک ظرف HTML اضافه کنید. سپس ویژگی پسوند دلخواه تعریف می کند که آیا تصویر را با محتوا پیمایش کنید یا آن را ثابت نگه دارید. شما می توانید ثابت یا پیمایش را به عنوان مقدار پس زمینه دلبستگی استفاده کنید.


بگذارید بگوییم شما دارای 4 ظروف با ضمیمه های پس زمینه ثابت در همان موقعیت است. در چنین مواردی تصاویر در بالای صفحه بعدی قرار می گیرند و محتوا به صورت عمودی مانند آنچه که معمولا انجام می شود، تراز می شود. بیایید سعی کنیم این مفهوم را با استفاده از نمای گرافیکی درک کنیم.


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





اکنون اجازه می دهد نگاهی به نحوه قرار دادن ظروف در مثال بالا بگذارید.


 موقعیت کانتینر تصویر


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


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

صفحه محصول شامل محصولات در مرکز صفحه به عنوان تصاویر است. سپس ما دو بخش ناوبری برای پائین و نوار کناری را توسعه خواهیم داد. بخش محصولات شامل اثر اصلی این آموزش است. بنابراین شروع کنیم به طراحی تصاویر محصول.
ما 4 تصویری که در قسمت قبلی استفاده کردیم. در اینجا، ارتفاع کانتینگیها را به اندازه 700px تنظیم کردم. در نسخه ی نمایشی این ارتفاع با استفاده از ارتفاع پنجره مرورگر محاسبه می شود از آنجایی که برای کنترل ناوبری مورد نیاز است و اثر را درست نشان می دهد.


حالا شما می توانید صفحه پایین را پیمایش کنید و شما می توانید اثر پیمایش را همانطور که در زیر نشان داده شده مشاهده کنید.

بررسی طراحی سایت و رابط کاربری جدید YouTube


۴۰ مجموعه رایگان آیکون رسانه های اجتماعی


اشتباهات متداول بصری در بازاریابی محتوا
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
sslri دانلود مجموعه‌ فونت 3000 تایی انگلیسی برای طراحی و ویرایش گفتگوی آزاد 0
elecomco مباحث و مشکلات نصب اندروید استودیو Android Studio برای شروع طراحی اپلیکیشن مباحث و مشکلات مربوط به اندروید 0
WALKER دانلود افزونه طراحی نشان برای محصولات ووکامرس Woo Badge Designer افزونه های وردپرس 0
mona.habibizadeh چرا طراحی اپلیکیشن فروشگاهی ؟ بازی های اندروید 1
sslri نرم افزار طراحی وب سایت های رسپانسیو Bootstrap Studio 4.5.7 Cracked درخواست و دانلود نرم افزار 0
C سوال در مورد شروع طراحی وب طراحی وب 8
A آموزش طراحی سایت با وردپرس آموزشهای وردپرس 0
M اطلاعیه نمونه های خیره کننده طراحی رابط کاربری تعاملی موبایل وردپرس 0
M پذیرش رویکرد طراحی در مرورگر آموزش های برنامه نویسی 0
M آموزش طراحی اپ برای ساعت اپل اخبار 1
M شروع به خرید کد و تم طراحی سایت در Codester طراحی وب 0
WALKER دانلود Product Loops for WooCommerce v1.5.2 افزونه طراحی سبک نمایش محصولات ووکامرس افزونه های وردپرس 19
Admin دانلود HayyaBuild v4.0 - WordPress Builder افزونه صفحه ساز وردپرس (امکان طراحی هدر و فوتر) افزونه های وردپرس 0
WALKER دانلود JetBlog - Blogging Package for Elementor Page Builder v2.2.9 افزونه طراحی صفحات وبلاگی و خبری در صفحه‌ساز المنتور افزونه های وردپرس 19
WALKER دانلود افزونه طراحی منوی پیشرفته در وردپرس WP Mega Menu Pro v2.1.4 افزونه های وردپرس 7
WALKER دانلود افزونه طراحی و سفارشی سازی تی شرت در ووکامرس WooCommerce Custom T-Shirt Designer v2.0.8 افزونه های وردپرس 1
WALKER دانلود افزونه طراحی آنلاین محصول ووکامرس Fancy Product Designer | WooCommerce WordPress v4.4.0 افزونه های وردپرس 29
Magical اندروید دانلود Logo Maker - Logo Designer and Creator PRO 2.4 - نرم افزار طراحی و ایجاد لوگو حرفه ای برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Rhonna Designs 2.38 - نرم افزار طراحی و ویرایشگر تصویر برای اندروید + دیتابیس نرم افزارهای اندروید 0
Magical دانلود Material Lock - Applock & Fingerprint Lock Pro 2.3.4 - ابزار قفل برنامه با طراحی متریال مخصوص اندروید نرم افزارهای اندروید 0
maede تغییرات قالب یک استایل تبلیغاتی بسازید آموزشهای زنفورو 0
mona.habibizadeh اجرای اندروید روی آیفون به کمک یک قاب محافظ آموزش های سخت افزار 0
elecomco اجرا و اشکال زدایی یا دیباگ اپلیکیشن در یک دستگاه سخت افزاری با ADB اندروید آموزش های برنامه نویسی 0
elecomco می خواهید همه چیز درباره برنامه نویسی اندروید را با یک پکیج و با یه استاد خود یاد بگیرید؟ گفتگوی آزاد 0
elecomco مهارت های یاد گرفتنی برای تبدیل شدن به یک برنامه نویس اندروید آموزش های برنامه نویسی 1
elecomco چطوری از یک وب سایت درامدزایی کنیم؟ طراحی وب 0
Admin قرعه کشی یک عدد سرور مجازی قدرتمند ایران برای کاربران اِی فری گفتگوی آزاد 13
Admin دامین رایگان یک ساله .best به مناسبت BLACK FRIDAY WEEK طراحی وب 0
alirahmani7443 راهنمایی در مورد فعال کردن پذیرفتن دیدگاه به صورت پیشفرض در یک پست تایپ وردپرس آموزشهای وردپرس 2
saeedGeo آموزش چطور یک سایت وردپرس را از لوکال هاست به سرور منتقل کنیم؟ آموزشهای وردپرس 0
4 ارور 404 در یک لینک فارسی پشتیبانی زنفورو 12
M نحوه نوشتن یک پست بلاگ بهینه شده ( SEO )در وردپرس وردپرس 0
J O K E R آموزش اضافه شدن یک سوم به اشتراک فیلیمو نرم افزارهای اندروید 0
J O K E R آموزش اضافه شدن یک سوم به اشتراک فیلیمو آموزش های پرمیوم 0
A امروز می خوام یک روش برای چسباندن زیرنویس به فیلم در اندروید رو اموزش بدم آموزشها 1
J O K E R فعالسازی فعالسازی یک گیگ اینترنت رایگان همراه اول آموزش های نرم افزار 0
J O K E R فعالسازی فعالسازی رایگان یک گیگابایت اینترنت هدیه ایرانسل در لنز آموزش های نرم افزار 0
WALKER آموزش حذف همه نظرات وردپرس بصورت دسته جمعی با یک کلیک آموزشهای وردپرس 0
WALKER آموزش آموزش ریدایرکت به نتیجه جستجو در صورت وجود یک نتیجه در وردپرس آموزشهای وردپرس 0
WALKER بسته شد اکانت پرمیوم سایت یک مووی YekMovie اکانت پرمیوم سایت های فیلم 1
arezoshomali درباره صفحه ساز وردپرس المنتور افزونه های وردپرس 0
mona.habibizadeh راهنمای انتخاب و خرید صفحه کلید مناسب آموزش های سخت افزار 0
maede افزون باکس های هشدار به صفحه اصلی انجمن پشتیبانی زنفورو 4
maede مباحث و مشکلات افزودن ویجت به صفحه اصلی پشتیبانی زنفورو 0
sslri افزونه صفحه دانلود زنفورو2 - Xenbros Download Page افزونه های زنفورو 0
sslri دانلود افزایش امکانات صفحه ساز المنتور - Elementor Extras افزونه های وردپرس 7
sslri دانلود افزونه YOOtheme Pro v2.2.4 - کامپوننت قدرتمند صفحه ساز و تم ساز افزونه های وردپرس 4
sslri افزونه صفحه دانلود برای پیوست ها و منابع D.C Style Advanced Download 1.0.2 افزونه های زنفورو 0
WALKER دانلود افزونه امکانات جانبی صفحه ساز المنتور Premium Addons PRO افزونه های وردپرس 32
sslri دانلود افزونه صفحه ساز پیشرفته WPBakery Page Builder نسخه 6.1 افزونه های وردپرس 1

موضوعات مشابه

shape1
shape2
shape3
shape4
shape7
shape8
بالا