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

Started By nasimparsi, Jul 24 2018 10:44 AM

11 پاسخ برای این موضوع
nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 24 July 2018 - 10:44 AM

دوستان گرامی من یک سایت پرستاشاپی دارم

الان کد H2 توی قالب  اندازش بزرگ هست، من می خواستم اندازه این کد رو مثلا روی 13 بزارم

از طریق ویرایشگر درون پیشخوان سایت اگر این کارو بکنیم گویا inline css‌ به حساب میاد و به سئو آسیب می زنه

اگر من بخوام مثلا به صورت خودکار و بدون inline css‌ شدن کدهای H2 به اندازه 13 و کد H3 اندازه 12 و کد H4 به اندازه 11 باشه

باید چه کاری انجام بدم؟ چه کدی رو باید در چه فایلی بزارم و ...؟؟؟

لطفا بنده رو راهنمایی کنید
با سپاس

admin

    مدیر و موسس انجمن

  • مدیر کل
  • 937 محبوبیت
  • 5185 ارسال

ارسالی 24 July 2018 - 11:06 AM

در پوشه
themes/yourtheme/css/autoload
در مسیر بالا، yourtheme نام قالب شماست. در این مسیر یک فایل جدید ایجاد کنید به نام hcontrol.css و فایل رو ویرایش کنید داخلش این کد رو بنویسید:

.rte h2 {font-size: 13px !important;}
.rte h3 {font-size: 12px !important;}
.rte h4 {font-size: 11px !important;}
amirrzd

    سفیر پرستاشاپ

  • عضو انجمن
  • ستارهستارهستاره
  • 94 محبوبیت
  • 242 ارسال
  • Locationتهران

ارسالی 24 July 2018 - 11:16 AM

علاوه بر روش بالا میتونید این کارها رو هم بکنید. قصدم اینه که بهتون یاد بدم چطوری بقیه استایل ها رو هم اعمال کنید.

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

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

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 24 July 2018 - 11:43 AM

سپاس فراوان از هر دو دوستان و راهنمایی عالی. برای اطمینان بیشتر می خواستم این پرسش رو مطرح کنم که الان با این شرایط دیگه این لاین css حذف شده؟

 

با استفاده از ویرایشگر:

<h2><span style="font-size: 12pt; color: #d0121a;">دستگاه مبدل برق خودرو اینورتر 2000 وات</span></h2>
<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

بدون استفاده از ویرایشگر: ( رنگ و اندازه ای که به H2 داده بودم حذف شده )

 

<h2 style="text-align: justify;">دستگاه مبدل برق خودرو اینورتر 2000 وات</h2>
<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه&zwnj;های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

amirrzd

    سفیر پرستاشاپ

  • عضو انجمن
  • ستارهستارهستاره
  • 94 محبوبیت
  • 242 ارسال
  • Locationتهران

ارسالی 24 July 2018 - 11:53 AM

اگر شما کلمه style توی تگ های html ببینی یعنی استایل این لاین داری.

nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 24 July 2018 - 12:16 PM

اگر شما کلمه style توی تگ های html ببینی یعنی استایل این لاین داری.

 

الان سه استایل وجود داره. دوتاشون مربوط به تراز کردن خطوط justify هست و یکیشون مربوط به رنگ یک واژه

 

امکانش هست کدی رو در css دلخواه قالب وارد کنیم یا اینکه در فایلی که ادمین گفتند وارد کنیم که همگی نوشته ها و محتوای درون صفحه های سایت به صورت تراز justify باشن و دیگه نیازی نباشه از طریق ویرایشگر اون رو تراز کنیم؟

 

<h2 style="text-align: justify;">دستگاه مبدل برق خودرو اینورتر 2000 وات</h2>
<p style="text-align: justify;">مبدل برق خودرو 2000 وات برند SUOER تبدیل برق ماشین 12 ولت باتری خودرو به 220 ولت شهری انواع دستگاه&zwnj;های برقی با حداکثر توان <strong>2000 وات</strong> مانند فرز، دریل، یخچال، کولر، تلوزیون، پمپ و... دارای 6 لایه محافظتی هوشمند دما، ولتاژ، جریان، اتصال کوتاه، هشدار و آلارم صوتی، فن هوشمند، خنک کننده، هشدار و خاموشی خودکار، نمایشگر LED و.. - دارای <span style="color: #064423;"><strong>12 ماه گارانتی</strong></span> ، بدنه فلزی ایزوله</p>

nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 24 July 2018 - 01:03 PM

علاوه بر روش بالا میتونید این کارها رو هم بکنید. قصدم اینه که بهتون یاد بدم چطوری بقیه استایل ها رو هم اعمال کنید.

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

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

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

 

با توجه به این راهنمایی برداشت من این بود ( البته در بخش ستایل برای کلاس رنگ ها احتمالا اشتباه هست کارم ) اما لطفا اگر می شه بگید در کدام مرحله اشتباه کردم و چگونه می تونم اصلاح کنم این اشتباه رو

1- نخست باید این سه کد رو در بخش کدهای اختصاصی css پوسته قرار بدم


.color-red {
 color: red;
}

.color-blu {
 color: blu;
}

.color-bla {
 color: bla;
}


2- در قدم دوم باید این سه کد مربوط به اندازه رو درون بخش کدهای اختصاصی css قرار بدم

.font-18{font-size:18px}
.font-16{font-size:16px}
.font-14{font-size:14px}

