آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت پنجم: ساخت و ویرایش صفحه

دانلود 98 , دانلود رایگان نرم افزار , دانلود جدید ترین نرم افزار ها

تبلیغات
پشتیبانی آنلاین

پیشگام تم

Display Pagerank
قالب های خود را میتوانید توسط ما بفروش برسانید.

پیشگام تم توسط سرور های قدرتمند پیشگام وب میزبانی میشود

پیشگام وب

کیفیت خدمات میزبانی وب را با ما تجربه کنید!

www.pishgamweb.net

آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت پنجم: ساخت و ویرایش صفحه

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

 

  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت اول
  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت دوم
  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت سوم
  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت چهارم
  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت پنجم
  • آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت ششم (قسمت آخر)

 


برای دیدن تصاویر در اندازه ی واقعی، روی اونها کلیک کنید

خب بریم سراغ آموزش: به برگه ها>> افزودن برید و یه برگه ی تازه بسازین. حالا از قسمت بالای برگه ها، backend  editor رو انتخاب کنین. صفحه ی زیر براتون نمایش داده میشه که در واقع اولین انتخابی هست که باید انجام بدین. یعنی برای ساخت یه صفحه، اول باید ساختار کلی اون رو انتخاب کنین، مثلا اینکه کجای صفحه باید نوشته قرار بگیره، کجا تصویر، کجا دکمه و … . در شکل زیر چند نمونه از این ساختارها رو می بینید. با زدن دکمه ی more layouts  و سپس Default Templates می تونین کل ساختارهایی که به طور پیش فرض در ویژوال کامپوسر طراحی شده رو ببنین و معمولاً همین ساختارهای پیش فرض کار شما رو راه میندازه.

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

در مورد landing page ممکنه برای بعضیا نامفهوم باشه که بهش صفحه ی فرود یا صفحه ی هدایت هم گفته میشه. فرض کنین شما تبلیغ خودتون رو در سایت های دیگه قرار دادین و حالا فردی در اون سایت ها روی بنر تبلیغ شما کلیک میکنه. اون صفحه ای از سایت شما که کاربر بعد از کلیک روی بنر واردش میشه، صفحه ی هدایت هست. صفحه ی call to action هم صفحه ای هست که شما با ترفندهای خاصی، کاربر رو وادار به کلیک روی دکمه می کنین که این دکمه می تونه عضویت در خبر نامه باشه یا مثلاً تکمیل یه فرم یا به انتخاب خودتون هر دکمه ی دیگه ای.

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

توی عکس بالا ۴ قسمتی که مشخص کردم همون قسمت هایی هست که توی شکل اول برای “صفحه محصولات” آورده شده بود. یعنی قسمت ۱، یه نوشته، قسمت ۲ یه عکس و قسمت ۳ و ۴ هر کدوم یه محصول که خودتون می تونین تعدادش رو اضافه کنین. حالا اگه پیش نمایش این صفحه رو بزنین، شکل زیر رو می بینین.

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

 

۱- با زدن این دکمه به سایت سازنده ی ویژوال کامپوسر میرین و دیگر هیچ!

۲- با زدن این دکمه، صفحه ی عناصر صفحه ای ویژوال کامپوسر براتون باز میشه و میتونین عنصر مورد نظرتون رو انتخاب کنین. (عناصر در قسمت های قبلی توضیح داده شدن).

۳- این گزینه مربوط به ساختار صفحه یا template هاست که بازدنش پنجره ای باز میشه که دارای دو تب هست: تب اول که می تونین قالبی که خودتون ساختین رو ذخیره کنین و تب دوم که همون قالب های از پیش طراحی شده ی ویژوال کامپوسر هست. (همون more layouts اولین همین مقاله)

۴- در این گزینه، میتونید استایل دلخواه خودتون رو برای این صفحه تعیین کنین. این گزینه برای افرادی هست که به CSS تسلط دارن.

۵- وارد  frontend editor صفحه ی ویرایش با محیط سایت میشین.

خب قبل از اینکه توضیح قسمت های بعدی بریم، باید یه نکته ی خیلی خیلی مهم رو بهتون یادآوری کنم: اگه از قسمت های قبلی یادتون باشه، مهم ترین بخش هر صفحه، ردیف بود. در واقع ما قبل از چیزی تعداد ردیف ها توی هر صفحه رو تعیین می کنیم. بعد هر ردیف رو به یک یا چند ستون تقسیم می کنیم و در نهایت، عناصر مختلفمون رو توی ستون های هر ردیف می چینیم. تنظیماتی که در ادامه باهاشون مواجه میشیم هم دقیقا به همین منواله. بنابراین شماره های ۶، ۷،۸،۹،۱۰، ۱۱ و ۱۲ مربوط به تنظیمات ردیف، شماره های ۱۳، ۱۴ و ۱۵ و ۲۰ مربوط به تنظیمات ستون داخل ردیف و شماره های ۱۶، ۱۷، ۱۸ و ۱۹ مربوط به عناصر درون ستون هاست. توجه کنین که این تنظیمات برای همه ی عناصر ویژوال کامپوسر به همین شکله.

گزینه های ردیف

۶- شکلش رو که نیگا کنین به راحتی متوجه میشین که مربوط به جابه جا کردن ردیف هست. وقتی ماوس روی این قسمت می برین، به همون شکل چهارفلشه درمیاد و میتونین با کشیدن ماوس به هر طرف، کل ردیف به همراه اجزای درونش رو جابه جا کنین.

