এলিমেন্টর বিভাগ এবং কলামগুলি কীভাবে সারিবদ্ধ করবেন

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

আমাদের সারিবদ্ধ হওয়ার দরকার কেন?

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

ভাল সারিবদ্ধকরণের সাহায্যে আপনি ওয়েবসাইটটিকে আরও ঝরঝরে এবং উত্কৃষ্ট দেখিয়ে দিতে পারেন - যাতে এটি বিশৃঙ্খলা না দেখায়। প্রান্তিককরণ বিকল্পের সাহায্যে আপনি একই কলামে একে অপরের পাশে বিভিন্ন আকারের বিভিন্ন উইজেটগুলি সামঞ্জস্য করতে পারেন।

প্রতিক্রিয়াশীল ডিজাইনের জন্য কীভাবে কলাম বা বিভাগগুলি কাজ করে?

Elementor 2.5 আপনাকে আপনার ডিজাইন এবং বিষয়বস্তু কাস্টম অবস্থান করতে সক্ষম করে। নতুন কাস্টম পজিশনিং বৈশিষ্ট্যের সাহায্যে, আপনি উইজেটগুলিকে যেকোনো স্থানে সরাতে পারেন। কিন্তু, আপনি সত্যিই এটি একটি নির্দিষ্ট বিভাগের বাইরে করতে পারবেন না। এই উইজেটগুলি তাদের ভিতরে থাকা কলামের সাথে আপেক্ষিক। এটি ডিজাইনের প্রতিক্রিয়াশীলতায় সমস্যা সৃষ্টি করতে পারে।

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

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

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

যদিও, আপনি কোনও লুকানো সেটিং দিয়ে মোবাইলের ভিউটি স্মার্টভাবে টুইঙ্ক করতে পারেন, তবে সংখ্যাগরিষ্ঠ লোকেরা এটি খুঁজে পাওয়ার কোনও গ্যারান্টি নেই। সুতরাং, ব্যবহারকারীদের হতাশ কেন? নকশা প্রতিক্রিয়াশীল এবং অভিযোজনযোগ্য তৈরি করা সঠিক সমাধান। যাতে এটি কোথাও ক্রাশ না হয়।

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

এলিমেন্টর বিভাগ এবং কলামগুলি কীভাবে সারিবদ্ধ করবেন?

প্রতিটি বিভাগ / কলামের জন্য, বিন্যাস বিভাগে অবতরণ করুন এবং আপনার প্রয়োজনীয়তা অনুসারে নিম্নলিখিত প্রান্তিককরণ বিকল্পগুলি সেট করুন:

  • উল্লম্ব সারিবদ্ধ: আপনি নিম্নলিখিত থেকে উইজেটগুলির জন্য সেটিংস চয়ন করতে পারেন। তবে একটি জিনিস যা আপনার মনে রাখতে হবে তা হ'ল একটি কলামে থাকা সামগ্রীটি প্রথম তিনটি কলামের উল্লম্ব বিকল্পগুলি যেমন শীর্ষ, মধ্য এবং নীচের সাথে একত্রিত করা যায় না।
  • শীর্ষ
  • মধ্যম
  • নীচে

যে বিষয়টি জন্য, আছে * তিনটি নতুন অপশন যার ফলে এটি সত্যিই সুবিধাজনক আপনার পছন্দ অনুসারে অনুযায়ী বিষয়বস্তু সারিবদ্ধ ভুলবেন না।

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

প্রতিক্রিয়াশীল প্রস্থ সমস্যার সমাধানের জন্য ওভারফ্লো লুকানো ব্যবহার করুন

মোবাইলে যখন কোনও ওয়েবসাইটের উপস্থিতির কথা আসে তখন আপনার উচ্চ সম্ভাবনা থাকে যে কাস্টম পজিশনিং সহ একটি উইজেট কোনও কলামের প্রস্থকে উপচে ফেলেছে an  

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

লেআউট সেটিংস > ওভারফ্লো বিকল্পটিকে গোপনে

