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

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

কেন আমরা সারিবদ্ধ করা প্রয়োজন?

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

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

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

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

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

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

সুতরাং তিনটি কলাম পাশাপাশি থাকার পরিবর্তে, আপনি তিনটি কলাম একে অপরের উপর স্ট্যাক করা অনুভব করতে পারেন। উপাদানটি আর মাঝের কলামে প্রদর্শিত হবে না যেমনটি ডেস্কটপে দেখায়।

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

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

কিভাবে Elementor বিভাগ এবং কলাম সারিবদ্ধ?

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

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

* রয়েছে যা আপনার পছন্দ অনুযায়ী বিষয়বস্তু সারিবদ্ধ করা সত্যিই সুবিধাজনক করে তোলে।

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

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

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

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

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

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

অবস্থানের যত্ন নেওয়া

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

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

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

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

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

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

Z-সূচক ব্যবহার করে প্রতিটি উপাদানের গভীরতা নিয়ন্ত্রণ করুন

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

ডুপ্লিকেট কার্যকারিতা সম্পর্কে কৌতুক

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

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

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

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

অফসেট

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

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

সুবর্ণ নিয়ম

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

উপসংহার

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

আহমেদ

মন্তব্য দেখুন

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

  • হোলা,

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

    Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 imagino)। আলগুন কনসেজো? অনেক ধন্যবাদ!

  • হাই, এই পোস্টের প্রথম অংশে বর্ণিত কলামের উল্লম্ব সারিবদ্ধ সেটিংটি আমি প্রথমেই দেখব।
    চিয়ার্স,

  • বুওঙ্গিওরনো, টুট্টো চিয়ারো, গ্র্যাজি! 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

  • স্কুসেট, হো অ্যাপেনা ক্যাপিটো আস ফেয়ার (ল'হো ক্যাপিটো প্রতি ত্রুটি)। Scusate il disturbo e grazie lo stesso

    • হাই, ঠিক আছে দুর্দান্ত, নিশ্চিত যে এটি সম্ভব, আপনি এমনকি প্রতিটি কলামের বিষয়বস্তুকে উল্লম্বভাবে কেন্দ্র করতে পারেন৷

  • Yo tengo un problema 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. Ha sido al editar para tamaño móvil, se ha quedado así a un lado todo cuando cambio a escritorio! Alguien sabe que puede ser? He probado todo lo que pone en el artículo y parece que nada funciona 🤗

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

  • বন্ধুত্ব!
    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. কমেন্ট ফেয়ারে?

  • Hola, tengo instalado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación horizontal y alineación vertical. আপনি একটি পরিপূরক অতিরিক্ত ইনস্টল করতে পারেন?
    গ্রাসিয়াস

  • হ্যালো,

    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

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

সাম্প্রতিক পোস্ট

Elementor এর সাথে হেডার এবং ফুটার কিভাবে ব্যবহার করবেন

একটি ওয়েবসাইটের শিরোনাম এবং ফুটার অপরিহার্য উপাদান। বেশিরভাগ ক্ষেত্রে, হেডার নেভিগেশন প্রদান করে...

6 জানুয়ারী, 2022

ওয়ার্ডপ্রেস থিম তুলনা: Astra বনাম OceanWP

বাজারে সবচেয়ে জনপ্রিয় দুটি ওয়ার্ডপ্রেস থিম হল Astra এবং OceanWP। পেশাদার…

জানুয়ারী 2, 2022

ওয়ার্ডপ্রেস সংবাদ থিম তুলনা: সংবাদপত্র বনাম Astra

একটি চমৎকার নিউজ ওয়েবসাইট তৈরি করার জন্য আপনাকে ওয়েব ডিজাইনার হতে হবে না। আমরা…

25 অক্টোবর, 2021

নিউজপেপার থিম সহ একটি সংবাদ-সম্পর্কিত ওয়েবসাইট তৈরি করুন

নিউজপেপার থিম হল ট্যাগডিভ দ্বারা ডিজাইন করা সবচেয়ে উল্লেখযোগ্য ওয়ার্ডপ্রেস থিমগুলির মধ্যে একটি, একটি…

18 অক্টোবর, 2021

Avada WooCommerce নির্মাতার সাথে কীভাবে একটি ইকমার্স তৈরি করবেন

যখন একটি অনলাইন স্টোর সেট আপ করার কথা আসে, তখন WooCommerce হল গো-টু plugin ৷ এটা…

4 অক্টোবর, 2021

এলিমেন্টরের সাথে কীভাবে স্টিকি হেডার এবং স্ক্রলিং প্রভাবগুলি ব্যবহার করবেন

একটি শিরোনাম হল সাধারণত প্রথম জিনিস যা একজন ব্যক্তি দেখেন যখন তারা আপনার ওয়েবসাইট পরিদর্শন করেন,…

21 সেপ্টেম্বর, 2021