طراحی پروژه محور سایت-بخش4
در بخش چهارم از آموزش پروژه محور طراحی سایت، به ادامه طراحی سایت جذابی که در چند جلسه قبل شروع کردیم پرداخته و قسمت های دیگری از صفحه اصلی سایت را ایجاد میکنیم.
در ادامه طراحی، برگه صفحه اصلی سایت را در حالت ویرایش باز کنید. میتوانید با ایجاد یک ردیف که دو ستون دارد. از المان های تصویر و بلاک متن در هر کدام از ستون ها استفاده کرده و تغییراتی که در نظر دارید را پیاده سازی کنید.
در ردیف دیگر از صفحه اصلی سایت، از پس زمینه رنگی و تصویر پس زمینه روی آن استفاده کنید تا زیبایی سایت دوچندان شود. توجه داشته باشید تصویر پس زمینه ای که روی پس زمینه اصلی اضافه میکنید دارای کیفیت بالا و مناسبی باشد. در ادامه برای طراحی ستون های ردیف، تصویر و بلاک متنی یا هر المان دیگر متناسب با طراحی سایتتان به ستون های ردیف اضافه کنید.
همچنین با اضافه کردن یک ردیف همراه با المان های جعبه ای مانند Flip Box و ایجاد تغییر این المان ها مانند استفاده از آیکون، تغییر رنگ نوشته، طراحی پشت و روی جعبه های چرخشی و…، به زیبایی هر چه بیشتر سایت اضافه نمایید. با استفاده از ردیف داخلی در ردیف اصلی و اضافه کردن المان ها به ردیف داخلی، و سپس تغییر رنگ ردیف اصلی و ردیف داخلی ، جعبه های زیباتر و با جلوه بیشتر ایجاد خواهد شد.
نکته
فاصله خارجی (Margin) منفی از بالا به سطرها، باعث قرار گرفتن دو ردیف روی هم میشود. میزان قرارگیری ردیف ها روی هم به مقدار margin ربط دارد. این مورد، در طراحی سایت به جذابیت صفحات سایت کمک میکند. برای اضافه کردن مارجین به ردیف، در صفحه تنظیمات ردیف داخلی، تب فاصله، مقدار عددی margin از بالا را به پیکسل وارد کنید. نکته مهمی که باید به آن توجه داشته باشید این است که تنظیمات ریسپانسیو سایت دچار مشکل نشود. بنابراین با کلیک آیکون موبایل در بخش فاصله، مقدار مارجین برای دستگاه های موبایل و تبلت را حذف کنید تا ردیف های سایت در دستگاه های مختلف به درستی نمایش داده شود.
آموزش طراحی ریسپانسیو صفحه ساز
نکته
برای دانلود تصویر از سایت ها و صفحات اینترنتی، از Extention مرورگرها به نام Image Downloader استفاده کنید. این افزونه را از مخزن افزونه های هر مرورگری که استفاده میکنید، دانلود و نصب کنید.
این AddOns همه ی تصاویر و عکس های هر وبسایتی که در مرورگر مشاهده کنید را نمایش می دهد. شما میتوانید با افزودنی Image Downloader تصاویر دلخواه از وبسایتی که در آن هستید را دانلود و استفاده کنید.
44 دیدگاه. Leave new
سلام وقت بخیر خسته نباشید
ببخشید در بالا قسمت سرچ که نوشته Not secure آیا با نصب ssl مشکل رفع میشه سپاس.
سلام وقت شما بخیر،
بله دلیل این مشکل نیز نصب نبودن یا عدم تنظیم صحیح SSL می‌باشد
با تشکر.
سلام وقت بخیر من میخوام از صفر پروژه محور طراحی سایت اینترنتی شروع کنم از کجا برم لطفا راهنمایی کنید
سلام وقت شما بخیر،
اگر تازه میخواهید به این حوزه وارد شوید پیشنهاد ما این است که از آموزش جامع طراحی سایت جدید دیدن فرمایید
https://abzarwp.com/downloads/website-design-tutorial/
با تشکر.
سلام وقت بخیر
در این ویدیو یک لحظه صفحه استاد کوچیک میشه و استاد فیلم رو نگه میداره که درستش کنه و میگن که مشکل از سیستمشون هستش مال من هم هر از گاهی به اون حالت در میاد ممکنه بگید استاد چیکار کردن که درست شد
سلام وقت شما بخیر،
در این خصوص پیشنهاد می کنم در صفحه خود یکبار با کلیدهای کنترل+f5 صفحه را ریلود کرده و سپس تست فرمایید ، اینکار باعث میشود تا کش صفحه خالی گردد.
با تشکر.
سلام و درود بر شما و همه همکاران شما
بابت آموزش های شما کمال تشکر رو دارم و امیدوارم همیشه سالم و شاد باشید و بدرخشید
موردی توی این فیلم آموزشی دیدم که مشکل من هم بود اما فیلم قطع شد و بعد مشکل برطرف شد.(در زمان 11:27 فیلم)
و اون مشکل این بود که صفحه اصلی به هنگام طراحی حدودا 5 سانتیمتر از سمت چپ به سمت راست رفته بود و یک هاشیه سفید ایجاد شده بود در سمت چپ
میخواستم بدونم چجوری این مشکل رو شما برطرف کردین؟
با تشکر از زحمات شما
سلام وقت شما بخیر،
به نظر میرسد این مورد در برخی مواقع به دلیل فعال کردن تیک گزینه تمام عرض برای ردیف رخ می‌دهد که پیشنهاد میشود آنرا بررسی فرمایید.
با تشکر.
سلام خسته نباشین داخل المنتور ردیف داخلی نداره؟؟؟؟
سلام وقت شما بخیر،
به نظر میرسد شما از حالت فلکس المنتور استفاده می کنید که پیشنهاد میشود جلسات مربوط به این مبحث را مشاهده نمایید.
با تشکر.
حالت فلکس المنتور چیه
و آموزشش رو باید کجا ببینم
در حال حاضر می توانید در زیر آنرا مشاهده کنید.
https://abzarwp.com/flex-design-with-elementor-and-woodmart-theme/
باتشکر
سلام برای انتخاب عکس های مناسب از چه سایتی میتونیم استفاده کنیم
سلام وقت شما بخیر،
در این خصوص پیشنهاد می شود از سایت freepik دیدن فرمایید.
با تشکر.
سلام با تشکر از آموزش های بسیار خوبتون، اگه امکانش هست یه توضیحی بدید که اگه تو اون باکس ها ب جای ایکن از عکس استفاده میکردیم چطوری مثل سایت اصلی بهش انیمیشن میدادیم؟؟؟
سلام بر شما ،
اگر درست متوجه منظور شما شده باشم ، فقط بجای تصویر می توانید از گیف یا تصاویر محرک هم استفاده نمایید ، مشکلی ندارد.
سلام خسته نباشید
ببخشید من بعد از عملیات reset که در آموزش ها گفته شد وقتی با یه دستگاه به عنوان کاربر وارد میشم ارور Your connection isn’t private میده باید چیکار کنم که این ارور ازبین بره؟؟؟
باسلام خدمت شما
این مورد به سبب مشکلی در گواهینامه ssl شماست که میتوانید به هاست خود تیکت بزنید تا تنظیمات آنرا بررسی کنند.
از حضور شما ممنونیم.
سلام وقتتون بخیر
ما اگه ازین سایتا با افزونه ایمیج دانلودر یا …. عکساشونو دانلود کنیم و داخل سایت خودمون قرار بدیم مشکل قانونی نداره؟؟
مثل همین کاری که اقای جبین پور انجام دادن
سلام و عرض ادب
خیلی از تصاویر عمومی هستند. خیلی از سایت ها منعی برای این مورد قرار نداده اند..
مشکلی ندارد.
حالت فلکس المنتور چیه
و آموزشش رو باید کجا ببینم
در حال حاضر می توانید در زیر آنرا مشاهده کنید.
https://abzarwp.com/flex-design-with-elementor-and-woodmart-theme/
باتشکر
سلام وقت بخیر
برای فشرده سازی عکس ، که کیفیت هم حفظ شود ، چه نرم افزاری پیشنهاد میکنید ؟
وقت شما بخیر
در صورتی که هنوز آپلود نشده است ، در سایت هایی مانند http://feshar.co/ فشرده نمایید.
اما اگر شده است ، با افزونه فشرده ساز تصاویر وردپرس ( اسماش ) – Smush Pro می توانید تصاویر را فشرده نمایید
سلام وقت شما بخیر برای حذف فاصله بین ستون ها پدینگ صفر میدم اما اعمال نمیشه (قالب زفایر)
سلام بر شما ، وقت بخیر از حضور شما ممنونیم.
ممکن است کش مرورگر شما باشد ، یا اگر افزونه کش دارید ، کش افزونه را خالی نمایید و سپس تست نمایید.
آرزوی موفقیت برای شما داریم.
سلام میشه لطفاً بفرمائید عکس هایی که استاد فرمودند از کجا میشه دانلود کرد؟
سلام و احترام،
برای دریافت تصاویر با کیفیت و جذاب، سایت های مختلفی وجود دارد. یک نمونه از آن سایت https://www.freepik.com است .
برای باز شدن این سایت ، نیاز به تغییر ip است.
سلام ببخشید بعضی سایت ها وقتی میری توش وقتی اسکرول رو میکمشی پایین المان ها به صورت انیمیشنی وارد میشن از کنار صفحه‌ی این کار رو چطور میشه انجام داد
سلام آقای رضابیک
در صورتی که از قالب زفایر استفاده می کنید می توانید برای هر المان از این قسمت انیمنشن را فعال و حالت مورد نظر را ایجاد کنید.
با تشکر
سلام خسته نباشید
من هر وقت مارجین منفی میدم ردیف باکسم میره زیر رولوشن اسلایدر ممنون میشم راه نماییم کنید
سلام آقای سبیلی عزیز
لطفاً یک تیکت ارسال کنید تا بررسی داشته باشیم.
با تشکر
سلام ممنون از سایت خوبتون. برای اینکه ردیفم رو به بالا بکشم مارجین منفی میدم ولی زمانی که تو حالت ریسپانسیو این مقدار منفی رو از روی گوشی و تبلت پاک میکنم اعمال نمیشه و دوباره اعداد میاد و ریسپانسیو بهم میریزه؟
سلام و احترام خانم ملکی بزرگوار
لطفا از ناحیه کاربری یک تیکت ارسال نمایید تا کارشناسان بخش فنی بررسی نمایید.
با تشکر
سلام خسته نباشید
منم همچین مشکلی دارم
ولی قالبم رو از شما تهیه نکردم و از قبل قالب ایمپرزارو داشتم
سلام و درود خانم کرمانی عزیز
به جای حذف مقادیر عدد صفر را قرار دهید.
با تشکر
سلام قالب من هم زفایر هست ولی هرکاری میکنم ردیف روی ردیف بالایی نمیاد
سلام خانم ملکی عزیز
متاسفانه متوجه مشکلتان به صورت دقیق نمی شوم تا بتوانم راهنماییتان کنم.
با تشکر
با سلام
چگونه میتوان در وردپرس با حرکت موس روی عکس، عکس متحرک یا اندکی جابجا شود شود؟؟ مثلا کمی به چپ و راست حرکت کند
سلام و احترام
برای ایجاد چنین حالتی می توانید از افکت های المتور پرو استفاده کنید.
با تشکر
سلام. توی یکی از جلسات گفتن که، بهتره برای طراحی همه نوشته ها از ویژوال کامپوزر استفاده نشه، من الان 250 نوشته دارم که باید درون هرکدوم از جدول استفاده کنم. چجوری باید بدون استفاده از صفحه ساز این نوشته هارو طراحی کنم؟ ممنون میشم راهنمایی کنید
سلام آقای خورشیدی عزیز
زمانی که بتوانیم بدون صفحه ساز نوشته ها را ایجاد کنیم مشکلی ندارد اما زمانی که مجبور باشیم مشکلی ندارد و استفاده کنید.
با تشکر
عالی بود
سلام آقای تقی زاده عزیز
باتوجه به اینکه حجم آموزش ها زیاد می باشد و تولید محتوا کار زمان بری است انتشار جلسات جدید به مرور انجام می گیرد اما سعی می کنیم تا آموزش ها در بازه کوتاه تری ارائه گردد.
با تشکر