صفحه اصلی شما یک عنصر مهم در طرح وب سایت شماست . این اولین فرصت واقعی است که شما باید کسب و کارتان را معرفی کنید یا محصولی که به فروش می رسانید، طراحی آن کلید است. صفحه فرود با یک هدف متمرکز طراحی شده به عنوان یک تماس به عمل (CTA) طراحی شده است. استفاده از رنگ ها و تصاویر برای تکمیل خواست های به عمل و تجربه کاربر ضروری است.
در این آموزش، ما از طریق چگونگی ایجاد یک صفحه فرود جذاب برای نام تجاری مد داستانی راه می یابیم. این مرکز در اطراف طراحی یکپارچه روی صفحه با تصاویر بزرگ و انتقال متحرک که در شناور رخ می دهد تمرکز می شود. این صفحه دارای دو تماس روشن برای دکمه های عمل است و ما از HTML، Sass برای یک ظاهر طراحی شده و لمس جاوا اسکریپت وانیل استفاده خواهیم کرد که از نحو ES6 استفاده می کند.
01. تنظیم کنید
روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید
اگر شما از CodePen استفاده می کنید، مطمئن شوید که CSS در تنظیمات قلم «SCSS» تنظیم شده است. شما می توانید این تغییر را با کلیک روی زبانه تنظیمات، CSS را انتخاب کرده و CSS Preprocessor را به گزینه SCSS تغییر دهید.
سپس ما می توانیم در HTML ما اضافه کنیم. ما قصد داریم یک بخش به نام "چپ" و یک بخش به نام "راست" در یک کلاس کانتینر قرار دهیم، هر دو بخش به یک کلاس از صفحه نمایش داده می شود.
02. پایان دادن به HTML
روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید
برای تکمیل HTML ما، در عنوان برای هر بخش با استفاده از یک برچسب h1 اضافه خواهیم کرد. در زیر آن، ما باید یک دکمه اضافه کنیم که اگر این یک پروژه دنیای واقعی بود، به یک صفحه دیگر لینک کند. ما این کلاس دکمه رابرای نگه داشتن چیزهای زیبا و ساده ارائه خواهیم داد.
Mens Fashion
Learn More
Womens Fashion
Learn More
03. کاوش متغیرهای ساس
یکی از چیزهایی که همه ما در مورد Sass عاشق آن هستیم استفاده از متغیرها است. با وجود اینکه متغیرهای CSS بومی حمایت بیشتری می کنند، ما با استفاده از Sass، چیزهایی را ایمن نگه می داریم. ما این را در بالای ما .scss قرار می دهیم و می توانید هر رنگی را که می خواهید انتخاب کنید، اما با استفاده از ارزش های rgba ما انعطاف پذیری بیشتری به ما می دهد.
/** Variables **/
$container-BgColor: #444;
$left-bgColor: rgba(136, 226, 247, 0.7);
$left-button-hover: rgba(94, 226, 247, 0.7);
$right-bgColor: rgba(227, 140, 219, 0.8);
$right-button-hover: rgba(255, 140, 219, 0.7);
$hover-width: 75%;
$small-width: 25%;
$animateSpeed: 1000ms;
04. تنظیم ظاهر بدن
اولا، ما تمام پشته و حاشیه پیش فرض را برای بدن پاک می کنیم و پس از آن خانواده فونت را برای باز کردن Sans تنظیم می کنیم. این فقط روی دکمه تاثیر می گذارد، بنابراین مهم نیست که چه فونت ای را استفاده کنیم. سپس عرض و ارتفاع را به 100٪ تنظیم می کنیم و مطمئن شویم که هر چیزی که بر روی محور X سرریز می شود، پنهان می شود.
html, body {
padding:0;
margin:0;
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
05. سبک عناوین بخش
زمان انتخاب یک فونت گوگل برای عناوین بخش است - ما Playfair Display را انتخاب کرده ایم. سپس با استفاده از translateX می توانیم اطمینان حاصل کنیم که عنوان های بخش همیشه بر روی محور X محور می شوند.
h1 {
font-size: 5rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
white-space: nowrap;
font-family: 'Playfair Display', serif;
}
06- CTA را برجسته کنید
دکمه های ما به عنوان درخواست های ما به عمل عمل می کنند، بنابراین این ها باید بزرگ، جسورانه و موقعیتی باشند که در آن آنها به راحتی کلیک کنند. هر دو دکمه یک مرز سفید و اثر گذار جالب دارند. سبک های پیش فرض برای هر دو دکمه همانند هستند، با این وجود ما رنگ های خود را روی شناور تغییر می دهیم.
.button {
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 2.6rem;
padding-top: 1.2rem;
width: 15rem;
text-align: center;
color: white;
border: 3px solid #fff;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
transition: all .2s;
دکمه های اصلی دارای یک اثر شناور ساده ساده هستند و ما از متغیرهای Sass که برای رنگ مشخص شده است استفاده خواهیم کرد که رنگ مشابهی با پسزمینه صفحه خواهد بود.
.screen.left .button:hover {
background-color: $left-button-hover;
border-color: $left-button-hover;
}
.screen.right .button:hover {
background-color: $right-button-hover;
border-color: $right-button-hover;
07. پس زمینه و صفحه های ظرف را تنظیم کنید
روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید
کلاس کانتینر به عنوان پوسته صفحه ما عمل می کند و موقعیت این را به نسبی تعریف می کنیم، به این دلیل که ما می خواهیم صفحه را به موقعیت مطلق قرار دهیم. ظرف ما یک رنگ پسزمینه به طور پیش فرض را ارائه می دهیم، اما البته این را نمی بینیم زیرا ما رنگ های مختلف را برای هر دو زمینه صفحه نمایش تنظیم می کنیم.
.container {
position: relative;
width: 100%;
height: 100%;
background: $container-BgColor;
.screen {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
}
08. اضافه کردن تصاویر پس زمینه
هر دو بخش چپ و راست یک تصویر را نمایش می دهند و شما می توانید تصاویر سهام بدون حق امتیاز را از وبسایت هایی مانند Unsplash ، Pixabay یا Pexels (که من در این آموزش استفاده کرده ام) را پیدا کنم. برای ساختن چیزهای ساده تر، از یک سرویس میزبانی تصویر رایگان و سرویس اشتراک گذاری به نام imgbb استفاده می کنم که می توانیم در CSS ما پیوند برقرار کنیم.
.screen.left {
left:0;
background: url('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.jpg') center center no-repeat;
background-size: cover;
&:before {
position:absolute;
content: "";
width: 100%;
height: 100%;
background: $left-bgColor;
}
}
سمت راست صفحه همچنین یک تصویر پس زمینه با استفاده از imgbb را نمایش می دهد و رنگ پس زمینه را به رنگ صورتی تنظیم می کنیم. باز هم، اندازه پس زمینه را برای پوشش تنظیم می کنیم . این به ما امکان می دهد همه عنصر حاوی را پوشش دهد که در مورد ما کلاس کلاس .sclass است .
.screen.right {
right:0;
background: url('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.jpg') center center no-repeat;
background-size: cover;
&:before {
position:absolute;
content: "";
width: 100%;
height: 100%;
background: $right-bgColor;
}
}
09. اضافه کردن انتقال و اثرات شناور
سرعت انیمیشن برای اثر ماوراء بر روی هر دو صفحه با گذرانی که مقدار متغیر $ animateSpeed ما را حفظ می کند ، 1000 مگابایت (یک ثانیه) کنترل می شود. سپس ما با دادن انیمیشن برخی از کاهش، که سهولت در داخل و خارج است که کمک خواهد کرد که به ما یک انیمیشن صاف را به پایان برساند.
.screen.left, .screen.right, .screen.right:before, .screen.left:before {
transition: $animateSpeed all ease-in-out;
}
آنچه ما می خواهیم اتفاق بیافتد این است که هنگامی که روی صفحه سمت چپ حرکت می کنید، با استفاده از جاوا اسکریپت (که ما در یک مرحله بعد خواهیم نوشت) یک کلاس اضافه شده به آن بخش اضافه می شود. هنگامی که این کلاس اضافه می شود، آن صفحه به هر پلات متغیری که مشخص کردیم، بسط خواهد یافت - که 75٪ خواهد بود و سپس سمت راست به متغیر عرض کوچکتر (25٪) تنظیم می شود.
.hover-left .left {
width: $hover-width;
}
.hover-left .right {
width: $small-width;
}
.hover-left .right:before {
z-index: 2;
}
این دقیقا همان کار را با سمت چپ انجام می دهد، جایی که یک کلاس جدید با استفاده از جاوااسکریپت در ماوس اضافه می شود و صفحه سمت راست بر آن برسد. ما همچنین باید مطمئن شوید که z-index به 2 تنظیم شده است تادکمه CTA بیشتر برجسته شود.
.hover-right .right {
width: $hover-width;
}
.hover-right .left {
width: $small-width;
}
.hover-right .left:before {
z-index: 2;
}
10. به جاوا اسکریپت بروید
ما با استفاده از لمس وانیل جاوا اسکریپت برای کمک به اضافه کردن و حذف کلاس های CSS خواهیم بود و ما همچنین از برخی از ویژگی های جدید ES6 استفاده خواهیم کرد. اولین چیزی که باید انجام دهیم این است که برخی متغیرهای ثابت را اعلام کنیم.
از آنجا که ما سند را بیش از یک بار استفاده خواهیم کرد، یک متغیر ثابت با نام doc را تنظیم می کنیم و سند را در آن ذخیره می کنیم تا بتوانیم کلمه "document" را خوب و کوتاه نگه داریم.
const doc = document;
در حال حاضر ما نیاز به تنظیم سه مقدار ثابت تر است که ذخیره .right ، .left و .container انتخاب. دلیل اینکه ما از ثابت استفاده می کنیم این است که می دانیم ما نمی خواهیم ارزش این را تغییر دهیم، بنابراین استفاده از ثابت ها منطقی است. با این که اکنون تنظیم شده است، ما می توانیم پیش برویم و برخی از رویدادهای ماوس را به آنها اضافه کنیم.
const right = doc.querySelector(".right");
const left = doc.querySelector(".left");
const container = doc.querySelector(".container");
با استفاده از متغیر ثابت چپ ما در آخرین مرحله اعلام کردیم، اکنون می توانیم یک شنونده رویداد را به آن اضافه کنیم. این رویداد رویداد موس می باشد و به جای استفاده از یک تابع فراخوانی، از یک ویژگی ES6 دیگر به نام Arrow Functions (() => استفاده خواهیم کرد.
// adds a class to the container element on hover
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
});
11. یک کلاس اضافه و حذف کنید
در مرحله آخر، شنونده رویداد ما اضافه شده است mouseenter صورتی که کلاس ظرف اصلی را هدف قرار و می افزاید: کلاس جدید به نام شناور به سمت چپ به عنصر بخش سمت چپ. با این نام افزوده شده، اکنون باید آن را حذف کنیم. ما این کار را با استفاده از رویداد mouseleave و روش .remove () انجام خواهیم داد.
// removes the class that was added on hover
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
});
تا به امروز ما همه چیز را روی صفحه سمت چپ انجام داده ایم. حالا ما جاوا اسکریپت را خاتمه خواهیم داد و کلاس ها را در عناصر بخش راست اضافه و حذف خواهیم کرد. باز هم ما از نحوه کارکرد فلش در اینجا استفاده کرده ایم تا همه چیز را خوب و منظم نگاه داریم.
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
});
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
});
12. آن را پاسخگو باشید
روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید
هیچ پروژه ای - مهم نیست که چقدر بزرگ یا کوچک باشد باید از پاسخگویی جلوگیری کند. بنابراین، در این مرحله برخی از پرس و جوی های رسانه ای به CSS اضافه می کنیم و این پروژه کوچک را به عنوان سازگار با دستگاه های تلفن همراه به عنوان بهترین امکان ممکن می سازیم. ارزش دیدن CodePen اصلی را دارد تا ببینید که این کار چگونه انجام می شود.
@media(max-width: 800px) {
h1 {
font-size: 2rem; }
.button {
width: 12rem;
}
ما اطمینان دادیم که وقتی عرض صفحه ما به 800 پیکسل میرسد، فونت و دکمهها در اندازه کاهش مییابد. بنابراین، برای پایان دادن به همه چیز، ما می خواهیم ارتفاع را نیز هدف قرار دهیم و مطمئن شویم که دکمه های ما در پایین صفحه حرکت می کنند، هنگامی که ارتفاع صفحه زیر 700 پیکسل می شود.
@media(max-height: 700px) {
.button {
top: 70%;
} }
رویداد طراحی وب سایت ایجاد لندن در تاریخ 19-21 سپتامبر 2018، ارائه یک برنامه بسته بندی از بلندگوهای صنعت پیشرو، یک روز کامل از کارگاه ها و فرصت های ارزشمندی شبکه - از دست ندهید. اکنون بلیط تولید خود را دریافت کنید .
محصولات مشابه فروشی
-
قالب Orions - قالب html صفحه فرود اپلیکیشن فارسی و راستچین
قالب html تک صفحه ایقالب Orions یک قالب html صفحه فرود اپلیکیشن HTML5 ممتاز، کاملاً پاسخگو و چند منظوره است که برای هر نوع برنامه تلفن همراه، برنامه های راه اندازی، وب سایت های تک صفحه ای برای انواع مختلف مشاغل مناسب است.
ویژگی های قالب Orions قالب html صفحه فرود
- فارسی و راستچین
- کیفیت طراحی برتر
- مدرن، انعطاف پذیر و قابل تنظیم
- 3 نسخه نمایشی مختلف رنگارنگ
- انتقال صاف صفحه
- HTML5 و CSS3 معتبر
- فونت های گوگل
- آیکن های FontAwesome
- آیکن های LineAwesome
- منوی کلاسیک
- گرافیک عالی
- گرافیک رتینا
- و خیلی بیشتر
79000 139000 -
دانلود قالب Qexal قالب HTML صفحات فرود بوت استرپ 5
شرکتیقالب Qexal یک قالب صفحه کاملاً پاسخگو در تمام دستگاه ها برای انتخاب مناسب برای شروع کار جدید یا تجارت مداوم شماست. با جدیدترین bootstrap v5-beta1 ساخته شده است. می توانید محتویات ، تصاویر و scss آن را با توجه به اطلاعات شرکت خود به روز کنید. قالب Qexal دارای 9 نوع طرح مختلف است که برای کسب و کار شما کاملا کافی است. نسخه راستچین و چپ چین (فارسی و انگلیسی) قالب Qexal در دو نسخه اصلی چپ چین و همچنین راستچین که توسط تیم ملت وب آماده شده در اختیار خریداران عزیز قرار میگیرد. برخی از ویژگی های قالب Qexal فارسی و راستچین بر اساس Bootstrap v5-beta1 طراحی تمیز و مینیمال 9 صفحه اصلی مختلف وابستگی jQuery وجود ندارد صفحات Auth (ورود ، ثبت نام ، رمز عبور خود را فراموش کرده اید) فرم تماس با ما پشتیبانی SCSS ساخته شده با HTML5 و CSS3 فونت ایران یکام قلم های گوگل آسان برای سفارشی سازی کد تمیز طراحی مدرن و خیلی...99000 169000 -
صفحه اول وآخر کاتالوگ لایه باز PSD
متفرفهطرح لایه بازصفحه اول اخرکاتالوگ این طرح به صورت کاملا لایه باز در اختیار شما عزیزان با قیمتی ناچیز قرار گرفته شده، این فایل آماده چاپ می باشد و اصلاح رنگ و اندازه نیز اعمال شده. در ضمن این طرح با کمی تغییر می تواند برای انوع صنوف و بنا به خلاقیت شما هر صنعت و حرفه دیگری مورد استفاده قرار گیرد. ضمناً لایه های راهنما جهت مشاهده اندازه چاپ و برش پس از چاپ قرار داده شده است. همچنین به صورت رایگان لوگوی طراحی شده نیز در فایل مورد نظر قرار دارد. *این فایل دارای پشتیبانی کاملا رایگان می باشد. درون فایل مورد نظر مجموعه ای از فونت های به روز شده برای طراحی قرار دارد. (فارسی/لاتین) همچنین میتوانید از این کارت ویزیت به عنوان طرح های الکترونیکی در فضای مجازی استفاده نمایید. ابعاد : A3(استاندارد) فرمت فایل : PSD رزولوشن: 300 Dpi (حرفه ای آماده چاپ) مد رنگ:...23000 30000 -
موکاپ صفحه نمایش موبایل
موکاپموکاپ صفحه نمایش موبایل جهت نمایش صفحات وب به صورت کاملا لایه باز و با کیفیت و همچنین نمایش صفحات موبایل و نرم افزار به جهت جذاب ساختن و نمایش طراحی شما به صورت سه بعدی می باشد که ارائه طراحی های شما را آسان تر و حرفه ای تر و قابل فهم تر برای مخاطب می کند. این موکاپ به صورت کاملا لایه باز و با مد رنگ RGB و با کیفیت طراحی شده است که به راحتی و با چند کلیک می تواند طرح خود را جایگذاری نمایید. اکثر موکاپ های حرفه ای در مارکت های خارجی با هزینه های بسیار بالا فروخته می شود، اما ملت وب با هزینه بسیار ناچیز و جهت حمایت از طراحان و کانون های تبلیعاتی و همچنین فعالین این حوزه، این موکاپ را ارائه نموده است. *این فایل دارای پشتیبانی کاملا رایگان می باشد. درون فایل مورد نظر مجموعه ای از فونت های به روز شده برای طراحی قرار دارد. (فارسی/لاتین) همچنین شما می توانید با کلیک روی کلمه...20000 20500 -
قالب HTML شرکتی تک صفحه ای
شرکتیقالب mwhtml1 یک قالب شرکتی تک صفحه ای و فوق العاده سریع و رسپانسیو میباشد که برای انواع وبسایت های شرکتی، رزومه، نمونه کار و ... میتواند مورد استفاده قرار گیرد.
قالب بصورت کاملا فارسی و راستچین بوده و برای استفاده آماده میباشد. صفحات بصورت اسلایدی عمودی اسکرول میشوند. برای مشاهده دقیق پیشنمایش را مشاده نمایید.
89000 159000 -
خدمات کامپیوتری و طراحی سایت
تراکتتراکت لایه باز تبلیغاتی خدمات کامپیوتری و طراحی سایت
طرح تراکت لایه بازخدمات کامپیوتری و طراحی سایت با پس زمینه آبی طراحی شده و در طرح از وکتور های باکیفیت و کاملا لایه بازاستفاده شده است.
تراکت تبلیغاتی لایه باز خدمات کامپیوتری و طراحی سایت را می توانید با تغییر سایز برای کارت ویزیت لایه باز خدمات کامپیوتری و طراحی سایت نیز استفاده نمایید.
حجم : 4 مگابایت
ابعاد : 20 در 30 سانتی متر
پسوند : psd
20000 33000 -
بنر لایه باز طراحی شده آبمیوه و بستنی
بنربنر لایه باز طراحی شده آبمیوه و بستنی
طرح ببنر لایه باز طراحی شده آبمیوه و بستنی با پس زمینه قرمز و زردطراحی شده و در طرح از تصویر باکیفیت و کاملا لایه بازاستفاده شده است.
بنر تبلیغاتی لایه باز طراحی شده آبمیوه و بستنی را می توانید با تغییر سایز برای تراکت و کارت ویزیت تبلیغاتی نیز استفاده نمایید.
حجم : 60 مگابایت
ابعاد : 300 در 120 سانتی متر
پسوند: PSD
23000 43000 -
دانلود قالب HTML چند منظوره تک صفحه ای GEO
شرکتیقالب GEO یک قالب چند منظوره html بر اساس بوت استرپ ۳ و کاملا ریسپانسیو می باشد. قالب html جیو به صورت ویژه برای تمامی بازار یابان، توسعه دهنده گان وب و اپلیکیشن موبایل طراحی شده است. کسانی که بدون دردسر و صرف زمان و هزینه های اضافی به دنبال یک قالب ساده و تمیز با بهترین تجربه کاربری برای صفحات فرود سایت ها و پروژه های خود می گردند.از این قالب می توانید در انواع تکنولوژی های تحت وب از جمله ASP ، PHP و موبایل و غیره استفاده کنید. GEO یک قالب وب ریسپانسیو تک صفحه ای براساس فریمورک بوت استرپ ۳ ، HTML5 و CSS3 ساخته شده است. تمام کد ها به زیبایی نوشته شده اند. از این قالب می توانید برای طراحی سایت های نمونه کار شرکتی، آژانس ها کسب و کار و غیره استفاده کنید.در ادامه برخی از ویژگی های قالب تک صفحه ای html ذکر شده است: ویژگی های قالب GEO فارسی و راستچین طراحی کاملا ریسپانسیو طراحی...95000 139000 -
موکاپ صفحه نمایش موبایل جدید
موکاپموکاپ صفحه نمایش موبایل جهت نمایش صفحات وب به صورت کاملا لایه باز و با کیفیت و همچنین نمایش صفحات موبایل و نرم افزار به جهت جذاب ساختن و نمایش طراحی شما به صورت سه بعدی می باشد که ارائه طراحی های شما را آسان تر و حرفه ای تر و قابل فهم تر برای مخاطب می کند. این موکاپ به صورت کاملا لایه باز و با مد رنگ RGB و با کیفیت طراحی شده است که به راحتی و با چند کلیک می تواند طرح خود را جایگذاری نمایید. اکثر موکاپ های حرفه ای در مارکت های خارجی با هزینه های بسیار بالا فروخته می شود، اما ملت وب با هزینه بسیار ناچیز و جهت حمایت از طراحان و کانون های تبلیعاتی و همچنین فعالین این حوزه، این موکاپ را ارائه نموده است. *این فایل دارای پشتیبانی کاملا رایگان می باشد. درون فایل مورد نظر مجموعه ای از فونت های به روز شده برای طراحی قرار دارد. (فارسی/لاتین) همچنین شما می توانید با کلیک روی کلمه...20000 20500 -
تراکت لایه باز تبلیغاتی تیم طراحی وبسایت
تراکتتراکت لایه باز تبلیغاتی تیم طراحی وبسایت
طرح تراکت تیم طراحی وبسایت با پس زمینه آبی طراحی شده و در طرح از وکتور های باکیفیت و کاملا لایه بازاستفاده شده است.
تراکت تبلیغاتی تیم طراحی وبسایت را می توانید با تغییر سایز برای بنر و کارت ویزیت تیم طراحی وبسایت نیز استفاده نمایید.
حجم : 12.5 مگابایت
ابعاد : 21 در 30 سانتی متر
پسوند : psd
20000 28000
آخرین های مشابه مشاهده بیشتر
-
آموزش طراحی صفحه فرود دو تیکه
آموزش cssصفحه اصلی شما یک عنصر مهم در طرح وب سایت شماست . این اولین فرصت واقعی است که شما باید کسب و کارتان را معرفی کنید یا محصولی که به فروش می رسانید، طراحی آن کلید است. صفحه فرود با یک هدف متمرکز طراحی شده به عنوان یک تماس به عمل (CTA) طراحی شده است. استفاده از رنگ ها و تصاویر برای تکمیل خواست های به عمل و تجربه کاربر ضروری است. CodePen برای این آموزش ببینید در این...رایگان -
دانلود رایگان صفحه فرود آژانس طراحی
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
آموزش رایگان طراحی صفحه تکی محصول با المنتور(طراحی قالب با المنتور وردپرس-قسمت پنجم)
آموزش wordpressافزونه های مورد نیاز: المنتور المنتور پرو ووکامرس صفحات محصولات، همیشه بیشترین جایی هستند که به صورت متوسط مورد بازدید قرار می گیرند، ما امروز می خواهیم به شما آموزش طراحی قالب صفحه های محصولات را بدهیم. در ابتدا وارد پیشخوان کاربری شده و از تب قالب ها روی افزودن جدید کلیک می کنیم. حالا از داخل نوع قالب، حالت محصول تکی را انتخاب می کنیم و نام دلخواهی را در زیر آن وارد می کنیم. بعد...رایگان -
آموزش رایگان طراحی صفحه نتایج جستجو با المنتور (طراحی قالب با المنتور وردپرس - قسمت ششم)
افزونه های مورد نیاز: المنتور المنتور پرو کاربران وقتی به دنبال موضوعی می گردند، سعی دارند در اولین نگاه موضوع خود را پیدا کرده و به آن دست یابند. پس با توجه به اهمیت این موضوع باید ظاهر صفحه نتیجه جستجو تا جایی که جا دارد ساده و در دسترس باشد. از همین رو برای طراحی قالب دلخواه نتایج جستجو، در ابتدا وارد پیشخوان کاربری شده و از تب قالب ها روی افزودن جدید کلیک می کنیم. حالا از داخل نوع...رایگان -
آموزش رایگان طراحی صفحه نوشته تکی با المنتور (طراحی قالب با المنتور وردپرس - قسمت هفتم)
افزونه های مورد نیاز: المنتور المنتور پرو نوشته های وبلاگ ها همیشه پربازدید بوده و هستند، همین امر باعث می شود تا ما به اهمیت آن پی برده و قالبی جذاب و زیبا برای آن طراحی کنیم. برای همین ابتدا وارد پیشخوان کاربری شده و از تب قالب ها روی افزودن جدید کلیک می کنیم. حالا از داخل نوع قالب، حالت تکی و نوع پست را نوشته انتخاب می کنیم و نام دلخواهی را در زیر آن وارد می کنیم. بعد از آن روی ایجاد...رایگان -
آموزش رایگان طراحی صفحه 404 با المنتور (طراحی قالب با المنتور وردپرس - قسمت هشتم)
افزونه های مورد نیاز: المنتور المنتور پرو روزانه افراد مختلفی سایت های ما را جستجو می کنند، در این میان ممکن است گاهی اوقات آدرسی از سایت را به اشتباه وارد کنند و یا آن صفحه ای که می خواهند را پیدا نکنند. این جاست که ممکن است بازدید کننده به اشتباه فکر کند مشکل از اینترنت یا جای دیگر است، اما این طور نیست و او فقط آدرس را اشتباه وارد کرده است، حالا برای اینکه بازدید کننده را به سمت...رایگان -
دانلود رایگان قالب html تک صفحه ای و شرکتی صفحه فرود (لندینگ) نرم افزار Softland
قالب رایگان htmlقالب Sofiland یک قالب html صفحه فرود کاملاً پاسخگو در همه دستگاه ها برای انتخاب عالی برای راه اندازی جدید یا کسب و کار در حال انجام شما است. این با آخرین بوت استرپ v5-beta1 ساخته شده است. شما به سادگی می توانید محتویات، تصاویر و scss آن را با توجه به اطلاعات شرکت خود به روز کنید. Sofiland دارای 6 نوع طرح بندی مختلف است که برای کسب و کار شما کافی است. امکانات قالب html سافی لند بر اساس Bootstrap v5.1.2 طراحی...رایگان -
دانلود رایگان الگو صفحه فرود ورزشی با عکس
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود 25 بهترین صفحه فرود رایگان وردپرس 2019
قالب وردپرس رایگانصفحات فرود به معنای ساختن برای تبدیل خوب است، یک صفحه فرود به خوبی بهینه سازی شده باید چیزی برای هر کسب و کار داشته باشد. امروز ما به برخی از صفحات رایگان صفحه وردپرس نگاه می کنیم. صفحه اصلی اولین چیزی است که کاربر در وب سایت شما می بیند. باید متمرکز و تعاملی باشد. معمولا برای تشویق کاربر برای انجام اقدام در یک صفحه فرود، برای تماس با دکمه های عمل و فرم های ثبت نام استفاده می...رایگان -
دانلود رایگان وکتور صفحه فرود آژانس مسافرتی
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
وکتور ورود به سیستم برای صفحه فرود رایگان
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود قالب html صفحه فرود Zeeko رایگان
قالب رایگان htmlقالب Zeeko یک الگوی صفحه فرود چند منظوره است که برای هرگونه برنامه توسعه ، نمایندگی یا مشاغل ساخته شده است. کاملاً پاسخگو است و با bootstrap v4.3.1 ساخته شده است. این مناسب برای ویترین محصول برنامه ، راه اندازی ها ، وب سایت های شخصی و حتی آژانس های وب است. شما به راحتی قادر خواهید بود آن را برای نیازهای خود تنظیم کنید. امکانات: بر اساس بوت استرپ توییتر 4.3.1 8+ صفحات HTML فرم تماس با...رایگان -
دانلود مجموعه قالب html صفحه فرود و معرفی SuperProps
قالب رایگان htmlبه React Page Landing Next Landing خوش آمديد ، با قطعات React ، Next Js ، Gatsby Js & Styled ساخته شده است. NO جی کوئری !، ما اجزای واکنش پذیری قابل استفاده مجدد و معماری مدرن یکپارچه سازی مدرن را ایجاد کردیم ، بنابراین می توانید چندین برنامه با اجزای مشترک بسازید. می توانید از این فرودها برای برنامه واکنش خود استفاده کنید. استقرار آن بسیار آسان است ، ما یکپارچه سازی کامل Firebase با آن را فراهم کرده ایم. می...رایگان -
دانلود رایگان قالب HTML صفحه فرود اپلیکیشن Sigma
قالب رایگان htmlقالب Sigma یک قالب HTML زیبا برای فروش یا ارائه برنامه موبایل ، وب یا دسک تاپ شماست. به راحتی می توانید رنگ ها ، تصاویر و متن را تغییر دهید تا برای شما آماده شود! قالب Sigma به شما کمک می کند تا اپلیکیشن خود را به خلاقانه ترین روش معرفی کنید - از مجموعه ای از چهار صفحه اصلی از پیش طراحی شده یکی را انتخاب کنید و یک راه حل عالی برای محصول منحصر به فرد خود ایجاد کنید. قالب Sigmaشامل فرم تماس ، بخش...رایگان -
آموزش رایگان طراحی کاروسل محصولات با افزونه jetwoobuilder (طراحی قالب با المنتور وردپرس - قسمت دهم)
افزونه های مورد نیاز: المنتور المنتور پرو jetwoobuilder (جت ووبولیدر) یکی از دغدغه های وردپرس کارها همیشه باز بودن دستشان در طراحی است! حالا المنتور برای این دسته از افراد که می خواهند ظاهر سایت را خودشان طراحی کنند، راهی گذاشته است و آن هم ساخت قالب با المنتوره. در این میان سایت های فروشگاهی بسیاری وجود دارند که شبیه به هم هستند، شما برای اینکه بخواهید ظاهر فروشگاه متفاوتی داشته...رایگان -
دانلود رایگان قالب وردپرس خلاقانه صفحه فرود - قالب ProgriSaaS
قالب وردپرس رایگانقالب ProgriSaaS یک قالب برتر وردپرس برای saas ، نرم افزار ، راه اندازی ، برنامه تلفن همراه ، آژانس ، میزبانی ، آژانس های رمز ارز یا صفحه فرود برنامه است. این یک قالب تجاری با مجموعه بزرگی از طرح بندی صفحه اصلی کاملاً انعطاف پذیر است که به طور خاص برای کمک به شما در ساخت یک وب سایت طراحی شده است. قالب ProgriSaaS از قبل با یک سازنده صفحه کشیدن و رها کردن (المنتور) همراه است تا اطمینان حاصل شود که می...رایگان -
دانلود رایگان قالب وردپرس صفحه فرود اپلیکیشن - قالب AeroLand
قالب وردپرس رایگانقالب AeroLand قالب وردپرس صفحه فرود اپلیکیشن مجموعه بزرگی از طرح بندی های از پیش ساخته شده قابل تنظیم پاسخگو را برای شرکت های فناوری اطلاعات و استارتاپ های فناوری به ارمغان می آورد تا به سرعت صفحات فرود قدرتمند بسازید. به طور کلی، قالب AeroLand بر اساس مفاهیم و نیازهای متعدد فرود است، که امکان استفاده برای اهداف مختلف را فراهم می کند. اپ لندینگ: به شرکتها کمک کنید تا بهترین راهاندازی...رایگان -
دانلود رایگان قالب وردپرس معرفی و دانلود نرم افزار (صفحه فرود ) APRIMO
قالب وردپرس رایگانAprimo یک طرح خلاقانه، حرفه ای، مدرن وردپرس است که می تواند برای برنامه موبایل، برنامه کاربردی و هر نوع صفحه فرود مربوط به برنامه مورد استفاده قرار گیرد. در اینجا شما 11 صفحه با یک کد به راحتی قابل تنظیم با طراحی پیکسل کامل با 9 نوع مختلف خانه دریافت کنید. 9 تغییرات خانه 11 صفحه آهنگساز ویژوال تست شده بر روی دستگاه های واقعی چیدمان انعطاف پذیر واردات نسخه ی نمایشی، محتوا و...رایگان -
دانلود رایگان قالب Destin قالب HTML صفحه فرود (لندینگ) بوت استرپ 5
قالب رایگان htmlقالب Destin یک قالب HTML و عناصر وب برای یک شرکت میزبان است. رنگ های مدرن ، منحنی های زیبا ، چیدمان عملی و فرم های ساده. این یک الگوی قدرتمند آسان برای استفاده ، سازگار با موبایل ، کاملاً قابل تنظیم برای سئو دوستانه است که با جدیدترین بوت استرپ ساخته شده است. امکانات قالب Destin قالب HTML صفحه فرود (لندینگ) بوت استرپ 5 ساخته شده با بوت استرپ 5.x کد تمیز HTML5 و CSS3 HTML5 و CSS3 معتبر مرورگر...رایگان -
دانلود رایگان قالب Bufet - قالب وردپرس صفحه فرود نرم افزار و اپلیکیشن ( راستچین )
قالب وردپرس رایگانقالب Bufet یک قالب وردپرس قدرتمند پاسخگو و صفحه فرود است. قالب Bufet 100٪ پاسخگو است و در انواع برنامه ها ، Saas (نرم افزاری به عنوان سرویس) ، Startup ، Admin Dashboard ، Tech Entrepeneurs Business و غیره خیره کننده به نظر می رسد. سبک های خلاقانه و تمیز با ui و ux زیبا. قالب Bufet یک انتخاب عالی برای شماست. کاربران سایت شما را دوست خواهند داشت زیرا به آن تجربه کاربری بی نظیری (UX) و رابط کاربری (UI) را می دهد امکانات و ویژگی...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید