منبع

در بالای نمای موبایلی سایت خود، چند گزینه اضافی را مشاهده خواهید کرد.

ابعاد را برای پاسخگویی تغییر دهید

در نمای توسعه دهنده، می توانید کد منبع HTML، CSS و سایر جزئیات سایت خود را ببینید.

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

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

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

پیش نمایش یک صفحه سفارشی در تلفن همراه

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

طراحی کمپین را در موبایل ویرایش کنید

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

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

با این کار سفارشی ساز تم وردپرس باز می شود. برای این آموزش، از تم Astra استفاده خواهیم کرد.

در پایین صفحه، به سادگی روی نماد موبایل کلیک کنید.

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

آموزش تصویری

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

بیش از 50 درصد از بازدیدکنندگان وب سایت شما از تلفن همراه خود برای دسترسی به سایت شما استفاده می کنند. حدود 3 درصد از تبلت استفاده خواهند کرد.

همچنین می‌توانید کلید «Shift» را نگه دارید، سپس کلیک کنید و ماوس خود را حرکت دهید تا شبیه‌سازی فشار دادن صفحه موبایل برای بزرگ‌نمایی یا کوچک‌نمایی شود.

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

این روش برای پیش‌نمایش نسخه موبایل به‌ویژه زمانی مفید است که هنوز ایجاد وبلاگ خود را به پایان نرسانده‌اید یا زمانی که در حالت تعمیر و نگهداری است.

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

روش 1: استفاده از سفارشی ساز تم وردپرس

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

نسخه موبایل را در پنجره بازرسی ابزار مشاهده کنید

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

نحوه مشاهده نسخه موبایل سایت های وردپرس از دسکتاپ

چرا باید طرح‌بندی موبایل خود را پیش‌نمایش کنید؟

در WPBeginner مشترک شوید

در مرحله بعد، باید روی صفحه کلیک راست کرده و گزینه “Inspect” را انتخاب کنید.

کلیک راست کنید تا گزینه inspect باز شود

به سادگی وارد داشبورد وردپرس خود شوید و به آن بروید ظاهر » سفارشی کردن صفحه نمایش

از داشبورد وردپرس به سفارشی ساز تم بروید

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

چیزی شبیه به این خواهد بود:

ابزار بازرسی را مشاهده کنید

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

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

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

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

بسته به موضوعی که استفاده می کنید، ممکن است گزینه های کمی متفاوت را در منوی سمت چپ مشاهده کنید.

گزینه‌ها را در سفارشی‌کننده تم مشاهده کنید

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

در مرحله بعد، باید روی دکمه “Toggle Device Toolbar” کلیک کنید تا به نمای موبایل تغییر دهید.

روی نوار ابزار دستگاه کلیک کنید

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

هنگامی که نشانگر ماوس خود را روی نمای موبایلی سایت خود قرار می دهید، به یک دایره تبدیل می شود. این دایره را می‌توان با ماوس جابه‌جا کرد تا صفحه لمسی روی دستگاه تلفن همراه را تقلید کند.