এটি করে, অতিক্রমকারী অঞ্চলটি কেটে ফেলা হবে, এবং অনুভূমিকভাবে স্ক্রোল করার প্রয়োজন হবে না

পজিশনিংয়ের যত্ন নেওয়া

আপনাকে কলামগুলির অবস্থানের যত্ন নিতে হবে। আপনি Elementor 2.5 এর সাথে কাস্টম পজিশনিং সেট করতে পারেন — পরম এবং স্থির।

পরম পোস্টিংটি আপনার অভ্যন্তরের যে বিভাগ বা কলামের সাথে সম্পর্কিত সেটির অবস্থান সম্পর্কিত অবস্থান। সুতরাং, আপনি যদি কোনও উপাদান বা বিভাগে নিখুঁত অবস্থান ব্যবহার করেন তবে সেই বিভাগটি দর্শকের উইন্ডোতে সরবে না।

স্থির অবস্থানটি পরম থেকে পৃথক কারণ এটি বিভাগ / উপাদানটিকে দর্শকের দৃষ্টিকোণে স্থির থাকতে দেয়। সুতরাং, ব্যবহারকারী যদি পৃষ্ঠাটির মাধ্যমে স্ক্রল করেন তবে উপাদানটি সেখানেই থাকবে।

আপেক্ষিক ইউনিট

আপনি যখন নিজের ওয়েবপৃষ্ঠাটি ডিজাইন করেন, আপনি দেখতে পাবেন যে একাধিক উপায়ে আপনি উপাদানগুলিকে অবস্থান করতে পারেন। পরম অবস্থানের জন্য, আপেক্ষিক ইউনিটগুলি ব্যবহার করা ভাল ধারণা কারণ এটি বিভিন্ন স্ক্রিনের আকারের ক্ষেত্রে প্রতিক্রিয়াশীল নকশাটিকে আরও কার্যকরী করে তুলবে make

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

জেড-ইনডেক্স ব্যবহার করে প্রতিটি উপাদানগুলির গভীরতা নিয়ন্ত্রণ করুন

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

সদৃশ কার্যকারিতা সম্পর্কে কৌশল

আপনি যদি কাস্টম পজিশনিং সহ কোনও উপাদানটির নকল করতে ডান-ক্লিক ব্যবহার করছেন, এটি দেখতে দেখতে ডান-ক্লিকটি কাজ করে নি।

কিন্তু, দেখুন। এটা সত্যি না. সদৃশ কার্যকারিতা পুরোপুরি সূক্ষ্মভাবে কাজ করেছে এবং উপাদানটির নকল করেছে। এটি কেবলমাত্র যেহেতু প্রতিটি উপাদানটির যথাযথ একই কাস্টম অবস্থান রয়েছে তাই নকল উপাদানটি অন্য উপাদানটির শীর্ষে একেবারে স্ট্যাক করে (কোনও ধারণা তৈরি করে যে কোনও সদৃশ তৈরি করা হয়নি))।

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

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

অফসেটস

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

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

স্বর্ণসূত্র

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

উপসংহার

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

