عناصر

Elements به ساختاردهی و ارائه مؤثر محتوا کمک می‌کنند. آن‌ها از components متن-محور مانند titles، lists و text highlights تا موارد تعاملی مانند buttons و links متغیرند. عناصر بصری مانند images، icons، videos و animations نیز می‌توانند برای بهبود ارائه و سازماندهی محتوا اضافه شوند.

برای افزودن یا تغییر یک عنصر وب‌سایت:

1. به صفحه وب‌سایت مرتبط بروید و روی ویرایش کلیک کنید.

2. روی بخش از صفحه که می‌خواهید یک عنصر اضافه یا تغییر دهید کلیک کنید.

3. تغییرات لازم را اعمال کنید.

4. روی ذخیره کلیک کنید.

توجه

styles پیش‌فرض برای headings، buttons، links و paragraph text، به‌عنوان مثال، در تب Theme ویرایشگر وب‌سایت تعریف شده‌اند.

عناوین

Titles headings را تعریف می‌کنند و محتوای وب‌سایت را در سطوح مختلف برای وضوح و ساختار سازماندهی می‌کنند. برای درج یک title، /title را تایپ کنید، style heading را انتخاب کنید (تیتر 1، تیتر 2 یا تیتر 3)، و متن را تایپ کنید.

نکته

به‌جای آن، متن را تایپ کنید، آن را انتخاب کنید، و style مناسب را از بخش Inline Text در تب Customize ویرایشگر وب‌سایت انتخاب کنید. گزینه‌های formatting اضافی، مانند fonts و colors، نیز در این بخش در دسترس هستند.

دکمه‌ها

Buttons عناصر تعاملی هستند که اجازه می‌دهند به یک صفحه دیگر یا یک page anchor لینک شوند. برای درج یک دکمه:

1. /button را تایپ کنید.

2. label دکمه را در فیلد برچسب لینک وارد کنید.

3. URL or Email را اضافه کنید. / را تایپ کنید تا یک صفحه را جستجو کنید و # تا به یک anchor لینک بدهید.

4. استایل، اندازه و طرح‌بندی را تنظیم کنید تا ظاهر دکمه را تعریف کنید.

5. در صورت نیاز، کلید را تغییر دهید تا صفحه لینک‌شده یا anchor در یک tab جدید باز شود.

6. روی اعمال کلیک کنید تا تغییرات ذخیره شوند.

نکته

برای تغییر یک دکمه موجود، روی دکمه کلیک کنید و گزینه‌ها را در بخش Inline text ویرایشگر وب‌سایت ویرایش کنید.

تصاویر

برای درج یک تصویر:

1. /image را تایپ کنید.

2. پایگاه داده Unsplash را جستجو کنید یا روی Upload an image کلیک کنید تا یک فایل را از تصاویر محلی خود انتخاب کنید.

3. روی افزودن کلیک کنید.

4. برای سفارشی‌سازی تصویر، روی تصویر کلیک کنید و گزینه‌ها را در بخش تصویر ویرایشگر وب‌سایت ویرایش کنید. به‌عنوان مثال:

   • تصویر را جایگزینی کنید.

   • یک alt tag را در فیلد توضیحات تعریف کنید.

   • یک title برچسب را در فیلد توضیح راهنما وارد کنید. این متن وقتی بازدیدکنندگان ماوس خود را روی تصویر hover می‌کنند ظاهر می‌شود.

   • یک شکل اضافه کنید؛ برخی شکل‌ها همچنین اجازه سفارشی‌سازی رنگ را می‌دهند.

   • عرض تصویر را تنظیم کنید، به‌عنوان مثال، برای بهبود performance. یک اندازه کوچک‌تر ممکن است پیشنهاد شود اگر برای نمایش کافی باشد.

   • اندازه تصویر را با استفاده از ابزار تغییر شکل تغییر دهید.

   • حاشیه داخلی را تنظیم کنید تا فضا (به pixels) اطراف تصویر اضافه شود.

   • و غیره.

ویدیوها

برای افزودن یک ویدیو، /video را تایپ کنید، URL را درج کنید، و گزینه‌های موردنظر را روشن کنید:

• Autoplay: برای پخش خودکار ویدیو هنگام دسترسی به صفحه. ویدیو به‌طور خودکار به‌طور پیش‌فرض mute می‌شود.

• Loop: برای پخش ویدیو در یک loop.

• Hide player controls

• Hide fullscreen button

