https://virgool.io/feed/@m_33114217 fa 2026-06-17 23:51:32 https://static.virgool.io/images/default-avatar.jpg https://virgool.io/@m_33114217 https://virgool.io/@m_33114217/%D9%85%D9%84%D8%B2%D9%88%D9%85%D8%A7%D8%AA-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D8%AA%D9%85-%D9%87%D8%A7-%D8%AF%D9%85%D9%88%D9%87%D8%A7-%D9%BE%D9%84%D8%A7%DA%AF%DB%8C%D9%86-%D9%87%D8%A7-%D9%88-%D8%B3%D8%A7%D8%B2%D9%86%D8%AF%DA%AF%D8%A7%D9%86-%D8%A8%DB%8C%D8%A7%D9%85%D9%88%D8%B2%DB%8C%D8%AF-unlzcynold56 قبل از اینکه سازنده های وردپرس را با جزئیات توضیح دهیم، بیایید آنچه را که تاکنون آموخته ایم خلاصه کنیم. بنابراین، وردپرس هسته‌ای است که روی آن یک تم وردپرس نصب می‌کنیم که می‌توان آن را با افزونه‌ها غنی کرد – ابزارهایی که قابلیت‌های بیشتری را به تم‌ها می‌آورند. از سوی دیگر، سازندگان به ما اجازه می‌دهند بدون نوشتن یک خط کد، عناصر یا بخش‌ها را اضافه/حذف کنیم.سازنده گوتنبرگ و Elementor builder دو سازنده محبوب در حال حاضر هستند. سازنده Gutemberg توسط WordPress توسعه داده شده است، در حالی که Elementor محصول Elementor LTD، یک شرکت نرم افزاری مستقر در اسرائیل است.برای توضیح نحوه کار سازندگان، یک بار دیگر به موضوع بیست و یک و موضوع Qi باز خواهیم گشت. موضوع اول از سازنده گوتنبرگ برای افزودن عناصر استفاده می کند. این سازنده به عنوان سازنده بلاک‌اند شناخته می‌شود. این سازنده دائماً در حال بهبود است – بیشتر و بیشتر به سازنده ای تبدیل می شود که به ما امکان می دهد نتیجه نهایی را فوراً ببینیم. از سوی دیگر، تم Qi از صفحه ساز Elementor استفاده می کند که یک ویرایشگر زنده است – هر تغییری که ما ایجاد می کنیم فوراً قابل مشاهده است.گوتنبرگ یک سازنده پیش فرض وردپرس است، بنابراین بلافاصله پس از نصب وردپرس آن را دریافت خواهید کرد. این یک سازنده پشتیبان است که از فناوری بلوک ها برای افزودن/حذف محتوا استفاده می کند.طرح زمینه Qi از صفحه ساز Elementor استفاده می کند. این سازنده به شما امکان می دهد با استفاده از ویجت های مختلف محتوا اضافه کنید. همچنین، شما فوراً هر تغییری را که ایجاد می کنید، بدون خروج از صفحه مشاهده خواهید کرد.برای اینکه به شما نشان دهیم سازنده ها چگونه کار می کنند، دو صفحه مجزا ایجاد می کنیم. یکی برای نشان دادن گوتنبرگ و ویژگی های آن استفاده می شود، در حالی که صفحات دیگر برای آزمایش Elementor استفاده می شود.اولین تست گوتنبرگ نام دارد و به شما امکان می دهد محتوا را از طریق بلوک ها اضافه کنید.بیایید یک چیز را روشن کنیم. همانطور که می بینید، در تصویر بالا می توانیم این صفحه و سبک صفحه خاص را تنظیم و تنظیم کنیم، نه فقط محتوای صفحه. همچنین، این تنظیمات/گزینه‌ها ممکن است از موضوعی به موضوع دیگر متفاوت باشد.علاوه بر این، یک نوار کناری سمت راست با تعداد زیادی گزینه تنظیم وجود دارد. این نوار کناری شامل برخی تنظیمات کلی صفحه دیگر است اما همچنین به ما امکان می‌دهد بلوک‌هایی را که در صفحه خود استفاده می‌کنیم تنظیم کنیم.اکنون، بیایید شروع به اضافه کردن بلوک کنیم. دو راه برای انجام این کار وجود دارد – با کلیک کردن روی علامت + در سمت راست یا با کلیک کردن روی علامت + در گوشه بالا، سمت چپ.برای شروع، بلوک‌های پاراگراف و تصویر را اضافه می‌کنیم.وقتی بلوک خاصی را اضافه می کنیم، به طور خودکار در صفحه نشان داده می شود و برای افزودن محتوا استفاده می شود. این محتوا می تواند هر چیزی باشد – متن، تصویر یا هر چیز دیگری که توسط آن بلوک پشتیبانی می شود. طبق گزینه‌های بلوک، می‌توانید آنها را در نوار کناری پیدا کنید. این گزینه‌ها به ما اجازه می‌دهند ظاهر بلوک را استایل دهیم.بسته به نیاز خود، می توانید هر نوع بلوک دیگری را اضافه کنید (مثلاً یک دکمه). گوتنبرگ گزینه های بلوک همه کاره را ارائه می دهد. با این حال، نویسندگان تم اغلب بلوک‌های گوتنبرگ منحصر به فرد خود را توسعه می‌دهند.از آنجایی که همه چیزهایی را که می‌خواستیم اضافه کرده‌ایم، ابتدا باید صفحه را منتشر کنیم.بعد، روی > مشاهده صفحه کلیک می کنیم و صفحه ما در یک تب جدید ظاهر می شود. به عبارت دیگر، باید چند قدم برداریم تا بتوانیم تغییراتی که ایجاد کرده‌ایم را ببینیم.اکنون صفحه دوم را ایجاد می کنیم و سازنده Elementor را بررسی می کنیم. این صفحه Test Elementor نام دارد.همانطور که می بینید، این صفحه ویرایشگر گوتنبرگ و تنظیمات آن را نیز باز می کند، زیرا ویرایشگر پیش فرض وردپرس است. ما از این گزینه ها برای تنظیم صفحه استفاده خواهیم کرد. با این حال، برای تنظیم محتوا، از سازنده صفحه Elementor استفاده می‌کنیم.همانطور که می‌بینید، Elementor یک ویرایشگر زنده با گزینه‌های ویجت زیادی است که در بخش سمت چپ قرار گرفته‌اند. بلافاصله پس از افزودن ویجت های مورد نظر، فوراً تغییر را در صفحه مشاهده خواهید کرد – در گوتنبرگ باید از یک دکمه پیش نمایش استفاده کنید که صفحه را در یک برگه جدید باز می کند.علاوه بر ویجت‌های پیش‌فرض Elementor، ویجت‌های دیگری نیز وجود دارند که توسط نویسندگان مختلف توسعه داده شده‌اند. بگذارید فقط یک چیز را روشن کنیم – این به اصطلاح ویجت ها پلاگین هایی برای Elementor هستند. در بیشتر موارد تعداد زیادی ویجت در یک پلاگین بسته بندی شده است که پس از نصب گزینه های زیادی را برای شما به ارمغان می آورد. Qi مجموعه عظیمی از ویجت‌های سفارشی Elementor را ارائه می‌کند که منحصراً با این موضوع بسته‌بندی شده‌اند – همه آنها با رنگ قرمز مشخص شده‌اند، بنابراین می‌توانید به راحتی مکان آنها را پیدا کنید.بر اساس نیازهای خود، می توانید هر ویجتی را که دوست دارید اضافه کنید. فقط آن را از بخش ویجت انتخاب کنید و روی سطح صفحه در سمت راست رها کنید.افزودن محتوا و سبک‌سازی ویجت در نوار کناری انجام می‌شود، در حالی که تغییرات را می‌توان در سمت راست دنبال کرد.اگرچه Elementor گزینه‌های کاربرپسند عالی دارد و ممکن است بصری‌تر از گوتنبرگ به نظر برسد، شما می‌توانید به راحتی یاد بگیرید که از هر دو سازنده استفاده کنید. به خصوص اگر کاملا مبتدی هستید. در گذشته، ما اغلب از WPBakery Page builder استفاده می‌کردیم، که یک Backend دیگر است. ابزار ساخت وب سایت کمی زمان برد تا به Elementor برویم – یک سازنده صفحه پیش‌نمایش زنده.امروزه، ما دائماً از Elementor استفاده می کنیم، زیرا صفحه ساز مورد علاقه ما شد. بنابراین، موضوع خود را بر اساس سازنده ای که پشتیبانی می کند انتخاب نکنید، زیرا ممکن است به راحتی با هر گزینه ای سازگار شوید. m_33114217 m_33114217 Wed, 21 Sep 2022 09:59:55 +0430 https://virgool.io/@m_33114217/10-%D9%82%D8%A7%D9%86%D9%88%D9%86-%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D9%88%D8%A8-%DA%A9%D9%87-%D9%87%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D8%A7%D9%86%D8%AF-alkn7qqkdyrh وقتی شخصی از وب‌سایتی که شما طراحی کرده‌اید بازدید می‌کند، احتمال اینکه زیاد به رنگ‌ها، تصاویر یا صداها اهمیت نمی‌دهد، فوراً به متن نگاه می‌کند.مهم نیست که چه تعداد زنگ و سوت در یک وب‌سایت ایجاد کرده‌اید، همه برای انجام هر کاری که از سایت بازدید می‌کنند به متن تکیه می‌کنند.این به تنهایی باید تایپوگرافی، هنر چینش تایپ، را برای هر طراح وب در اولویت قرار دهد.در این مقاله به 10 قانون ساده که باید هنگام طراحی پروژه وب بعدی خود در نظر داشته باشید نگاهی می اندازیم.1. خودتان متن را بخوانیدبا طراحی مانند JonesingFor یک طراح بدون درک کامل از متن برای جمع آوری تایپوگرافی که باعث می شود این سایت واقعاً کار کند، با مشکل مواجه می شد. همانطور که به تایپوگرافی خود می پردازید، احتمالاً لازم نیست نگران نوشتن متن سایت باشید – اما باید آن را بخوانید.بعضی از طراحان وب فکر می کنند که فقط کپی و چسباندن از یک فایل متنی، کل وظایف متنی آنها را تشکیل می دهد. اما خواندن متن حداقل یک ایده اساسی در مورد نحوه ادغام متن در یک وب سایت ارائه می دهد و از قطع ارتباط بین نوشتن و طراحی یک وب سایت جلوگیری می کند.می‌توانید تایپوگرافی خود را به سطح دیگری ارتقا دهید، اگر بتوانید متن را پس از قرار گرفتن در طرح خود بخوانید. به فضای اطراف حروف توجه ویژه داشته باشید. آیا فضای غیرمعمول بزرگی دارید که عجیب به نظر برسد؟ کمی تایپوگرافی دقیق می تواند این مسائل را برطرف کند. همچنین می‌توانید در مورد خطوطی که ممکن است برای خواندن آسان، طولانی‌تر از حد طولانی باشند، شکستگی‌های ناخوشایند خطوط و مسائل مشابه ایده بگیرید.2. لورم ایپسوم را در اسرع وقت تخلیه کنیدفکر می‌کنید می‌توانستید وب‌سایت عیسی رودریگز ولاسکو را بدون متن واقعی طراحی کنید؟ این سایت به شدت به کلمه نوشته شده وابسته است – و همچنین کلمات بسیار خاص. حتی متن بدنه با دراپ کلاه و برخی تغییرات دیگر که با Lorem ipsum امکان‌پذیر نبود، مورد توجه ویژه قرار گرفت.مگر اینکه متن وب‌سایت شما در واقع Lorem ipsum باشد، متن ساختگی هیچ شباهتی به چیز واقعی نخواهد داشت. این بدان معناست که هر گونه تغییری که ممکن است در متن – یا طراحی اطراف آن ایجاد کنید – باید منتظر بمانید تا چیز واقعی را دریافت کنید. درخواست (و دریافت) متن از مشتری در اولین فرصت ممکن به شما این امکان را می دهد که با طرح کلی و تایپوگرافی خود مطابقت داشته باشید.3. یک سلسله مراتب واضح نشان دهیدوقتی به Rik Cat Industries می‌رسید، بلافاصله می‌دانید از کجا باید مطالعه را شروع کنید. . با وجود اینکه چند لینک در بالای صفحه وجود دارد، خوش آمدگویی ریک توجه شما را به خود جلب می کند. این بسیار بزرگتر است، استفاده از تایپوگرافی برای ایجاد یک سلسله مراتب واضح.هر سایتی به یک سلسله مراتب به خوبی توسعه یافته نیاز دارد: شاخص هایی که نشان می دهد از کجا باید شروع به خواندن کرد و چگونه ادامه داد. تایپوگرافی شما می‌تواند این سلسله مراتب را فراهم کند – درست مانند ریک – تا زمانی که نظم سلسله مراتبی خود را از قبل بدانید. با فکر کردن به اندازه و تایپ‌فیس، می‌توانید قطعه‌ای از متن را به‌عنوان سرفصل به‌گونه‌ای برجسته کنید که مکان‌های مختلف در طرح نمی‌تواند ارائه کند.البته سلسله مراتب طرح شما فراتر از تایپوگرافی است که استفاده می کنید، اما از آنجایی که کاربران تقریباً همیشه با متن شروع می کنند، منطقی است که طراحان نیز همین کار را انجام دهند.4. به تایپوگرافی ماکرو و میکرو توجه کنیدوب سایت Crowley Webb and Associate با تکیه کامل به تایپوگرافی برای صفحه اول خود، با در نظر گرفتن دو عامل طراحی شده است: تایپوگرافی ماکرو و میکرو.تایپوگرافی ماکرو ساختار کلی نوع شما است، وقتی که متن خود را به تنهایی به عنوان یک بلوک در نظر می گیرید، چگونه در زمینه طراحی شما و زیبایی آن ظاهر می شود.تایپوگرافی میکرو بیشتر به جزئیات فاصله گذاری می پردازد، مسائلی که تعیین می کنند آیا کلمات به راحتی خوانده می شوند یا خیر. تایپوگرافی میکرو در کنار هم قرار دادن یک بلوک از متن یک ضرورت مطلق است: اگر خوانا نباشد، ادامه دادن فایده ای ندارد. کراولی وب و همکاران به این سوال از طریق نوشتن دقیق و فاصله گذاری بین کلماتی که سایت برجسته می کرد، پرداختند.اما تایپوگرافی ماکرو این فرصت را در اختیار شما قرار می دهد که متن خود را با فاصله بیش از حد مناسب بسازید: این فرصتی است که جذاب به نظر برسد و بخشی از کل طراحی شما باشد. انتخاب حروف و رنگ در این وب سایت یک کل قابل اجرا را ایجاد می کند. نادیده گرفتن هر یک از جنبه های تایپوگرافی مضر است.5. مراقب رنگ‌های نوع باشیداز دست دادن متن در پس‌زمینه ArtofElan بسیار آسان است، به‌ویژه ترکیب قرمز روشن روی قرمز تیره که توسط طراح استفاده شده است. هنگامی که یک طراح وب با نوع رنگی کار می کند، مراقبت کاملاً ضروری است، هیچ تضمینی وجود ندارد که ترکیب قرمز روی قرمز یا حتی ترکیب زرد بر قرمز قابل مشاهده باشد. از این گذشته، همه از وب‌سایتی بازدید کرده‌اند که به نظر می‌رسید متن فقط یک سایه از رنگ پس‌زمینه فاصله دارد و وقتی سعی می‌کردند آن را بخوانند دچار خستگی چشم شده‌اند.ساده ترین راه حل برای این وضعیت این است که مطمئن شوید رنگ نوع شما به شدت با پس زمینه شما متفاوت است. سیاه و سفید بسیار خوب کار می کنند زیرا تا آنجا که می توانید به شدت متفاوت هستند، اما ترکیبات رنگی وجود دارد که به خوبی کار می کنند: چیزی در امتداد خطوط آبی تیره روی صورتی روشن کار را انجام می دهد. متن معکوس بسیار مشکل است… در حالی که می‌توانید با متن صورتی روشن روی پس‌زمینه آبی تیره کار کنید، احتمالاً در مورد آن شکایت خواهید کرد.6. سی اس اس خود را جدی بگیریداگر CSS شما جامد است، می‌توانید مانند نسخه‌های مختلف Hutchouse.com برای ایجاد برخی جلوه های چشمگیر به شیوه نامه های مختلف متکی است. حتی اگر مسائل را تا Hutchhouse پیش نبرید، CSS می‌تواند به حذف مشکلات تایپوگرافی آماتور مانند تغییر تایپ‌فیس و اندازه بین صفحات کمک کند.سی اس اس می تواند سازگاری آسانی بین تایپوگرافی شما در کل وب سایت فراهم کند. با این حال، اگر در نحوه استفاده از تایپ ثابت هستید، شکستن این یکنواختی حتی به مقدار کم می‌تواند هر چیزی را که می‌خواهید برجسته کنید واقعاً برجسته شود، درست مانند ایجاد و سپس شکستن یک شبکه می‌تواند یک طراحی مؤثر ایجاد کند. در تایپوگرافی وب، ثابت نگه داشتن فونت ها می تواند یک موضوع ساده در CSS باشد.7. متن وسط را حذف کنیدانتخاب یک جایگزین برای متن مرکزی می‌تواند خوانایی طراحی وب‌سایت را آسان کند، درست مانند DesignCanChange.org. انتخاب متن در مرکز، به‌ویژه در صفحه‌ای مانند این، صفحه مشکل‌ساز ایجاد می‌کند: لبه‌های ناهمواری که در مرکز هر طرف ایجاد می‌شود خواندن را بسیار سخت‌تر می‌کند و فرصت‌های زیادی برای متن کاملاً در مرکز وجود دارد که باعث تحریف بقیه مطالب می‌شود. طرح های شما روی نمایشگرهای مختلف.در برخی از حلقه‌ها، تایپ در مرکز تنها یک قدم بالاتر از استفاده از Comic Sans در طراحی وب‌سایت است. ممکن است آن را به عنوان یک عنوان در نظر بگیرید، اما به طور کلی، تراز کردن متن خود در سمت چپ، خوانندگان شما را بسیار راحت تر می کند، مگر اینکه از راست به چپ بخوانند.8. با نقل قول های هوشمند و سایر نمادها مقابله کنیدسایت لوئیجی اوتانی نشان می‌دهد که توجه دقیق به علامت‌های نقل قول و سایر نمادها چه چیزی را به شما می‌دهد. : عدم وجود مشکل کامل زمانی که سایت آن نمادها را نمایش می دهد. بسیاری از وب سایت ها دارای نمادهایی هستند که مرورگر نمی تواند نمایش دهد. این میراث این واقعیت است که بیشتر متن‌هایی که یک طراح وب با آن کار می‌کند احتمالاً در مایکروسافت ورد یا نرم‌افزار پردازش کلمه دیگری نوشته شده است که بدون توجه زیاد نویسنده، تغییرات کوچکی در متن ایجاد می‌کند.یکی از بدترین تغییرات نقل قول‌های هوشمند است: گیومه‌های فرفری Word به‌طور خودکار جایگزین علامت‌های نقل قول مستقیم می‌شود. زمانی که با متن نوشته شده به زبان دیگری کار می‌کنید، یکی دیگر از مشکلات ایجاد می‌شود: لهجه‌ها و لهجه‌ها می‌توانند به همان اندازه مفید بودن Word باعث دردسر شوند. اگر فقط متنی را با چنین تغییراتی در طراحی خود کپی و جای‌گذاری کنید، احتمالاً باید به عقب برگردید و بعداً آن‌ها را اصلاح کنید، حداقل برای برخی از مرورگرهای وب.در عوض، آنها را در مراحل اولیه طراحی دریافت کنید تا بتوانید بر روی تطبیق متن خود با طراحی خود تمرکز کنید. اگر می‌خواهید آن نمادهای فانتزی و نقل قول‌های هوشمند در طراحی نهایی نشان داده شوند، موجودیت‌های HTML خود را شناسایی کنید.9. برای بزرگتر شدن متن خود برنامه ریزی کنیدوقتی اندازه متن را در وب‌سایت Veerle Pieters افزایش می‌دهید، اینطور نیست بسیار زیبا از اندازه فونتی که او انتخاب کرده استفاده کنید. با این حال، هنوز هم می‌توانید همه چیز را بخوانید، پیوندها را پیدا کنید و غیره، چیزی که در مورد تعداد کمی از وب‌سایت‌ها صادق است.این به این دلیل است که، تا حدی، بسیاری از طراحان مطمئن می شوند که متن را با فونت 10 نقطه ای یا حتی کوچکتر چیدمان می کنند. اکثر مردم با خواندن چنین فونت‌هایی راحت هستند، اما Baby Boomers بخش بزرگی از جمعیت مرورگرهای وب را تشکیل می‌دهند و بسیاری از این وب‌گردهای سالخورده مرورگرهای خود را تنظیم می‌کنند تا تایپ را تا جایی که می‌توانند نمایش دهند. قوی>. متن شما و همچنین طراحی شما باید بتواند با این واقعیت سازگار شود.همچنین ارزش این را دارد که اندازه مرورگر می‌تواند بسیار متفاوت باشد و اگر مراقب نباشید، متن را به مکان‌های غیرمنتظره منتقل کنید. اگر افزایش اندازه یک نقطه مشکلاتی ایجاد کند، جمعیت قدیمی‌تر با عجله به وب‌سایت بعدی می‌رود. نیاز به پیمایش برای همیشه به کنار، نتیجه مشابهی خواهد داشت.10. نمایش اولویت برای sans serifاگر به وب‌سایت A List Apart نگاه کنید، تقریباً هر بخش بزرگی از متن با حروف sans serif تنظیم شده است و خواندن آن را بسیار ساده تر می کند. سرفصل‌ها و سایر بلوک‌های کوچکتر متن با فونت‌های ردیف‌بندی شده قرار می‌گیرند و تعادلی بین این دو ایجاد می‌کنند.وقتی نوبت به چیدمان متن روی صفحه می‌رسد، فونت‌های sans serif تقریباً همیشه بهترین گزینه هستند، به‌ویژه اگر فونتی مانند Verdana را انتخاب کنید که برای نمایش در صفحه رایانه طراحی شده است. فونت های سریف شده شانس بیشتری برای نمایش ضعیف، تار یا حتی پیکسلی دارند.البته نمی توان به طور کامل از سریف ها اجتناب کرد. اما مخصوصاً برای بلوک‌های متنی بزرگ، استفاده از فونت بدون سریف می‌تواند تضمینی برای بازدیدکنندگان به آسانی متن سایت را ارائه دهد. هنگامی که برای پروژه ای فونت انتخاب می کنید، اول گزینه های sans serif خود را بررسی کنید.نظر نهاییتایپوگرافی به راحتی نادیده گرفته می‌شود، و حتی زمانی که یک طراح آن را در نظر می‌گیرد، به راحتی می‌توان آن را به‌عنوان یک فعالیت زمان‌بر و با بازگشت کمی نادیده گرفت. اما صرف حتی چند دقیقه با متنی که محور طراحی شما خواهد بود، می‌تواند آن را از چیزی که هر طراح وب می‌تواند روی یک صفحه بگذارد، به عنصری تبدیل کند که بقیه طراحی را پشتیبانی می‌کند. m_33114217 m_33114217 Wed, 14 Sep 2022 11:46:18 +0430