كيفية إنشاء صفحة منتج حديثة على موقع بلوجر

إن إنشاء صفحة منتج حديثة على موقع بلوجر الخاص بك يعد خطوة أساسية لعرض منتجاتك بفعالية وزيادة المبيعات. لا تعمل صفحة المنتج المصممة جيدًا على تحسين تجربة المستخدم فحسب، بل تساعد أيضًا في تحسين محركات البحث، مما يجعل منتجاتك أكثر قابلية للاكتشاف عبر الإنترنت. اتبع هذا الدليل الشامل لإنشاء صفحة منتج حديثة ومذهلة على موقع بلوجر الخاص بك.

كيفية إنشاء صفحة منتج حديثة على موقع بلوجر

في هذا المقال، سنرشدك إلى كيفية إنشاء صفحة منتج حديثة على موقع بلوجر الخاص بك، باستخدام تصميم متكامل وجذاب، مما يسهم في تحويل زوارك إلى عملاء فعليين.

إعداد قالب بلوجر

الخطوة 1: أولاً، عليك تسجيل الدخول إلى لوحة تحكم بلوجر. ثم انقر فوق المظهر من القائمة الموجودة على الجانب الأيسر. بعد ذلك، انتقل إلى تخصيص > تحرير HTML.

الخطوة 2: الآن تحتاج إلى إضافة jQuery إلى القالب الخاص بك. للقيام بذلك، اضغط على Ctrl+ Fوابحث عن الكود ]]></b:skin> داخل القالب الخاص بك.

الخطوة 3: الآن أضف CSS إلى القالب. انسخ الكود أدناه والصقه أعلاه ]]></b:skin> .