• Start at: برای تعریف timestamp جایی که ویدیو باید شروع شود، در فرمت MM:SS.

آیکون‌ها

برای درج یک آیکون، /image را تایپ کنید، به تب Icons بروید، یک آیکون را انتخاب کنید، و روی افزودن کلیک کنید. برای تغییر یک آیکون، روی آن کلیک کنید و از بخش آیکون ویرایشگر وب‌سایت برای سفارشی‌سازی گزینه‌ها استفاده کنید، مانند رنگ، اندازه، Animations، شکل و غیره.

لینک‌ها

Links برای اتصال صفحات و منابع مختلف، هدایت بازدیدکنندگان و بهبود navigation استفاده می‌شوند. برای افزودن یک لینک، /link را تایپ کنید، سپس، در پنجرهٔ بازشو که باز می‌شود، بر چسب لینک را وارد کنید و URL or Email را اضافه کنید. / را تایپ کنید تا یک صفحه را جستجو کنید و # تا به یک anchor لینک بدهید.

نکته

به‌طور پیش‌فرض، فیلد استایل روی لینک تنظیم شده است. یک style متفاوت انتخاب کنید تا لینک را به یک button تبدیل کنید.

فهرست‌ها

Lists به سازماندهی واضح محتوا کمک می‌کنند، که خواندن اطلاعات را آسان‌تر می‌کند و ساختار صفحات وب را بهبود می‌بخشد. /list را تایپ کنید و از سه نوع مختلف فهرست انتخاب کنید: Bulleted lists، Numbered lists یا Checklists.

هایلایت‌های متن

Highlights را می‌توان به titles و text در بخش Inline Text ویرایشگر وب‌سایت اضافه کرد. برای افزودن یک highlight:

1. متن یا title را که می‌خواهید برجسته کنید انتخاب کنید.

2. در ویرایشگر وب‌سایت، روی برجسته سازی کلیک کنید.

3. style highlight را انتخاب کنید.

4. رنگ آن را تغییر دهید.

5. ضخامت آن را انتخاب کنید.

انیمیشن‌ها

Animations برای افزودن حرکت به building blocks و عناصر وب‌سایت مانند تصاویر و متن استفاده می‌شوند. سه نوع animation در دسترس هستند: هنگام اسکرول، هنگام ظاهر شدن و هنگام قرار گرفتن ماوس (فقط برای تصاویر).

برای افزودن یک animation به یک عنصر وب‌سایت:

1. روی عنصر کلیک کنید.

2. در ویرایشگر وب‌سایت، به بخش مرتبط برای عنصر بروید (به‌عنوان مثال، دکمه، ستون، Inline Text و غیره).

3. در فیلد انیمیشن، نوع animation موردنظر را انتخاب کنید.

4. تنظیمات animation را در صورت نیاز سفارشی کنید. گزینه‌های موجود بر اساس نوع animation انتخاب‌شده متفاوت هستند.

انیمیشن‌ها هنگام اسکرول

برای animations on scroll، می‌توان:

• در را انتخاب کنید تا animation وقتی عنصر وارد صفحه می‌شود اضافه شود و بیرون تا وقتی صفحه را ترک می‌کند اضافه شود.

• یک افکت انتخاب کنید.

• جهت effect را انتخاب کنید.

• شدت effect را تطبیق دهید.

• منطقه پیمایش را تعریف کنید، جایی که اولین مقدار درصد صفحه نمایش‌داده‌شده وقتی effect شروع می‌شود را نشان می‌دهد، و دومین مقدار درصد آن را در پایان نشان می‌دهد.

انیمیشن‌ها هنگام ظاهر شدن

برای animations on appearance، می‌توان:

• از بین effects مختلف انتخاب کنید.

• جهت effect را انتخاب کنید.

• یک گزینه راه اندازی را انتخاب کنید تا تعریف کنید animation کی اتفاق می‌افتد: یا فقط برای اولین بار یا هر بار.

• شدت effect را تطبیق دهید.

• اگر می‌خواهید animation پس از چند ثانیه trigger شود، این عدد را در فیلد شروع بعد از تعریف کنید.

• یک مدت زمان برای animation انتخاب کنید.

Animations on hover (فقط برای تصاویر)

Animations هنگام قرار گرفتن ماوس را می‌توان به images اضافه کرد. می‌توانید افکت animation را، و همچنین رنگ و عرض خط را انتخاب کنید.

همچنین ببینید

Odoo HTML editor