إضافة Landing pages إلى الصفحة الرئيسية في يوكان .

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

ماذا نحتاج لفعل هذا ؟

سوف نحتاج صور المنتجات التي سوف نعمل عليها و حساب كانفا لتعديل تلك الصور أو بالأحرى جعلها بحجم واحد والذي هو 400×300 بيكسل لكي نستطيع إضافة Landing pages إلى الصفحة الرئيسية في يوكان ، و أيضا كود تعديل سطايل الصور لكي يظهر في الهاتف صورتين في سطر واحد و في الحاسوب أربع صور في سطر واحد ، الكود سوف تجدونه موجود في الصفحة بالأسفل .

طريقة إضافة Landing pages إلى الصفحة الرئيسية في يوكان .

إفتح الداشبورد الخاصة متجرك على منصة يوكان إنزل إلى متجر إنقر على التصميم بعد ذلك إدخل إلى
إعدادات الصفحة الرئيسية هناك أينما تريد إضافته ، ضع في ذلك المكان إدخال html جديد أكتب في عنوانا مثلا ( أحسن المنتجات ) بعد ذلك إنزل أسفله و ضع حقل html جديد و قم بتحميل الصور داخله ( واحد أسفلها الأخرى مباشرة ) ، ثم كل صورة ضع لها رابط صفحة الهبوط الخاصة بها ، ثم صغر من حجمهم إلى 170بيكسل ، بعد ذلك إذهب إلى إعدادات ثم اونلاين ( القالب القديم ) و هناك اختر CSS/JavaScript configs و بمكان إدخال الأكواد أدخ كود CSS الموجود بالأسفل .

<style>
.container {
  padding: 20px;
}

.fr-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 10px; 
}

.responsive-img {
  flex: 1 1 calc(25% - 10px);
  max-width: 100%; 
  height: auto;
  border-radius: 10px; 
  transition: transform 0.5s; 
}

.responsive-img:hover {
  transform: scale(1.1); 
}

@media (max-width: 768px) {
  .responsive-img {
    flex: 1 1 calc(50% - 10px); 
  }
}

@media (max-width: 480px) {
  .responsive-img {
    flex: 1 1 calc(100% - 10px); 
  }
}

</style>