0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

بلاگ

آموزش ایجاد جدول در bootstrap
مطالعه :

آموزش bootstrap – آموزش جدول در بوت استرپ با سلام به همراهان همیشگی تیم طراحی سایت اصفهان وب یار، این جلسه در راستای یادگیری بوت استرپ با آموزش جدول در بوت استرپ همراه شما عزیزان هستیم. در مقالات گذشته نحوه ی شبکه بندی در بوت استرپ و استایل دهی به متن در بوت استرپ آموزش داده شد. در این آموزش به ایجاد جدول، کلاس table-bordered ، کلاس table-hover و کلاس table-striped پرداخته می شود. همراه ما باشید تا خیلی واضح و ساده با جدول در بوت استرپ آشنا شوید. ایجاد جدول در بوت استرپ برای ایجاد جدول در بوت استرپ از کلاس table در تگ table استفاده می کنیم. جدول پایه به طور پیش فرض شامل خطوط افقی است و padding دارد. کلاس table، استایل مقدماتی را به جدول اضافه می کند و کلاس table-striped جدول را به صورت راه راه در می آورد. در کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید. <table class=”table”> <thead> <tr> <td>Class</td> <td>Description</td> </tr> </thead> <tbody> <tr> <td>.active</td> <td>Applies the hover color to the table row or table cell</td> </tr> <tr> <td>.success</td> <td>Indicates a successful or positive action</td> </tr> <tr> <td>.info</td> <td>Indicates a neutral informative change or action</td> </tr> </tbody> </table> <br><br> <table class=”table table-striped” style=”background:#b3b3ff;”> <thead> <tr> <td>Class</td> <td>Description</td> </tr> </thead> <tbody> <tr> <td>.active</td> <td>Applies the hover color […]

طراحی رسپانسو واکنش گرا
مطالعه :

