آموزش قدم به قدم ساخت سایدبار در المنتور

sidebar in elemntor

با آموزش قدم به قدم ساخت سایدبار در المنتور در خدمت شما عزیزان هستم و میخوام که در این مقاله بهتون آموزش بدم که چطور با المنتور سایدبار طراحی کنید، چون در برخی از قالب ها سایدبار وجود ندارد و یا می خواهید یک سایدبار برای نوشته درست کنید میتوانید از این آموزش استفاده کنید … ادامه

طراحی بخش فوتر در المنتور

design footer site in elementor aylinweb

در این ویدئو که آخرین قسمت از دوره آموزش المنتور هست میخواهیم تا براتون بخش فوتر رو طراحی کنیم. بخش فوتر هم همانند بخش های دیگه مهم است و حتما باید مورد توجه قرار گیرد پس در ادامه با ما همراه باشید.

ساخت قسمت فوتر با المنتور

فوتر سایت هم یکی از بخش های مهمی است که حتما باید در قالب وردپرسی موجود باشد و یکی از اصل ها و اصول در طراحی وب سایت است. اما ما چطور این کار رو توی المنتور انجام بدیم؟

المنتور خوشبختانه این امکان را به شما می دهد تا تمامی بخش های سایت را از کلی گرفته تا جزئی طراحی کنید و براحتی میتوانید با ابزارها این کار رو انجام بدید. طرح فوتری که ما در این ویدئو آموزش دادیم در زیر آوردیم :

فوتر ساخته شده در المنتور
ساخت فوتر در المنتور

البته چون این ویدئو به صورت آموزشی هست یک طرح ساده این بر روی این بخش پیاده کردیم، اما شما میتوانید با استفاده از ابزارهایی که در اختیار شما قرار می دهد فوتر های جذاب و خلاقانه ای بدون کدنویسی طراحی کنید.

نحوه ساخت بخش فوتر

  1. اول از همه ما یک سکشن یا بخش ایجاد کردیم و آن را به 3 ستون تقسیم کردیم تا هر ستون به بخش مساوی تقسیم شود. البته میتونید ستون ها رو زیاد و کم کنید مونده به سلیقه خودتون.
  2. سپس بر اساس سلیقه شخصی خودم در سمت راست یک سربرگ با عنوان درباره ما ایجاد کردم و کمی در باره وب سایت متنی رو قرار دادم و در زیر متن هم از آیکون های شبکه های اجتماعی استفاده کردم و در آخر هم یک دکمه قرا دادم و در صورت کلیک به صفحه درباره ما هدایت می شود.
  3. در مرحله سوم با استفاده از کپی و پیس المانها، سربرگ یا عنوان رو کپی کردم و در ستون بعدی قرار دادم و دیگه نیازی به نوشتن دوباره نباشه.
  4. در ستون وسط لینک هایی رو قرار دادم و همچنین از نقشه گوگل هم استفاده کردم.