.container {max-width: 1200px;margin: 0 auto;padding: 15px;display: flex;}.left-column {width: 65%;position: relative;}.right-column {width: 35%;margin-top: 60px;}.left-column img {width: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: all 0.3s ease;}.left-column img.active {opacity: 1;}.product-description {border-bottom: 1px solid #E1E8EE;margin-bottom: 20px;}.product-description span {font-size: 12px;color: #358ED7;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;}.product-description h1 {font-weight: 300;font-size: 52px;color: #43484D;letter-spacing: -2px;}.product-description p {font-size: 16px;font-weight: 300;color: #86939E;line-height: 24px;}.product-color span, .cable-config span {font-size: 14px;font-weight: 400;color: #86939E;margin-bottom: 20px;display: inline-block;}.product-color {margin-bottom: 30px;}.color-choose div {display: inline-block;}.color-choose input[type="radio"] {display: none;}.color-choose input[type="radio"] + label span {display: inline-block;width: 40px;height: 40px;margin: -1px 4px 0 0;vertical-align: middle;cursor: pointer;border-radius: 50%;}.color-choose input[type="radio"] + label span {border: 2px solid #FFFFFF;box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);}.color-choose input[type="radio"]#red + label span {background-color: #C91524;}.color-choose input[type="radio"]#blue + label span {background-color: #314780;}.color-choose input[type="radio"]#black + label span {background-color: #323232;}.color-choose input[type="radio"]:checked + label span {background-image: url(images/check-icn.svg);background-repeat: no-repeat;background-position: center;}.product-price {display: flex;align-items: center;}.product-price span {font-size: 26px;font-weight: 300;color: #43474D;margin-right: 20px;}.cart-btn {display: inline-block;background-color: #7DC855;border-radius: 6px;font-size: 16px;color: #FFFFFF;text-decoration: none;padding: 12px 30px;transition: all .5s;}.cart-btn:hover {background-color: #64af3d;}@media (max-width: 940px) {.container {flex-direction: column;margin-top: 60px;}.left-column, .right-column {width: 100%;}.left-column img {width: 300px;right: 0;top: -65px;left: initial;}}@media (max-width: 535px) {.left-column img {width: 220px;top: -85px;}}

الخطوة 4: الخطوة الأخيرة هي وضع الكود أسفل العلامة </body> .

<script>
    //<![CDATA[
$(document).ready(function() {

  $('.color-choose input').on('click', function() {
      var headphonesColor = $(this).attr('data-image');

      $('.active').removeClass('active');
      $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
      $(this).addClass('active');
  });
});
  //]]> 
</script>

الخطوة 5: لقد انتهينا من تخصيص القالب. لذا فلنبدأ الآن في إنشاء صفحة المنتج الفعلية. أنشئ منشورًا جديدًا ثم انتقل إلى عرض HTML، والصق الكود أدناه فيه، ثم احفظ. صفحة المنتج الخاصة بك جاهزة.

<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>$499.00</div>
<!--more-->
<main class="container">
    <!-- Left Column / Headphones Image -->
    <div class="left-column">
       <img data-image="black" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNoYYxyQWTGs_4VUh03tvocIJR5POeugFMfq2jeJw2neMDeIfsAsVsVYcBfD35RTzUkPbNQjAfFWcdHpTBlv_N1DAAWY0XHqQKjJgn_SiJ71vsuRe5K5nX2STfyxk97uEvhYYYwZdwcWmkrHAmaOV0c0RqnEZF4cdiBjq1O-yI6KHywZcXSNSHkNElhES/s1800/black.png" alt="">
      <img data-image="blue" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8YiwSHqmPCEn8z71jgnIco6JJRUtDQYi2nxJ0hFRcPbrtF1o5upLFiPR3F8Ulof_JyRFBLVS6ZDVYjOWwckkuTiI1O9Rs22tl-834fT9JE9c7MMs3OrM282DdZshEgQaHfc3rWSoacxbjyH_qmL6X5d528xWo8duDm6dhhlyWjPwnRjnIRxFGFnBjM-n6/s320/blue.png" alt="">
      <img data-image="red" class="active" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtLxTYkqz0FzoJeOK-HYgqwOskxqLmwC0kxKkHDt4HPSjhZ6BCNDWPDexYty0keEgvfi9W1X9fS2LJ4B6qu_hiF7rD6dTRFzZZxgp2WyyqOu8nbO1JsUkAsscwVdeconxH01XHm6EIYM2AG5QhEfpMMQyCQE9vAjaOsIlsDzjSuSfPhxeFACstyWyysEl/s320/red.png" alt="">
    </div>
    <!-- Right Column -->
    <div class="right-column">
      <!-- Product Description -->
      <div class="product-description">
        <span>Headphones</span>
        <h1>Beats EP</h1>
        <p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>
      </div>
      <!-- Product Configuration -->
      <div class="product-configuration">
        <!-- Product Color -->
        <div class="product-color">
          <span>Color</span>
          <div class="color-choose">
            <div>
              <input data-image="red" type="radio" id="red" name="color" value="red" checked>
              <label for="red"><span></span></label>
            </div>
            <div>
              <input data-image="blue" type="radio" id="blue" name="color" value="blue">
              <label for="blue"><span></span></label>
            </div>
            <div>
              <input data-image="black" type="radio" id="black" name="color" value="black">
              <label for="black"><span></span></label>
            </div>
          </div>
        </div>
      <!-- Product Pricing -->
      <div class="product-price">
        <span>148$</span>
        <div style='text-align:center'>
<a class="wiki-btn-wa show-form" href="javascript:void" title="Buy Now"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Buy Now</a></div>
      </div>
    </div>
  </main>
  <div class='pInfo pPad'>
  <div class='L'><small>Brand</small><span>Sennheiser Momentum</span></div>
  <div class='R'><small>Model</small><span>PX7 S2</span></div>
</div>
<div class='pInfo pPad'>
  <div class='L'><small>Lowest frequency</small><span>6 Hzvs14.55 Hz</span></div>
  <div class='R'><small>Battery life</small><span>60 hoursvs30.03 hours</span></div>
</div>
<div class='pInfo pPad'>
  <div class='L'><small>Driver unit size</small><span>42 mmvs35.61 mm</span></div>
  <div class='R'><small>Bluetooth version</small><span>5.2vs4.59</span></div>
</div>
<div class='pInfo pPad'>
  <div class='L'><small>Number of microphones</small><span>4vs1.21</span></div>
  <div class='R'><small>Charge time</small><span>2 hoursvs2.64 hours</span></div>
</div>
<div class='pInfo pPad'>
  <div class='L'><small>Battery power</small><span>700 mAhvs612.08 mAh</span></div>
  <div class='R'><small>Lowest mic frequency</small><span>50 Hzvs78.29 Hz</span></div>
</div>
</div>

الخطوة 6: الآن قم بنشر منشورك وهذا كل شيء. صفحة المنتج الخاصة بك جاهزة الآن.

تحذير! صفحة المنتج هذه غير فعالة. لا يمكنك تلقي الطلبات من خلال هذه الصفحة. إذا كنت تريد جعل هذه الصفحة فعالة وتلقي الطلبات من خلال هذه الصفحة، فيرجى اتباع التعليمات أدناه.

احصل على الطلبات باستخدام صفحة المنتج

فيما يلي كيفية جعل هذه الصفحة وظيفية واستخدامها لتلقي الطلبات.

هناك طريقتان لتلقي الطلبات باستخدام صفحة المنتج هذه. يمكنك استخدام WhatsApp أو البريد الإلكتروني لتلقي الطلبات وبيع المنتجات لعملائك. لذا يرجى قراءة أي من منشورات المدونة أدناه وتغيير القالب الخاص بك وفقًا لتلك المدونات.
كيفية تلقي الطلبات عبر البريد الإلكتروني
كيفية تلقي الطلبات عبر الواتس اب
الآن قم باستبدال رمز زر WhatsApp أو البريد الإلكتروني الذي حصلت عليه من تلك المدونات بالكود التالي.

<a href="#" class="cart-btn">Add to cart</a>

(السطر الرابع من الأسفل).

الأسئلة الشائعة: كيفية إنشاء صفحة منتج حديثة على موقع بلوجر

1. ما هي أهمية إنشاء صفحة منتج حديثة على موقع بلوجر؟

إن إنشاء صفحة منتج حديثة على بلوجر يعتبر خطوة أساسية لعرض منتجاتك بشكل احترافي على الإنترنت. تعمل هذه الصفحة على تحسين تجربة المستخدم، وتساعد في تحسين ترتيب منتجاتك في نتائج محركات البحث، مما يزيد من فرص ظهورها والوصول إليها من قبل العملاء المحتملين. كما تسهم في تعزيز مصداقيتك وجذب الزوار.

2. هل يمكنني تلقي الطلبات من خلال صفحة المنتج على بلوجر؟

بشكل افتراضي، لا يمكن لصفحة المنتج على بلوجر تلقي الطلبات مباشرة. ومع ذلك، يمكنك جعلها تفاعلية باستخدام روابط لوسائل التواصل مثل واتساب أو البريد الإلكتروني، مما يتيح للعملاء التواصل معك لتقديم الطلبات. من خلال إجراء بعض التعديلات على القالب، يمكنك تسهيل عملية تلقي الطلبات.

3. ما الأدوات التي أحتاجها لتصميم صفحة منتج على بلوجر؟

لتصميم صفحة منتج على بلوجر، ستحتاج إلى معرفة كيفية تعديل HTML وCSS داخل القالب. كما أنه من الضروري إضافة jQuery لتحسين التفاعل مع الصفحة. باتباع الخطوات المتوافقة مع هذه الأدوات، يمكنك تصميم صفحة منتج احترافية تلبي احتياجاتك وتناسب جمهورك.

4. هل من الصعب إنشاء صفحة منتج على بلوجر؟

قد تكون عملية إنشاء صفحة منتج على بلوجر بسيطة إذا تم اتباع الخطوات بدقة. تحتاج فقط إلى بعض الفهم الأساسي لكتابة الأكواد وتخصيص القالب. بمجرد تنفيذ هذه الخطوات، ستتمكن من إنشاء صفحة متكاملة وفعالة، مما يجعل العملية سهلة نسبيًا.

5. كيف يمكنني تحسين تصميم صفحة المنتج الخاصة بي؟

لتحسين تصميم صفحة المنتج الخاصة بك، تأكد من استخدام ألوان متناسقة مع علامتك التجارية. إضافة صور عالية الجودة ووصف واضح للمنتجات له دور كبير في جذب الزوار. كما يمكن تحسين التفاعل باستخدام أكواد CSS وjQuery، بحيث تجعل الصفحة أكثر ديناميكية وسهولة في الاستخدام.

خاتمة

إن إنشاء صفحة منتج حديثة على موقع بلوجر هو طريقة إستراتيجية لعرض منتجاتك وزيادة المبيعات. باتباع هذه الخطوات، يمكنك تصميم صفحة منتج جذابة ومُحسَّنة لمحركات البحث وتوفر تجربة مستخدم رائعة. التزم بالعلامة التجارية الخاصة بك، وقدم محتوى قيمًا، واستمر في تحسين نهجك بناءً على التحليلات وتعليقات العملاء.

تدوينة سعيدة وأتمنى لك حظًا سعيدًا مع متجرك عبر الإنترنت!.

انتهى المقال الى هنا! اذا اعجبك مقال وأستفدت منه لاتنسى مشاركته مع الاصدقاء والعائلة. نحن نسعى دائما لتقديم الافضل.

أصل للمعلوميات

كيفية إنشاء صفحة منتج حديثة على موقع بلوجر

إعداد قالب بلوجر

احصل على الطلبات باستخدام صفحة المنتج

الأسئلة الشائعة: كيفية إنشاء صفحة منتج حديثة على موقع بلوجر

خاتمة

عن المؤلف/

Post a Comment

احصل على قالب SEO Plus V8 المدفوع مجانا لتحسين مدونتك الآن

برنامج WinXVideo AI: وفر 69.95$ واحصل عليه بـ 0.0$ اليوم!

أفضل 5 تطبيقات لتنظيم حياتك اليومية باستخدام التكنولوجيا الحديثة

دليل علامات طبلون السيارة التحذيرية: التفسيرات والحلول

احصل على 600+ باك لينك مجاني الآن: تحسين ترتيب موقعك بسهولة

أصل للمعلوميات