۷- وقتی ماوس رو روی این قسمت ببرین، یه قسمت باز میشه که از طریق اون می تونین ساختار ردیف و ستون های درونش رو تغییر کنین.

۸- همیشه علامت + نشون دهنده ی اضافه کردن یه مورد جدیده، اینجا هم به این گزینه می تونین به ردیفتون، یه ستون دیگه اضافه کنین.

۹- اگه این گزینه رو بزنین، کل ردیف و اجزاش جمع میشه.

۱۰- این گزینه مربوط به ویرایش ردیفه و باز زدنش، پنجره ای باز میشه که به کمک اون می تونین تنظیمات ردیف، مثل مارجین، پدینگ و حاشیه رو ویرایش کنین.

۱۱- این گزینه، از این ردیف با تمام خصوصیاتش، یه کپی ایجاد می کنه.

۱۲- ردیف رو پاک میکنه!

گزینه های ستون

۱۳- پاک کردن ستون!

۱۴- صفحه ای باز میشه که میتونین تنظیمات ستون رو انجام بدین

۱۵ و ۲۰- با زدن این گزینه، صفحه ی عناصر باز میشه و می تونین هر عنصری که می خواین رو به داخل این ستون، اضافه کنین.

گزینه های عناصر : این گزینه وقتی ماوس رو روی عنصر موردنظر نگه دارین، نمایش داده میشن (منظور همون نوار سبز رنگ شکل بالاست)

۱۶- پاک کردن عنصر مورد نظر (که توی عکس بالا یه بلوک متنی هست)

۱۷- یه کپی از عنصر فعلی تون با تمام ویژگی هاش تولید می کنه.

۱۸- پنجره ی تنظیمات این عنصر باز میشه و به کمکش می تونین ویژگی های عنصر رو تغییر بدین.

۱۹- این گزینه، دقیقا کار شماره ی ۶ رو میکنه، جابه جا کردن عنصر.


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


دانلود با لینک مستقیم

حجم فایل:

دسته :

رمز فایل: www.pishgamtheme.ir

منبع: پیشگام تم

  • اگر به لینک غیر فعالی برخوردید یک پیغام خصوصی بدهید تا ظرف چند ساعت فایل دوباره آپلود بشود
  • .برای دانلود، به روی عبارت "دانلود" کلیک کنید و منتظر بمانید تا پنجره مربوطه ظاهر شود سپس محل ذخیره شدن فایل را انتخاب کنید و منتظر بمانید تا دانلود تمام شود.
  • فایل های قرار داده شده برای دانلود به منظور کاهش حجم و دریافت سریعتر فشرده شده اند، برای خارج سازی فایل ها از حالت فشرده از نرم افزار Winrar و یا مشابه آن استفاده کنید.
  • کلمه رمز جهت بازگشایی فایل فشرده عبارت www.pishgamtheme.ir می باشد. تمامی حروف را میبایستی به صورت کوچک تایپ کنید و در هنگام تایپ به وضعیت EN/FA کیبورد خود توجه داشته باشید همچنین بهتر است کلمه رمز را تایپ کنید و از Copy-Paste آن بپرهیزید.

مطالب پیشنهادی:

ارسال نظر به "آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت پنجم: ساخت و ویرایش صفحه"




− 3 = دو

تبلیغات
آمار سایت
    کاربران آنلاین: 1
برچسب‌ها
ColorNews Constant Contact MailChimp آموزش ایجاد نقشه سایت در وردپرس آموزش روش نصب پلاگین در وردپرس آموزش ساخت دسته بندی‌ و ایجاد تگ برای رسانه وردپرس آموزش نحوه نصب و راه اندازی وردپرس شبکه آموزش نصب و راه اندازی وردپرس شبکه آموزش پیدا کردن آدرس Login وردپرس آموزش کامل افزونه وردپرس ویژوال کامپوسر- قسمت ششم: ساخت و ویرایش صفحه افزونه ایجاد نقشه سایت در وردپرس ایجاد نقشه سایت در وردپرس برترین کانال تلگرام برترین کانال های تلگرام بهترین کانال تلگرام بهترین کانال های تلگرام خرید قالب وردپرس ColorNews دانلود آموزش ایجاد نقشه سایت در وردپرس دانلود قالب وردپرس ColorNews روش نصب پلاگین در وردپرس ساخت دسته بندی‌ و ایجاد تگ برای رسانه وردپرس س دی آموزش نصب و راه اندازی وردپرس شبکه سی دی روش نصب پلاگین در وردپرس فروش قالب وردپرس ColorNews قالب وردپرس ColorNews قیمت قالب وردپرس ColorNews لیست کانال تلگرام لیست کانال های تلگرام نحوه نصب و راه اندازی وردپرس شبکه نحوه پیدا کردن آدرس Login وردپرس پلاگین ایجاد نقشه سایت در وردپرس پیام رسان MailChimp پیام رسان MailChimp در مقابل Constant Contact پیدا کردن آدرس Login وردپرس کانال telegram کانال اخبار تلگرام کانال ادبی تلگرام کانال تلگرام کانال سیاسی تلگرام کانال فرهنگی تلگرام کانال های تلگرام کانال های علمی تلگرام کانال هنری تلگرام کتاب آموزش نصب و راه اندازی وردپرس شبکه کتاب روش نصب پلاگین در وردپرس
ارتباط تلفنی
تلفن تماس : 09125781296 ساعت تماس 9 صبح تا 9 شب
خرید قالب

خرید قالب وردپرس

خرید قالب وردپرس

www.pishgamtheme.ir

پیشگام تم

www.pishgamtheme.ir


https://www.pishgamtheme.ir