পূর্ববর্তী টিউটোরিয়ালে, আমরা আপনি Divi পরিচয় করিয়ে দিয়েছিলেনযারা জানেন না তাদের জন্য বলছি, Divi হল একটি প্রিমিয়াম ওয়ার্ডপ্রেস থিম যা টিম দ্বারা ডিজাইন করা হয়েছে। ডিজাইন করেছেন মার্জিত থিম যা ওয়ার্ডপ্রেস এবং ডিজাইন প্লাগইন এবং থিমগুলিতে বিভিন্ন পরিষেবা সরবরাহ করে।

Divi একটি রেসপন্সিভ থিম এবং WooCommerce সহ আরও বেশ কয়েকটি প্লাগইনের সাথে সামঞ্জস্যপূর্ণ। আজ, আমরা আপনাকে দেখাবো কিভাবে আপনার WooCommerce পণ্যগুলিকে একটি ভিন্ন অ্যানিমেশন দিতে হয়।

কখনও কখনও WooCommerce এর স্টাইলটি কিছুটা অনুপযুক্ত হতে পারে, বিশেষত যদি আপনার সিএসএস স্টাইলটি কিছুটা আলাদা। এই টিউটোরিয়াল, যা কিছুটা প্রযুক্তিগত হবে (একটি সামান্য সিএসএস এবং অন্য কিছুই), এটির প্রতিকার করার অনুমতি দেবে।

ডিভি থিমের অন্যান্য টিউটোরিয়াল

এর শুরু করা যাক।

মাউস ওভার পাঠ্যের জন্য একটি আইকন পরিবর্তন করা

ডিফল্টরূপে, আপনি যখন ডিভির সাথে ডাব্লুউকমার্স ব্যবহার করেন এবং কোনও পণ্যের উপর ঘুরে দেখেন আপনি একটি ছোট '+' আইকন দেখতে পাবেন যা হরফ (মেক-আইকন) ডিভি দ্বারা প্রস্তাবিত এবং যা নিম্নলিখিত:

সেটিংসে আলাদা আইকনে এটিকে পরিবর্তন করা সত্যিই সহজ তবে আপনি যদি কিছু পাঠ্য যোগ করতে চান তবে এটি অন্য জিনিস? আজকের সিএসএস স্নিপেটগুলি দিয়ে কীভাবে এটি সম্পাদন করা যায় তা আমি আপনাকে দেখাব এবং আমি আপনার সাইটে যুক্ত করতে optionচ্ছিক কোডও অন্তর্ভুক্ত করব।

আমরা একবার যা সম্পন্ন করব তা এখানে:

কেন যাই হোক আইকনের পরিবর্তে পাঠ্য ব্যবহার করবেন?

আমি এমন কিছু কারণ সম্পর্কে ভাবতে পারি যা আপনাকে এটি করতে বাধ্য করতে পারে:

আপনার দোকানে একটি অনন্য চেহারা দেওয়ার সংজ্ঞা দিতে: আপনার ডিভি / ডাব্লুউকমার্স সাইটটিকে অন্যের থেকে আলাদা করতে আপনি যা কিছু করতে পারেন তা সর্বদা একটি ভাল জিনিস।

"দেখুন" বা "কিনুন" এর মতো শব্দ ব্যবহার করার ফলে আরও রূপান্তর হতে পারে: প্রত্যেকেরই তাদের ওয়েবসাইটের জন্য সবচেয়ে ভাল যা করা উচিত, এবং এটির জন্য আপনি ডিভির সংহত A / B পরীক্ষার সুবিধা নিতে পারেন।

অনুপ্রেরণার উত্স

আমি সম্প্রতি এমন একটি সাইট ব্রাউজ করেছি যেখানে পণ্যের লেখা ঘোরাফেরা করছিল। আমি অবশ্যই অন্যান্য ই-কমার্স সাইট দেখেছি যেখানে হোভারিং পণ্যে আইকনের পরিবর্তে শব্দ রয়েছে, তাই এটি কোনও নতুন ধারণা ছিল না। আমাকে কখনও ডিভি থিমে এটি করতে হয়নি, এবং যখন আমি এটি দেখলাম, তখন আমি নিজেকে একটি চ্যালেঞ্জ তৈরি করেছিলাম এবং বুঝতে পেরেছিলাম যে এটি বাস্তবায়ন করা আসলে সহজ। খুব কম কোডের প্রয়োজন হয়, তাই আপনি নিশ্চিত থাকতে পারেন যে এটি আপনার ব্লগের কর্মক্ষমতাকে প্রভাবিত করবে না।

