এলিমেন্টর ইমেজ বক্স: লাইভ ডেমো এবং ডাউনলোড সহ 16টি ডিজাইন

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

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

তাই আমরা ষোলটি প্রতিস্থাপন তৈরি করেছি। প্রতিটি একটি কার্যকরী এলিমেন্টর উইজেট, প্রতিটিতে একটি লাইভ ডেমো রয়েছে যা আপনি এখনই খুলতে পারেন এবং এই পৃষ্ঠায় একটি ডাউনলোড লিঙ্ক। একটি পেতে আপনাকে একটি ইমেল ঠিকানা হস্তান্তর করতে বা একটি অ্যাকাউন্ট তৈরি করতে হবে না।

এই পৃষ্ঠায়

এক নজরে 16টি ডিজাইন

এগুলো চালানোর জন্য আপনার যা দরকার

এলিমেন্টর ফ্রি পৃষ্ঠার জন্যই যথেষ্ট। ডিজাইন একটি ভিন্ন বিষয়।

• সব ষোলটিরই মাস্টার অ্যাডঅন দরকার। তাদের প্রত্যেকটি নিয়ন্ত্রণের উপর নির্মিত (রিপিটার, টাইপোগ্রাফি, মাত্রা, সীমানা, আইকন পিকার, ট্যাব) যা সম্পূর্ণ উইজেট নির্মাতা প্রদান করে। বিনামূল্যের প্লাগইনটিতে একটি উইজেট বিল্ডার রয়েছে, কিন্তু সেই নিয়ন্ত্রণগুলি লক করা হিসাবে দেখায়৷।
• এই পৃষ্ঠায় ডাউনলোডগুলি বিনামূল্যে এবং অবিকৃত। JSON ধরুন এবং এটি রাখুন। আপনি বিনামূল্যে সংস্করণে সীমিত বিকল্প পরিবর্তন করতে পারেন। কিন্তু প্রো সংস্করণ সবকিছু আনক্লক।
• লাইভ ডেমোর কোনো দাম নেই। একটি খুলুন, ব্রাউজারের আকার পরিবর্তন করুন, একটি কার্ড টেনে আনুন, কীবোর্ড দিয়ে ট্যাব করুন। একটি মোশন স্টাইল আপনার বিষয়বস্তুর সাথে খাপ খায় কিনা তা বিচার করার এটাই সৎ উপায় এবং এটি বিনামূল্যে।

আপনি যদি এমন ডিজাইন চান যা ফ্রি প্লাগইনে চলে, তাহলে আমাদের আটটি ফ্রি উইজেট এলিমেন্টর স্লাইডার টেমপ্লেট সংগ্রহে কোনো প্রো কন্ট্রোল ব্যবহার করা হয় না এবং এর মধ্যে বেশ কয়েকটি স্লাইডারের পরিবর্তে কার্ড লেআউট।

01। লুমেন ইমেজ বক্স

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

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

এর জন্য এটি ব্যবহার করুন: প্রযুক্তিগত পরিষেবা, অন্ধকার-থিমযুক্ত সাইট, অন্ধকার মাটির বিরুদ্ধে ছবি তোলা যেকোনো কিছু।

এর জন্য এটি ব্যবহার করবেন না: সাদা ব্যাকগ্রাউন্ড। স্পটলাইটের বিরুদ্ধে কাজ করার কিছু নেই এবং পুরো জিনিসটি একটি সামান্য নোংরা হোভার স্টেট হিসাবে পড়ে।

02। ভার্জ ইমেজ বক্স

দুটি কলাম, ইচ্ছাকৃতভাবে ধাপের বাইরে, তাই ডান কলামটি বাম থেকে নীচে বসে। প্রতিটি প্লেট দৃশ্যে অতিক্রম করার সাথে সাথে খোলে। শিরোনামগুলি একটি ছোট বৃত্তাকার তীর বহন করে এবং তাদের নীচে অক্ষর-স্পেসযুক্ত ক্যাপগুলিতে একটি ভ্রু লেবেল বসে: SNOWCRAFT, SUMMITS, TRAVERSES৷।

