مرجع المان‌های محتوا و چیدمان
راهنمای ۱۲ المان پایه صفحه‌ساز.
المان‌های متن و کنش
عنوان
برای تیتر بخش با تگ، اندازه، تراز، رنگ و فاصله دلخواه.
متن غنی
برای متن و فهرست قالب‌بندی‌شده؛ ساختار تیترها را منطقی نگه دارید.
دکمه
عنوان، نشانی، آیکون، سبک، اندازه، تراز و رفتار بازشدن را تعیین کنید.
نقل‌قول
متن نقل‌قول، نام منبع و ظاهر تأکیدی را نمایش می‌دهد.
رسانه و معرفی
تصویر
تصویر، متن جایگزین، پیوند، اندازه، برازش و گردی را کنترل کنید.
جعبه آیکون
آیکون، عنوان، توضیح، پیوند و رنگ‌ها برای معرفی ویژگی یا خدمت.
ساختار
ستون‌های محتوا
چند بلوک محتوا را با عرض و فاصله منظم کنار هم می‌چیند.
تب‌های محتوا
محتوا را در تب‌ها نمایش می‌دهد؛ عنوان کوتاه و تعداد محدود انتخاب کنید.
جداکننده
خط، ضخامت، رنگ و فاصله جداسازی را کنترل می‌کند.
فاصله‌گذار
فاصله عمودی کنترل‌شده برای دسکتاپ و موبایل ایجاد می‌کند.
کد و یکپارچه‌سازی
HTML سفارشی
کد HTML مطمئن و بدون اسکریپت ناشناس را نمایش می‌دهد.
شورتکد
شورتکد افزونه‌های دیگر را اجرا می‌کند؛ خروجی و استایل افزونه مقصد را بررسی کنید.
انتخاب المان مناسب
برای عنوان ساده از «عنوان»، برای متن دارای فهرست و پیوند از «متن غنی»، برای چند بخش هم‌سطح از «ستون‌های محتوا» و برای محتوای طولانی از «تب‌های محتوا» یا «آکاردئون» استفاده کنید. HTML سفارشی فقط زمانی مناسب است که المان آماده یا شورتکد پاسخ‌گو نباشد.
نمونه ساخت بخش معرفی
- یک ردیف دو ستونه بسازید.
- در ستون اول تصویر یا ویدئو و در ستون دوم عنوان و متن غنی قرار دهید.
- دکمه را به برگه فروشگاه یا دسته اصلی پیوند دهید.
- در موبایل ترتیب ستون‌ها و فاصله‌ها را بررسی کنید.
دسترسی‌پذیری
عنوان‌ها را به ترتیب منطقی H2 و H3 انتخاب کنید، برای تصویر متن جایگزین بنویسید، متن دکمه را «اینجا کلیک کنید» نگذارید و برای محتوای ضروری فقط از رنگ یا آیکون استفاده نکنید.
مرجع المان‌ها و گزینه‌های آن‌ها
دکمه
یک دکمه فراخوان با کنترل‌های نماد، اندازه و سبک اضافه کنید.
سایر گزینه‌های قابل تنظیم: متن دکمه، نشانی پیوند، آیکون، موقعیت نماد، سبک دکمه، اندازه دکمه، چینش، بازکردن پیوند در زبانه جدید، عرض کامل در موبایل.
ستون‌های محتوا
دو تا چهار ستون محتوایی واکنش‌گرا همراه با تصویر، آیکون، متن و پیوند بسازید.
سایر گزینه‌های قابل تنظیم: ستون های دسکتاپ، فاصله بین ستون‌ها (پیکسل)، سبک ستون، ستون‌ها.
تب‌های محتوا
محتوای طولانی را در تب‌های واکنش‌گرا و با ویرایشگر پیشرفته هر پنل مرتب کنید.
سایر گزینه‌های قابل تنظیم: عنوان بخش، سبک برگه، تب‌ها.
HTML سفارشی
هنگامی که یک عنصر آماده کافی نیست، نشانه‌گذاری HTML سفارشی ایمن را اضافه کنید.
- HTML: اسکریپت ها و برچسب های ناامن با ذخیره صفحه حذف می شوند.
جداکننده
محتوا را با یک خط افقی قابل تنظیم جدا کنید.
- رنگ خط: برای استفاده از رنگ حاشیه صفحه‌ساز، خالی بگذارید.
سایر گزینه‌های قابل تنظیم: سبک خط، عرض خط، ضخامت (پیکسل)، چینش.
عنوان
عنوان بخش انعطاف پذیر و پیوند اختیاری را اضافه کنید.
سایر گزینه‌های قابل تنظیم: عنوان، لینک اختیاری، چینش، اندازه عنوان (پیکسل)، اندازه عنوان موبایل (پیکسل)، رنگ عنوان، رنگ پیوند/لهجه، نمایش خط لهجه.
جعبه آیکون
یک نماد، عنوان، توضیحات قالب بندی شده و پیوند اختیاری را ترکیب کنید.
سایر گزینه‌های قابل تنظیم: آیکون، عنوان، توضیحات، متن پیوند، نشانی پیوند، چیدمان، چینش، اندازه نماد (پیکسل)، رنگ آیکون، پس زمینه آیکون.
نقل‌قول
یک نقل‌قول، دیدگاه مشتری یا بخشی از متن را برجسته نمایش می‌دهد.
سایر گزینه‌های قابل تنظیم: متن نقل قول، نویسنده، نقش یا شرح، تصویر کاربر، سبک نقل قول، چینش.
متن غنی
با ویرایشگر بصری وردپرس، لینک ها، لیست ها و کدهای کوتاه، متن فرمت شده بنویسید.
- محتوا: از ویرایشگر بصری برای سرفصل ها، پاراگراف ها، فهرست ها، پیوندها و رسانه های درون خطی استفاده کنید.
سایر گزینه‌های قابل تنظیم: تراز کردن متن، اندازه متن، عرض محتوا.
کد کوتاه
خروجی ووکامرس، AsanWP یا هر افزونه دارای کد کوتاه را نمایش می‌دهد.
- کد کوتاه: مثال: [woocommerce_cart] یا کد کوتاه ارائه شده توسط افزونه دیگری.
فاصله‌گذار
میان بخش‌ها فاصله عمودی واکنش‌گرا ایجاد می‌کند.
سایر گزینه‌های قابل تنظیم: ارتفاع دسکتاپ (پیکسل)، ارتفاع موبایل (پیکسل).