পাঠ্যের উপর মাউস প্রয়োগ করা হচ্ছে

পদক্ষেপ 1: রঙ ওভারলে

আমরা প্রথমে হোভারের উপরের হোভার ওভারলেয়ের রঙটি পরিবর্তন করব। এটি ডিভির পক্ষে করা অত্যন্ত সহজ। আপনার স্টোর মডিউলটিতে " উন্নত উন্নত নকশা পরামিতি এবং আপনার রঙ নির্বাচন করুন।

পদক্ষেপ 2: সিএসএস যুক্ত করা হচ্ছে

নিম্নলিখিত সিএসএস কোড " থিম বিকল্পগুলি> কাস্টম সিএসএস অথবা আপনার শিশু থিমের স্টাইল শীটে।

.Wocommerce .et_overlay: এর আগে {বাম: 0; মার্জিন-বাম: 0; সামগ্রী: 'দেখুন'; / *** এখানে আপনার পাঠ্য *** / হরফ-পরিবার: 'উত্স ছাড়াই', আড়িয়াল! / *** আপনার ফন্ট চয়ন করুন *** / পাঠ্য-রূপান্তর: বড় হাতের অক্ষর; হরফ-আকার: 24px; রঙ: # ff; / *** পাঠ্যের রঙ সেট করুন *** / হরফ ওজন: গা bold়; পাঠ্য-সারিবদ্ধ: কেন্দ্র; প্রস্থ: 100%; প্যাডিং: এক্সএনএমএক্সএক্সপিএক্স এক্সএনএমএক্স; }

আপনি যদি চান আপনার পণ্যগুলি বরং গোলাকার হয় তবে আপনি এই alচ্ছিক কোডটি যুক্ত করতে পারেন:

.woocommerce ul.products li.product একটি img, .et_overlay {সীমানা-ব্যাসার্ধ: 50%; }

এটা সব!

এখন আপনি আপনার স্টোরটি দেখতে পারেন এবং কীভাবে আপনার পরিবর্তনগুলি বিবেচনায় নেওয়া হয় তা দেখতে পারেন।

[vc_row center_row = "হ্যাঁ"] [vc_column width = "1/2″] [vcex_button টার্গেট =" blank "layout =" প্রসারিত "align =" center "font_family =" Raleway "font_weight =" 700″ স্টাইল = "ফ্ল্যাট" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI থিম ডাউনলোড করুন [/ vcex_button] [wcex_button] [vcex_button] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" লক্ষ্য = "খালি" লেআউট = "প্রসারিত" সারিবদ্ধ = "কেন্দ্র" font_family = "Raleway" font_weight = "700″ স্টাইল =" ফ্ল্যাট "কাস্টম_ব্যাকগ্রাউন্ড =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "custom_hover_color =" #fffffff" কাস্টম_হওভার_color =" #FLOff-এটি-ডাউন DIVI [/ vcex_button][/ vc_column][/ vc_row]

অন্যান্য ডিভি টিউটোরিয়াল

5 মন্তব্য

ইয়ট ১৪ আগস্ট, ২০১৮ রাত ১০:১৬ মিনিটে

পণ্য প্রতি বিভিন্ন পাঠ্য? আপনি এটি নতুন পণ্য যুক্ত বলছেন? কীভাবে এবং কোথায়?
উত্তর
brice bayle ২৭ মে, ২০১৬ সকাল ৭:২১ মিনিটে

সুপার নিবন্ধ, এই টিপ জন্য আপনাকে ধন্যবাদ। এবং যদি আমরা পণ্য দ্বারা একটি ভিন্ন টেক্সট চান, কিভাবে?
উত্তর
- থিয়েরি বারট্রান্ড ২৭ মে, ২০১৬ সকাল ৭:২১ মিনিটে
  
  হ্যালো ব্রাইস,
  
  এই ক্ষেত্রে, আপনি নতুন WooCommerce পণ্য একটি ভিন্ন টেক্সট যোগ করুন
  উত্তর
লরা ৩ এপ্রিল, ২০২৫ তারিখে বিকাল ৩:০০ টায়।

সুপার !! এই টিপ জন্য আপনাকে ধন্যবাদ
উত্তর
- থিয়েরি বারট্রান্ড ৩ এপ্রিল, ২০২৫ তারিখে বিকাল ৩:০০ টায়।
  
  কিছুই না
  উত্তর