آموزش ساده طراحی سایت ریسپانسیو responsive واکنش گرا در تبلت و موبایل در قالب پروژه منو ریسپانسیو به طراحی سایت با قابلیت های نمایش یوزر فرندلی userfrendly سایت در گجت ها گویند. برای طراحی سایت ریسپانسیو بعد از طراحی قابل درک از سه سایز وبسایت تان ابتدا در فایل هدر قالبتان دستورات ریسپانسیو را وارد کنید: آموزش طراحی سایت ریسپانسیو responsive واکنش گرا <meta name=”apple-mobile-web-app-capable” content=”yes”> <meta name = “viewport” content = “width =device-width, initial-scale = 1.0”> حالا بروی css قالب کار می‌کنیم. مقدار width ها را برابر صد در صد می دهیم . width:100%; در طراحی منوی سایت از  آیکنی با قابلیت display با مقدار hidden  استفاده می کنیم.(چون در حالت ریسپانسیو در تبلت فقط آیکن نمایش داده می شود.) در پایان آموزش همه کد ها و فایل html قالب موجوداست. حالا تعیین میکنیم که سایز گجت ما در چه ابعادی است. @media only screen and (max-width:1024px;){ مقادیر دیگر سی اس اس #menu-icon { display:inline-block;}کد نمایش آیکن منو بجای منو } آموزش طراحی سایت با قابلیت ریسپانسیو responsive واکنش گرا تبلت موبایل به همن راحتی سایت رسپونسیو شد. دانلود فایل آموزش  فیلم آموزش طراحی سایت واکنش گرا به زودی ….   مرورگرهای موبایل برای سازگاری با سایت‌هایی که در گذشته طراحی شده‌اند، از مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود […]

آموزش کدهای منو ریسپانسیو
مطالعه :

با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید. آموزش طراحی منو ریسپانسیوResponsive قدم به قدم با من همراه باشید تا ببینید که به چه راحتی به طراحی و کدنویسی یک منو ریسپانسیو (واکنش گرا) میپردازیم,و شما پس از یاد گرفتن کدهای طراحی منو واکنش گرا به راحتی میتوانید منو ریسپانسیو داشته باشید که در حالت عادی به صورت افقی نمایش داده بشود,و در صفحه نمایش هایی همانند موبایل ,تبلت,به صورت یک آیکون نمایش داده شود که با کلیک کردن بر روی این آیکون منو به صورت منوی کشویی ریسپانسیو نمایش داده شود. برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم . اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش داده […]

مطالعه :

آموزش bootstrap طراحی رسپونسیو رسپانسیو سیستم شبکه بندی در بوت استرپ در این آموزش قصد داریم سیستم شبکه بندی بوت استرپ آموزش bootstrap طراحی رسپونسیو رسپانسیو را بحث کنیم. شبکه (Grid) چیست؟ با مراجعه به ویکی پدیا تعریف زیر را از شبکه داریم: شبکه در طراحی گرافیکی به یک ساختار (معمولاً دو بعدی) گفته میشود که برای ایجاد محتوای ساخت یافته از خطوط مستقیم عمودی و افقی استفاه میکند. از این سیستم برای ایجاد لایه های متناسب با چاپ استفاده میشود. همچنین در طراحی وب برای ایجاد لایه های متناسب و سازگار با یکدیگر از سیستم شبکه بندی استفاده میشود. سیستم شبکه بندی در بوت استرپ صفحه وب ما را به قسمت های مساوی تقسیم میکند. همانند یک برگه در نقشه کشی ؛ با این کار میتوانیم سازگاری و تناسب بین اشیاء مختلف در وب سایت خودمون رو حفظ کنیم. سیستم شبکه بندی در بوت استرپ چیست؟ باتوجه به تعریف رسمی سایت بوت استرپ ؛ سیستم شبکه بندی در بوت استرپ به صورت زیر تعریف میشود: بوت استرپ شامل سیستم شبکه بندی متحرک و با رویکردی Mobile First است که عرض صفحه را به ۱۲ ستون مساوی تقسیم میکند. اندازه ستون ها باتوجه به عرض دستگاه کم و زیاد میشوند. بوت استرپ شامل کلاسهای از پیش تعریف شده ای است که با استفاده از آنها میتوانید به لایه بندی صفحات […]

woocommerce
مطالعه :

فروشگاه اینترنتی ووکامرس امروزه فروشگاه های اینترنتی زیادی در دنیا وجود دارند. این فروشگاه های اینترنتی در فروش بسیاری از محصولات مورد استفاده قرار می گیرند. برای داشتن یک فروشگاه اینترنتی لازم است یک وب سایت داشته باشیم که بتوانیم محصولات خود را در آن قرار داده و بفروش برسانیم. در این نوشته می خواهیم شما را با فروشگاه اینترنتی ووکامرس و مزیت های این فروشگاه آشنا کنیم. همچنین می توانید از طراحی فروشگاه اینترنتی ما بازدید کنید. ووکامرس چیست؟ ووکامرس افزونه ای به زبان php و مبتنی بر وردپرس می باشد. با استفاده از ووکامرس می توانید یک فروشگاه اینترنتی کامل و جامع داشته باشید. این افزونه توسط تیم woothemes، مایک جولی، جیمز کاستر، کلاودیا سانچز و بری کوییج ساخته شده است و بیش از ۶۸۰۰۰۰۰ بار دانلود شده است که با توجه به این آمار، به محبوبیت روز افزون این افزونه پی می بریم. با استفاده از فروشگاه اینترنتی ووکامرس به راحتی می توانید تصاویری از محصول و توضیحاتی از آن را در سایت خود قرار دهید و مشتریان بعد از انتخاب کردن محصول پول محصول موردنظر را پرداخت کرده و آن را دریافت کنند.       با استفاده از فروشگاه اینترنتی ووکامرس می توانید محصولات خود را به دو صورت به فروش برسانید: 1) محصولات را به صورت پستی ارسال کنید در این حالت زمانی که […]

Login Form
مطالعه :

ایجاد فرم login با استفاده از افزونه و بدون استفاده از آن     ایجاد فرم login با استفاده از افزونه و بدون استفاده از افزونه چگونه می باشد؟ قصد تیم با تجربه طراحی سایت اصفهان وب یار از نوشتن این مقاله، ایجاد صفحه ی ورودی است که نام و رمز کاربران را دریافت می کند و پس از اطمینان حاصل کردن از درستی اطلاعات، آن ها را به پیشخوان وردپرس می فرستد. این هدایت می تواند بدون افزونه انجام گیرد اما در این آموزش خواهید دید که چگونه با استفاده از افزونه این کار را انجام می دهیم.       ساختن فرم ورود بدون نیاز به افزونه برای به وجود آوردن صفحه ورود، در ابتدا به یک فرم که در حقیقت همان فرم login می باشد نیاز داریم. که فرم login مورد نظر را می توانیم خودمان طراحی کرده. و یا از فرم هایی به صورت آماده استفاده کنیم. بعد از آن باید به فایل function برویم و کد زیر را در آن بگذاریم.       در کد نوشته شده در بالا تابع dlf_auth  برای اعتبار سنجی و تابع dlf_form برای ورود می باشد و از کد زیر برای لینک دادن فایل های css استفاده می کنیم.       در ابتدا صفحه ورود ما کامل شده است و باید از آن یک shortcode ایجاد کنیم تا در […]