3- از این پس هر زمان خواستم کد H2 یا H3 یا H4 توی محتوا قرار بدم تیتر رو توی این قالب و استایل قرار داده و درون کد متن قرار بدم

<h2 class="font-18 color-red">این یک تیتر است</h2>

<h3 class="font-16 color-blu">این یک تیتر است</h3>

<h4 class="font-14 color-bla">این یک تیتر است</h4>

admin

    مدیر و موسس انجمن

  • مدیر کل
  • 937 محبوبیت
  • 5185 ارسال

ارسالی 25 July 2018 - 11:47 AM

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}
sajjad.zand

    عضو جدید

  • عضو انجمن
  • 0 محبوبیت
  • 2 ارسال

ارسالی 25 July 2018 - 08:52 PM

علاوه بر روش بالا میتونید این کارها رو هم بکنید. قصدم اینه که بهتون یاد بدم چطوری بقیه استایل ها رو هم اعمال کنید.

(یادتون باشه که شما نیاز به دانش پایه css داری. دوره‌ی آموزش کار با ویرایشگر پرستاشاپ هم میتونی نگاه کنید.)

 

ولی در کل شما مثلا یه متنی رو داخل h2 میخوای قرار بدی:

<h2>این یک تیتر است</h2>

حالا میخواید بهش استایل (سایز و رنگ و...) بدید. باید یک یا چند کلاس بهش اضافه کنید. بعد از طریق فایل css بهش استایل ها رو اعمال کنید. به این ترتیب:

 

1. از طریق ویرایشگر روی </> کلیک میکنید و کد بالا رو به این ترتیب ویرایش میکنید. اینجا ما یک کلاس font-13 به تگ h2 دادیم. بعدا به این کلاس در فایل css استایل میدیم:

<h2 class="font-13">این یک تیتر است</h2>

(توجه کنید که این اسم font-13 دل بخواهیه و شما هر اسمی میتونید بذارید. من توصیه و پیشنهادم اینه که یک اسمی بذارید که مفهوم باشه براتون که بعدا هم بتونید ازش استفاده کنید.)

 

۲. ایجاد استایل برای کلاس font-13

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

.font-13{font-size:13px}

روش‌های اعمال css در پرستاشاپ.

۱. دقیقا مثل روشی که admin در بالا توضیح دادن، ایجاد یک فایل css در پوشه autoload قالب.

۲. چون می‌دونم شما از قالب پاندا استفاده میکنی، قرار دادن کدهای css در ماژول ویرایشگر قالب > کدهای دلخواه > کدهای css دلخواه

 

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

۱. اعمال استایل رنگ به همون کلاس font-13

.font-13{
    font-size:13px;
    color: red;
}

 

۲. ایجاد یک کلاس جدید و اعمال جداگانه رنگ به اون کلاس و اختصاص این کلاس در کنار کلاس سایز:

در این حالت کد h2 رو به صورت زیر تغییر میدید:

<h2 class="font-13 color-red">این یک تیتر است</h2>

و کد زیر رو هم به css اضافه میکنید.

.color-red {
 color: red;
}

 

مزیت روش دوم اینه که شما میتونی از این کلاس color-red برای تمامی تگ های html داخل سایتتون استفاده کنید. چه تگ p چه h2 و چه a و...

 

 

تفاوت روشی که من توضیح دادم با روش admin اینه که شما دستت باز تره اما خیلی زمان بره. روش ادمین به صورت خودکار به تمام h2 های داخل توضیحات محصول اعمال میشه. 

اما در روش من باید دستی به تمام h2 های داخل محصول کلاس ها رو اعمال کنید تا استایل ها اثر بذاره. تنها زمانی خوبه از روش من استفاده کنید که بخواید به h2 ها در جاهای مختلف سایت و حتی در هر توضیح محصول استایل متفاوتی بدید.

 

 

من قالب الکترون دارم و ظاهرا برای وارد کردن کد css با توجه به به این توضیحات دو راه دارم. 
1- فایل hcontrol.css رو بسازم و کدهای استایل رو تو این فایل وارد کنم
2- کدهای استایل رو در بخش " استایل سفارشی" در پنل کاربری بذارم.( قالب الکترون)
 
سوال: چه تفاوتی این دو روش در نتیجه دارن؟ (هم از نظر سئو و هم سرعت) یا هرکدام که راحتتر بودم انجام بدم و تفاوتی نداره
nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 26 July 2018 - 11:21 AM

 

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}

 

لطف کردین.

با این شیوه در پرستاشاپ به نظر متن تراز می شه

<p class="text-justify"> متن اینجا </p>
nasimparsi

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 59 محبوبیت
  • 406 ارسال

ارسالی 23 September 2018 - 02:00 PM

 

بله درسته. برای justify کردن هم کافیه کد زیر رو اضافه کنید و هر متنی رو خواستید justify کنید به المنت p کلاس text-justify رو بدید:

.text-justify {text-align: justify;}

 

یک پرسش داشتم در این زمینه

 

در متن توضیحات تعداد زیادی پاراگراف هست. از نظر سئو مشکلی نیست که به همگی المنت p موجود در متن کلاس <p class="text-justify"> متن اینجا </p> رو بدیم؟

admin

    مدیر و موسس انجمن

  • مدیر کل
  • 937 محبوبیت
  • 5185 ارسال

ارسالی 23 September 2018 - 02:30 PM

نه کلاس ها روی سئو شما تاثیری ندارن


0 کاربر در حال خواندن این موضوع است

0 کاربر، 0 مهمان و 0 عضو مخفی