طراحی سایت و مشاوره سئو

مهدی درخشان

برنامه نویس و توسعه دهنده وب
متخصص ارشد سئو
  • محل سکونت:

    البرز
  • شهر:

    کرج
  • سن:

    ۲۹

زبان انگلیسی

خواندن

نوشتن

مکالمه

مهارت های تخصصی

html

CSS

سئو SEO

وردپرس wp

Bootstrap

PHP

جاوا اسکریپت js

لاراول laravel

المنتور، کامپوزر، XD، Photoshop و...

تولید محتوا (متنی، گرافیکی و...)

نرم افزار های کاربردی

  • فتوشاپ ps
  • ایلاستریتور
  • پریمیر
  • ICDL

اعضای متخصص تیم کنسئو

  • هانیه جاذب: طراح محصول و کارشناس سئو
  • نگین احمدی: UI/UX
  • مرتضی هاشمی: کارشناس تبلیغات و گوگل ادز
  • آیلار رستمی: کارشناس تولید محتوا
  • نیلوفر سیدی: طراحی لوگو و کارشناس سوشال
  • محمد موسوی: متخصص سئو
  • میلاد محبی: برنامه نویس php laravel
  • محمد رحیمی: طراحی سایت وردپرس
  • میلاد محمدی: سئو کار و محتوا نویس
  • جاوید جزری: طراحی گرافیک و انیمیشن

ساخت div تمام صفحه با css در وردپرس (fullscreen div)

فوریه 9, 2023

برای تمام صفحه کردن یک div یا ردیف و span یا ستون و حتی section در طراحی سایت با وردپرس از چه راهکاری باید استفاده کرد؟ کد css برای تمام صفحه کردن یک تصویر، background یا div در المنتور و یا کامپوزر باید چه کار کرد؟ آیا می توان یک div تمام صفحه در html به صورت fullscreen ایجاد کرد؟ ساخت div تمام صفحه با css و قابلیت viewport را در ادامه بررسی می کنیم:

آموزش viewport برای ایجاد div تمام صفحه

برای ساخت یک div تمام صفحه که در تمامی مرورگر ها، صفحات دسکتاپ، گوشی و… به صورت رسپانسیو تمام صفحه را در بر بگیرد باید از واحد های ویوپورت واحد viewport برای مقدار دهی height و width استفاده کنید. به کد های css زیر دقت کنید:

div { width:100vw }

در این کد ما تعیین کردیم که عرض div برابر با تمام صفحه مرورگر قرار بگیرد.

کد ساخت div تمام صفحه با css

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

.fullscreen { height: 100vh; overflow: hidden;}

آموزش ساخت div تمام صفحه در المنتور و کامپوزر

  1. ابتدا باید یک div یا ردیف ایجاد کنید.
  2. در بخش تنظیماات پیشرفته به ردیف ایجاد شده کلاس یا id بدهید.
  3. سپس در بخش css های سفارشی به کلاس style زیر را بدهید.
height:100vh; 

بر فرض مثال شما میخواهید یک div با پس زمینه قرمز بسازید:

.fullscreen { 
height: 100vh;
width:100vw;
overflow: hidden; }

نکته در اندازه دهی به div:

توجه داشته باشید که برای تنظیم طول و عرض div می توانید از مقدار دهی درصد یا (%) هم استفاده نمائید. اما ممکن است گاهی در مرورگر های قدیمی یا متفرقه دچار خطا ها و مشکلاتی باشد. در ادامه روش های اندازه دهی به div در css را به شما آموزش می دهیم. به صورت زیر هم می توانید برای طراحی div full screen اقدام کنید:

div {
/* تنظیم طول صفحه یا در مرورگر های قدیمی.
 */
 height: 100%; width: 100%;
 /* تنظیم طول ردیف یا صفحه با مقدار دهی ویوپورت و رسپانسیو. */ 

height: 100vh; 
/* تنظیم طول ردیف یا صفحه با مقدار دهی ویوپورت و رسپانسیو */ 
width: 100vw;
 /* حذف مارجین و فاصله ها در همه مرورگر ها */ 
margin: 0; }

برای دریافت مشاوره و خدمات طراحی سایت و سئو با شماره 09033012748 تماس بگیرید.

ارسال شده در طراحی سایتبرچسپ ها:
یک دیدگاه بنویسید