যে অফসেট বাস্তব কাজ করছে। একটি সোজা গ্রিড চোখকে সারি জুড়ে স্ক্যান করতে বলে এবং এটি পড়া বন্ধ করে দেয়। কলামগুলিকে স্তব্ধ করুন এবং এর পরিবর্তে এটিকে পৃষ্ঠার নীচে ভ্রমণ করতে হবে, আপনি আসলে যে দিকটি চান।

এর জন্য এটি ব্যবহার করুন: সম্পাদকীয় পৃষ্ঠা, গাইড, চার থেকে ছয়টি উল্লেখযোগ্য আইটেম সহ যেকোনো কিছু।

এর জন্য এটি ব্যবহার করবেন না: প্রায় আটটিরও বেশি আইটেম। স্তব্ধতা জমা হয় এবং পৃষ্ঠাটি খুব লম্বা, খুব দ্রুত হয়।

03। অ্যাপারচার ইমেজ বক্স

তিনটির দুটি সারিতে ছয়টি বাক্স, উষ্ণ কাগজে-ধূসর। প্রতিটি ছবি মুখোশযুক্ত এবং সারি আসার সাথে সাথে মুখোশটি বাইরের দিকে খোলে, যেভাবে একটি লেন্স অ্যাপারচার করে। প্রতিটি কার্ড তার বর্ণনার অধীনে একটি ছোট SEE বিশদ লিঙ্ক বহন করে।

যখন আপনার কাছে ছয়টি জিনিস থাকে এবং সেগুলি সত্যিকারের সমান হয় তখন এটিই পৌঁছাতে পারে। বেশিরভাগ ইমেজ বক্স লেআউট শান্তভাবে তাদের আইটেম আকার বা অবস্থান দ্বারা র্যাঙ্ক। এই এক না।

এর জন্য এটি ব্যবহার করুন: ডার্করুম এবং প্রিন্ট পরিষেবা, ছয়-আইটেম বৈশিষ্ট্য গ্রিড, ফটোগ্রাফিক কিছু।

এর জন্য এটি ব্যবহার করবেন না: তিনটি আইটেম। দুই-সারির ছন্দ হল পুরো নকশা এবং তিনটির একটি একক সারি এটি হারায়।

04। Bascule ইমেজ বক্স

সেতুর নামে নামকরণ করা হয়েছে, ব্যালেন্স নয়। প্রতিটি কার্ড একটি অনুভূমিক কব্জা চালু করে এবং এর পিছনে একটি আসল পিছনের মুখ অপেক্ষা করছে, একই ছবির উপরে একটি CSS ফিল্টার নয় বরং একটি প্রকৃত দ্বিতীয় দিকে যা আপনি কপি লিখছেন।

এটি তৈরি করার একটি নোট: ফ্লিপটি একটি ব্রেকপয়েন্টের নীচে বন্ধ হয়ে যায় এবং এটি উদ্দেশ্যমূলক। একটি ফোনে একটি কব্জা অ্যানিমেশন মানে একটি ট্যাপ অপ্রত্যাশিত কিছু করে, এবং সমাধান হল এটি ধীর গতিতে করার পরিবর্তে এটি না করা।

এর জন্য এটি ব্যবহার করুন: আগে এবং পরে, স্পেক শীট, যে কোনও কিছু যেখানে তথ্যের দ্বিতীয় অংশটি প্রথমটির মতোই আকর্ষণীয়।

এর জন্য এটি ব্যবহার করবেন না: একটি পৃষ্ঠায় আপনার প্রাথমিক নেভিগেশন। একটি ফ্লিপের পিছনের বিষয়বস্তু হল এমন সামগ্রী যা বেশিরভাগ দর্শক কখনও দেখেন না৷।

05। ক্যাসকেড ইমেজ বক্স

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

প্রতিটি কার্ডে একটি কোর্স তারিখের লিঙ্ক থাকে, যা এই লেআউটটি আসলে কিসের জন্য উপহার দেয়: যে জিনিসগুলি পুনরাবৃত্তি হয়, একটি ক্রমে, যেখানে অর্ডার গুরুত্বপূর্ণ।

এর জন্য এটি ব্যবহার করুন: স্টুডিও এবং কর্মশালার পরিষেবা, কোর্স তালিকা, প্রক্রিয়া পদক্ষেপ।

