← → · Space · F

SESSION 06 · 120 MIN

طراحی صفحه با Elementor مقدماتی

اسکلت ظاهر آماده‌ست. امروز با المنتور صفحه اصلی را قطعه قطعه می‌چینیم — مثل لگو، بدون کدنویسی.

container widgets spacing publish

مدرس: Elementor Free کافی است. روی یک برگه خالی «خانه» کار کنید.

پل از جلسه ۵

قالب لباس است؛ المنتور خیاطی روی لباس

قالب ساختار کلی را می‌دهد. Elementor می‌گذارد داخل برگه، سکشن و ویجت بچینی بدون دست زدن به هسته وردپرس.

قانون: صفحه را با Elementor بساز؛ هسته و قالب را دستکاری نکن.

هدف جلسه

تا پایان باید بتوانی:

  • Elementor را نصب و روی یک برگه باز کنی
  • با Container ساختار افقی/عمودی بسازی
  • تیتر، متن، تصویر، دکمه و ستون بچینی
  • فاصله و رنگ را منظم کنی و صفحه را منتشر کنی

بخش ۱ · نصب و ورود · ۱۵ دقیقه

افزونه‌ها ← افزودن ← Elementor

01

نصب و فعال‌سازی

نسخه رایگان از مخزن وردپرس.

02

برگه خانه

برگه را باز کن ← «ویرایش با Elementor».

03

بوم خالی

اگر قالب بلوک تداخل داشت، برگه را روی Canvas/Elementor Full Width بگذار (بسته به قالب).

ذهنیت طراحی

Container → ویجت → استایل

Container جعبه چیدمان (ردیف/ستون). اسکلت سکشن.
Widget محتوا: تیتر، متن، عکس، دکمه…
Style رنگ، فاصله، تایپ، پس‌زمینه، ریسپانسیو.

کوییز Elementor

اول چه چیزی می‌سازی؟

بخش ۲ · Container · ۲۵ دقیقه

اول جعبه، بعد وسیله داخل جعبه

یک Container برای Hero بساز. Direction را Row یا Column کن. عرض Boxed یا Full Width را بفهم. داخلش دو Container تو در تو = ستون‌های ساده.

مبتدی‌ها مستقیم ویجت می‌ریزند روی بوم — حرفه‌ای‌ها اول ساختار می‌چینند.

بخش ۳ · ویجت‌های ضروری · ۳۰ دقیقه

جعبه ابزار صفحه اصلی

تیتر

H1 فقط یک‌بار در صفحه. بقیه H2/H3.

متن

پاراگراف کوتاه زیر Hero.

تصویر

از رسانه جلسه ۴ — سبک و با alt.

دکمه

CTA به تماس یا خدمات.

آیکون باکس

۳ کارت خدمات کنار هم.

فاصله‌گذار

Spacer و Divider برای نظم عمودی.

فاصله و رنگ

نفس صفحه را تنظیم کن

Padding / Margin

داخل و بیرون جعبه. یک ریتم ثابت (مثلاً ۸۰px سکشن) بهتر از اعداد شانسی است.

رنگ و تایپ

۲ رنگ اصلی + خاکستری متن. فونت خوانا؛ اندازه موبایل را جدا چک کن.

طراحی شلوغ = بی‌اعتمادی. فضای خالی دوست توست.

تمرین کاغذی · ۵ دقیقه

Hero را اسکچ کن

ACTIVITY

روی کاغذ یک مستطیل بکش: سمت راست تیتر+متن+دکمه، سمت چپ جا برای تصویر. زیرش ۳ مربع برای کارت خدمات. این همان نقشه Containerهاست.

موبایل

آیکون دسکتاپ / تبلت / موبایل را بزن

ستون‌ها در موبایل زیر هم می‌آیند. اندازه تیتر را کوچک‌تر کن. Padding سکشن را در موبایل کم کن تا صفحه خفه نشود.

hide on mobile order font size

ذخیره و انتشار

الگو، پیش‌نویس، Publish

01

ذخیره پیش‌نویس

مدام Save Draft بزن تا کار از دست نرود.

02

ذخیره به عنوان الگو

سکشن Hero را Template کن برای صفحات بعد.

03

انتشار

Publish و در تب ناشناس سایت را ببین — نه فقط داخل ادیتور.

اسکلت پیشنهادی صفحه اصلی

۴ سکشن کافی برای شروع

01

Hero

تیتر + یک جمله + دکمه + تصویر

02

خدمات

۳ کارت آیکون‌باکس

03

درباره کوتاه

متن + تصویر کنار هم

04

CTA پایانی

«آماده همکاری؟» + دکمه تماس

کوییز سئو صفحه

در یک صفحه اصلی چند H1 منطقی است؟

تمرین عملی غنی

  • Hero: تیتر، متن، دکمه، تصویر
  • ۳ کارت خدمات در یک ردیف
  • سکشن درباره + CTA پایانی
  • چک موبایل: فاصله و اندازه فونت
  • یک سکشن را به‌عنوان Template ذخیره کن
  • Publish و در تب ناشناس ببین

تمرین · ۳۰ دقیقه

صفحه اصلی ساده شرکتی

  • Hero با تیتر، متن، دکمه، تصویر
  • ۳ کارت خدمات در یک ردیف
  • سکشن درباره + CTA
  • چک موبایل و انتشار

سه سؤال

  • Container چه فرقی با ویجت دارد؟
  • چرا اول ساختار، بعد محتوا؟
  • چطور نسخه موبایل را جدا تنظیم می‌کنی؟

جلسه بعد

جلسه ۷: افزونه‌ها و مدیریت سایت

فرم تماس، امنیت پایه، بک‌آپ و سئوی سبک — جعبه ابزار ضروری مدیر سایت.

امروز ویترین. جلسه بعد ابزارهای پشت صحنه.

END · SESSION 06

صفحه خوب، نتیجه نظم است نه جادو

Container منظم + ویجت کم + فاصله درست = صفحه حرفه‌ای.

hamedebrahimi.ir · Session 06 · Elementor Basics

۱ / —