"কীভাবে এলিমেন্টর বিভাগ এবং কলামগুলি সারিবদ্ধ করা যায়" সম্পর্কে 24টি চিন্তাভাবনা

  1. আপনি এই বিকল্পগুলি কোথায় পাবেন? তাদের অস্তিত্ব নেই। এটি কি প্রিমিয়াম এলিমেন্টারের জন্য? যদি তা হয় তবে আপনার এটিকে আপনার নিবন্ধে উল্লেখ করা উচিত যাতে লোকেরা এর মাধ্যমে পড়ার সময় নষ্ট না করে।

  2. হোল,

    এলিমেন্টর প্রো কনফার্ম করা হয়েছে।
    Quiero poner dos ব্যানার, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. প্যারা ইলো সে ক্রিয়েডো: – una seccion para cada banner.
    – un encabezado con una frase, a la cual he puesto de fondo una imagen.

    Aনা দে ইলা দেবেরিয়া ইর পেগদা আ লা ডেরেচা দে লা পান্টাল্লা (মার্গেন ইজুকুইডা 0 কল্পনা)। আলগুন ফলসো? মুচস গ্রাসিয়াস!

  3. বুওঙ্গিওরনো, টুট্টো চিয়ারো, গ্র্যাজি!
    Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere una sezione in due colonne.
    quella di sinistra metterei la foto di una cover, e nella colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro), equidistanti e centrati rispetto alla colonna di sinistra, che rimandano ai trequali di sinistra di sinistra, che rimandano ai trequali di sinistra di sinistra vorrei mettere tre pulsanti ফটোতে কভার করুন। Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    Sono aperta a tutti i suggerimenti
    Grazie

  4. Yo tengo un problemma con la alineación que no logro solventar। El contenido se queda a un lado, la imagen, titulo y texto। No logro centrarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar। হা সিদো আল এডিটর প্যারা তামানো মুভিল, সে হা ক্যুয়েডাডো আসি অ আন লাডো টোডো কুয়ান্দো কাম্বিও এ এস্ক্রিটরিও! Alguien sabe que puede ser? তিনি probado todo lo que pone en el artículo y parece que nada funciona

    1. হ্যালো, আমি মনে করি আপনাকে বিভাগগুলিতে আপনার সমস্ত সারিবদ্ধতা পরীক্ষা করে শুরু করতে হবে তারপর কলাম তারপর কন্টেন্ট ব্লক। এটাও সম্ভব যে আপনার থিমের CSS এই সারিবদ্ধতায় ভূমিকা রাখতে আসে।

  5. বন্ধুত্ব!
    je m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
    sur le brouillon elles paraissent toutes parfaitement alignées, mais lorsque je prévisualise les modifs, les colonnes se retrouvent toutes imbriquées et de différentes tailles (largeurs et hauteur) sur le côté gauche de. je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. কমেন্ট ফেয়ারে?

  6. হ্যালো,

    ich আছে আমি ফুটার verschiedene উইজেট. das oberste ist immer eine শিরোনাম, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das in 2 section machen. wo kann ich nun den abstand der wordpress sections zueinander verringern? es ist zwischen der headline und dem text einfach zu viel platz.

    danke für eure hilfe

    1. হাই, পাঠ্যের মধ্যে স্থান সংযত করার জন্য বেশ কয়েকটি বিকল্প রয়েছে: এটি বিভাগ, কলাম বা উইজেট মার্জিন বা প্যাডিং হতে পারে বা এটি লাইনের উচ্চতার মতো ফন্ট বিকল্প হতে পারে।

    1. ত্রিস্তান

      হাই, কক্ষগুলিকে একত্রিত করা সম্ভব নয়, আপনাকে একটি লাইন তৈরি করতে হবে এবং এতে আপনার সামগ্রী কপি করতে হবে৷

  7. Bonjour Tristan,
    Avant tout, merci pour le temps que vous consacrez à nous (qui nous arrachons les cheveux … sur des coquilles qui … 🙂 ) Voilà
    , je sais qu'il est de superposer des éléments horizontaux / Ellements suruxement vertica.
    Mais, অসম্ভব ডি রেট্রোভার লা ম্যানিপ'। ইত্যাদি... je m'arrache les cheveux du coup. Mon besoin (ঢালা correspondre à notre maquette): Une section globale dans laquelle mon fond est une vidéo en continu, et par dessus, j'ai trois lignes de textes qui viennent se superposer (dont une qui aura du code pour une lecture চালিয়ে যান।
    আমি আমার পোজ souci l'alignment qui. এক আইডি…?
    Je désespère … Merciiiii

    1. হাই, আপনাকে যা করতে হবে তার জন্য আমি প্রধান এলিমেন্টর বিভাগে একটি ভিডিও ব্যাকগ্রাউন্ড ব্যবহার করব, তারপরে কলাম এবং পাঠ্য সহ একটি অভ্যন্তরীণ বিভাগ যুক্ত করুন

একটি মন্তব্য ত্যাগ করুন

আপনার ইমেইল ঠিকানা প্রচার করা হবে না. প্রয়োজনীয় ক্ষেত্রগুলি চিহ্নিত করা হয়েছে *