এর জন্য এটি ব্যবহার করবেন না: ভাঁজ উপরে। একজন দর্শক প্রথম যে জিনিসটি দেখেন তার প্রবেশদ্বারটি স্তব্ধ করুন এবং আপনার সাইটটি না থাকলেও ধীর বোধ করে।

06। ফিলিগ্রি ইমেজ বক্স

শান্ত এক। একটি ডাকটিকিটের আকার, হেয়ারলাইনের নিয়ম, দুটি কলাম, স্থানের চারটি আইটেম থাম্বনেইল করে এই ডিজাইনগুলির বেশিরভাগই একটির জন্য ব্যবহার করে। হ্যান্ড সেট টাইপ, পলিমার প্লেট, ডাই কাটিং, এজ পেইন্টিং: একটি ট্রেড লিস্ট, ট্রেড লিস্টের মতো সাজানো।

এটি এখানে কারণ প্রতিটি পরিষেবা বিভাগ একটি নায়ক চিকিত্সার যোগ্য নয়। কখনও কখনও আপনি এগারোটি জিনিস করেন এবং দর্শক সেগুলি স্ক্যান করতে চায়, তাদের প্রশংসা না করে।

এর জন্য এটি ব্যবহার করুন: দীর্ঘ পরিষেবা মেনু, মূল্য তালিকা, অনেক লাইন আইটেম সঙ্গে বিশেষজ্ঞ ট্রেড।

এর জন্য এটি ব্যবহার করবেন না: তিনটি শিরোনাম পরিষেবা। সেই গণনায় মনে হচ্ছে আপনি বিভাগটি শেষ করতে ভুলে গেছেন।

07। ফ্রিজ স্ট্রিপ

এখানে শুধুমাত্র একটি যে পাশে যায়। কার্ডগুলি স্ক্রিনের ডান প্রান্ত থেকে চলে যায় এবং আপনি সেগুলিকে টেনে আনুন, স্ক্রোল করুন বা উপরের ডানদিকে দুটি বৃত্তাকার তীর বোতাম ব্যবহার করুন৷ আপনি যেতে যেতে নীচে একটি পাতলা নিয়ম পূরণ হয়, তাই আপনি সবসময় জানেন কত বাকি আছে।

খারাপ স্পিনিং, ওয়ার্পিং এবং বিমিং, ডবি উইভিং, পিস ডাইং, ফিনিশিং। একটি মিলের পাঁচটি পর্যায় যে ক্রমে তারা ঘটবে। একটি গ্রিড সেই ক্রমটিকে সারিগুলিতে ভেঙে ফেলত। একটি স্ট্রিপ এটিকে এক লাইনে রাখে, যা আসলে একটি উত্পাদন ক্রম।

এর জন্য এটি ব্যবহার করুন: প্রোডাকশন সিকোয়েন্স, লম্বা তালিকা যা একটি গ্রিডকে নষ্ট করে দেবে, একটি অন্তর্নিহিত ক্রম সহ যেকোনো কিছু।

এর জন্য এটি ব্যবহার করবেন না: চারটি আইটেম। যদি সবকিছু ইতিমধ্যেই স্ক্রিনে ফিট হয়ে থাকে, তাহলে আপনি লোকেদেরকে কোনো কিছুর জন্য পাশে স্ক্রোল করতে বলছেন।

08। গায়ার ইমেজ বক্স

কার্ডগুলি যেখানেই পয়েন্টার থাকে তার দিকে কাত হয় এবং তারা সরানোর সাথে সাথে একটি চকচকে পৃষ্ঠ অতিক্রম করে। এটি এমন প্রভাব যা সবাই 2021 সালে চেষ্টা করেছিল এবং বেশিরভাগ লোকেরা অতিরিক্ত করেছে। এখানে কাত কয়েক ডিগ্রি, পনেরো নয়।

কীবোর্ড ব্যবহারকারীরা সঠিকভাবে পরিচালনা করেন, যা প্রায় কিছুই করে না। একটি কার্ডে ট্যাব করুন এবং আপনি লিফ্ট এবং চকচকে পাবেন কিন্তু কোন ঘূর্ণন নেই, কারণ একটি কীবোর্ডের দিকে ঘোরানোর জন্য কোন পয়েন্টার অবস্থান নেই এবং একটি জাল করা বাজে কথা।

