شما با کپی کردن هر یک از اجزای موجود در این صفحه، می‌توانید به وبسایت خود یک رابط کاربری منحصر به فرد بخشید. از این اجزا و المان می‌توانید برای ایجاد تنوع در طراحی و تجربه کاربری استفاده نمایید. شما با کپی‌برداری از المان‌های موجود در این صفحه می‌توانید در دیگر نوشته‌های خود تحول ایجاد کنید یا می‌توانید از متن توضیحات زیر هر المان برای نوشته‌های خود در ویرایشگر کلاسیک وردپرس استفاده کنید. با استفاده از این المان و ویژگی‌ها، شما قادر خواهید بود تا جذابیت و کارایی وبسایت خود را افزایش داده و تجربه کاربری بهتری را به مخاطبان ارائه دهید.
رنگ خاص برای عناوین
با استفاده از کلاس “dia-block-heading” برای تگ H2 در متن‌ها، می‌توانید مانند عنوان‌های این پاراگراف دقت و جلب توجه بیشتری بخشید. این کلاس به شما امکان می‌دهد تا یک رنگ دقیقی را برای عناوین خود اعمال کنید و آن‌ها را به طور حرفه‌ای درآمیزید. این روش باعث می‌شود که عناوین در متن نه تنها ظاهری جذاب‌تر داشته باشند، بلکه به خواننده‌ها کمک می‌کنند تا محتوای مهم را به راحتی شناسایی کنند. از این امکان بهره‌برداری کنید تا رابطه‌ای موثرتر با مخاطبان خود ایجاد کنید و تجربه‌ی کاربری بهتری را به ارمغان آورید.
ایجاد لیست متفاوت
در صفحه‌ی نوشته‌های خود، هربار که یک لیست با استفاده از تگ `<ul>` ایجاد می‌کنید، به طور خودکار یک نقطه بنفش رنگ در سمت راست هر `<li>` ظاهر خواهد شد. این جزئیت طراحی باعث تمایز دیداری بین متن عادی و موارد موجود در لیست می‌شود. این نقطه بنفش نه تنها به زیبایی ظاهر کلی صفحه افزوده، بلکه اطلاعات را نیز به طور واضح‌تر و مرتب‌تر بیان می‌کند.
- دریاچه
- دریا
- زندگی
- آسمان
- بهشت
- زمین
- خاک
ایجاد کادر و بلوک متفاوت
با بهره‌گیری از این کادرها، شما قادر خواهید بود در داخل پست‌های خود یک کادر با رنگ سبز و طوسی منحصر به فرد ایجاد کرده و با نوشته‌های سفید رنگ و مشکی درون آن محتوای خود را نمایش دهید. این امکان به شما اجازه می‌دهد که هر نوع متنی که برای دیدار کاربران مهم است را در این کادر یادداشت کنید. رنگ سبز و طوسی انتخابی برای کادر، تفاوت گرافیکی را ایجاد می‌کند و توجه مخاطبان را به اطلاعات ارائه شده در کادر جلب می‌کند.
جهت ایجاد کادر سبز از تگ blockquote با کلاس dia-green-box استفاده کنید، مانند نمونه زیر:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
همچنین به صورت معمولی و بدون استفاده از کلاس کادر شما به حالت پیشفرض طوسی خواهد بود:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
ایجاد کادر برای کد
همچنین، برای ایجاد یک کادر ویژه برای کد، می‌توانید از یک `<div>` با کلاس “dia-block-code” استفاده کنید و در داخل آن از تگ `<code>` نیز استفاده نمایید. این ترکیب به شما امکان می‌دهد کد خود را به طور جداگانه و با استایل مخصوصی نمایش دهید. این روش به ویژه برای نمایش کدها و تکه‌های برنامه‌نویسی در وبسایت‌ها یا مقالات فنی مناسب است.
<?php
define("GREETING", "Welcome to W3Schools.com!");
function myTest() {
echo GREETING;
}
myTest();
?>