برای افزودن کد روی فایل CSS تم، به Shopify بروید پنل مدیریت > فروشگاه آنلاین > تم ها > سه نقطه > ویرایش کد > دارایی ها > base.css
می توانید ببینید قد قهرمان در حال حاضر است 72 دقیقه. برای تنظیم ارتفاع و کپی کردن کد می توانید ارتفاع را کم یا زیاد کنید.
کد مثال:
حالا کد را Paste کنید.
حالا کد را کپی کنید:
ما این کد را به فایل CSS تم اضافه می کنیم.
کد را روی فایل CSS موضوع قرار دهید
ابتدا باید عنصر HTML را از مرورگر پیدا کنیم. هیچ عنصر ثابتی در تم های Shopify وجود ندارد، بنابراین هر بخش از موضوع Shopify در ساختار کد منحصر به فرد است. حتی هیچ الگوی CSS ثابتی برای ویرایش عرض/ارتفاع وجود ندارد.
پنجره ای مانند این را خواهید دید:
برای افزایش یا کاهش قسمت بالایی، لایه بالایی را افزایش یا کاهش دهید.
همچنین می توانید برای افزایش/کاهش قسمت پایین، لایه پایینی را افزایش یا کاهش دهید.
اگر از تم سپیدهدم استفاده میکنید، یک بخش بالشتک برای افزایش یا کاهش ارتفاع دریافت خواهید کرد. با این کار فضایی برای قسمت Rich text ایجاد می شود و ارتفاع آن به میزان قابل توجهی افزایش می یابد:
برای تنظیم عرض یا ارتفاع بخش در Shopify، میتوانیم از یک سری مراحل ساده استفاده کنیم:
عنصر HTML را بیابید.
کد را در ویرایشگر زنده ویرایش کنید.
کد را داخل div ویرایشگر تم Shopify قرار دهید.
عنصر HTML را بیابید
راه های زیادی برای تنظیم ارتفاع و عرض از طریق کد CSS وجود دارد. اکنون می خواهیم بهترین استراتژی را دنبال کنیم که با استفاده از آن می توانید ارتفاع و عرض را تنظیم کنید.
کد مثال زیر ارائه شده است که اغلب در CSS برای تنظیم عرض یا ارتفاع عنصر انتخاب شده استفاده می شود.
حالا بیایید قسمت جلویی وبسایت Shopify را باز کنیم و عنصری را که میخواهید ارتفاع آن را افزایش دهید بررسی کنید.
بیایید اندازه عرض را با استفاده از حداکثر عرض افزایش دهیم. ما فقط روی دکمه پلاس کلیک کرده و یک کلاس اضافه کرده ایم .page-width.section-template–17312157991205__multicolumn-padding.isolate و مقدار max-width را قرار دهید.
ما CSS را برای افزایش یا کاهش عرض می نویسیم و این شکل به نظر می رسد:
سفارشی کردن / تنظیم ارتفاع از سفارشی کننده تم Shopify
ولی یه مشکلی داره شما این ویژگی را برای هر بخش یا هر موضوعی دریافت نخواهید کرد. این در واقع به توسعه دهنده تم بستگی دارد. اگر توسعهدهنده تم، بالشتک، حاشیه یا هر گزینه عرضی را در بخش یا کد طرح زمینه قرار ندهد، نمیتوانید عرض و ارتفاع را در سفارشیساز تغییر دهید. بنابراین باید کد CSS خود را اضافه کنیم.
حالا کد را کپی کنید:
اگر از ویژگی های ارتفاع/عرض استفاده می کنید، ممکن است با صفحه نمایش های کوچکتر مانند تلفن همراه با مشکل مواجه شوید. به همین دلیل است که بسیاری از توسعه دهندگان از حداقل عرض / دقیقه ارتفاع برای انعطاف پذیری بیشتر استفاده می کنند. بنابراین در آنجا می توانید استفاده از حداقل ارتفاع را ببینید. پس از یک مقدار مشخص، این ارتفاع کاهش نمی یابد. این برای طراحی واکنش گرا خوب است.
گاهی اوقات ممکن است لازم باشد ارتفاع یک بخش را سفارشی کنید. اگر می خواهید بدانید که چگونه ارتفاع بخش shopify div را افزایش دهید، مکان مناسبی هستید. در وردپرس، تنظیم ارتفاع/عرض هر عنصر یا بخش بسیار آسان است. اما در مورد Shopify، انجام آن کمی پیچیده است. در این مقاله، ما چند راه را به شما نشان خواهیم داد که چگونه می توانید عرض / ارتفاع بخش را در Shopify تنظیم کنید.