এর জন্য এটি ব্যবহার করুন: ভৌত পণ্য, ফ্রেম, কারুকাজ করা পণ্য, আলো ধরার মতো পৃষ্ঠের সাথে যেকোনো কিছু।

এর জন্য এটি ব্যবহার করবেন না: টেক্সট-ভারী কার্ড। কেউ পড়ার সময় একটি অনুচ্ছেদ কাত করা প্রতিকূল।

09। ইমপালস ইমেজ বক্স

কার্ডগুলি আপনার কার্সারের কাছে যাওয়ার সাথে সাথে তার দিকে ঝুঁকে পড়ে, তারপর এটি ছেড়ে যাওয়ার সাথে সাথে ছেড়ে দিন। টানটি অর্ধেক কার্ডের বিপরীতে স্বাভাবিক করা হয় এবং আটকানো হয়, তাই একবার আপনি প্রান্তটি অতিক্রম করলে এটি স্ক্রীন জুড়ে কার্ডটি উড়ে যাওয়ার পরিবর্তে বৃদ্ধি বন্ধ করে দেয়।

প্রতিটি কার্ড একটি গরম কমলা বোতামে শেষ হয়। শিক্ষানবিস কোর্স, কোচিং, বোর্ড ভাড়া। ম্যাগনেটিজম হল একটি বুকিং-পৃষ্ঠার কৌশল, কারণ এটি বোতামটিকে চাপতে চায় বলে মনে করে এবং কার্ডটি যে কোনও জায়গায় নষ্ট হয়ে যায়।

এর জন্য এটি ব্যবহার করুন: পাঠ, ভাড়া, বুকিং, যে কোনো কিছু যেখানে প্রতিটি কার্ড একটি বোতামে শেষ হয়।

এর জন্য এটি ব্যবহার করবেন না: কোন ক্লিক লক্ষ্য ছাড়া তথ্য কার্ড। আপনি এমন একটি ইন্টারঅ্যাকশনের প্রতিশ্রুতি দিচ্ছেন যা আপনি প্রদান করবেন না।

10। কিন্টসুগি ইমেজ বক্স

ছবি টুকরো টুকরো আসে এবং পুনরায় একত্রিত হয়। দুটি ব্রেক প্যাটার্ন এটির সাথে পাঠানো হয়: তিনটি লম্বা টুকরো, একটি ফলকের মতো তার উচ্চতা জুড়ে ফাটল, এবং ছয়টি ওয়েজ একটি বিন্দু থেকে বিকিরণ করে অফ-সেন্টার, যা একটি পরিষ্কার বিরতির পরিবর্তে প্রভাব হিসাবে পড়ে।

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

এর জন্য এটি ব্যবহার করুন: কাচ, সিরামিক, পুনরুদ্ধার, মেরামত, সংরক্ষণ।

এর জন্য এটি ব্যবহার করবেন না: হাসপাতাল, বীমা, এমন কিছু যেখানে "চূর্ণবিচূর্ণ" এমন একটি অর্থ বহন করে যা আপনি চান না।

11। প্যালিসেড ইমেজ বক্স

তিনটি লম্বা প্যানেল, প্রতিটি উল্লম্ব স্ল্যাট থেকে একত্রিত হয় যা ক্রমানুসারে আসে, একটি বেড়া একবারে একটি বোর্ড তৈরি করা হচ্ছে। স্ল্যাট গণনা প্যানেলের প্রস্থের সাথে খাপ খায়, তাই একটি সংকীর্ণ কলাম একই সংখ্যার পরিবর্তে কম, প্রশস্ত বোর্ড পায় পাতলা।

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

এর জন্য এটি ব্যবহার করুন: যোগদান, স্থাপত্য, অভ্যন্তরীণ, লম্বা পণ্য শট।

এর জন্য এটি ব্যবহার করবেন না: ল্যান্ডস্কেপ ফটোগ্রাফি। পোর্ট্রেট প্যানেল ছবিটিকে একটি স্লটে ক্রপ করে এবং আপনি শটটি হারান।

12। ইমেজ বক্স প্রতিসরণ

