

ما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد.
ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می تواند سبد خرید را بررسی کند و به خرید پرداخت یا ادامه خرید را ادامه دهد. سبد خرید به پایین صفحه، در هر زمان در دسترس است.
آیکن ها: Nucleoapp.com
ایجاد ساختار
ساختار سبد خرید سبد از دو عنصر اصلی تشکیل شده است: یک .cd-cart-trigger
برای سبد خرید و مجموع سبد خرید و یک .cd-cart
محتوا سبد خرید.
<div class="cd-cart-container empty">
<a href="#0" class="cd-cart-trigger">
Cart
<ul class="count"><!-- cart items count -->
<li>0</li>
<li>0</li>
</ul> <!-- .count -->
</a>
<div class="cd-cart">
<div class="wrapper">
<header>
<h2>Cart</h2>
<span class="undo">Item removed. <a href="#0">Undo</a></span>
</header>
<div class="body">
<ul>
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</div>
<footer>
<a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
</footer>
</div>
</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->
لیست غیر ارادی داخل div.body
عنصر به طور پیش فرض خالی است (سبد خالی)؛ هنگامی که یک محصول به سبد اضافه می شود، یک عنصر مورد لیست با استفاده از جاوااسکریپت وارد شده است.
<div class="body">
<ul>
<li class="product">
<div class="product-image">
<a href="#0"><img src="img/thumb.jpg" alt="placeholder"></a>
</div>
<div class="product-details">
<h3><a href="#0">Product Name</a></h3>
<span class="price">$25.99</span>
<div class="actions">
<a href="#0" class="delete-item">Delete</a>
<div class="quantity">
<label for="cd-product-'+ productId +'">Qty</label>
<span class="select">
<select id="cd-product-'+ productId +'" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
افزودن سبک
.cd-cart
و .cd-cart-trigger
عناصر هر دو در موقعیت ثابت و خارج از دید نقل مکان کرد (با استفاده از یک translateY
). هنگامی که یک آیتم به سبد اضافه می شود، .empty
کلاس از آن خارج می شود .cd-cart-container
و سبد نشان داده می شود.
.cd-cart-trigger,
.cd-cart {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.empty .cd-cart-trigger,
.empty .cd-cart {
/* hide cart */
transform: translateY(150px);
}
همانطور که برای انیمیشن سبد خرید: ما ارتفاع و عرض ثابت به div.wrapper
عنصر (همان از a.cd-cart-trigger
)؛ هنگامی که سبد خرید باز است، ما از .cart-open
کلاس استفاده می کنیم تا ارتفاع و عرض آن را تحسین کنیم، در حالی که محتوای سبد کالایی را نشان می دهد.
.cd-cart .wrapper {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
overflow: hidden;
height: 72px;
width: 72px;
border-radius: 6px;
transition: height .4s .1s, width .4s .1s, box-shadow .3s;
transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
background: #ffffff;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}
.cart-open .cd-cart .wrapper {
height: 100%;
width: 100%;
transition-delay: 0s;
}
این .deleted
کلاس برای حذف یک مورد از سبد خرید استفاده می شود: عنصر حذف شده دارای موقعیت مطلق است و cd-item-slide-out
انیمیشن برای ایجاد اثر کشویی استفاده می شود.
.cd-cart .body li.deleted {
/* this class is added to an item when it is removed form the cart */
position: absolute;
left: 1.4em;
width: calc(100% - 2.8em);
opacity: 0;
animation: cd-item-slide-out .3s forwards;
}
@keyframes cd-item-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(80px);
opacity: 0;
}
}
اگر کاربر بر روی 'واگرد' کلیک کند، .deleted
کلاس حذف می شود و عنصر در لیست دوباره وارد می شود.
مدیریت رویدادها
هنگامی که کاربر بر روی .cd-add-to-cart
دکمه کلیک می کند، این addProduct()
تابع برای قرار دادن یک آیتم جدید در داخل .body > ul
عنصر استفاده می شود. جزئیات محصول مورد استفاده متغیرهایی هستند که باید با اطلاعات واقعی محصول جایگزین شوند:
function addProduct() {
//this is just a product placeholder
var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
cartList.prepend(productAdded);
}
توابع اضافی، مانند updateCartCount()
یا updateCartTotal()
، تعریف شده اند برای به روز رسانی تعداد سبد خرید و کل در هنگام اضافه کردن / حذف محصولات جدید و یا زمانی که مقدار محصول اضافه شده به سبد خرید تغییر کرده است.
محصولات مشابه فروشی
-
دانلود 3 موکاپ کاربردی و جذاب ساک دستی و جعبه خرید
موکاپدانلود 3 موکاپ جذاب ( ساک دستی و جعبه خرید ) برای علاقمندان نکته : فرمت این موکاپها برای کم حجم تر شدن tiff هست.. پس از دانلود و خارج کردن از حالت زیپ روی فایلها کلیک راست کرده و گزینه ( باز کردن با..) یا open with رو انتخاب و فتوشاپ رو انتخاب کنید و با فایلتون کار کنید عزیزان میتونند با خرید و دانلود این دو موکاپ لوگوی جذاب لوگوهاشون رو در بهترین حالت در معرض نمایش قرار بدن موکاپ ساک...13,000 -
پک کامل 22 قالب اینستاگرام
موکاپمجموعه 22 فایل لایه باز اینستاگرام پک فایل لایه باز قالب اینستاگرام به منظور ایجاد تم جذاب برای پیج های اینستاگرام در اختیار شما کاربران قرار گرفته.برای سلایق مختلف همه این فایل ها یک جا و با قیمت بسار کمتر از مجموع آن ها در یک مجموعه جمع آوری شده . از ویژگی های این فایل می توان به : پست اینستاگرام استوری اینستاگرام قالب ویدیو قالب ای جی تی وی کاور هایلایت پست...13,000 112200 -
پک کامل لایه باز اینستاگرام
موکاپپک کامل اینستاگرام مخصوص پیج های تولید محتوا و خبری با طراحی مدرن و شیک در اختیار کاربران قرار گرفت. این پک با 9 فایل لایه باز و یک فایل برای فونت ها به همراه عکس های نمونه مناسب پیج های اطلاع رسانی ، تکنولوژی ، گیم ، رسانه و تولید محتوا و ..... ایجاد شده که به راحتی همه المان های آن قابل تغییر است. قالب لایه باز اینستاگرام - تم اینستاگرام - قالب اینستاگرام طرح پست...13,000 51000 -
طرح کامل منو لایه باز رستوران،کافی شاپ،فست فود
متفرفهمنو لایه باز کافی شاپ | طرح لایه باز منو کافی شاپ | طرح کامل منوی رستوران | طرح منو فست فود معرفی طرح کامل منو لایه باز رستوران طرح کامل منو رستوران کاملا لایه باز بوده و این طرح مناسب برای کافی شاپ، رستوران،فست فود،کافه سنتی میباشد که باتوجه به مدرن بودن طرح از دید خوبی برخوردار میباشد، در روند طراحی این محصول سعی کردیم تمامی استانداردهای لازم را رعایت کنیم تا بعد از چاپ...19,000 39000 -
خرید طرح فاکتور لایه باز
فاکتورفاکتور رنگی psd پی اس دی مناسب برای فروشگاه ها، طراحی شده.این فاکتور کاملا لایه باز بوده و شما میتوانید در فرم آن نیز تعقیرات خاص خودتان انجام دهید.مقدار نسخه یا برگ هم به انتخاب خود شخص است که می تواند دو برگی و یا سه برگی شود و علاوه بر این درباره اندازه کاغذ معمولا انتخاب در اندازه A4 است اما انتخاب اندازه A5 هم مشکلی وجود ندارد.شما پس از دانلود طرح فایل psd آنرا میتوانید ویرایش کرده سپس...13,000 22000 -
دانلود قالب وردپرس آموزش آنلاین Eduma فارسی
قالب وردپرس آموزش آنلاینقالب Eduma که یکی از مطرح ترین و حرفه ای ترین قالب وردپرس آموزش آنلاین با طراحی واکنشگرا میباشد و مناسب برای سایت آموزش های آنلاین ، آموزشگاه ها ،مدارس،مهدکودک،و تدریس خصوصی و … میباشد. امروزه سایت های زیادی از راه فروش آموزش های خود کسب کار عالی راه اندازی کرده اند ! قالب وردپرس آموزش آنلاین Eduma یک قالب بی نظیر برای سایت هایی با موضوع آموزش آنلاین، آموزش، دانشگاه، و … است . دارای 6...79,000 187000 -
دانلود قالب وردپرس آموزش آنلاین Masterstudy فارسی
قالب وردپرس آموزش آنلاینقالب MasterStudy بهترین قالب وردپرس آموزشی برای سازمان های آموزشی، که دوره های خود را به فروش می رسانند و کلاس های محلی را سازماندهی می کنند. قالب آموزش آنلاین Masterstudy به عنوان تم آموزشی وردپرس برای مرکز یادگیری شما طراحی شده است. شما میتوانید دوره های رایگان یا پولی را به اشتراک بگذارید. قالب فروش دوره Masterstudy ساده و بدون دردسر برای ساخت، سفارشی سازی و مدیریت میباشد. پلاگین ویژوال کامپوزر...59,000 159000 -
افزونه مدیریت سبد خرید رها شده woocommerce cart reports
افزونه ووکامرسآمار ترک سبد خرید spent basket را از داشبورد ووکامرس WooCommerce خود مشاهده کنید افزونه “مدیریت سبد خرید رها شده ” معیارهای واقعی در سبد خرید باز و رها شده مشتریان شما را ارائه می دهد. spent basket همچنین دو ابزارک داشبورد ارائه می دهد که مدیران می توانند نگاه سریع به روند و آمار سبد خرید داشته باشند. سبد های خرید باز در حال حاضر و یک نمای کلی 30 روزه از داشبورد woocommerce را مشاهده...19,000 79000 -
پیشنهاد ویژه خرید دو قالب بسیار شیک پست اینستاگرام با 50 درصد تخفیف
پست و استوری اینستاگرامدانلود مجموعه 2 قالب پست اینستاگرام شیک با تخفیف ویژه !!! توجه : قبل از هرچیز پیشنهاد میکنم حتما دیگر قالبهای بنده روهم ببینید که بسیار کاربردی ان شما عزیزان میتونید بعد از دانلود این طرح اون رو در فتوشاپ ویرایش کنید و از عکس و متن مورد نظر خودتون دراین طرح و قالب استفاده کنید و طرح خاص خودتون رو داشته باشید طرح لایه باز پست اینستاگرام چیست؟ طرح لایه باز به طرحی گفته...13,000 34000 -
دانلود قالب وردپرس آموزش آنلاین Course Builder فارسی (قالب CorpTrain)
قالب وردپرس آموزش آنلاینقالب Course Builder قالب وردپرس آموزش آنلاین چند منظوره، با کیفیت بالا برای معلمان، مدرسان، مرکز آموزش، مدارس، دانشگاه ها برای ایجاد و مدیریت وب سایت دوره خود آنلاین شما است. انعطاف پذیری و قدرت این قالب وردپرس آموزس آنلاین می تواند به شما در ایجاد دوره های آنلاین زیبا کمک کند، دانش خود را در دنیا به اشتراک بگذارید و با فروش آنها درآمد کسب کند. قالب Course Builder آسان برای استفاده بدون...49,000 159000 -
دانلود قالب udema قالب آموزش آنلاین HTML + پنل مدیریت
شرکتیقالب UDEMA قالب مدرن HTML 5 قالب سایت آموزشی است. قالب Udema مناسب برای وب سایت آموزشی، LMS، مرکز آموزش، دوره های آموزشی، کالج، آکادمی، دانشگاه، مدرسه است. امکانات و ویژگی های قالب udema قالب آموزش آنلاین HTML کد معتبر و تمیز HTML5 / CSS3 بوت استرپ 4 فرم پذیرش پی اچ پی 5 صفحات اصلی: فرم جستجو پس زمینه ویدئو لایراسلایدر تمام قد نوار کوکی 2 نسخه منو نوار کناری چسبنده افقی چسبنده جداول قیمت گذاری...39,000 69000 -
دانلود قالب Academia قالب وردپرس آموزش آنلاین
قالب وردپرس آموزش آنلاینقالب Academia ، یک قالب وردپرس آموزشی فوق العاده حرفه ای است که برای موسسه های آموزشی بسیار مناسب است. این قالب دارای انیمیشن و کاملاً واکنش گرا بوده و به راحتی بروی تمامی دستگاه ها قابل مشاهده و استفاده است. این سایت به استاندارد سازی قالب ها برای دستگاه های مختلف مانند کامپیوتر و موبایل و آیپد مشهور است. قالب Academia را میتوانید با موضوعات آموزشی ، موسسات آموزشی ، دانشگاهی ، سایت مدرسه ،...59,000 159000 -
دانلود قالب University قالب وردپرس آموزش و دانشگاه
قالب وردپرس آموزش آنلاینقالب University همان طور که از اسمش پیداست یک قالب بسیار زیبا و چندمنظوره وردپرس است که مناسب راه اندازی سایت هایی با موضوع آموزش و پرورش و حتی دانشگاهی است. از قابلیت های این پوسته می توان به قسمت نمونه کار ها اسلایدر و رویداد ها و همچنین لیست آنلاین دوره ها اشاره کرد. تمام امکانات به اینجا ختم نخواهد شد این پوسته کاملا واکنش گرامی باشد و از ووکامرس و بی بی پرس و کنترل پنل بسیار قدرتمند...49,000 149000 -
دانلود قالب eCademy قالب وردپرس آموزش آنلاین
قالب وردپرس آموزش آنلاینقالب eCademy یک قالب مدرن آموزش آنلاین وردپرس است که به طور هدفمند برای آموزش و بخصوص آموزش آنلاین طراحی و ساخته شده است! برای وب سایت های آموزشی ، ارائه دهندگان دوره های آنلاین ، آموزش آنلاین ، مدیریت یادگیری ، صدور گواهینامه ، eSchool ، LMS ، آموزش زبان ، ارائه دهنده آموزش از راه دور ، آموزش مدرن ، دوره های یوگا ، مربیگری بهداشت ، مهد کودک و غیره مناسب است. قالب eCademy از پلاگین Zoom برای...69,000 129000 -
افزونه ووکامرس پرداخت سریع و مستقیم به همراه سبد خرید پاپ آپ- افزونه Instantio نسخه پرو
افزونه ووکامرسافزونه Instantio (یا WooInstant) با به حداقل رساندن مراحل فرآیند تسویه حساب ، نرخ رها کردن سبد خرید شما را کاهش می دهد. با داشتن آیکن سبد شناور ، پرداخت چند مرحله ای را به یک مرحله تبدیل می کند. مراحل پرداخت فقط 10-15 ثانیه طول می کشد. تنها کاری که مشتری شما باید انجام دهد این است "افزودن به سبد خرید" ، یک کشوی پاپ آپ/سبد خرید با نمای سبد نمایان می شود. با کاهش مراحل ، پرداخت زمان کمتری طول می...19,000 59000 -
دانلود قالب Turitor قالب وردپرس آموزش آنلاین وردپرس
قالب وردپرس آموزش آنلاینقالب Turitor یک قالب وردپرس آموزش آنلاین مناسب برای ایجاد وب سایتهای آموزشی ، دوره های آنلاین ، LMS ، بازاریابان محتوای آموزشی و موارد دیگر است. قالب Turitor همچنین یک طرح داخلی برای دانشگاه ، مهدکودک ارائه می دهد تا بتوانید به سرعت از وب سایت دانشگاه یا مدرسه راه اندازی کنید. قالب Turitor ساخته شده با چارچوب Bootstrap4 ، Elementor Builder ، Elements Kit Addons ، یک قالب شیک برای ساخت وبسایت آموزشی شماست. صفحه ساز...69,000 189000 -
تراکت لایه باز آموزش تری دی مکس 3d max
تراکتطرح لایه باز تراکت تبلیغاتی آموزش تری دی مکس 3d max با پس زمینه سفید و فیروزه ای طراحی شده و در طرح از تصویر با کیفیت استفاده شده است. این تراکت تبلیغاتی آموزش 3d max را می توانید با تغییر سایز برای بنر و کارت ویزیت و تراکت نیز استفاده نمایید. حجم : 12 مگابایت ابعاد : 14.8 در 21 سانتی متر رزولیشن: 300 پسوند :...13,000 -
پوستر تبلیغاتی لایه باز آموزش فتوشاپ
تراکتطرح لایه باز پوستر تبلیغاتی آموزش فتوشاپ با پس زمینه سفید و صورتی طراحی شده و در طرح از تصویر با کیفیت استفاده شده است. این پوستر تبلیغاتی آموزش فتوشاپ را می توانید با تغییر سایز برای بنر و کارت ویزیت و تراکت نیز استفاده نمایید. حجم : 26 مگابایت ابعاد : 29.7 در 42 سانتی متر پسوند :...13,000 -
تراکت لایه باز آموزش عکاسی و فیلمبرداری
تراکتطرح لایه باز پوستر تبلیغاتی آموزش عکاسی و فیلمبرداری با پس زمینه سفید و صورتی طراحی شده و در طرح از تصویر با کیفیت استفاده شده است. این پوستر تبلیغاتی آموزش عکاسی و فیلمبرداری را می توانید با تغییر سایز برای بنر و کارت ویزیت و تراکت نیز استفاده نمایید. حجم : 20 مگابایت ابعاد : 21 در 29.7 سانتی متر پسوند :...13,000 -
کارت ویزیت لایه باز آموزش اصولی کاراته
کارت ویزیتطرح کارت ویزیت لایه باز آموزش اصولی کاراته با پسوند psd طراحی شده است . در طرحکارت ویزیت لایه باز آموزش اصولی کاراته از تصویر و وکتور با کیفیت و دوربری شده استفاده شده است.
با تغییر در ابعاد این کارت ویزیت می توانید از آن بعنوان بنر مغازه ، تراکت و حتی بیلبورد محیطی استفاده نمایید.
حجم : 5.23 مگابایت
ابعاد : 9 در 6 سانتی متر
پسوند : psd
13,000 27000 -
تراکت لایه باز استخر و آموزش شنا با فرمت psd طرح جدید
بنربیشک حتمای این طرح را در هیچ کجا نخواهید دید! زیباترین تراکت لایه باز استخر و آموزش شنا یک تراکت خاص و متفاوت به استخر و آموزش شنا خود هدیه دهید... طرح تراکت لایه بازاستخر و آموزش شنا کاملا لایه باز بوده و این طرح مناسب برای استخر و آموزش شنا میباشد که از دید خوبی برخوردار است ، این طرح فوق کاملاً لایه باز با فرمت psd و از کدهای رنگی cmyk که مخصوص چاپ هست استفاده شده.این طرح با...16,000 30000
آخرین های مشابه مشاهده بیشتر
-
آموزش کامل و سورس سبد خرید css , jquery با پیشنمایش و دانلود
آموزش cssما در مورد فرآیند "اضافه به سبد خرید" به الگوهای مختلفی استفاده می کنیم. ایده اصلی این الگو، اطلاع دادن به کاربر است که یک مورد به سبد اضافه شده است و او را با یک پیوند برای ادامه به پرداخت، ارائه می دهد. ما با این ایده مخفی کردن سبد خرید به طور پیش فرض آزمایش کرده ایم و آن را زمانی که کاربر بر روی دکمه «افزودن به سبد خرید» کلیک می کند نشان می دهد. به این ترتیب کاربر می...رایگان -
سورس jquery افزودن به سبد خرید سریع
آموزش cssاستفاده از صفحه نمایش بزرگتر نباید محدود به استفاده از تصاویر / عناصر بزرگتر باشد. ما می توانیم این پیکسل های اضافی را با افزایش تجربه کاربر با ویژگی های اضافی کار کنیم. UX استاندارد برای یک گالری محصول: کلیک کاربر بر روی یک محصول که او دوست دارد، و سپس به صفحه محصول تک حرکت می کند. از این جا، او قصد دارد برخی از گزینه ها را انتخاب کند و در نهایت محصول را به سبد خرید اضافه کند. هیچ...رایگان -
سورس کامل به همراه پیشنمایش تایم لاین jqruey , css
آموزش cssخط زمانی عمودی ما تا کنون یکی از محبوب ترین منابع در ملت وب است. بسیاری از شما از ما خواسته اید تا یک جدول زمانی افقی را نیز اضافه کنید. که تقدیم شما میگردد. ساخت یک جدول زمانی افقی کمی دشوار بود، زیرا شما نمی توانید به عمودی (بصری) رفتار پیمایش تکیه کنید. ما تصمیم گرفتیم جداول زمانی و حوادث را جدا کنیم، اولین کسی که مانند یک نوار لغزنده کار می کند، در حالی که دومین اشغال...رایگان -
آموزش ایجاد کاتالوگ محصولات در وردپرس (بدون سبد خرید)
آموزش wordpressآیا می خواهید یک فروشگاه محصول در وردپرس بدون اضافه کردن به سبد خرید تهیه کنید؟ در این مقاله ما به شما نشان خواهیم داد که چگونه به راحتی یک فروشگاه محصول را در WordPress بدون سبد خرید ایجاد کنید. چرا یک کاتالوگ محصول را بدون سبد خرید اضافه کنید برخی از شرکت ها محصولاتی دارند که نمیتوانند به صورت آنلاین به فروش برسند چرا که آنها قیمت نامعلومی دارند. این باعث می شود که آنها از...رایگان -
آموزش کامل نصب اسکریپت پی اچ پی فاکس phpfox
PHPFox اسکریپتی است که به شما اجازه می دهد یک سایت شبکه اجتماعی را بدون دانش برنامه نویسی ایجاد کنید. این مجموعه آموزش PHPFox به شما گام به گام از نحوه شروع با PHPFox و در آموزش های بعدی در مورد چگونگی ایجاد سایت شبکه های اجتماعی خود را نشان می دهد. شروع به کار با phpFox همانطور که می دانیم PHPFOX یک بسته نرم افزاری است. ما باید بسته را در سرور و هاست خودمان نصب کنیم. برای تکمیل نصب، حدود 15...رایگان -
آموزش کامل و گام به گام Google Adwords Keyword Planner
آموزش wordpressکلمات کلیدی مناسب به مشتریان کمک می کنند تا محتوای شما را پیدا کنند. برای شناختن کلمات کلیدی که مشتریان شما در جستجوی آن هستند، به شما کمک می کند تا بدانید که چگونه از ابزار Google Adwords Keyword Planner استفاده کنید. این ابزار، برای هر کسی که با حساب Google Adwords در دسترس است، لیستی طولانی از اطلاعات را برای یافتن کلمات کلیدی وسیع یا طولانی فراهم می کند. ما به شما نشان می دهیم که چگونه با...رایگان -
آموزش کامل ترکیب تصاویر با یک مدل عکاسی در فوتوشاپ
آموزش فوتوشاپدر این آموزش، من به شما فرآیندهای ایجاد این هنر دیجیتال Surreal Digital را در فتوشاپ نشان می دهم . ما از یک تصویر ساده شهر شروع می کنیم و با ابر، مدل و چندین اشیا دیگر ترکیب می کنیم تا این اثر سوررئال را شکل دهیم. امتحان کنید خوب شروع کنیم! برای تکمیل این آموزش، شما به سهام زیر نیاز خواهید داشت: شهر ابر مدل سنگ برس قلم مو رعد و برق کلاغ مرحله 1 یک سند جدید با...رایگان -
آموزش کامل روتوش کردن صورت حرفه ای
آموزش فوتوشاپدر این آموزش از ملت وب قصد افزودن پوست حرفه ای و مخفی کردن جوش های صورت و روتوش حرفه را به صورت طبیعی بدون از دست دادن بافت های صورت را برای شما در دوره آموزشی رایگان به شما همراهان گرامی یاد بدهیم. تصویر نهایی منابع پرتره یک دختر مرحله 1 باز کردن یک عکس و تغییر اندازه آن با استفاده از تصویر> اندازه تصویر به 1500 پیکسل عرض و 1000px ارتفاع. گام 2 با تصحیح رنگ در عکس...رایگان -
آموزش کامل و گام به گام ساخت سایت فریلنسر با وردپرس
افزونه رایگان وردپرسساخت سایت فریلنسر(همانند پونشیا) در وردپرس یکی از دغده های اکثر کاربران وردپرسی می باشد که بنده برای شما لیستی از بهترین افزونه ها برای شما ادامه کردم که امیدوارم خوشتان آمده باشد تقویم ویرایش نویسندگان بیگانه باید با مقادیر وسیع اطلاعات مقابله کنند و برای رسیدن به اهداف خود به موقع دست یابند. وردپرس در این زمینه یک پلت فرم فوق العاده است، زیرا هر کسی اجازه می دهد محتوا...رایگان -
آموزش کامل اضافه کردن Font Awesome به وردپرس
قالب وردپرس رایگانFont Awesome مجموعه ای محبوب از آیکون ها است که می تواند به وب سایت شما اضافه شود. اضافه کردن آیکون های Font Awesome یک وبسایت دوستانه ای ایجاد می کند که بصری برای مخاطبان مورد علاقه شما جذاب است. آیکون Font Awesome فونت های CSS (تصاویر نیست)، بنابراین سریع تر بارگذاری می شود. چرا صاحبان وب سایت ها از آیکون بسیار جذاب فونت استفاده می کنند؟ آیکون ها بردار هستند به این معنی که آنها می توانند در هر...رایگان -
آموزش ویدیویی و رایگان وردپرس - قسمت سوم معرفی کامل پنل
آموزش wordpressسلام و درود بر شما در قسمت سوم از آموزش وردپرس هستیم در قسمت های قبلی به معرفی وردپرس و نصب آن در xamp پرداختیم که در این آموزش رایگان از وردپرس قصد داریم تمامی منو های وردپرس را برای شما آموزش بدیم که امیدوارم برای شما لذت بخش باشد در زیر آموزش متنی را نیز اضافه میکنم اما سعی کنید به صورت تصویری نیز به آموزش اقدام نمایید. آموزش افزودن ویرایش و حذف نوشته در وردپرس در این قسمت از آموزش قصد...رایگان -
آموزش کامل نحوه فعال سازی کد تخفیف یا کوپن در دروپال
آموزش drupalبه طور کلی، تخفیف یک مقدار یا درصد است که از قیمت فروش نرمال محصول محاسبه می شود. این روش ارائه محصولات برای فروش کاهش می یابد. شما می توانید تخفیف برای محصولات تعریف کنید که در مراحل زیر تعریف شده است. مرحله 1 - به فروشگاه بروید و روی پیکربندی کلیک کنید . مرحله 2 - روی لینک مالیات کلیک کنید که میزان و نوع مالیات را کنترل می کند. مرحله 3 -...رایگان -
آموزش ویدیویی کامل و رایگان وردپرس - قسمت اول وردپرس چیست؟
آموزش wordpressسلام و درود بر کاربران عزیز ملت وب میخواهم آموزش کامل از نحوه کارکرد وردپرس و قالب چیست و چرا باید از قالب استفاده کنیم و اینکه سازندگان قالب ها چه کسانی هستند، صحبت خواهیم کرد. به صورت مختصر میخواهم در مورد وردپرس توضیح دهم وردپرس در 27 مِی سال 2003 آن را به صورت رسمی عرضه شد، در ابتدا این سیستم همانند سایت های وبلاگدهی فعالیت میکرد بعد ها با استقبالی که شد شروع به توسعه خود کرد و بنا بر...رایگان -
15 کد تب بندی شده با css و jquery
با 15 نمونه سورس تب بندی شده در خدمت دوستان هستیم که امیدواریم خوشتان آمده باشد فایل های این مجموعه کاملا کم حجم بوده و از انیمشن های جالب و زیبا جهت باز کردن تب بندی ها استفاده گردیده که طرح را بسیار زیبا کرده است جهت نمایش آیکون ها از svg استفاده گردیده که سرعت کار را بالا ببرد از تگ های سکشن جهت باز شروع و اتمام تب ها استفاده شده است آموزش تنظیمات تب بندی ها : ما از آیکون...رایگان -
دانلود فرم جستجوی CSS3/jQuery بهمراه PSD
آموزش cssفرم جستجو بخش بسیار مهمی از یک وب سایت بوده و به کاربران اجازه می دهد ب محتوای مورد نظر را با سرعت زیاد پیدا کنند. یک فرم جستجو پیشرفته با طراحی خوب باعث می شود یک وب سایت حرفه ای و مدرن باشد. امروز برای شما کاربرای عزیز یک فرم جستجو آماده کرده ایم که میتوانید به رایگان دانلود و استفاده...رایگان -
دانلود منو ساید بار زیبا با css , jquery همراه با دمو
آموزش cssنوشتن رسپانسیو منو برای سایت های مگا، کار ساده ای نیست. اگر شما در حال کار بر روی یک پنل مدیریت هستید، احتمالا شما باید یک منوی عمودی را طراحی و توسعه دهید، با مقدار زیادی زیر مجموعه ها. به همین دلیل تصمیم گرفتیم قطعه امروز را به اشتراک بگذاریم! ناوبری نوار ابزار ما می تواند زندگی شما را ساده تر با ارائه یک قالب شروع ساده برای پروژه بعدی خود؛) آیکون: کتابخانه هسته...رایگان -
باکس ثبت نام حرفه ای با انیمیشن زیبا css,jquery
آموزش cssدر بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم. صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛) منابع: Velocity.js توسط جولیان شاپیرو. آیکون از Nucleo . ایجاد...رایگان -
دانلود رایگان اسلایدر رسپانسیو ساخته شده با jquery
آموزش cssاسلایدر جی کوئری اساسی پلاگین جی کوئری سبک و سریع برای ایجاد لغزنده تصویر پاسخگو با حداقل ویژگی ها و تم های تمیز است. امکانات: طرح رسپانسیو سبک و آسان برای استفاده به طور خودکار نوشتن شرح تصاویر با استفاده از ویژگی های عنوان فشرده سازی و لغزش انیمیشن پیمایش پیمایش و عددی خودکار بازی و شروع تصادفی پشتیبانی می شود مرورگر صلیب چگونه از آن استفاده کنید: 1. شامل آخرین...رایگان -
افزونه وردپرس سبد خرید زیبا رایگان
افزونه رایگان وردپرسیک سبد خرید حرفه ای با انیمیشن جذاب است که با کلیک بر روی افزوده به سبد خرید انجام میگیرد، همچنین قابلیت محاسبه قیمت کل تعداد به صورت آژاکس می باشد. امکانات فونتهای Google را اعمال کنید تغییر سبد خرید تغییر عرض / ارتفاع کاری تغییر موقعیت Counter رنگ های سفارشی / پس زمینه آیکون های سفارشی (SVG / تصویر / فونت آیکن ها) سفارشی کردن با استفاده از وردپرس Customizer Live Preview بین 11 انیمیشن بارگذاری...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید