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

اگر سایت شما همچنان سازگار با موبایل نیست، توصیه می کنم از مشاوره من استفاده کنید یا با متخصصان تماس بگیرید - http://www.mobile-version.ruکه همه کارها را طبق استانداردهای موتورهای جستجو انجام خواهد داد. همچنین می توانید با استفاده از همین پیوند، سایت خود را از نظر تحرک بررسی کنید.

در سال 2013 سال گوگلشروع به فشار بر وب مسترها ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html، متقاعد کردن نیاز به ایجاد تغییرات سبک وب سایت، و از سال 2015، تحرک به یکی از جنبه های رتبه بندی تبدیل شده است ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex با ایجاد یک الگوریتم ویژه Vladivostok که مناسب بودن سایت را برای مشاهده از تلفن ها در نظر می گیرد، عقب نمانده است.

Mobile Friendly امروزه فقط مراقبت از بازدیدکنندگان نیست، بلکه شرطی ضروری برای ارتقاء است.

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

سه رویکرد وجود دارد:

• آدرس و طرح بندی جداگانه - در یک زیر دامنه از فرم m.site.ru قرار داده شده است. تغییر مسیر از طریق تغییر مسیر سرور توسط عامل کاربر رخ می دهد.
• طراحی ریسپانسیو - url و html مانند فرمت دسکتاپ باقی می مانند، اما در CSS، درخواست های رسانه ای قوانین را برای صفحه های مختلف برمی گرداند.
• RESS یک طراحی واکنش گرا است، آدرس ثابت می ماند، اما سرور بسته به نوع سخت افزاری که صفحه را درخواست می کند، مجموعه های سبک را ارسال می کند.

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

نسخه موبایلی سایت: چگونه این کار را درست انجام دهیم

مراحل بعدی مستلزم داشتن دانش پایه قوی از html و css یا توانایی جستجوی سریع چیزهای نامفهوم در گوگل است.

اطلاعات برای مبتدیان: در کلمات CSS قبل آکولادبه معنی قطعات خاص فایل html، برای نمایش آن ها مسئول هستند. بیشتر با نقطه یا علامت هش نوشته می‌شود - #مکان (مخصوص: ارزش؛).

مرحله 1. محدودیت ها را حذف کنید.

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

عرض- ما به دنبال بخش های بزرگ در کد با صفحه نمایش کاملاً مشخص هستیم. اگر پارامتر بر حسب پیکسل یا نقطه مشخص شده است، باید مقدار آن را به درصد، ems و سایر واحدهایی که به محیط حساس هستند تغییر دهید. اغلب ظرف اصلی یا ناحیه محتوا دارای یک عرض ثابت است - در بیشتر موارد، محدودیت ها با جایگزینی حداکثر عرض حذف می شوند.

تصاویر- به جای اندازه های واضح، ویژگی هایی را برای تگ img تجویز می کنیم که به تصاویر سازگاری می دهد. عکس‌ها نسبت ابعاد را در کانتینرهای اصلی خود تغییر می‌دهند.

img(

حداکثر عرض: 100%

ارتفاع: خودکار؛

جداول- سازگاری کامل را نمی توان تنظیم کرد، اما می توانید با افزودن این کد، صفحاتی را با آنها برای دستگاه های تلفن همراه مناسب کنید:

جدول(

display:block;

عرض: 100%;

سرریز-x: اسکرول;

سرریز-y: پنهان;

ms-overflow-style: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: لمس;

Wraps - توسط ویژگی float تنظیم می شوند. تنظیم این گزینه به جعبه‌ها اجازه می‌دهد تا بر اساس تنظیمات پنجره حرکت کنند و با عناصری با موقعیت ثابت یا درون ظروف اصلی تنظیم شوند. عناصر div استاندارد به طور پیش فرض هر کدام به ترجمه می شوند خط جدید. به عنوان مثال، با قرار دادن بلوک های div 200 پیکسل در یک ظرف 1000 پیکسلی، می توانید این تصویر را مشاهده کنید.

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

مرحله 2: برای سازماندهی مجدد محتوا برنامه ریزی کنید.

ببینید چه جزئیاتی از سایت دسکتاپ باید در دستگاه های تلفن همراه نمایش داده شود. برای این کار به سوالات زیر پاسخ دهید:

• کدام بلوک ها فقط عملکردهای تزئینی را انجام می دهند؟ - اغلب اینها اسلایدرها، تزئینات نوار کناری، پرسشنامه ها، عکس های تصادفی هستند.
• بازدیدکنندگان چه چیزهایی را نادیده می گیرند؟ - نقشه های حرارتی کلیک ها و مسیرها به پاسخ به این سوال کمک می کند. ما بی رحمانه کم فعال ترین عناصر را پنهان می کنیم.
• چه چیزی باید در نسخه موبایل باقی بماند؟ - معمولاً این یک تبلیغ است، یک فرم بازخورد، دکمه های اشتراک یا رسانه های اجتماعی.
• در نظر بگیرید که سایت در تبلت ها، تلفن های هوشمند و تلفن های کوچک قدیمی چگونه باید باشد - می توانید ظاهر خود را برای هر دستگاه تنظیم کنید.

مرحله 3. راحتی.

ناوبری: صفحه نمایش تلفن بسیار کوچک است، منوی معمول سایت به ندرت در چنین قاب هایی قرار می گیرد. مرسوم است که منو را به صورت کشویی روی دکمه تنظیم کنید.

ناحیه محتوا: تلفن‌ها معمولاً عرض بلوک اصلی در CSS را بسته به فضای موجود روی 100٪ تنظیم می‌کنند. این بدان معنی است که متن، ماژول ها، تبلیغات، محتوای نوار کناری در دستگاه های کوچک در یک ستون نمایش داده می شود.

حسگرها: انگشتان به اندازه یک ماوس دقیق نیستند، فضای زیادی برای آنها باقی بگذارید. فضای اطراف پیوندها و سایر عناصر فعال باید حداقل 28×28 پیکسل باشد.

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

پیاده سازی پرس و جوهای رسانه ای با مثال

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

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

پرس و جوهای رسانه ای را می توان با پارامترها تخصیص داد:

• عرض و ارتفاع پنجره مرورگر؛
• عرض و ارتفاع دستگاه؛
• جهت - حالت افقی یا عمودی؛
• وضوح صفحه.

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

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

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

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

برای رفع آن، فریم های ثابت را با اضافه کردن به استایل های قالب حذف می کنیم:

صفحه فقط رسانه @ و (حداکثر عرض: 1000 پیکسل) (

Nav (عرض: 100%؛ )

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

اما بلوک ها هنوز مشکوک به نظر می رسند - بیایید صفحه نمایش آنها را با افزایش عرض به عنوان درصد تغییر دهیم تا متناسب با ابعاد مورد نظر باشد.

ما به همان mediaquery اضافه می کنیم:

بلوک (عرض: 35٪؛)

چگونه متوجه شویم ابعاد بهینهبرای بلوک های سایت شما؟ به صورت دستی محاسبه کنید یا هر شبکه آماده - شبکه سیال را به عنوان پایه در نظر بگیرید. می توانید روی استانداردهای موجود تمرکز کنید: در طرح بندی های دو ستونی با عرض پنجره 980-1050 پیکسل، لفاف 95٪ در نظر گرفته می شود، محتوا 60٪ است و 30٪ برای نوار کناری باقی می ماند. فضای باقی مانده به شکل گیری حاشیه و حاشیه برای دقت می رود.

با این حال، می توانید اندازه جعبه را روی محتوا اعمال کنید تا هر بار پیکسل ها را محاسبه نکنید، بلکه با توجه به ابعاد کلی کار کنید.

بیایید به تنظیم نمایشگر روی صفحه نمایش با وضوح کمتر ادامه دهیم:

صفحه فقط رسانه @ و (حداکثر عرض: 600 پیکسل) (

مسدود کردن (

float:none;

عرض: 85%;

حاشیه: 1em خودکار;

اگر صفحه نمایش کمتر از 600 پیکسل باشد، بلوک های ما باید در یک ستون قرار بگیرند - ما بسته بندی را حذف می کنیم، تورفتگی های جدید را تنظیم می کنیم، وسط می کنیم و عرض را تغییر می دهیم. بیشتر اوقات، 100٪ تنظیم می شود، اما اگر به دلایلی ناخوشایند است، ما اندازه خود را تعیین می کنیم.

بنابراین می توانید نه تنها ابعاد بلوک های محتوا، بلکه نمایش آنها را نیز تنظیم کنید. به عنوان مثال، برای جلوگیری از نمایش عناصر بزرگ، جایگزین کردن آنها با هر عنصر مناسب.

بیایید با استفاده از مثال تغییر رنگ ها و نمایشگرها، امکانات را نشان دهیم.

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

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

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

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

نسخه موبایلی سایت: چگونه بسازیم و به دنبال چه چیزی باشیم

همه رسانه ها را می فهمند مرورگرهای مدرن، اما در IE 8 و پایین تر کار نمی کند. مشکل با دسترسی به IE قدیمی از طریق حل می شود نظرات مشروط. آنها باید در کد قالب نوشته شوند، نه در CSS.

خود اسکریپت در github موجود است ( https://github.com/scottjehl/respond)، پشتیبانی از حداقل و حداکثر ابعاد و مدیاکوری ها را به IE های قدیمی اضافه می کند.

یک مشکل دیگر - طراحی تطبیقیبه معنای استفاده از Html5 است که باز هم برای مرورگرهای قدیمی قابل درک نیست. درمان با هک:

کد در html نوشته شده است، علاوه بر این، نمایش بلوک عناصر ایجاد شده در CSS تنظیم شده است:

سرصفحه، ناوبری، بخش، مقاله، کنار، پاورقی (نمایش: بلوک؛)

بیایید فوراً به این سؤال بپردازیم - چگونه می توان برخی از اسکریپت ها را فقط زمانی نمایش داد پارامترهای داده شدهصفحه نمایش اگر jquery نصب شده باشد، باید یک اسکریپت ساده به کد قالب اضافه کنید. اعداد به شماره های ضروری تغییر می کنند. به این صورت است: اگر عرض پنجره از 980 پیکسل بیشتر شود، اسکریپت مشخص شده در مسیر روی صفحه اعمال می شود. شما می توانید چندین مشخص کنید، نحو با قیاس از طریق یک نقطه ویرگول در داخل پرانتزهای فرفری نوشته می شود.

اگر ($(document).width() > 980) (

$.getScript("مسیر به اسکریپت");

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

فقط بررسی صحت باقی مانده است - برای این کار می توانید از مرورگر و تلفن خود استفاده کنید یا با خدمات تماس بگیرید.

اگر سایت تبدیل به سرور محلی، صحت را می توان در تعیین کرد ami.responsivedesign.is. برای نمایش مناسب، صاحبان دنور باید با ویرایش کدگذاری را به utf-8 تغییر دهند. فایل سرور httpd.conf.

این سرویس نشان می دهد که چگونه پروژه در دستگاه های مختلف به نظر می رسد.

علاوه بر این، الگو تست شده است https://developers.google.com/speed/pagespeed/insights/یا به صورت خاص https://www.google.com/webmasters/tools/mobile-friendlyو همچنین در وب مسترها.

در Yandex، این جزئیات به نظر می رسد، و گوگل به سادگی گزارش می دهد که هیچ مشکلی وجود ندارد.

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

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

با احترام، گالیولین روسلان.

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

به‌روزرسانی آینده تأثیر بسیار بیشتری بر سیستم رتبه‌بندی خواهد داشت تا همان پاندا یا .، به همین دلیل است که بهبود تجربه تلفن همراه باید اولویت شما در آینده نزدیک باشد. طبق مقاله ای از Search Engine Land on این به روز رسانی، همه سایت ها تحت آزمایش دقیق پاسخگویی تلفن همراه خواهند بود.

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

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

سایت موبایل این شرکت به دو دلیل موفق باقی می ماند: یافتن اطلاعات پیشنهادات را برای کاربران آسان تر می کند و آنها را از طریق تصاویر زیبا به فروش می رساند.

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

راه حلی وجود دارد

سوال در مورد یک موضوع. من در واقع متوجه شدم؟

در اینجا نسخه اصلاح شده برای Shop-Script 6 آمده است: تابع استاتیک عمومی isMobile($check = true) ( ​​if ($check) ( if (self::get("nomobile") !== null) ( if (self: :get("nomobile")) (waSystem::getInstance()->getStorage()->write("nomobile"، false); ) ) elseif (self::get("mobile")) (waSystem::getInstance ()- >getStorage()->نوشتن("nomobile"، true)؛...

ما یک سایت http://kotofey.md (پارک شده به وبسیست) داریم، این آینه ای از https://kotofey.webasyst.cloud (قالب فیس بوک) است که بر اساس آن برنامه فروشگاه آنلاین در فیس بوک ساخته شده است - https ://www.facebook .com/kotofey.md/app/2151596388... وجود دارد...

تغییر آیتم های منو در نسخه موبایل

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

نسخه موبایل فروشگاه آنلاین

قالب نسخه موبایل EXPRESS SHOP را به طور کامل سفارشی کنید و فروشگاه آنلاین ایجاد کنید.

طرح بندی نسخه موبایل سایت

همکاران، ظهر بخیر، پس از یک تجربه ناموفق در کار با یکی از کارشناسان این انجمن (کار از 1395/12/10 طول کشید اما هرگز تکمیل نشد و اکنون توسعه دهنده کاملا ناپدید شده است) با یک درخواست از شما درخواست می کنم برای تکمیل کامل نسخه موبایل...

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

توسعه دهندگان عزیز این ویدیو را تماشا کنید یه نفر رویش هست...

راه حلی وجود دارد

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

(اگر $wa->isMobile()) .... (/if)

+1

راه حلی وجود دارد

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

می توانید کمی بیشتر در مورد CSS توضیح دهید؟

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

نیاز به انجام: 1) حداقل. مبلغ سفارش در نسخه موبایل سایت (در نسخه معمولیدر قالب cart.js نوشته شده اما در موبایل) 2) تصویری را در صفحه سایت قرار دهید تا با کلیک کردن در اندازه کامل بزرگ شود.

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

برای غلبه بر انبوهی از ربات‌هایی که هر روز ثبت می‌شدند، مجبور شدم Google Recaptcha نسخه 2 را نصب کنم، ربات‌ها ناپدید شدند، اما اگر چک باکس "من یک ربات نیستم" برای افراد عادی کار نمی‌کند و تأیید باز می‌شود. سپس در نسخه موبایل سایت (قالب:...

راه حلی وجود دارد

ظهر بخیر بگید پیشخوان رو تو کدوم فایل ثبت کنم و به همون شکلی که تو سایت هست نمایش داده میشه؟فایل liveInternet.js رو از قالب اصلی به موبایل منتقل کردم که کد پیشخوانش هست ولی الان من آن را در نسخه موبایل سایت قرار می دهم:

- اینطوری کار کرد

تنظیم نسخه موبایل

سلام به همگی.این فروشگاه http://biznes-lunch.com/ روی تبلت با وضوح بالا به خوبی نمایش داده نمی شود چون به شکل اصلی نمایش داده می شود. در گوشی های با صفحه نمایش کوچک، نسخه موبایل باز می شود و به نظر می رسد که باید ...

من webasyst Shop-Script 6 را خریداری کردم، یک طرح جداگانه سفارش دادم (نه از قالب ها)، آیا باید تنظیمات و طراحی را برای نسخه موبایل فروشگاه آنلاین خود سفارش دهم؟

در قالب "مینیمو" در نسخه موبایل سایت، سبد بسیار نامناسب قرار دارد، تقریبا نامرئی است. آیا می توان آن را همراه با صفحه اسکرول کرد و در قسمت خاصی از صفحه ثابت نشد؟ در عکس اول سبد ...

ظهر بخیر! ما یک قالب سایت خریدیم https://www.webasyst.ru/store/theme/spring/ عملکردهای تطبیق با نسخه موبایل را دارد و مانند سایت ما، به طور دقیق تر، تصاویر را می توان با گوشی تطبیق داد. [ایمیل محافظت شده]

سلام. ما یک الگوی طراحی خریدیم https://www.webasyst.ru/store/theme/supreme/ من نسخه طراحی را برای دستگاه های تلفن همراه دوست ندارم، آیا می توان آن را با یک نسخه کامل در جایی در تنظیمات جایگزین کرد. متشکرم.

راه حلی وجود دارد

سلام. ما یک قالب طراحی خریدیم https://www.webasyst.ru/store/theme/profitbuy/ من نسخه طراحی را برای دستگاه های تلفن همراه دوست ندارم، آیا می توان آن را با یک نسخه کامل در جایی در تنظیمات جایگزین کرد. متشکرم.

در قسمت سایت - ساختار - (تسویه حساب) - تم موبایل می توانید تم طراحی موبایل را به دلخواه تغییر دهید.

آنتون

راه حلی وجود دارد

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

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

راه حلی وجود دارد

هنگام افزودن یک عکس به صفحه اصلی سایت هنگام استفاده از الگوی "پیش فرض 3.0"، هنگام مشاهده در یک دستگاه تلفن همراه، عکس تحریف می شود. در قالب های دیگر همه چیز خوب است. بگید مشکل چیه؟ P.S. فکر کنم مشکل از css باشه...

اسکرین شات از سایت موبایل با قالب Default 3 عکس با قالب Nifty همانطور که در قالب Default 3 می بینید، عکس صفحه اصلی مخدوش شده است.

عصر بخیر. سایت ما از shop-scipt، یک الگوی Hercules استفاده می کند. هنگام باز کردن سایت از یک دستگاه تلفن همراه، فقط یک صفحه سفید با چند آیتم منو (بی ربط) نشان می دهد. لطفا نحوه درست کردنش رو بگید تا وقتی سایت رو باز کردید...

من مجموعه ای تازه از بیست مورد از جالب ترین تم های ممتاز وردپرس را آماده کرده ام که برای ایجاد وب سایت های ارائه، صفحات فرود برای بازی های موبایل و برنامه های کاربردی عالی هستند.

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

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

مانند هر زمینه دیگری، هر برنامه موبایلی به یک بسته زیبا و روشن در قالب یک وب سایت ارائه نیاز دارد. جایی که می توان توانایی های آن را نشان داد، در مورد شایستگی ها، مزایا و غیره صحبت کرد.

یک تم مدرن تک صفحه ای با طراحی تمیز برای ارائه برنامه های موبایل، آسان برای سفارشی کردن، دارای 12 گزینه نمایش آماده، فونت های وب، آیکون ها، اختلاف منظر، لایت باکس، ویژوال کامپوزر داخلی، Slider Revolution و موارد دیگر.

دانلود نسخه ی نمایشی

صفحه فرود یک صفحه ای بسیار قابل تنظیم با سازنده صفحه بصری داخلی، پشتیبانی از فونت های گوگل، تجارت الکترونیک با پشتیبانی از WooCommerce، Slider Revolution و موارد دیگر.

دانلود نسخه ی نمایشی

یک تم ارائه برنامه تلفن همراه پاسخگو عالی که بر روی Bootstrap با پشتیبانی از فونت های گوگل و نقشه های گوگل ساخته شده است.

دانلود نسخه ی نمایشی

یک تم مدرن چند منظوره با طراحی تمیز، می تواند در حالت های تک صفحه ای و چند صفحه ای کار کند، دارای 4 گزینه طرح بندی صفحه اصلی، پشتیبانی از حالت چند زبانه بر اساس پلاگین WPML، سازنده ویژوال کامپوزر، خبرنامه های Mailchimp و غیره است.

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

یک قالب صفحه فرود وردپرس با طراحی تمیز و مدرن با تمرکز بر نمایش برنامه های تلفن همراه برای سه پلتفرم اصلی: Android، iOS و Windows. به خوبی مستند شده، آسان برای سفارشی کردن.

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

الگوی فرود تطبیقی ​​جدید بر اساس Warp 7 Framework برای طرفداران وب سایت های سبک وزن و مدولار. نه تنها برای برنامه های تلفن همراه مناسب است، بلکه برای سایر مناطق کاملاً مناسب است.

دانلود نسخه ی نمایشی

یک طرح‌نمای ساده و مدرن اپلیکیشن موبایل با ۲ طرح‌بندی صفحه اصلی، پشتیبانی از نمایشگر رتینا، سازنده داخلی ویژوال کامپوزر، نوار لغزنده Slider Revolution، واردات محتوا با یک کلیک، مگا منو، بیش از ۶۰۰ فونت و موارد دیگر.

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

قالب فرود اپلیکیشن موبایل با 3 گزینه صفحه اصلی، 20 گزینه طراحی، سفارشی سازی آسان، سازنده صفحه بصری Visual Composer، پشتیبانی از افزونه چند زبانه WPML.

دانلود نسخه ی نمایشی

قالب وردپرس ریسپانسیو چند منظوره ارزان با 23 طرح آماده.

دانلود نسخه ی نمایشی

یک تم مدرن چند منظوره با طراحی واکنش گرا حرفه ای برای ارائه برنامه ها و بازی های موبایل. در ویژوال کامپوزر، از افزونه چند زبانه WPML، خبرنامه‌های Mailchimp، فرم‌های بازخورد فرم تماس ۷ پشتیبانی می‌شود.

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

یکی از سریع‌ترین تم‌های پاسخ‌گوی یک صفحه‌ای در ThemeForest، عالی برای استارت‌آپ‌ها. 12 طرح از پیش ساخته شده، واردات محتوای نمایشی با یک کلیک، سفارشی سازی آسان، کد تمیز، صفحه ساز ویژوال کامپوزر، اسلایدر انقلاب، پشتیبانی از تجارت الکترونیک WooCommerce و موارد دیگر.

دانلود نسخه ی نمایشی

توسعه دهنده ادعا می کند که با کمک تم هلیوم، صفحات فرود شما به یک سلاح بازاریابی قدرتمند تبدیل می شوند. بحث کردن سخت است - تم بسیار مدرن است، بر اساس بوت استرپ ساخته شده، بهینه سازی شده برای سئو، دارای 10 گزینه برای نمایش صفحه اصلی، نوار لغزنده، 1000+ فونت، ویژوال کامپوزر داخلی با بیش از 50 عنصر طراحی، پشتیبانی از WooCommerce، Mailchimp، Google Map، Google Fonts، فرم تماس 7، نمونه کارها و بسیاری موارد دیگر.

دانلود نسخه ی نمایشی

تم بسیار شیک با ۷ طرح‌بندی صفحه اصلی، ۶ گزینه نمایش هدر، ۵ گزینه پاورقی، ویژوال کامپوزر داخلی با افزونه‌های نهایی، انقلاب لغزنده، WooCommerce، One Page Navigator، پشتیبانی از WPML و واردات محتوای نمایشی با یک کلیک.

دانلود نسخه ی نمایشی

یک تم واکنشگرا مدرن با طراحی بوت استرپ تمیز برای سایت های توزیع نرم افزار. 9 گزینه صفحه اصلی، 8 طرح رنگ، 3 طرح هدر وب سایت، پشتیبانی از Twitter، YouTube، Font Awesome و غیره.

دانلود نسخه ی نمایشی

تم تک صفحه ای خلاقانه با طراحی واکنش گرا، 17 طرح بندی آماده، پشتیبانی از صفحه نمایش رتینا، ویژوال کامپوزر داخلی، Slider Revolution، پشتیبانی از فونت های گوگل، اختلاف منظر و انیمیشن های مختلف.

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

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

دانلود نسخه ی نمایشی

PaPay

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

دانلود نسخه ی نمایشی

مومکس

Momex یک قالب مدرن است که مانند سایر راه حل های آماده این مجموعه به شما امکان می دهد یک پروژه آنلاین چشمگیر بسازید. به کاربران مجموعه وسیعی از گزینه ها ارائه می شود که می توانند برای بهبود ظاهر سایت و عملکرد آن استفاده کنند. برای مثال، در میان چهار طرح‌بندی وبلاگ، هر کسی می‌تواند یکی را پیدا کند که قطعاً برای شما جذاب باشد. و بسته پلاگین های Cherry برای کسانی که می خواهند خدمات را به گونه ای ارائه دهند که مخاطبان هدف را متقاعد به انتخاب آنها کنند خوشحال می کند.

دانلود نسخه ی نمایشی

Consor یک قالب فوق العاده است که می تواند هر کسب و کاری را به خاطره انگیزترین شکل ارائه دهد. بنابراین می توانم او را برای ایجاد سایت های اپلیکیشن موبایل راهنمایی کنم. در پکیج آن می توانید انواع گزینه های هدر را بیابید که به کمک آن ها منحصر به فرد بودن پروژه آنلاین نیز به دست می آید. و WordPress Live Customizer کار با رنگ ها و فونت های پروژه آنلاین آینده را بدون تلاش اضافی ممکن می کند.

دانلود نسخه ی نمایشی

قالبی کاملا کاربردی و منعطف که مطمئنا توجه بسیاری را به خود جلب خواهد کرد. این شامل بسیاری از صفحات از پیش ساخته شده برای کمک به ارائه خدمات، ایجاد یک گالری از پروژه ها، و بسیاری موارد دیگر است. همراه با سازنده Elementor، ایجاد یک وب سایت به یک لذت واقعی تبدیل می شود. پس از همه، به شما این امکان را می دهد که به سادگی محتوای انتخاب شده را به مکان مناسب در سایت بکشید.

دانلود نسخه ی نمایشی

سرانجام

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

در تلگرام من مشترک شوید و اولین نفری باشید که مطالب جدید را دریافت می کنید، از جمله مواردی که در سایت نیستند.

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

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

در این مورد، ما یک نمونه داریم قالب وبلاگ موبایل. با توجه به تغییر پویا از محاسبات دسکتاپ به تجسم های تلفن همراه، تلاش کمی باید برای افزایش تأثیر وبلاگ های شما در محیط وب تلفن همراه انجام شود.

از هر نظر جالبه قالب موبایل Dot Mobiبیش از یک برنامه کاربردی در پروژه های اینترنتی شما پیدا خواهد کرد. طراحی جدید، چیدمان حرفه ای، وزن سبک و قابلیت استفاده عالی طرفداران زیادی پیدا می کند تا بلافاصله پس از دانلود با یک قالب برای یک سایت موبایل کار کنند.

این یکی از آن طراحی های سایت موبایلی است که نمی خواهید از آن جدا شوید و برای سایت های خود ذخیره کنید. اما اینگونه نخواهد بود و با اصل ارائه اطلاعات در سایت مغایرت خواهد داشت. بنابراین، آن را بگیرید.

مینیمالیسم در طراحی قالب های html برای وب سایت ها و سایت های موبایل زمانی مورد نیاز است که محتوا مهمتر از طراحی باشد، زمانی که سایت برای "خواندن" یا برای "دیدن" ساخته شده است.

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

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

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

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

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

این قالب وبلاگ لیست پخش بهترین قالب رایگان است طراحی وبلاگ موسیقی. ادامه مطلب را بخوانید و در انتهای پست "پوست" را بگیرید.

سایت نمونه کارها، استادانه خود را ایجاد کنید - نه چندان آسان. نسخه موبایلی یک سایت نمونه کارها احتمالاً دشوارتر است. با این حال، هنگامی که وظیفه ایجاد یک وب سایت مطرح می شود، نسخه موبایل نیز به عنوان ادامه آن کاملاً مدرن خواهد بود.

ما خوب انتخاب کرده ایم قالب موبایل برای سایت نمونه کارها در رنگ های تیرهبرای مرورگرها و دستگاه های تلفن همراه، که به خوبی با طراحی قالب وب سایت html5 طنین انداز می شود. اکنون نسخه wap آن را نیز خواهید داشت. در ادامه بخوانید، در آنجا اسکرین شات هایی را برای مقایسه نسخه های wap و وب نشان خواهیم داد.

پیش روی ما یک صفحه نمایش کوچک است قالب وب سایت موبایل html5- استیکرها این یک قالب سبک html5 با حدود 5 کیلوبایت فایل css و تنها 5 تصویر استفاده شده در طراحی سایت می باشد.