ব্লেন্ড মোডে প্রতিটি ছবির উপরে একটি কালার ওয়াশ বসে, তাই চারটি ভিন্ন দিনে চারটি ভিন্ন আলোতে তোলা চারটি ফটোগ্রাফ এক সেটের মতো দেখতে বেরিয়ে আসে। এটি এখানে আসল কাজ, এবং এটি শোনার চেয়ে কম গ্ল্যামারাস।

অবস্থান রেকর্ডিং, ফোলি এবং প্রপস, পুনরুদ্ধার, লাইব্রেরি লাইসেন্সিং। এটি সাউন্ড ওয়ার্ক, যেখানে স্টক ফটোগ্রাফি অনিবার্য এবং ছবিগুলি কখনই মেলে না, তাই ধোয়া সিমগুলিকে লুকিয়ে রাখে।

এর জন্য এটি ব্যবহার করুন: মিশ্র-উৎস চিত্র, স্টক ফটো, এমন কিছু যেখানে আপনি পুনরায় শ্যুট করতে পারবেন না।

এর জন্য এটি ব্যবহার করবেন না: পণ্য রঙ নির্ভুলতা। একটি পেইন্ট নমুনা উপর একটি ধোয়া একটি রিটার্ন সমস্যা।

13। রাইজার ইমেজ বক্স

কার্ডগুলি নীচে থেকে উপরে উঠে ক্যাপশনের একটি ঠোঁট নীচে দেখানো হয়েছে। ঠোঁট একটি নির্দিষ্ট উচ্চতায় সেট করার পরিবর্তে এটির ভিতরের পাঠ্যের বিপরীতে পরিমাপ করা হয়, তাই একটি ক্লিপিংয়ের পরিবর্তে একটি দুই-শব্দের ক্যাপশন এবং একটি দুই-লাইন উভয়ই সঠিকভাবে বসে।

বেসপোক কমিশন, সংস্কার, ছোট ব্যাচ উত্পাদন। তিনটি আইটেম, তিনটি অন্ধকার ছবি, ন্যূনতম ক্রোম। এটি সেটের সবচেয়ে প্রচলিত নকশা। কখনও কখনও আপনি লেআউটটি কাজের পথ থেকে বেরিয়ে যেতে চান।

এর জন্য এটি ব্যবহার করুন: এজেন্সি, উৎপাদন কোম্পানি, তিন-পরিষেবা পৃষ্ঠা।

এর জন্য এটি ব্যবহার করবেন না: দীর্ঘ বর্ণনা। ঠোঁট একটি ক্যাপশন, একটি অনুচ্ছেদ নয়।

14। সলস্টিস ইমেজ বক্স

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

পাইকারি রোস্টিং, গ্রিন সোর্সিং, এসপ্রেসো ক্রমাঙ্কন। তিনটি পরিষেবা ছয়টির স্থান দেওয়া হয়েছে। এটি ব্যবহার করুন যখন আপনার কাছে কিছু বলার থাকে এবং সেগুলি প্রতিটি পুরো পর্দার মূল্যবান।

এর জন্য এটি ব্যবহার করুন: দুই থেকে চারটি প্রিমিয়াম পরিষেবা, গল্প বলার পৃষ্ঠা, কফি এবং খাবারের ব্র্যান্ড।

এর জন্য এটি ব্যবহার করবেন না: ছয় বা তার বেশি আইটেম। ছয়টি আইটেমের এই নকশাটি একটি খুব দীর্ঘ পৃষ্ঠা যার নীচে কেউ পৌঁছায় না।

15। থ্রেশহোল্ড ইমেজ বক্স

প্রতিটি ছবির উপরে দুটি দরজা বন্ধ হয়ে বসে এবং কার্ডটি দৃশ্যে প্রবেশ করার সাথে সাথে মাঝখানের অংশটি নিচে পড়ে। দরজাগুলি ছবির নিজস্ব উত্স থেকে তৈরি করা হয়েছে, তাই তারা কখনই তাদের পিছনের ছবির সাথে মেলে না।

গভীর সবুজ মাঠ, চারটি কার্ড: গ্লাসহাউস সংগ্রহ, বীজ ব্যাংক, শীতকালীন বাগান, অধ্যয়ন কোর্স। একটি বাগানে প্রবেশের বিষয়ে একটি বিভাগের জন্য দরজা ব্যবহার করা সুস্পষ্ট, এবং এই ক্ষেত্রে সুস্পষ্ট ভাল।

