এক নায়কের ছবি এক কথা বলে। একটি হিরো ব্যাকগ্রাউন্ড যা আপনার সেরা তিন বা চারটি ফটোর মাধ্যমে ঘোরে, লেআউটে একটি উইজেট যোগ না করেই যথেষ্ট বেশি বলে। দ্য ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন একটি বিভাগের স্ট্যাটিক ব্যাকগ্রাউন্ডকে একটি ইমেজ স্লাইডশো দিয়ে প্রতিস্থাপন করে: ফটোগুলি বাছাই করুন, একটি ট্রানজিশন বাছাই করুন এবং বিষয়বস্তু উপরে বসে যখন ব্যাকড্রপ সাইকেল এর পিছনে থাকে৷।
এখানে ডেমো থেকে সমাপ্ত নায়ক, একটি ঘূর্ণায়মান রূপান্তর সহ এর তিনটি ফটোর মাধ্যমে সাইকেল চালাচ্ছেন:
ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন কি করে #
একবার সক্রিয় হয়ে গেলে, কন্টেইনার, বিভাগ এবং কলামগুলি একটি পায় ব্যাকগ্রাউন্ড স্লাইডার তাদের মধ্যে প্যানেল শৈলী ট্যাব, নিয়মিত পটভূমি বিভাগের পাশে। এটি ফ্লিপ করুন, মিডিয়া লাইব্রেরি থেকে ছবি যোগ করুন এবং বিভাগের পটভূমি একটি নির্দিষ্ট স্লাইডশোতে পরিণত হয়। এটি সম্পর্কে সবকিছু কনফিগারযোগ্য:
- ছবি যোগ করুন: একটি গ্যালারি ক্ষেত্র যা স্লাইডগুলিকে ধরে রাখে, সেগুলিকে স্ট্যান্ডার্ড ওয়ার্ডপ্রেস গ্যালারি সম্পাদকে পুনরায় সাজান বা সরান৷।
- রূপান্তর: স্লাইড প্লাস র্যান্ডম এর মধ্যে 24টি প্রভাব: ফেইড, স্লাইড ইন এবং আউট, জুম ইন এবং আউট, ঘূর্ণায়মান, বার্ন, ব্লার এবং ফ্ল্যাশ, প্রতিটি দ্বিতীয় ভেরিয়েন্ট সহ।
- অ্যানিমেশন: কেন বার্নস গতি প্রতিটি স্লাইডে, নয়টি দিকে, এলোমেলো, বা কিছুই নয়।
- কাস্টম ওভারলে: স্লাইডগুলির উপর একটি রঙ, গ্রেডিয়েন্ট বা চিত্র স্তর, এছাড়াও নয়টি প্রিসেট ওভারলে শৈলী যা পাঠ্য পাঠযোগ্য রাখে।
- বিলম্ব এবং টাইমার: প্রতিটি স্লাইড কতক্ষণ ধরে থাকে (ডিফল্টরূপে 5000ms), এবং একটি পাতলা অগ্রগতি বার প্রতিটি স্লাইডে বাকি সময় দেখায় কিনা।
- র্যান্ডম ডিসপ্লে, ইমেজ রেজোলিউশন, কভার: পৃষ্ঠাটি তৈরি হয়ে গেলে অর্ডারটি এলোমেলো করুন, লোড করা আকার চয়ন করুন এবং চিত্রগুলি কীভাবে বিভাগটি পূরণ করে তা নিয়ন্ত্রণ করুন৷।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- ব্যাকগ্রাউন্ড স্লাইডার একটি বিনামূল্যের এক্সটেনশন, তাই কোনো প্রো লাইসেন্সের প্রয়োজন নেই।
- পূর্ণ-প্রস্থ প্রদর্শনের জন্য দুই বা ততোধিক ছবি, আদর্শভাবে একই মাত্রা।
ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন কিভাবে সক্ষম করবেন #
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। ব্যাকগ্রাউন্ড স্লাইডার বসে আছে অ্যানিমেশন উইজেট গ্রুপ, পাশে অ্যানিমেটেড গ্রেডিয়েন্ট বিজি (প্রো)। এর টগল ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।
প্যানেল খুলুন এবং ছবি যোগ করুন #
এলিমেন্টর এডিটরে হিরো কন্টেইনার নির্বাচন করুন এবং খুলুন শৈলী ট্যাব। প্রসারিত করুন ব্যাকগ্রাউন্ড স্লাইডার বেগুনি MA ব্যাজ এবং সুইচ সহ বিভাগ ব্যাকগ্রাউন্ড স্লাইডার সক্ষম করুন হ্যাঁ। সম্পূর্ণ সেটিংস তালিকা প্রদর্শিত হবে, একটি সহ আবেদন করা প্রিভিউতে পরিবর্তনগুলি পুশ করার জন্য উপরের বোতামটি।
ক্লিক করুন ছবি যোগ করুন এবং মিডিয়া লাইব্রেরি থেকে স্লাইড বাছাই করুন। ডেমো তিনটি পরিষেবা ফটো ব্যবহার করে। গ্যালারি সম্পাদক অর্ডারটি পরিচালনা করে: পুনর্বিন্যাস করতে টেনে আনুন, একটি ড্রপ করতে X টিপুন বা আরও কিছুর জন্য গ্যালারিতে যোগ করুন৷।
রূপান্তর এবং গতি চয়ন করুন #
দ্য উত্তরণ ড্রপডাউন সিদ্ধান্ত নেয় কিভাবে একটি স্লাইড পরের দিকে চলে যায়। তালিকাটি দীর্ঘ হয়: ফেইড, স্লাইড লেফট, রাইট, আপ এবং ডাউন, জুম ইন এবং আউট, বাম এবং ডানে ঘূর্ণায়মান, বার্ন, ব্লার এবং ফ্ল্যাশ, প্রতিটি দুটি ভেরিয়েন্টে। ডেমো অবতরণ বাম দিকে ঘূর্ণায়মান.
দ্য অ্যানিমেশন সেটিং প্রতিটি স্লাইডের ভিতরে কেন বার্নস মুভমেন্ট যোগ করে, একটি ধীর প্যান এবং জুম যা ট্রানজিশনের মধ্যে ব্যাকগ্রাউন্ডকে বাঁচিয়ে রাখে। একটি দিক চয়ন করুন বা এটি সেট করুন এলোমেলো এবং প্রতিটি স্লাইড তার নিজস্ব উপায় প্রবাহিত করা যাক।
ওভারলে, বিলম্ব এবং টাইমার #
একটি ব্যস্ত ছবির সাদা টেক্সট সাহায্য প্রয়োজন। পালা কাস্টম ওভারলে স্লাইডগুলির উপর একটি রঙ, গ্রেডিয়েন্ট বা চিত্র দেখাতে এবং স্থাপন করতে বা নয়টি প্রিসেটের মধ্যে একটি বেছে নিন ওভারলে পঠনযোগ্যতার জন্য নির্মিত নিদর্শন সহ শৈলী। তার নিচে, বিলম্ব প্রতিটি স্লাইড কত মিলিসেকেন্ড ধরে রাখে তা সেট করে (ডেমোতে 5000), টাইমার প্রতিটি স্লাইডের জন্য একটি অগ্রগতি বার দেখায় (স্লাইডগুলি যে কোনও উপায়ে ঘোরে), এবং আবরণ ইমেজ বিভাগ প্রান্ত থেকে প্রান্ত পূরণ করে তোলে।
পৃষ্ঠায় ফলাফল #
প্রকাশ করুন এবং হিরো সাইকেলগুলি নিজে থেকে, ঠিক যেমন এই পৃষ্ঠার শীর্ষে GIF-তে রয়েছে: প্রতিটি ফটো বিলম্বের জন্য ধরে রাখে, পরবর্তীতে ঘূর্ণায়মান হয় এবং শিরোনাম এবং বোতামগুলি উপরে স্থির থাকে। দর্শকরা একটি পৃথক স্লাইডার উইজেট ছাড়াই একটি চলমান ব্যাকড্রপ পান এবং নীচের অংশের কাঠামো কখনই পরিবর্তিত হয় না।
যেখানে একটি ব্যাকগ্রাউন্ড স্লাইডার ভালো কাজ করে #
- হিরো বিভাগ। একটিতে প্রথম ছাপ বাজি ধরার পরিবর্তে তিনটি শক্তিশালী ফটো ঘোরান৷।
- সেবা ব্যবসা। একটি শিরোনামের পিছনে কর্মক্ষেত্রে দল দেখান।
- রেস্তোরাঁ এবং ভেন্যু। রিজার্ভেশন বোতামের পিছনে খাবার এবং অভ্যন্তরীণ সাইকেল চালানো।
- পোর্টফোলিও। ভূমিকা বিভাগের পটভূমি হিসাবে সাম্প্রতিক প্রকল্প।
- ল্যান্ডিং পেজ। একটি নির্দিষ্ট কল টু অ্যাকশনের পিছনে ঘোরানো পণ্যের কোণ।
ভিডিও টিউটোরিয়াল #
প্রকাশিত পৃষ্ঠায় সাইক্লিং হিরো পর্যন্ত এক্সটেনশন সক্ষম করা থেকে শুরু করে শেষ থেকে শেষ পর্যন্ত স্লাইডারটি দেখুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে একটি এলিমেন্টর বিভাগে একটি ব্যাকগ্রাউন্ড স্লাইডশো যোগ করব?
মাস্টার অ্যাডঅন এক্সটেনশন ট্যাবে ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন সক্ষম করুন, বিভাগটি নির্বাচন করুন এবং স্টাইল ট্যাবে ব্যাকগ্রাউন্ড স্লাইডার খুলুন। এটি চালু করুন, দুই বা ততোধিক ছবি যোগ করুন, একটি রূপান্তর চয়ন করুন এবং বিভাগটি স্বয়ংক্রিয়ভাবে পটভূমি চক্র।
কি রূপান্তর প্রভাব অন্তর্ভুক্ত করা হয়?
চব্বিশ প্লাস র্যান্ডম: ফেইড, স্লাইড লেফট, রাইট, আপ এবং ডাউন, জুম ইন এবং আউট, বাম এবং ডানে ঘূর্ণায়মান, বার্ন, ব্লার এবং ফ্ল্যাশ, প্রতিটি দ্বিতীয় ভেরিয়েন্ট সহ। একটি পৃথক অ্যানিমেশন সেটিং প্রতিটি স্লাইডের ভিতরে কেন বার্নস প্যান-এন্ড-জুম মোশন যোগ করে।
আমি কি ফটোতে পাঠ্য পাঠযোগ্য রাখতে পারি?
হ্যাঁ। স্লাইডের উপরে একটি রঙ, গ্রেডিয়েন্ট বা চিত্র স্তরের জন্য কাস্টম ওভারলে চালু করুন বা নয়টি প্রিসেট ওভারলে শৈলীর মধ্যে একটি বেছে নিন। ডেমো একটি গাঢ় ওভারলে ব্যবহার করে যাতে সাদা শিরোনাম এবং বোতাম প্রতিটি স্লাইডে বৈসাদৃশ্য ধরে রাখে।
আমি কিভাবে স্লাইড গতি নিয়ন্ত্রণ করব?
বিলম্ব ক্ষেত্র সেট করে যে প্রতিটি স্লাইড কত মিলিসেকেন্ড দৃশ্যমান থাকে, ডিফল্টরূপে 5000। টাইমার শুধুমাত্র একটি অগ্রগতি বার দেখায়, কারণ স্লাইডগুলি তাদের নিজস্বভাবে ঘোরে। র্যান্ডম ডিসপ্লে প্রতিবার পৃষ্ঠা তৈরি করার সময় স্লাইডের ক্রম পরিবর্তন করে, তাই ক্যাশে করা পৃষ্ঠায় ক্যাশে সাফ হলেই অর্ডার পরিবর্তন হয়।
ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন কি বিনামূল্যে?
হ্যাঁ। এক্সটেনশন ট্যাবের অ্যানিমেশন উইজেট গ্রুপে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন-এর বিনামূল্যের সংস্করণ সহ ব্যাকগ্রাউন্ড স্লাইডার পাঠানো হয়। প্রো প্ল্যানগুলি কী যোগ করে তা মূল্যের পৃষ্ঠাটি কভার করে।
Elementor এর নিজস্ব ব্যাকগ্রাউন্ড স্লাইডশো আছে?
হ্যাঁ। ফ্রি এলিমেন্টরের একটি স্লাইডশো ব্যাকগ্রাউন্ড টাইপ রয়েছে যার পাঁচটি ট্রানজিশন রয়েছে, একটি কেন বার্নস জুম ইন বা আউট, ল্যাজিলোড এবং প্রতি-ডিভাইস পজিশনিং। ব্যাকগ্রাউন্ড স্লাইডার 24টি ট্রানজিশন যোগ করে, কেন বার্নস নয়টি দিকে, প্যাটার্ন ওভারলে, র্যান্ডম অর্ডার এবং একটি টাইমার বার। পণ্য পৃষ্ঠায় একটি সম্পূর্ণ তুলনা টেবিল আছে।
মোড়ানো #
দ্য ব্যাকগ্রাউন্ড স্লাইডার এক্সটেনশন একটি টগল এবং মুষ্টিমেয় পছন্দ সহ একটি বিভাগের পটভূমিকে একটি স্লাইডশোতে পরিণত করে: ছবি, রূপান্তর, ওভারলে, বিলম্ব৷ বিষয়বস্তু রাখা থাকে, ব্যাকড্রপ কাজ করে এবং কোনো অতিরিক্ত স্লাইডার উইজেট লেআউটে প্রবেশ করে না। ফটো ছাড়া গতির জন্য, অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এক্সটেনশন (প্রো) পরিবর্তে রঙ দিয়ে একই বিভাগ কভার করে, এবং এর সম্পূর্ণ সেট মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন এক পৃষ্ঠা দূরে।