[su_note note_color=”#ffad78″ text_color=”#fff” radius=”10″]فقط یک نکته مهمی است که باید حتما بدونید، البته در ویدئو هم گفتم وقتی شما بخش فوتر، هدر، و ساید بار و مقالات رو می سازید حتما در بخش تگ html تگ های مورد نظر رو انتخاب کنید. برای هدر از تگ header استفاده کنید و برای فوتر از تگ footer و برای مقالات هم از تگ Article و برای سایدبار هم از Aside میتونید استفاده کنید.[/su_note]

تگ فوتر
انتخاب تگ فوتر در المنتور

دیگه توضیحات خاصی نداره و فقط شما کافیه که ویدئوی آموزشی رو مشاهده کنید و طبق سلیقه خودتون فوتر سایتتون رو طراحی کنید. در دوره ای که پیش رو داریم و به صورت کاملا حرفه ای آماده سازی میشه میتونید با ابزارهای مکمل المنتور هم بیشتر آشنا بشید و بتونید از این المان ها هم استفاده کنید.

ویدئوی آموزش طراحی فوتر در المنتور

ساخت بخش مقالات آموزشی و گالری تصویر در المنتور

posts and gallery in elementor

با یکی دیگر از قسمت های آموزش کامل Elementor در خدمت شما هستم و در این قسمت میخواهیم بخش مقالات آموزشی و گالری تصویر رو به صفحه مون اضافه کنیم تا صفحه اصلیمون کامل بشه.

توی بخش های قبلی ما با تمامی ابزارهای و همچنین المان ها و تنظیمات آنها آشنا شدیم و تا این قسمت توانستیم تمامی بخش های صفحه اصلی سایت رو طراحی کنیم و دیگه به آخرای این آموزش و دوره میرسیم و امید دارم که شما بتونید سایت های حرفه ای با این آموخته ها طراحی کنید. در جلسه بعدی هم میخوام که بخش فوتر سایت رو طراحی کنم و دیگه با این آموزش خاتمه بدیم و بریم سراغ آموزش های حرفه ای که بزودی در سایت قرار داده میشه.

بخش مقالات آموزشی
ساخت بخش مقالات آموزشی در Elementor

ابزارک پست ها در المنتور

ابزارک پست ها در نسخه پرو المنتور اضافه می شود و با این ابزار می توانید بخش مقالات و مطالب رایگان رو به صفحه اضافه کنید و با طرح های زیبا به نمایش در بیاورید و باید با استفاده از مراحل زیر این المان رو به صفحه اضافه کنید.

افزودن المان پست ها به صفحه در المنتور

در اولین مرحله باید یک ردیف تک ستونه ایجاد کنید (علامت + رو بزنید) تا این المان رو درون ردیف قرار بدیم.

سپس در سمت راست در بخش ابزاک ها به بخش ابزارهای “پرو” بیاید و المان پست ها رو به ردیف ایجاد شده اضافه کنید.

وقتی شما عنصر رو به صفحه اضافه می کنید در حالت اولیه و پیشفرض دارای استایلی ساده و کلاسیک است و باید در تنظیمات، استایل ها و نحوه نمایش رو تغییر بدیم. باید تصویری همانند تصویر زیر در صفحه داشته باشید.

استایل مقالات
استایل پیشفرض مقالات در المنتور

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

  • پوسته : که شامل 2 گزینه کلاسیک و کارت هست و هر 2 رو میتوانید انتخاب کنید و تغییرات رو به صورت زنده مشاهده کنید. که ما در این ویدئو گزینه کلاسیک رو انتخاب کردیم.
  • ستون ها : در این بخش میتوانید تعداد ستون های نمایش رو انتخاب کنید. یعنی مطالب رایگان در چند ستون نمایش داده شوند. (میتوانید فقط عدد وارد کنید.)
  • پست در هر برگه : میتوانید تعداد پست نمایش در صفحه رو انتخاب کنید.
  • موقعیت تصویر : میتوانید موقعیت تتصویر رو انتخاب کنید که شامل بالا، پایین، چپ، راست هست.
  • کاشی کاری یا نمایش ماسونری : میتوانید نحوه نمایش پست ها رو به صورت زیبا نمایش بدید. برای مشاهده تغییرات میتوانید گزینه را فعال و غیر فعال کنید تا در صورت نیاز انتخاب کنید.
  • اندازه عکس : این گزینه هم اندازه تصویر شاخص رو مشخص میکنه. شما باید اندازه کامل رو انتخاب کنید تا تصویر با کیفیت اصلی نمایش داده شود.
  • عنوان : آیا عنوان نوشته نمایش داده بشود یا نه که میتوانید به صورت فعال و غیر فعال انتخاب کنید.
  • بقیه بخش ها رو میتونید در ویدئوی آموزشی مشاهده کنید.

بخش ابزارک ها انقده تنظیمات داره که شما بتونید نمایش در خواستی خودتون رو اعمال کنید.

دوستان به این نکته توجه کنید که میتوانید بخش کالری تصویر هم به صفحه اضافه کنید که من در این قسمت اضافه کردم و دیگه بخش های بعدی رو میتونید خودتون اضافه کنید و طرح های زیبا و سایت های حرفه ای طراحی کنید مطمعن باشید که محدودیتی در استفاده از ابزارها ندارید و براحتی می توانید همانند سایت های بزرگی که امروزه با المنتور طراحی میشن رو طراحی کنید.

موفق باشید. 😊😊

فیلم آموزشی بخش مقالات در المنتور

آموزش ساخت قستی از بدنه سایت با المنتور

body design in elementor

سلام دوستان گلم، از وقفه طولانی مدت در تولید ویدئو ها عذرخواهی میکنم و امید وارد که در ادامه آموزش المنتور بتونم بهترین مباحث رو به ما آموزش بدم، پس در ادامه فیلم های آموزشی با ما همراه باشید.

در قسمت ها و بخش های قبلی ما کلا با افزونه المنتور آشنا شدیم و در قسمت قبلی تونستیم بخش هدر وب سایت رو طراحی کنیم، که شامل لوگو، منو، تصویر هدر و فرم جستجو بود. خب در این جلسه می خواهیم تا قسمتی از بخش بدنه یا Body وب سایت رو با المنتور طراحی کنیم.

نکته مهم : در قسمت های قبلی ما برای استفاده از فونت دلخواه آموزشی رو قرار دادیم و با استفاده از بخش “فونت دلخواه” در Elementor تونستیم تا فایل های فونت ها را به قالب اضافه کنیم و در صفحات استفاده کنیم. در نسخه جدید و فارسی المنتور دیگه نیازی نیست که شما فونت ها را اضافه کنید، 👌 چون آپدیت جدید دارای فوت های فارسی جدید است و فونت هایی همانند ایران یکان،ایران سنس و … در این افزونه اضافه شده و براحتی میتوانید فونت دلخواه خود را انتخاب کنید.

هدر با المنتور
ساخت بخش هدر و سربرگ سایت در المنتور

در قسمت قبلی این دوره هدر سایت رو همانند تصویر بالا ساختیم و همچنین از فونت های دلخواه خودمون برای تایپوگرافی استفاده کردیم.

آموزش ساخت قستی از بدنه سایت با المنتور

قسمت های مختلف وب سایت و قالب از جمله بدنه سایت طراحی های متنوعی دارد و هر طراحی میتواند سلیقه خود را بر روی صفحه اعمال کند، ما در این آموزش از سلقه خودمون استفاده کردیم و شما میتوانید طرح های بسیار خلاقانه ایجاد کنید، این ویدئو ها فقط جنبه آموزشی دارند.

در این آموزش ساخت صفحه با المنتور من یک ردیف ایجاد کردم و این ردیف رو به 2 قسمت مساوی تقسیم کردم تا در یک بخش تصویر و در یک بخش دیگر هم متون مورد نظر خودم رو قرار بدم. در سمت راست من میخوام که متن هایی که میخوام رو قرار بدیم، برای این کار به در سمت راست از جعبه ابزار بر روی ویرایشگر متن کلیک میکنم و این ابزار رو به صفحه و در ستون مورد نظر میکشم.

ادیتور متن
ابزار ویرایشگر متن در المنتور

بعد از اینکه ویرایشگر متن به صفحه اضافه شد، باید در سمت راست در بخش محتوا متون خود را قرار بدید. بسته به سلقه شما دارد که محتوای طولانی قرار میدید یا محتوای چند خطی ولی سعی کنید که متن های زولانی قرار ندید چون از زیبایی و کاربر پسندی وب سایت می کاهد.

قرار دادن تصویر در صفحه

در سمت چپ ردیفی که ایجاد کردید میخوام که یک تصویر قرار بدم، البته چون تصویر پس زمینه ما سفید هست باید یک تصویر با پس زمینه سفید پیدا کنیم. سایتی رو به شما معرفی میکنم که براحتی میتوانید هر تصویری که میخاهید رو پیدا کنید. به آدرس https://Dribbble.com برید. بعد از اینکه وارد سایت شدید با تصویر همانند تصویر زیر مواجه می شوید :

Dribbble
وبسایت دانلود تصاویر زیبای Dribbble

در سمت راست بالا در بخش جستجو میتوانید کلمه مربوز به تصویر مورد نظر رو وارد کنید و کلید اینتر رو بفشارید تا تصویر مربوطه را برای شما پیدا کنید. مطمعنا هر تصویر که میخواهید رو میتوانید در این وب سایت پیدا کنید. من یک تصویر انتخاب کردم و در قسمت مربوطه آپلود کردم.

تصویر و متن
اضافه کردن تصویر و متن به صفحه

اضافه کردن آیکون باکس به صفحه

در این بخش هم میخوام که یک ردیف یا سکشن ایجاد کنم و در این سکشن باکس های آیکون قرار بدم، در بیشتر سایت های دیده اید که خدمات سایت رو در جعبه های کوچیک نمایش میدن. من هم در این جا میخوام یک همچین بخضی را به صفحه اضافه کنم.

برای این کار مراحل زیر رو دنبال کنید :

  1. بر روی دکمه + در صفحه کلیک کنید و یک ردیف یک ستونه ایجاد کنید.
  2. از ابزار های سمت راست گزینه “جعبه آیکون”رو به صفحه بکشید و در داخل ستون ایجاد شده قرار دهید.
  3. آیکون های مورد نظر رو در صفحه قرار بدید.
  4. متن ها و عناوین باکس ها رو وارد کنید.

به طور مثال من در این جا 4 باکس ایجاد کردم و در هر باکس آیکون ها و متن های آزمایشی وارد کردم تا یک بخش زیبا ایجاد کنم. (برای این ردیف میتوانید پس زمینه جدا از ردیف بالا انتخاب کنید تا یک ردیف جدا محسوب شود و جلوه خوبی داشته باشد.)

آیکون باکس
جعبه آیکون در elementor

البته باز هم به سلقه شما بستگی داره و به طور مقال من در این ویدئو، صفحه ای همانند تصویر زیر درست کردم و شما هم میتوانید از طریق ویدئو این جعبه ها را بسازی و جلوه های زیبایی را بر روی باکس ها اعمال کنید.

استفاده از آیکون باکس
اضافه کردن جعبه های آیکون زیبا در صصفحه ساز Elementor

موفق باشید. ❤❤❤❤❤

فیلم آموزش ساخت قستی از بدنه سایت با المنتور

آموزش ساخت و طراحی قسمت هدر وب سایت با المنتور

site design in elementor part 1

در این دوره آموزشی، توانستیم به راحتی بخش های مورد نیاز خود را ویرایش کرده و بر اساس نیاز خود از ابزارک های پلاگین المنتور استفاده کنیم. اما در این قسمت از آموزش طراحی سایت با Elementor اقدام به ساخت یک صفحه کامل از ابتدا خواهیم داشت تا آموزش را به صورت پروژه محور ادامه … ادامه

آموزش بخش المان های سایت در المنتور شامل (عنوان سایت،لوگو،منو،عنوان صفحه و…)

elementor tutorial part 7

با استفاده از دوره کاربردی آموزش صفحه ساز المنتور توانستیم قسمت های مختلف افزونه رایگان Elementor را یاد گرفته و از آن برای تولید صفحات وب خود استفاده کنیم. در قسمت های قبلی دوره آموزشی بخش های مختلف افزونه آموزش داده شد و کاربران حال می توانند از بخش های رایگان و پولی این افزونه … ادامه

کار با ابزارک های جدید و حرفه ای افزونه صفحه ساز المنتور (مثل کار با بخش آیکن ها و کادر تصویر و …)

elementor tutorial part 6

سلام خدمت دوستان وهمراهان گرامی سایت آیلین وب با یک قسمت دیگر از آموزش ها ی کاربردی و حرفه ای  در خدمت شما هستیم پس باما همراه باشید. در قسمت های قبل طراحی وبسایت با المنتور توانستیم بخش های بسیاری از این افزونه را یاد گرفته و از طریق این آموزش ها صفحات Landing Page … ادامه

آموزش ابزارک های جذاب افزونه المنتور(مثل کار با دکمه های اشتراک گذاری ، بخش نظرات و …)

elementor widgets part 5

سلام دوستان عزیز آیلین وب خوشحالم که توانستم یک جلسه دیگر از آموزش صفحه ساز المنتور در وردپرس خدمت شما باشم . در قسمت قبلی آموزش المنتور ما با برخی از ویژگی های نسخه رایگان و پرمیوم افزونه المنتور آشنا شدیم و توانستیم از ابزارک های مختلف این افزونه قدرتمند برای انجام کارهای خود استفاده … ادامه

آموزش کار با ابزارهای نسخه پرو المنتور (همانند : نمونه کارها، پست ها، فرم ها و …)

elementor widgets part 4

در دوره قبل با بخش هایی از افزونه فارسی elementor که شامل، بخش داخلی، سربرگ، تصویر، ویدئو، نقشه سایت و بخش های دیگر آن آشنا شدیم و حال در قسمت سوم دوره آموزش کامل کار با المنتور با بخش های نرم افزار این افزونه آشنا خواهیم شد. البته اگر از وردپرس هیچی نمی دانید و … ادامه