এর জন্য এটি ব্যবহার করুন: বাগান, ভেন্যু, খোলা, যা কিছু একজন দর্শক শারীরিকভাবে প্রবেশ করে।

এর জন্য এটি ব্যবহার করবেন না: বারো কার্ড। দরজা খোলার বারো সেট দরজা অনেক।

16। ভেলুম ইমেজ বক্স

প্রতিটি কার্ড একটি ক্লিপ থেকে খোলে যখন একটি নরম অস্পষ্টতা চিত্রটি পরিষ্কার করে, যেমন কাগজ দূরে টানা হয়। বিভাগের প্রতিটি কার্ড একটি একক প্রতিশ্রুতিতে সজ্জিত, যার অর্থ প্রতি কার্ডের পরিবর্তে পুরো সারির জন্য একটি লেআউট পাস।

কেস বাঁধাই, সংরক্ষণ, বাক্স এবং ঘের, সংস্করণ কাজ। ডেমো একটি বুকবাইন্ডারি। এটি সেটের সবচেয়ে মৃদু গতি এবং একটি ক্লায়েন্ট বেঁচে থাকার সম্ভাবনা সবচেয়ে বেশি যে বলে যে তারা অ্যানিমেশন ঘৃণা করে।

এর জন্য এটি ব্যবহার করুন: সংরক্ষণাগার, বাঁধাই, সংরক্ষণ, শান্ত এবং ব্যয়বহুল ব্র্যান্ড।

এর জন্য এটি ব্যবহার করবেন না: জরুরী প্রয়োজন যে কিছু। এই নকশা কিছুই নেই এবং ভান করা হয় না।

ডিফল্ট এলিমেন্টর ইমেজ বক্স উইজেট কি করতে পারে?

বিনামূল্যের এলিমেন্টর ইমেজ বক্স আপনাকে একটি ছবি, একটি শিরোনাম, একটি বিবরণ এবং একটি ঐচ্ছিক লিঙ্ক দেয়। স্টাইল ট্যাবে আপনি ছবির প্রস্থ, সীমানা ব্যাসার্ধ, চিত্র এবং পাঠ্যের মধ্যে ব্যবধান, প্রান্তিককরণ এবং চিত্রের অবস্থান (উপরে, বাম বা ডান) সেট করতে পারেন। হোভার প্রভাবগুলি এলিমেন্টরের গ্লোবাল সিএসএস ফিল্টার এবং রূপান্তরের মধ্যে সীমাবদ্ধ।

এটি অনেক সাইট কভার করে, এবং যদি এটি আপনার কভার করে তবে এটি ব্যবহার করুন। একটি শিরোনামের উপরে একটি ছবি রাখার জন্য আপনার একটি অ্যাডন প্রয়োজন নেই৷।

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

ইমেজ বক্স বনাম আইকন বক্স: আপনার কোনটি ব্যবহার করা উচিত?

একটি ইমেজ বক্স ব্যবহার করুন যখন ছবির বিষয়বস্তু হয়, যেমন কাজের ফটোগ্রাফ, রুম বা পণ্য। একটি আইকন বক্স ব্যবহার করুন যখন ছবিটি সাজানো হয় এবং শব্দগুলি অর্থ বহন করে। উইজেটগুলি অন্যথায় প্রায় অভিন্ন: উভয়ই একটি লিঙ্কযুক্ত ব্লকে একটি শিরোনাম এবং একটি বিবরণ সহ একটি গ্রাফিক যুক্ত করে৷।

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

একটি তৃতীয় বিকল্প মানুষ ভুলে যায়: ক ফ্লিপবক্স, যা একটি পিঠ সঙ্গে একটি ইমেজ বক্স। উপরে Bascule যে ধারণা একটি কবজা সঙ্গে পুনর্নির্মিত হয়।

আপনি কিভাবে একটি Elementor ইমেজ বক্সে একটি হোভার প্রভাব যোগ করবেন?

উইজেট নির্বাচন করুন, স্টাইল ট্যাব খুলুন, চিত্র বিভাগটি প্রসারিত করুন এবং হোভার ট্যাবে স্যুইচ করুন। আপনি অস্বচ্ছতা, CSS ফিল্টার (ব্লার, উজ্জ্বলতা, স্যাচুরেশন, কনট্রাস্ট, হিউ) এবং একটি ট্রানজিশন সময়কাল পাবেন। স্কেল বা ঘূর্ণনের মতো রূপান্তরের জন্য, অ্যাডভান্সড ট্যাবের হোভার নিয়ন্ত্রণগুলি ব্যবহার করুন৷।

যে পুরো অন্তর্নির্মিত পৃষ্ঠ। এর বাইরে যেকোন কিছু, যেমন একটি আলো যা কার্সারকে ট্র্যাক করে, একটি চৌম্বকীয় টান, বা একটি চকচকে যা কাত হয়ে অতিক্রম করে, কাস্টম CSS বা একটি উইজেট প্রয়োজন যা আচরণটি প্রেরণ করে।

যদি এটি বিশেষভাবে টেক্সট-ওভার-ইমেজ ইফেক্ট হয় যা আপনি পরে আছেন, আমরা ক্যাটালগ করেছি ইমেজ হোভার ইফেক্টের উপর 25+ এলিমেন্টর টেক্সট আলাদাভাবে, এবং যারা স্টক উইজেট সঙ্গে কাজ।

কিভাবে এই Elementor ইমেজ বক্স ডিজাইন আমদানি করতে হয়

উপরের যেকোনো ডিজাইন থেকে JSON ডাউনলোড করুন, তারপর ওয়ার্ডপ্রেসে যান মাস্টার অ্যাডঅন → উইজেট নির্মাতা → উইজেট আমদানি করুন এবং ফাইল আপলোড করুন। উইজেটটি এলিমেন্টর প্যানেলে ফেভারিটের অধীনে প্রদর্শিত হয়, বিষয়বস্তু এবং স্টাইল ট্যাবে নিজস্ব নিয়ন্ত্রণ সহ।

1. ক্লিক করুন উইজেট JSON ডাউনলোড করুন আপনি চান নকশা উপর। জিপে JSON এবং একটি পূর্বরূপ চিত্র রয়েছে।
2. এটি আনজিপ করুন। এলিমেন্টরের নিজস্ব টেমপ্লেট আমদানিকারক এই ফাইলটি পড়বে না, কারণ এটি টেমপ্লেটের পরিবর্তে উইজেট বিল্ডারে যায়।
3. যাও মাস্টার অ্যাডঅন → উইজেট নির্মাতা এবং নির্বাচন করুন উইজেট আমদানি করুন.
4. JSON আপলোড করুন। Elementor দিয়ে যেকোনো পৃষ্ঠা সম্পাদনা করুন এবং উইজেটের নামের জন্য প্যানেল অনুসন্ধান করুন।
5. স্থানধারক ছবি এবং পাঠ্য প্রতিস্থাপন করুন। কার্ডগুলি একটি রিপিটার, তাই উইজেটটি নকল করার পরিবর্তে সেখানে আইটেমগুলি যোগ করুন বা সরান৷।

সাধারণ ভুল হল ধাপ 2। এগুলি উইজেট বিল্ডার উইজেট, নয় এলিমেন্টর সেকশন টেমপ্লেট, তাই টেমপ্লেটের মাধ্যমে সেগুলি আমদানি করা → আমদানি ব্যর্থ হবে এবং ত্রুটি বার্তাটি কেন ব্যাখ্যা করে না।

এই ইমেজ বক্স মোবাইলে কাজ করে, এবং তারা অ্যাক্সেসযোগ্য?

হ্যাঁ উভয়ের জন্য, একটি ডিজাইন-স্তরের সতর্কতা সহ। এখানে প্রতিটি উইজেট সম্মান করে prefers-reduced-motion: যদি একজন দর্শক OS স্তরে সক্রিয় গতি কমিয়ে দেয়, তাহলে প্রবেশদ্বার অ্যানিমেশনগুলি চলবে না এবং কার্ডগুলি তাদের চূড়ান্ত অবস্থায় রেন্ডার হবে৷ এটি উইজেটে পরিচালনা করা হয়েছে, আপনার জন্য ছেড়ে দেওয়া হয়নি।

পয়েন্টার-চালিত ডিজাইনগুলি ভাঙার পরিবর্তে হ্রাস পায়। Gyre এর কাত এবং Impulse এর চুম্বকের জন্য একটি পয়েন্টার অবস্থান প্রয়োজন যা একটি টাচস্ক্রিন প্রদান করে না, তাই মোবাইলে কার্ডগুলি স্থির থাকে এবং সবকিছু পাঠযোগ্য এবং ট্যাপযোগ্য থাকে। Bascule ইচ্ছাকৃতভাবে একটি ব্রেকপয়েন্টের নীচে তার ফ্লিপ বন্ধ করে দেয়।

Gyre হোভার থেকে আলাদাভাবে কীবোর্ড ফোকাস পরিচালনা করে। একটি কার্ডে ট্যাব করুন এবং আপনি ঘূর্ণন ছাড়াই লিফট এবং চকচকে পাবেন। বেশিরভাগ টিল্ট ইফেক্ট এটি এড়িয়ে যায় এবং কীবোর্ড ব্যবহারকারীদের কিছুই না রেখে দেয়।

কোন এলিমেন্টর ইমেজ বক্স আপনি আসলে বাছাই করা উচিত?

আপনার আইটেম গণনা থেকে শুরু করুন, প্রভাব থেকে নয়।

• দুই থেকে চারটি আইটেম, প্রতিটি গুরুত্বপূর্ণ: অয়নকাল বা প্রান্ত।
• ঠিক তিনটি পরিষেবা: রাইজার, গায়ার বা বাসকুল।
• চারটি আইটেম: লুমেন, ক্যাসকেড, কিন্টসুগি, থ্রেশহোল্ড বা ভেলাম।
• ছয়টি সমান আইটেম: ছিদ্র।
• আট বা তার বেশি: ফ্রিজ স্ট্রিপ যদি তারা একটি ক্রম হয়, ফিলিগ্রি যদি তারা একটি তালিকা হয়।
• লম্বা, প্রতিকৃতি চিত্র: পালিসেড।
• যে ফটোগুলি একে অপরের সাথে মেলে না: প্রতিসরণ।
• প্রতিটি কার্ড একটি বোতামে শেষ হয়: আবেগ।

তারপর আপনার বিষয় বিরুদ্ধে প্রভাব পরীক্ষা করুন। একটি আইন সংস্থায় কিন্টসুগি একটি খারাপ রসিকতা। একটি বাগানের থ্রেশহোল্ড প্রায় খুব ঝরঝরে। যদি গতি কাজ সম্পর্কে কিছু না বলে, এটি ফেলে দিন এবং রাইজার ব্যবহার করুন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

এরপর কোথায় যাবেন

আপনি আরো আমদানিযোগ্য ডিজাইন চান, 20 এলিমেন্টর স্লাইডার টেমপ্লেট সংগ্রহ এই পৃষ্ঠার সবচেয়ে কাছের ভাইবোন এবং এর মধ্যে আটটি বিনামূল্যে প্লাগইনে চলে। বিশেষভাবে carousels জন্য, দেখুন এলিমেন্টর ক্যারোজেল উইজেট, বা আসলে কি বিনামূল্যে যদি লাইসেন্সের প্রশ্নটি আপনার যত্নশীল হয়।

ব্লগ আপনার তালিকার পরবর্তী হলে, আছে 15 এলিমেন্টর ব্লগ টেমপ্লেট পাশাপাশি: পৃষ্ঠার জন্য 10টি লেআউট যা আপনার পোস্টগুলি তালিকাভুক্ত করে এবং 5টি একক পোস্টের জন্য, প্রতিটিতে একটি লাইভ ডেমো এবং একটি JSON ডাউনলোড রয়েছে৷।

সম্পর্কিত কার্ড নিদর্শন জন্য: ইমেজ হটস্পট একটি একক বড় ছবি টীকা করার জন্য, দলের সদস্য বিভাগ পরিষেবার চেয়ে মানুষের জন্য, এবং 3D ফ্লিপবক্স অ্যানিমেশন যদি Bascule আপনার নজর কেড়ে। লাইসেন্সের বিবরণ রয়েছে মূল্য পৃষ্ঠা, এবং সম্পূর্ণ উইজেট তালিকা আছে 100+ সেরা এলিমেন্টর অ্যাডঅন.