Hello world!

by

Welcome to WordPress. This is your first post. Edit or delete it, then start writing! 

Conversation with Gemini

 
 
 
 
 
 
 

Apnar dewa CSS code-e already Footer Menu-r design kora ache (CSS er Section 8 e dhobongsho kora ache). Tai apni jokhon ekhon menu add korben, eta auto-matically apnar design anujayi “Matchwire” newspaper style-e set hoye jabe.

GeneratePress-e Footer e menu add korar jonno apni duti sohoj poddhoti bebohar korte paren:

Poddhoti 1: Footer Bar Menu Location (Standard Way)

Jodi apni ekdom niche copyright text er pashe ba upore ekta shari-te (horizontal row) menu dekhate chan, tahole ei poddhoti ti follow korun:

  1. WordPress admin panel theke Appearance → Menus e jan.

  2. Ekta notun menu toiri korun (jemon nam dite paren “Footer Menu”) othoba existing kono menu select korun.

  3. Bam pashe theke apnar dorkari Pages, Categories ba Custom Links gulo menu-te add korun.

  4. Ebar ekdom niche “Menu Settings” section-e asun.

  5. Display location er pashe thaka “Footer Menu” option-e tick mark (✓) din.

  6. Shesh-e Save Menu button-e click korun.

(Apnar CSS er .site-footer nav.menu code ti ei menu-ke sundor bhabe majhkhan borabor flex kore sajiye nibe).

Poddhoti 2: Footer Widget-er maddhome (Column style)

Jodi apni footer er moddhe alada alada column kore menu add korte chan (jemon: “About”, “Quick Links”), tahole ei poddhoti ti follow korun:

  1. Prothome Appearance → Menus theke apnar menu ti toiri kore Save korun (ekhane kono Display location-e tick dewar dorkar nei).

  2. Ebar Appearance → Widgets e jan.

  3. Ekhane Footer Widget 1, Footer Widget 2 ba Footer Widget 3 apnar icchamoto jekono ekta block open korun.

  4. + icon-e click kore ekta notun block add korun ebang “Navigation Menu” kotha ti likhe search kore widget ti select korun.

  5. Ekta Title din (jemon: “Quick Links”) ebang dropdown theke apnar toiri kora “Footer Menu” ti select korun.

  6. Upore dan pashe Update button-e click kore save korun.

Ei duitar je kono ekta poddhoti follow korlei apnar add kora Custom CSS anujayi ekdam perfect color ebang spacing shoho Footer Menu apnar website-e show korbe!

 
 
 
 
 

Bangla te bolo akdom bangla horope

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখতে পাচ্ছি। এখানে দেখা যাচ্ছে “Your theme supports one menu” এবং শুধুমাত্র “Primary Menu” লোকেশনটি আছে।

এর মানে হলো, আপনার বর্তমান GeneratePress থিমে (সম্ভবত ফ্রি ভার্সন হওয়ায় বা প্রিমিয়াম মডিউল অন না থাকায়) ডিফল্টভাবে “Footer Menu” লোকেশনটি নেই।

তাই আপনাকে আগের বলা দ্বিতীয় পদ্ধতিটি (উইজেট ব্যবহার করে) অনুসরণ করতে হবে। নিচে ধাপে ধাপে নিয়মটি দেওয়া হলো:

উইজেট (Widgets) এর মাধ্যমে ফুটারে মেনু যুক্ত করার নিয়ম:

১. প্রথমে ওয়ার্ডপ্রেস ড্যাশবোর্ডের বাম পাশ থেকে Appearance ➔ Widgets-এ যান। ২. সেখানে Footer Bar অথবা Footer Widget 1 নামের একটি সেকশন দেখতে পাবেন, সেটিতে ক্লিক করে ওপেন করুন। ৩. এরপর + (প্লাস) আইকনে ক্লিক করে Navigation Menu লিখে সার্চ করুন এবং উইজেট ব্লকটি যুক্ত করুন। ৪. একটি টাইটেল দিন (যেমন: “Important Links” বা ফাঁকাও রাখতে পারেন) এবং ড্রপডাউন অপশন থেকে আপনার তৈরি করা “Footer Menu” টি সিলেক্ট করে দিন। ৫. সবশেষে, উপরে ডানদিক থেকে নীল রঙের Update বাটনে ক্লিক করে সেভ করুন।

যেহেতু আপনার দেওয়া CSS কোডে ফুটার উইজেটের মেনুর ডিজাইন আগে থেকেই খুব সুন্দরভাবে করা আছে, তাই এই পদ্ধতিতে মেনু যুক্ত করলেই সেটি আপনার ওয়েবসাইটের ডিজাইনের সাথে একদম পারফেক্টলি মানিয়ে যাবে!

 
 
 
 
 

Footer bar ar modde add korce But Hoy nai To

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখেছি। আপনি একদম ঠিক জায়গাতেই (Footer Bar-এ) উইজেটটি অ্যাড করেছেন! এরপরও যদি ওয়েবসাইটে মেনুটি না দেখায়, তবে চিন্তার কিছু নেই। সাধারণত এর পেছনে দুটি সাধারণ কারণ থাকে।

নিচের বিষয়গুলো একটু চেক করে দেখুন:

১. কাস্টমাইজার থেকে ফুটার বার চালু করা

অনেক সময় GeneratePress থিমে ফুটার বার ডিফল্টভাবে লুকানো (hidden) থাকে, যার কারণে উইজেট অ্যাড করলেও সেটি ওয়েবসাইটে দেখা যায় না।

  • Appearance ➔ Customize-এ যান।

  • এরপর Layout ➔ Footer অপশনে ক্লিক করুন।

  • এখানে একটু খেয়াল করুন “Footer Bar” বা “Footer Widgets”-এর সেটিংসে কিছু বন্ধ (Disable/0) করা আছে কিনা। যদি থাকে, তবে সেটি চালু করুন বা ফুটার বারের এলাইনমেন্ট ঠিক করে দিন।

  • এরপর উপরের Publish বাটনে ক্লিক করুন।

২. মেনুতে লিংক যুক্ত আছে কিনা

যদি আপনার তৈরি করা মেনুটি একদম ফাঁকা থাকে, তবে উইজেটটি ওয়েবসাইটে কিছুই প্রদর্শন করবে না।

  • Appearance ➔ Menus-এ যান।

  • আপনার “Footer Menu” টি সিলেক্ট করে দেখুন সেখানে কোনো পেজ (যেমন: About, Contact, Privacy Policy) বা কাস্টম লিংক অ্যাড করা আছে কিনা। না থাকলে অ্যাড করে সেভ করুন।

আপনি কি একটু কাস্টমাইজারে গিয়ে ফুটার বারের সেটিংটি চেক করে দেখবেন, নাকি সেখানে সব ঠিক থাকার পরও মেনুটি দেখাচ্ছে না?

 
 
 
 
 
 
 
 
 
 
 

হ্যাঁ, আমি একদম বুঝতে পেরেছি! আপনার ওয়েবসাইটের বর্তমান ডিজাইনটি একটি ক্লাসিক নিউজপেপার বা ম্যাগাজিন স্টাইলের (Matchwire)। তাই ফুটারটাকেও সাধারণ না রেখে একদম প্রফেশনাল এবং প্রিমিয়াম পত্রিকার ওয়েবসাইটের মতো একটি লুক দেওয়া দরকার।

আমি আপনার আগের কোডের Section 8 (Footer)-এর ডিজাইনটি পরিবর্তন করে নতুন একটি আকর্ষণীয় ডিজাইন তৈরি করে দিচ্ছি।

এই নতুন ডিজাইনে যা যা থাকছে:

  • ফুটারের একদম উপরে একটি গাঢ় লাল রঙের (Newspaper style) বর্ডার থাকবে।

  • ফুটার উইজেটের মেনুগুলোর নিচে হালকা বর্ডার থাকবে এবং হোভার করলে ডানদিকে সুন্দরভাবে সরে যাবে (অ্যানিমেশন)।

  • আপনি Footer Bar-এ যে মেনুটি যুক্ত করেছেন, সেটি সুন্দরভাবে মাঝখানে (Center) সাজানো থাকবে এবং হোভার করলে লাল রঙের ব্যাকগ্রাউন্ড তৈরি হবে।

  • কপিরাইট অংশটি আরও পরিষ্কার এবং প্রফেশনাল দেখাবে।

আপনার করণীয়:

আপনার বর্তমান CSS কোড থেকে /* ---------- 8. FOOTER (widgets + menu + copyright) ---------- */ এর নিচের পুরো অংশটুকু মুছে ফেলুন এবং নিচের এই নতুন কোডটুকু সেখানে বসিয়ে দিন:

CSS
 
/* ---------- 8. FOOTER (UPGRADED NEWSPAPER STYLE) ---------- */

/* ফুটারের মূল ব্যাকগ্রাউন্ড এবং টপ বর্ডার */
.site-footer {
    background: var(--mw-ink) !important;
    border-top: 4px solid var(--mw-press-red) !important; 
    color: var(--mw-paper) !important;
}

/* ফুটার উইজেট এরিয়া (Footer Widget 1, 2, 3) */
.footer-widgets-container {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
    background: var(--mw-ink) !important;
}

/* উইজেট টাইটেল (Title) */
.site-footer .widget-title {
    font-family: var(--mw-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-paper) !important;
    border-bottom: 2px solid var(--mw-press-red);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

/* ফুটারের মেনু বা লিস্ট আইটেম (Vertical List) */
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .widget ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0;
    transition: padding-left 0.3s ease, color 0.3s ease;
}
.site-footer .widget ul li:hover {
    padding-left: 10px; /* হোভার করলে ডানদিকে সরবে */
}
.site-footer .widget ul li a {
    font-family: var(--mw-sans) !important;
    font-size: 14.5px;
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.site-footer .widget ul li a:hover {
    color: var(--mw-press-red) !important;
}

/* ফুটার বার (যেখানে আপনি মেনু অ্যাড করেছেন) */
.footer-bar {
    background: #111111 !important; /* মূল ফুটার থেকে একটু আলাদা ডার্ক কালার */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ফুটার বারের মেনু আইটেম (Horizontal List) */
.footer-bar .widget_nav_menu ul,
.footer-bar nav.menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-bar .widget_nav_menu ul li a,
.footer-bar nav.menu a {
    font-family: var(--mw-mono) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-paper-deep) !important;
    padding: 6px 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.footer-bar .widget_nav_menu ul li a:hover,
.footer-bar nav.menu a:hover {
    background: var(--mw-press-red) !important;
    color: #ffffff !important;
}

/* কপিরাইট টেক্সট এবং এরিয়ার ডিজাইন */
.copyright-bar {
    background: #060606 !important;
    padding: 20px 0;
    text-align: center;
}
.copyright-bar .inside-copyright-bar {
    font-family: var(--mw-mono) !important;
    font-size: 12px !important;
    color: var(--mw-meta) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.copyright-bar a {
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    font-weight: bold;
}
.copyright-bar a:hover {
    color: var(--mw-press-red) !important;
}

এই কোডটি বসিয়ে Publish করুন। এখন দেখবেন আপনার ফুটার এবং ফুটার বারের মেনুটি আপনার ওয়েবসাইটের উপরের হেডারের সাথে দারুণভাবে মানিয়ে গেছে!

 
 
 
 
 

nak base spase Hoy gece Tume dhako

 
 
 
 

হ্যাঁ, আমি স্ক্রিনশটে দেখতে পাচ্ছি। “FOOTER MENU” ডানপাশে চলে গেছে, লিস্টগুলো নিচে নিচে দেখাচ্ছে এবং কপিরাইট ও মেনুর মাঝখানে অনেক বেশি ফাঁকা জায়গা (Space) তৈরি হয়ে একদম বাজে দেখাচ্ছে।

GeneratePress-এ ডিফল্টভাবে কপিরাইট এবং ফুটার বার পাশাপাশি (Left-Right) থাকে, যার কারণে এই সমস্যাটি হয়েছে। আমরা এখন এটাকে সুন্দর করে মাঝখানে (Center) আনব এবং স্পেস কমিয়ে মেনুটাকে পাশাপাশি (Horizontal) সেট করে দিব।

আপনার Custom CSS এর একদম শেষে নিচের এই কোডটুকু কপি করে বসিয়ে দিন। এটি আগের সমস্যাগুলো ফিক্স করে ফেলবে:

CSS
 
/* ==========================================
   FOOTER BAR SPACING & ALIGNMENT FIX
   ========================================== */
.inside-site-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 25px 0 !important;
}

.footer-bar {
    margin-bottom: 15px !important;
    float: none !important;
}

/* "FOOTER MENU" টাইটেলটা লুকিয়ে ফেলি, যাতে অতিরিক্ত স্পেস না নেয় */
.footer-bar .widget-title {
    display: none !important;
}

/* মেনুগুলোকে নিচে-নিচের বদলে সুন্দর করে পাশাপাশি (Horizontal) করা */
.footer-bar .widget ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    border: none !important;
}

/* লিস্টের এক্সট্রা বর্ডার ও প্যাডিং রিমুভ করা */
.footer-bar .widget ul li {
    border-bottom: none !important;
    padding: 0 !important;
}

/* মেনুতে হোভার করলে স্পেস যাতে না বাড়ে */
.footer-bar .widget ul li:hover {
    padding-left: 0 !important; 
}

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

একবার চেক করে দেখুন তো এখন ঠিকঠাক লাগছে কিনা?

 
 
 
 
 

oky akhon amar aro akta bisoy , ta hocce Jokhon Post kore Post golo jate sundor kore Show Hoy Futcher Img soho Show Hoy Bujte parco , mane aktao img and Sondor kore artical Show hobe aita ki babe korbo Bujte parco tume

 
 
 
 

হ্যাঁ, আমি একদম পরিষ্কার বুঝতে পেরেছি! আপনি চাচ্ছেন হোমপেজে থাকা পোস্টগুলো যেন সাধারণ টেক্সটের মতো না দেখিয়ে, উপরে সুন্দর একটি কভার ছবি (Featured Image), আকর্ষণীয় টাইটেল এবং কিছু লেখা (Excerpt) সহ একটি চমৎকার ‘কার্ড’ (Card) স্টাইলে শো করে।

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

ধাপ ১: কাস্টমাইজার থেকে Featured Image চালু করা

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Appearance ➔ Customize-এ যান। ২. এরপর Layout ➔ Blog-এ ক্লিক করুন। ৩. সেখানে Archives সেকশনে গিয়ে একটু নিচে স্ক্রল করলেই “Display featured images” নামে একটি অপশন পাবেন। সেটিতে টিক (✓) দিন। ৪. Location অপশনে “Above Title” সিলেক্ট করুন (যাতে ছবিটা টাইটেলের একদম উপরে দেখায়)। ৫. উপরের Publish বাটনে ক্লিক করুন।

(নোট: আপনার “Hello world!” পোস্টে যদি কোনো Featured Image যুক্ত করা না থাকে, তাহলে ড্যাশবোর্ডের Posts ➔ All Posts থেকে ঐ পোস্টটি এডিট করে ডানপাশের প্যানেল থেকে একটি ছবি “Featured Image” হিসেবে সেট করে নিন। তা না হলে ওয়েবসাইটে ছবি দেখাবে না।)

ধাপ ২: ডিজাইন সুন্দর করার জন্য CSS যুক্ত করা

আপনার বর্তমান “Matchwire” ডিজাইনের সাথে মিলিয়ে পোস্ট কার্ড এবং ছবিটাকে প্রিমিয়াম লুক দেওয়ার জন্য কাস্টমাইজারের Additional CSS-এর একদম নিচে এই কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HOMEPAGE POST CARD & FEATURED IMAGE STYLE
   ========================================== */
/* পোস্ট কার্ডের ভেতরের প্যাডিং মুছে ফুল-উইডথ করা এবং ডিজাইন */
.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article {
    padding: 0 !important; 
    border: 1px solid var(--mw-hairline) !important;
    background: var(--mw-paper) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* কার্ডে হোভার করলে হালকা উপরে উঠবে (3D Effect) */
.blog .site-main > article .inside-article:hover,
.archive .site-main > article .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}

/* Featured Image এর ডিজাইন (যাতে সব ছবি সমান সাইজের দেখায়) */
.post-image {
    margin: 0 !important;
}
.post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9; /* ছবিগুলো সমান অনুপাতে সুন্দর দেখাবে */
    border-bottom: 1px solid var(--mw-hairline);
    transition: opacity 0.3s ease;
}
.post-image img:hover {
    opacity: 0.9;
}

/* ভেতরের টেক্সট অংশের (টাইটেল, মেটা, লেখা) প্যাডিং ঠিক করা */
.entry-header,
.entry-summary,
.entry-content {
    padding: 0 25px !important;
}

.entry-header {
    padding-top: 25px !important;
}

.entry-summary,
.entry-content {
    padding-bottom: 25px !important;
}

এই সেটিংস এবং কোড বসানোর পর হোমপেজের পোস্টগুলো দেখতে কেমন লাগছে, সেটা কি একটু চেক করে আমাকে জানাবেন?

 
 
 
 
 

Display featured images amon kono kicu ase nai to

 
 
 
 

স্ক্রিনশটটি দেখলাম। আপনি একদম ঠিকই ধরেছেন, এখানে “Display featured images” অপশনটি নেই।

এর কারণ হলো, আপনি GeneratePress-এর ফ্রি ভার্সনটি ব্যবহার করছেন (আপনার স্ক্রিনশটের বামপাশে নীল বক্সের লেখাতেও বলা আছে যে আরও অপশনগুলো প্রিমিয়াম ভার্সনে আছে)। প্রিমিয়াম ভার্সনেই ছবি কোথায় দেখাবে, কত বড় দেখাবে—এগুলো কন্ট্রোল করার অপশন থাকে।

তবে চিন্তার একদমই কিছু নেই! GeneratePress-এর ফ্রি ভার্সনে ডিফল্টভাবেই Featured Image শো করে, কিন্তু এর জন্য পোস্টের ভেতর থেকে আগে একটি ছবি সেট করা থাকতে হবে। ওয়ার্ডপ্রেসের ডিফল্ট “Hello world!” পোস্টে কোনো ছবি দেওয়া থাকে না, তাই আপনার ওয়েবসাইটে কোনো ছবি দেখাচ্ছে না।

ছবি শো করানোর জন্য আপনাকে এই সহজ কাজটি করতে হবে:

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Posts ➔ All Posts-এ যান। ২. “Hello world!” পোস্টটির নামের নিচে Edit-এ ক্লিক করুন। ৩. পোস্ট এডিটরের একদম ডানপাশের প্যানেলে (মেনুতে) একটু নিচে স্ক্রল করলেই Featured Image নামের একটি অপশন পাবেন। ৪. সেখানে ক্লিক করে আপনার পছন্দমতো একটি সুন্দর ছবি আপলোড করে দিন। ৫. এবার ডানপাশের উপরে নীল রঙের Update বাটনে ক্লিক করে পোস্টটি সেভ করুন।

এরপর আপনার ওয়েবসাইটের হোমপেজে এসে রিলোড দিন। দেখবেন, আপনার আপলোড করা ছবিটি এবং আমার দেওয়া আগের CSS কোডের কারণে পুরো পোস্টটি একটি দারুণ প্রফেশনাল ‘কার্ড’ (Card) স্টাইলে শো করছে!

 
 
 
 
 
 

HObe amar 2 nd img ar moto , ar lazy log=der , 10 ta lod hobe post tar por scrol korle ar golo lod hobe bujte parco

 
 
 
 

হ্যাঁ, আমি একদম ক্লিয়ার বুঝতে পেরেছি! আপনি চাচ্ছেন ২য় ছবির মতো বামে ছবি এবং ডানে টেক্সট থাকবে। আর স্ক্রল করলে যেন অটোমেটিক পরবর্তী পোস্টগুলো লোড হয় (Infinite Scroll)।

যেহেতু আপনি GeneratePress ফ্রি থিম ব্যবহার করছেন, তাই এই সুন্দর ডিজাইনটি করতে আমরা CSS Grid ব্যবহার করব। আর অটো লোডের জন্য একটি ছোট্ট প্লাগিন লাগবে (কারণ CSS দিয়ে শুধু ডিজাইন করা যায়, ডাটাবেস থেকে নতুন পোস্ট লোড করার জন্য প্লাগিন লাগে)।

চলুন ধাপে ধাপে কাজগুলো করে ফেলি:

ধাপ ১: ২য় ছবির মতো ডিজাইন করা (Left Image, Right Text)

আপনার কাস্টমাইজারের Additional CSS-এ আগে যে “HOMEPAGE POST CARD & FEATURED IMAGE STYLE” কোডটুকু বসিয়েছিলেন, সেটুকু মুছে ফেলে নিচের এই নতুন কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HORIZONTAL POST CARD (IMAGE LEFT, TEXT RIGHT)
   ========================================== */

/* মোবাইল বাদে বড় স্ক্রিনের জন্য (কম্পিউটার/ট্যাব) গ্রিড ডিজাইন */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 40% 60%; /* বামে ৪০% ছবি, ডানে ৬০% টেক্সট */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: start;
        padding: 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* ছবির অংশ */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        height: 100%;
        margin: 0 !important;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-right: 1px solid var(--mw-hairline);
    }

    /* টেক্সটের অংশ */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 25px 25px 10px 25px !important;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 0 25px 15px 25px !important;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 0 25px 25px 25px !important;
    }
}

/* মোবাইলের জন্য রেসপন্সিভ (উপরে ছবি, নিচে টেক্সট থাকবে) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 0 0 20px 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 6px;
        overflow: hidden;
    }
    .post-image img {
        width: 100%;
        height: auto;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 15px 20px 0 20px !important;
    }
}

এটি পাবলিশ করলেই দেখবেন আপনার পোস্টগুলো ২য় ছবির মতো ডানে-বামে সুন্দরভাবে সাজানো হয়ে গেছে!

ধাপ ২: ১০টা পোস্টের পর অটোমেটিক স্ক্রল লোড (Infinite Scroll)

স্ক্রল করলে অটো পোস্ট লোড হওয়ার জন্য আপনাকে নিচের কাজগুলো করতে হবে:

১. ১০টি পোস্ট সেট করা: * ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Settings ➔ Reading-এ যান।

  • “Blog pages show at most” অপশনে 10 লিখে সেভ করুন। (এর ফলে একসাথে ১০টার বেশি পোস্ট লোড হবে না)।

২. প্লাগিন ইনস্টল করা:

  • ড্যাশবোর্ড থেকে Plugins ➔ Add New-এ যান।

  • সার্চ বক্সে Catch Infinite Scroll লিখে সার্চ করুন। এটি খুবই ভালো এবং ফ্রি একটি প্লাগিন।

  • প্লাগিনটি Install করে Activate করুন।

  • এবার প্লাগিনের সেটিংসে গিয়ে Load On অপশনটি “Click” এর বদলে “Scroll” সিলেক্ট করে দিন।

ব্যাস! এখন আপনার ওয়েবসাইটে ১০টা পোস্ট লোড হওয়ার পর ভিজিটর নিচে স্ক্রল করলেই অটোমেটিক পরের পোস্টগুলো লোড হতে থাকবে।

আগে CSS টা বসিয়ে চেক করে দেখুন ২য় ছবির মতো ডিজাইনটা হয়েছে কিনা!

 
 
 
 
 

aro coto Hobe img size , size Thaik babe hobe aber degin ta hobe Them ar moto Degin hobe card ar moto degin hobe aime to just Tumake daro na delam kemon hobe

 
 
 
 

Ami ekdom clear bujhte perechi! Apni chachchen image ta aaro choto hok, ekta fixed shundor size-e thakuk, ebong puro post ta apnar “MatchWire” theme er sathe match kore ekta shundor “Premium Card”-er moto dekhak.

Ager code e image ta 40% chilo dekhe onek boro ar lamba lagchilo. Ebar ami image er size choto kore (28%) dicchi, ar card er charpashe padding diye ekdom ashol magazine card er moto design kore dicchi.

Apnar kustomizer-er Additional CSS theke ager oi Horizontal Post Card-er puro code tuku muche fele, nicher ei notun code tuku bosiye din:

CSS
 
/* ==========================================
   REFINED CARD DESIGN (MATCHWIRE THEME STYLE)
   ========================================== */

/* Computer & Tablet er jonno Grid Design */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 28% 72%; /* Image k choto kore 28% kora hoyeche */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: center; /* Majhaborabor shundor vabe align korbe */
        gap: 0 25px; /* Image ar Text er majhkhaner faka jayga */
        padding: 25px !important; /* Card er vitorer padding */
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Card Hover Effect */
    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* Image er Size o Design */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        margin: 0 !important;
        border-radius: 6px; /* Image er kona ektu gol (round) korbe */
        overflow: hidden;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3; /* Image jeno tana-hechra na hoy, ekta perfect size e thake */
        object-fit: cover;
        display: block;
        border: none;
    }

    /* Text er Spacing thik kora */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 0 !important;
        align-self: end;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 12px 0 0 0 !important;
        align-self: start;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 15px 0 0 0 !important;
    }
}

/* Mobile er jonno (Mobile e image upore thakbe) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 20px !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 8px;
        margin-bottom: 25px;
        background: var(--mw-paper) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }
    .post-image {
        margin: 0 0 15px 0 !important;
    }
    .post-image img {
        border-radius: 6px;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 0 !important;
    }
}

Ei code ta boshiye Publish kore din. Ebar apnar homepage e giye dekhun, image ta choto hoye shundor ekta frame-e (aspect-ratio: 4/3) chole esheche. Ar puro post ta ekdom Theme er design er sathe matching kora Premium Card er moto lagche.

Ebar kemon lagche ektu janaben!

 
 
 
 
 

haik acce aro akto Sundor Hobe Ta hocce Akta Buton thakbe jaita Thake Contunu reding , amon akta Buton jaitar modee Click korle Oi post ar page cole jay Tume Ki bujte parco

 
 
 
 

Ha, ami ekdom 100% bujhte perechi! Apni chachchen lekhar niche ekta shundor “Continue Reading” ba “Read More” button thakbe, jekhane click korle visitor ra pura post ta porte parbe.

Ekhon apnar website-e button ta na ashar ektai karon— apnar “Hello world!” post er lekha khub choto (matro ek line). WordPress-e lekha ektu boro hole ba limit cross korlei auto button ta show kore.

Button ta anar jonno apnake chotto 3-ti kaj korte hobe:

Dhap 1: Post ektu boro kora o “More” tag add kora

  1. Dashboard theke Posts ➔ All Posts e jan ebong ‘Hello world!’ post ta Edit korun.

  2. Post er vitor aaro 2-3 line dummy text copy-paste kore bariye din.

  3. Ebar lekhar majhkhan borabor (jekhan theke button chan), “+” icon e click kore “More” namer block ti add kore din (Search box e more likhlei paben).

  4. Post ti Update korun.

Dhap 2: Customizer theke setting thik kora

  1. Appearance ➔ Customize ➔ Layout ➔ Blog e jan.

  2. Ekhane “Content Type” er dropdown theke “Excerpt” change kore “Full” ba “Full Content” select kore din. (Karon Excerpt dewa thakle GP free theme-e onek shomoy button ashe na, shudhu ... ashe। Full Content diye “More” block use korle 100% button ashbe).

  3. Upore Publish e click korun.

Dhap 3: Button ke Premium Design kora

Button ta ashle sheta jate apnar “MatchWire” theme er lal ronger sathe ekdom perfect match kore ar premium lage, tar jonno nicher CSS tuku apnar Additional CSS er ekdom niche bosiye din:

CSS

Conversation with Gemini

 
 
 
 
 
 
 

Apnar dewa CSS code-e already Footer Menu-r design kora ache (CSS er Section 8 e dhobongsho kora ache). Tai apni jokhon ekhon menu add korben, eta auto-matically apnar design anujayi “Matchwire” newspaper style-e set hoye jabe.

GeneratePress-e Footer e menu add korar jonno apni duti sohoj poddhoti bebohar korte paren:

Poddhoti 1: Footer Bar Menu Location (Standard Way)

Jodi apni ekdom niche copyright text er pashe ba upore ekta shari-te (horizontal row) menu dekhate chan, tahole ei poddhoti ti follow korun:

  1. WordPress admin panel theke Appearance → Menus e jan.

  2. Ekta notun menu toiri korun (jemon nam dite paren “Footer Menu”) othoba existing kono menu select korun.

  3. Bam pashe theke apnar dorkari Pages, Categories ba Custom Links gulo menu-te add korun.

  4. Ebar ekdom niche “Menu Settings” section-e asun.

  5. Display location er pashe thaka “Footer Menu” option-e tick mark (✓) din.

  6. Shesh-e Save Menu button-e click korun.

(Apnar CSS er .site-footer nav.menu code ti ei menu-ke sundor bhabe majhkhan borabor flex kore sajiye nibe).

Poddhoti 2: Footer Widget-er maddhome (Column style)

Jodi apni footer er moddhe alada alada column kore menu add korte chan (jemon: “About”, “Quick Links”), tahole ei poddhoti ti follow korun:

  1. Prothome Appearance → Menus theke apnar menu ti toiri kore Save korun (ekhane kono Display location-e tick dewar dorkar nei).

  2. Ebar Appearance → Widgets e jan.

  3. Ekhane Footer Widget 1, Footer Widget 2 ba Footer Widget 3 apnar icchamoto jekono ekta block open korun.

  4. + icon-e click kore ekta notun block add korun ebang “Navigation Menu” kotha ti likhe search kore widget ti select korun.

  5. Ekta Title din (jemon: “Quick Links”) ebang dropdown theke apnar toiri kora “Footer Menu” ti select korun.

  6. Upore dan pashe Update button-e click kore save korun.

Ei duitar je kono ekta poddhoti follow korlei apnar add kora Custom CSS anujayi ekdam perfect color ebang spacing shoho Footer Menu apnar website-e show korbe!

 
 
 
 
 

Bangla te bolo akdom bangla horope

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখতে পাচ্ছি। এখানে দেখা যাচ্ছে “Your theme supports one menu” এবং শুধুমাত্র “Primary Menu” লোকেশনটি আছে।

এর মানে হলো, আপনার বর্তমান GeneratePress থিমে (সম্ভবত ফ্রি ভার্সন হওয়ায় বা প্রিমিয়াম মডিউল অন না থাকায়) ডিফল্টভাবে “Footer Menu” লোকেশনটি নেই।

তাই আপনাকে আগের বলা দ্বিতীয় পদ্ধতিটি (উইজেট ব্যবহার করে) অনুসরণ করতে হবে। নিচে ধাপে ধাপে নিয়মটি দেওয়া হলো:

উইজেট (Widgets) এর মাধ্যমে ফুটারে মেনু যুক্ত করার নিয়ম:

১. প্রথমে ওয়ার্ডপ্রেস ড্যাশবোর্ডের বাম পাশ থেকে Appearance ➔ Widgets-এ যান। ২. সেখানে Footer Bar অথবা Footer Widget 1 নামের একটি সেকশন দেখতে পাবেন, সেটিতে ক্লিক করে ওপেন করুন। ৩. এরপর + (প্লাস) আইকনে ক্লিক করে Navigation Menu লিখে সার্চ করুন এবং উইজেট ব্লকটি যুক্ত করুন। ৪. একটি টাইটেল দিন (যেমন: “Important Links” বা ফাঁকাও রাখতে পারেন) এবং ড্রপডাউন অপশন থেকে আপনার তৈরি করা “Footer Menu” টি সিলেক্ট করে দিন। ৫. সবশেষে, উপরে ডানদিক থেকে নীল রঙের Update বাটনে ক্লিক করে সেভ করুন।

যেহেতু আপনার দেওয়া CSS কোডে ফুটার উইজেটের মেনুর ডিজাইন আগে থেকেই খুব সুন্দরভাবে করা আছে, তাই এই পদ্ধতিতে মেনু যুক্ত করলেই সেটি আপনার ওয়েবসাইটের ডিজাইনের সাথে একদম পারফেক্টলি মানিয়ে যাবে!

 
 
 
 
 

Footer bar ar modde add korce But Hoy nai To

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখেছি। আপনি একদম ঠিক জায়গাতেই (Footer Bar-এ) উইজেটটি অ্যাড করেছেন! এরপরও যদি ওয়েবসাইটে মেনুটি না দেখায়, তবে চিন্তার কিছু নেই। সাধারণত এর পেছনে দুটি সাধারণ কারণ থাকে।

নিচের বিষয়গুলো একটু চেক করে দেখুন:

১. কাস্টমাইজার থেকে ফুটার বার চালু করা

অনেক সময় GeneratePress থিমে ফুটার বার ডিফল্টভাবে লুকানো (hidden) থাকে, যার কারণে উইজেট অ্যাড করলেও সেটি ওয়েবসাইটে দেখা যায় না।

  • Appearance ➔ Customize-এ যান।

  • এরপর Layout ➔ Footer অপশনে ক্লিক করুন।

  • এখানে একটু খেয়াল করুন “Footer Bar” বা “Footer Widgets”-এর সেটিংসে কিছু বন্ধ (Disable/0) করা আছে কিনা। যদি থাকে, তবে সেটি চালু করুন বা ফুটার বারের এলাইনমেন্ট ঠিক করে দিন।

  • এরপর উপরের Publish বাটনে ক্লিক করুন।

২. মেনুতে লিংক যুক্ত আছে কিনা

যদি আপনার তৈরি করা মেনুটি একদম ফাঁকা থাকে, তবে উইজেটটি ওয়েবসাইটে কিছুই প্রদর্শন করবে না।

  • Appearance ➔ Menus-এ যান।

  • আপনার “Footer Menu” টি সিলেক্ট করে দেখুন সেখানে কোনো পেজ (যেমন: About, Contact, Privacy Policy) বা কাস্টম লিংক অ্যাড করা আছে কিনা। না থাকলে অ্যাড করে সেভ করুন।

আপনি কি একটু কাস্টমাইজারে গিয়ে ফুটার বারের সেটিংটি চেক করে দেখবেন, নাকি সেখানে সব ঠিক থাকার পরও মেনুটি দেখাচ্ছে না?

 
 
 
 
 
 
 
 
 
 
 

হ্যাঁ, আমি একদম বুঝতে পেরেছি! আপনার ওয়েবসাইটের বর্তমান ডিজাইনটি একটি ক্লাসিক নিউজপেপার বা ম্যাগাজিন স্টাইলের (Matchwire)। তাই ফুটারটাকেও সাধারণ না রেখে একদম প্রফেশনাল এবং প্রিমিয়াম পত্রিকার ওয়েবসাইটের মতো একটি লুক দেওয়া দরকার।

আমি আপনার আগের কোডের Section 8 (Footer)-এর ডিজাইনটি পরিবর্তন করে নতুন একটি আকর্ষণীয় ডিজাইন তৈরি করে দিচ্ছি।

এই নতুন ডিজাইনে যা যা থাকছে:

  • ফুটারের একদম উপরে একটি গাঢ় লাল রঙের (Newspaper style) বর্ডার থাকবে।

  • ফুটার উইজেটের মেনুগুলোর নিচে হালকা বর্ডার থাকবে এবং হোভার করলে ডানদিকে সুন্দরভাবে সরে যাবে (অ্যানিমেশন)।

  • আপনি Footer Bar-এ যে মেনুটি যুক্ত করেছেন, সেটি সুন্দরভাবে মাঝখানে (Center) সাজানো থাকবে এবং হোভার করলে লাল রঙের ব্যাকগ্রাউন্ড তৈরি হবে।

  • কপিরাইট অংশটি আরও পরিষ্কার এবং প্রফেশনাল দেখাবে।

আপনার করণীয়:

আপনার বর্তমান CSS কোড থেকে /* ---------- 8. FOOTER (widgets + menu + copyright) ---------- */ এর নিচের পুরো অংশটুকু মুছে ফেলুন এবং নিচের এই নতুন কোডটুকু সেখানে বসিয়ে দিন:

CSS
 
/* ---------- 8. FOOTER (UPGRADED NEWSPAPER STYLE) ---------- */

/* ফুটারের মূল ব্যাকগ্রাউন্ড এবং টপ বর্ডার */
.site-footer {
    background: var(--mw-ink) !important;
    border-top: 4px solid var(--mw-press-red) !important; 
    color: var(--mw-paper) !important;
}

/* ফুটার উইজেট এরিয়া (Footer Widget 1, 2, 3) */
.footer-widgets-container {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
    background: var(--mw-ink) !important;
}

/* উইজেট টাইটেল (Title) */
.site-footer .widget-title {
    font-family: var(--mw-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-paper) !important;
    border-bottom: 2px solid var(--mw-press-red);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

/* ফুটারের মেনু বা লিস্ট আইটেম (Vertical List) */
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .widget ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0;
    transition: padding-left 0.3s ease, color 0.3s ease;
}
.site-footer .widget ul li:hover {
    padding-left: 10px; /* হোভার করলে ডানদিকে সরবে */
}
.site-footer .widget ul li a {
    font-family: var(--mw-sans) !important;
    font-size: 14.5px;
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.site-footer .widget ul li a:hover {
    color: var(--mw-press-red) !important;
}

/* ফুটার বার (যেখানে আপনি মেনু অ্যাড করেছেন) */
.footer-bar {
    background: #111111 !important; /* মূল ফুটার থেকে একটু আলাদা ডার্ক কালার */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ফুটার বারের মেনু আইটেম (Horizontal List) */
.footer-bar .widget_nav_menu ul,
.footer-bar nav.menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-bar .widget_nav_menu ul li a,
.footer-bar nav.menu a {
    font-family: var(--mw-mono) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-paper-deep) !important;
    padding: 6px 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.footer-bar .widget_nav_menu ul li a:hover,
.footer-bar nav.menu a:hover {
    background: var(--mw-press-red) !important;
    color: #ffffff !important;
}

/* কপিরাইট টেক্সট এবং এরিয়ার ডিজাইন */
.copyright-bar {
    background: #060606 !important;
    padding: 20px 0;
    text-align: center;
}
.copyright-bar .inside-copyright-bar {
    font-family: var(--mw-mono) !important;
    font-size: 12px !important;
    color: var(--mw-meta) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.copyright-bar a {
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    font-weight: bold;
}
.copyright-bar a:hover {
    color: var(--mw-press-red) !important;
}

এই কোডটি বসিয়ে Publish করুন। এখন দেখবেন আপনার ফুটার এবং ফুটার বারের মেনুটি আপনার ওয়েবসাইটের উপরের হেডারের সাথে দারুণভাবে মানিয়ে গেছে!

 
 
 
 
 

nak base spase Hoy gece Tume dhako

 
 
 
 

হ্যাঁ, আমি স্ক্রিনশটে দেখতে পাচ্ছি। “FOOTER MENU” ডানপাশে চলে গেছে, লিস্টগুলো নিচে নিচে দেখাচ্ছে এবং কপিরাইট ও মেনুর মাঝখানে অনেক বেশি ফাঁকা জায়গা (Space) তৈরি হয়ে একদম বাজে দেখাচ্ছে।

GeneratePress-এ ডিফল্টভাবে কপিরাইট এবং ফুটার বার পাশাপাশি (Left-Right) থাকে, যার কারণে এই সমস্যাটি হয়েছে। আমরা এখন এটাকে সুন্দর করে মাঝখানে (Center) আনব এবং স্পেস কমিয়ে মেনুটাকে পাশাপাশি (Horizontal) সেট করে দিব।

আপনার Custom CSS এর একদম শেষে নিচের এই কোডটুকু কপি করে বসিয়ে দিন। এটি আগের সমস্যাগুলো ফিক্স করে ফেলবে:

CSS
 
/* ==========================================
   FOOTER BAR SPACING & ALIGNMENT FIX
   ========================================== */
.inside-site-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 25px 0 !important;
}

.footer-bar {
    margin-bottom: 15px !important;
    float: none !important;
}

/* "FOOTER MENU" টাইটেলটা লুকিয়ে ফেলি, যাতে অতিরিক্ত স্পেস না নেয় */
.footer-bar .widget-title {
    display: none !important;
}

/* মেনুগুলোকে নিচে-নিচের বদলে সুন্দর করে পাশাপাশি (Horizontal) করা */
.footer-bar .widget ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    border: none !important;
}

/* লিস্টের এক্সট্রা বর্ডার ও প্যাডিং রিমুভ করা */
.footer-bar .widget ul li {
    border-bottom: none !important;
    padding: 0 !important;
}

/* মেনুতে হোভার করলে স্পেস যাতে না বাড়ে */
.footer-bar .widget ul li:hover {
    padding-left: 0 !important; 
}

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

একবার চেক করে দেখুন তো এখন ঠিকঠাক লাগছে কিনা?

 
 
 
 
 

oky akhon amar aro akta bisoy , ta hocce Jokhon Post kore Post golo jate sundor kore Show Hoy Futcher Img soho Show Hoy Bujte parco , mane aktao img and Sondor kore artical Show hobe aita ki babe korbo Bujte parco tume

 
 
 
 

হ্যাঁ, আমি একদম পরিষ্কার বুঝতে পেরেছি! আপনি চাচ্ছেন হোমপেজে থাকা পোস্টগুলো যেন সাধারণ টেক্সটের মতো না দেখিয়ে, উপরে সুন্দর একটি কভার ছবি (Featured Image), আকর্ষণীয় টাইটেল এবং কিছু লেখা (Excerpt) সহ একটি চমৎকার ‘কার্ড’ (Card) স্টাইলে শো করে।

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

ধাপ ১: কাস্টমাইজার থেকে Featured Image চালু করা

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Appearance ➔ Customize-এ যান। ২. এরপর Layout ➔ Blog-এ ক্লিক করুন। ৩. সেখানে Archives সেকশনে গিয়ে একটু নিচে স্ক্রল করলেই “Display featured images” নামে একটি অপশন পাবেন। সেটিতে টিক (✓) দিন। ৪. Location অপশনে “Above Title” সিলেক্ট করুন (যাতে ছবিটা টাইটেলের একদম উপরে দেখায়)। ৫. উপরের Publish বাটনে ক্লিক করুন।

(নোট: আপনার “Hello world!” পোস্টে যদি কোনো Featured Image যুক্ত করা না থাকে, তাহলে ড্যাশবোর্ডের Posts ➔ All Posts থেকে ঐ পোস্টটি এডিট করে ডানপাশের প্যানেল থেকে একটি ছবি “Featured Image” হিসেবে সেট করে নিন। তা না হলে ওয়েবসাইটে ছবি দেখাবে না।)

ধাপ ২: ডিজাইন সুন্দর করার জন্য CSS যুক্ত করা

আপনার বর্তমান “Matchwire” ডিজাইনের সাথে মিলিয়ে পোস্ট কার্ড এবং ছবিটাকে প্রিমিয়াম লুক দেওয়ার জন্য কাস্টমাইজারের Additional CSS-এর একদম নিচে এই কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HOMEPAGE POST CARD & FEATURED IMAGE STYLE
   ========================================== */
/* পোস্ট কার্ডের ভেতরের প্যাডিং মুছে ফুল-উইডথ করা এবং ডিজাইন */
.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article {
    padding: 0 !important; 
    border: 1px solid var(--mw-hairline) !important;
    background: var(--mw-paper) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* কার্ডে হোভার করলে হালকা উপরে উঠবে (3D Effect) */
.blog .site-main > article .inside-article:hover,
.archive .site-main > article .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}

/* Featured Image এর ডিজাইন (যাতে সব ছবি সমান সাইজের দেখায়) */
.post-image {
    margin: 0 !important;
}
.post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9; /* ছবিগুলো সমান অনুপাতে সুন্দর দেখাবে */
    border-bottom: 1px solid var(--mw-hairline);
    transition: opacity 0.3s ease;
}
.post-image img:hover {
    opacity: 0.9;
}

/* ভেতরের টেক্সট অংশের (টাইটেল, মেটা, লেখা) প্যাডিং ঠিক করা */
.entry-header,
.entry-summary,
.entry-content {
    padding: 0 25px !important;
}

.entry-header {
    padding-top: 25px !important;
}

.entry-summary,
.entry-content {
    padding-bottom: 25px !important;
}

এই সেটিংস এবং কোড বসানোর পর হোমপেজের পোস্টগুলো দেখতে কেমন লাগছে, সেটা কি একটু চেক করে আমাকে জানাবেন?

 
 
 
 
 

Display featured images amon kono kicu ase nai to

 
 
 
 

স্ক্রিনশটটি দেখলাম। আপনি একদম ঠিকই ধরেছেন, এখানে “Display featured images” অপশনটি নেই।

এর কারণ হলো, আপনি GeneratePress-এর ফ্রি ভার্সনটি ব্যবহার করছেন (আপনার স্ক্রিনশটের বামপাশে নীল বক্সের লেখাতেও বলা আছে যে আরও অপশনগুলো প্রিমিয়াম ভার্সনে আছে)। প্রিমিয়াম ভার্সনেই ছবি কোথায় দেখাবে, কত বড় দেখাবে—এগুলো কন্ট্রোল করার অপশন থাকে।

তবে চিন্তার একদমই কিছু নেই! GeneratePress-এর ফ্রি ভার্সনে ডিফল্টভাবেই Featured Image শো করে, কিন্তু এর জন্য পোস্টের ভেতর থেকে আগে একটি ছবি সেট করা থাকতে হবে। ওয়ার্ডপ্রেসের ডিফল্ট “Hello world!” পোস্টে কোনো ছবি দেওয়া থাকে না, তাই আপনার ওয়েবসাইটে কোনো ছবি দেখাচ্ছে না।

ছবি শো করানোর জন্য আপনাকে এই সহজ কাজটি করতে হবে:

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Posts ➔ All Posts-এ যান। ২. “Hello world!” পোস্টটির নামের নিচে Edit-এ ক্লিক করুন। ৩. পোস্ট এডিটরের একদম ডানপাশের প্যানেলে (মেনুতে) একটু নিচে স্ক্রল করলেই Featured Image নামের একটি অপশন পাবেন। ৪. সেখানে ক্লিক করে আপনার পছন্দমতো একটি সুন্দর ছবি আপলোড করে দিন। ৫. এবার ডানপাশের উপরে নীল রঙের Update বাটনে ক্লিক করে পোস্টটি সেভ করুন।

এরপর আপনার ওয়েবসাইটের হোমপেজে এসে রিলোড দিন। দেখবেন, আপনার আপলোড করা ছবিটি এবং আমার দেওয়া আগের CSS কোডের কারণে পুরো পোস্টটি একটি দারুণ প্রফেশনাল ‘কার্ড’ (Card) স্টাইলে শো করছে!

 
 
 
 
 
 

HObe amar 2 nd img ar moto , ar lazy log=der , 10 ta lod hobe post tar por scrol korle ar golo lod hobe bujte parco

 
 
 
 

হ্যাঁ, আমি একদম ক্লিয়ার বুঝতে পেরেছি! আপনি চাচ্ছেন ২য় ছবির মতো বামে ছবি এবং ডানে টেক্সট থাকবে। আর স্ক্রল করলে যেন অটোমেটিক পরবর্তী পোস্টগুলো লোড হয় (Infinite Scroll)।

যেহেতু আপনি GeneratePress ফ্রি থিম ব্যবহার করছেন, তাই এই সুন্দর ডিজাইনটি করতে আমরা CSS Grid ব্যবহার করব। আর অটো লোডের জন্য একটি ছোট্ট প্লাগিন লাগবে (কারণ CSS দিয়ে শুধু ডিজাইন করা যায়, ডাটাবেস থেকে নতুন পোস্ট লোড করার জন্য প্লাগিন লাগে)।

চলুন ধাপে ধাপে কাজগুলো করে ফেলি:

ধাপ ১: ২য় ছবির মতো ডিজাইন করা (Left Image, Right Text)

আপনার কাস্টমাইজারের Additional CSS-এ আগে যে “HOMEPAGE POST CARD & FEATURED IMAGE STYLE” কোডটুকু বসিয়েছিলেন, সেটুকু মুছে ফেলে নিচের এই নতুন কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HORIZONTAL POST CARD (IMAGE LEFT, TEXT RIGHT)
   ========================================== */

/* মোবাইল বাদে বড় স্ক্রিনের জন্য (কম্পিউটার/ট্যাব) গ্রিড ডিজাইন */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 40% 60%; /* বামে ৪০% ছবি, ডানে ৬০% টেক্সট */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: start;
        padding: 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* ছবির অংশ */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        height: 100%;
        margin: 0 !important;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-right: 1px solid var(--mw-hairline);
    }

    /* টেক্সটের অংশ */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 25px 25px 10px 25px !important;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 0 25px 15px 25px !important;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 0 25px 25px 25px !important;
    }
}

/* মোবাইলের জন্য রেসপন্সিভ (উপরে ছবি, নিচে টেক্সট থাকবে) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 0 0 20px 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 6px;
        overflow: hidden;
    }
    .post-image img {
        width: 100%;
        height: auto;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 15px 20px 0 20px !important;
    }
}

এটি পাবলিশ করলেই দেখবেন আপনার পোস্টগুলো ২য় ছবির মতো ডানে-বামে সুন্দরভাবে সাজানো হয়ে গেছে!

ধাপ ২: ১০টা পোস্টের পর অটোমেটিক স্ক্রল লোড (Infinite Scroll)

স্ক্রল করলে অটো পোস্ট লোড হওয়ার জন্য আপনাকে নিচের কাজগুলো করতে হবে:

১. ১০টি পোস্ট সেট করা: * ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Settings ➔ Reading-এ যান।

  • “Blog pages show at most” অপশনে 10 লিখে সেভ করুন। (এর ফলে একসাথে ১০টার বেশি পোস্ট লোড হবে না)।

২. প্লাগিন ইনস্টল করা:

  • ড্যাশবোর্ড থেকে Plugins ➔ Add New-এ যান।

  • সার্চ বক্সে Catch Infinite Scroll লিখে সার্চ করুন। এটি খুবই ভালো এবং ফ্রি একটি প্লাগিন।

  • প্লাগিনটি Install করে Activate করুন।

  • এবার প্লাগিনের সেটিংসে গিয়ে Load On অপশনটি “Click” এর বদলে “Scroll” সিলেক্ট করে দিন।

ব্যাস! এখন আপনার ওয়েবসাইটে ১০টা পোস্ট লোড হওয়ার পর ভিজিটর নিচে স্ক্রল করলেই অটোমেটিক পরের পোস্টগুলো লোড হতে থাকবে।

আগে CSS টা বসিয়ে চেক করে দেখুন ২য় ছবির মতো ডিজাইনটা হয়েছে কিনা!

 
 
 
 
 

aro coto Hobe img size , size Thaik babe hobe aber degin ta hobe Them ar moto Degin hobe card ar moto degin hobe aime to just Tumake daro na delam kemon hobe

 
 
 
 

Ami ekdom clear bujhte perechi! Apni chachchen image ta aaro choto hok, ekta fixed shundor size-e thakuk, ebong puro post ta apnar “MatchWire” theme er sathe match kore ekta shundor “Premium Card”-er moto dekhak.

Ager code e image ta 40% chilo dekhe onek boro ar lamba lagchilo. Ebar ami image er size choto kore (28%) dicchi, ar card er charpashe padding diye ekdom ashol magazine card er moto design kore dicchi.

Apnar kustomizer-er Additional CSS theke ager oi Horizontal Post Card-er puro code tuku muche fele, nicher ei notun code tuku bosiye din:

CSS
 
/* ==========================================
   REFINED CARD DESIGN (MATCHWIRE THEME STYLE)
   ========================================== */

/* Computer & Tablet er jonno Grid Design */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 28% 72%; /* Image k choto kore 28% kora hoyeche */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: center; /* Majhaborabor shundor vabe align korbe */
        gap: 0 25px; /* Image ar Text er majhkhaner faka jayga */
        padding: 25px !important; /* Card er vitorer padding */
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Card Hover Effect */
    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* Image er Size o Design */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        margin: 0 !important;
        border-radius: 6px; /* Image er kona ektu gol (round) korbe */
        overflow: hidden;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3; /* Image jeno tana-hechra na hoy, ekta perfect size e thake */
        object-fit: cover;
        display: block;
        border: none;
    }

    /* Text er Spacing thik kora */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 0 !important;
        align-self: end;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 12px 0 0 0 !important;
        align-self: start;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 15px 0 0 0 !important;
    }
}

/* Mobile er jonno (Mobile e image upore thakbe) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 20px !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 8px;
        margin-bottom: 25px;
        background: var(--mw-paper) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }
    .post-image {
        margin: 0 0 15px 0 !important;
    }
    .post-image img {
        border-radius: 6px;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 0 !important;
    }
}

Ei code ta boshiye Publish kore din. Ebar apnar homepage e giye dekhun, image ta choto hoye shundor ekta frame-e (aspect-ratio: 4/3) chole esheche. Ar puro post ta ekdom Theme er design er sathe matching kora Premium Card er moto lagche.

Ebar kemon lagche ektu janaben!

 
 
 
 
 

haik acce aro akto Sundor Hobe Ta hocce Akta Buton thakbe jaita Thake Contunu reding , amon akta Buton jaitar modee Click korle Oi post ar page cole jay Tume Ki bujte parco

 
 
 
 

Ha, ami ekdom 100% bujhte perechi! Apni chachchen lekhar niche ekta shundor “Continue Reading” ba “Read More” button thakbe, jekhane click korle visitor ra pura post ta porte parbe.

Ekhon apnar website-e button ta na ashar ektai karon— apnar “Hello world!” post er lekha khub choto (matro ek line). WordPress-e lekha ektu boro hole ba limit cross korlei auto button ta show kore.

Button ta anar jonno apnake chotto 3-ti kaj korte hobe:

Dhap 1: Post ektu boro kora o “More” tag add kora

  1. Dashboard theke Posts ➔ All Posts e jan ebong ‘Hello world!’ post ta Edit korun.

  2. Post er vitor aaro 2-3 line dummy text copy-paste kore bariye din.

  3. Ebar lekhar majhkhan borabor (jekhan theke button chan), “+” icon e click kore “More” namer block ti add kore din (Search box e more likhlei paben).

  4. Post ti Update korun.

Dhap 2: Customizer theke setting thik kora

  1. Appearance ➔ Customize ➔ Layout ➔ Blog e jan.

  2. Ekhane “Content Type” er dropdown theke “Excerpt” change kore “Full” ba “Full Content” select kore din. (Karon Excerpt dewa thakle GP free theme-e onek shomoy button ashe na, shudhu ... ashe। Full Content diye “More” block use korle 100% button ashbe).

  3. Upore Publish e click korun.

Dhap 3: Button ke Premium Design kora

Button ta ashle sheta jate apnar “MatchWire” theme er lal ronger sathe ekdom perfect match kore ar premium lage, tar jonno nicher CSS tuku apnar Additional CSS er ekdom niche bosiye din:

CSS

Conversation with Gemini

 
 
 
 
 
 
 

Apnar dewa CSS code-e already Footer Menu-r design kora ache (CSS er Section 8 e dhobongsho kora ache). Tai apni jokhon ekhon menu add korben, eta auto-matically apnar design anujayi “Matchwire” newspaper style-e set hoye jabe.

GeneratePress-e Footer e menu add korar jonno apni duti sohoj poddhoti bebohar korte paren:

Poddhoti 1: Footer Bar Menu Location (Standard Way)

Jodi apni ekdom niche copyright text er pashe ba upore ekta shari-te (horizontal row) menu dekhate chan, tahole ei poddhoti ti follow korun:

  1. WordPress admin panel theke Appearance → Menus e jan.

  2. Ekta notun menu toiri korun (jemon nam dite paren “Footer Menu”) othoba existing kono menu select korun.

  3. Bam pashe theke apnar dorkari Pages, Categories ba Custom Links gulo menu-te add korun.

  4. Ebar ekdom niche “Menu Settings” section-e asun.

  5. Display location er pashe thaka “Footer Menu” option-e tick mark (✓) din.

  6. Shesh-e Save Menu button-e click korun.

(Apnar CSS er .site-footer nav.menu code ti ei menu-ke sundor bhabe majhkhan borabor flex kore sajiye nibe).

Poddhoti 2: Footer Widget-er maddhome (Column style)

Jodi apni footer er moddhe alada alada column kore menu add korte chan (jemon: “About”, “Quick Links”), tahole ei poddhoti ti follow korun:

  1. Prothome Appearance → Menus theke apnar menu ti toiri kore Save korun (ekhane kono Display location-e tick dewar dorkar nei).

  2. Ebar Appearance → Widgets e jan.

  3. Ekhane Footer Widget 1, Footer Widget 2 ba Footer Widget 3 apnar icchamoto jekono ekta block open korun.

  4. + icon-e click kore ekta notun block add korun ebang “Navigation Menu” kotha ti likhe search kore widget ti select korun.

  5. Ekta Title din (jemon: “Quick Links”) ebang dropdown theke apnar toiri kora “Footer Menu” ti select korun.

  6. Upore dan pashe Update button-e click kore save korun.

Ei duitar je kono ekta poddhoti follow korlei apnar add kora Custom CSS anujayi ekdam perfect color ebang spacing shoho Footer Menu apnar website-e show korbe!

 
 
 
 
 

Bangla te bolo akdom bangla horope

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখতে পাচ্ছি। এখানে দেখা যাচ্ছে “Your theme supports one menu” এবং শুধুমাত্র “Primary Menu” লোকেশনটি আছে।

এর মানে হলো, আপনার বর্তমান GeneratePress থিমে (সম্ভবত ফ্রি ভার্সন হওয়ায় বা প্রিমিয়াম মডিউল অন না থাকায়) ডিফল্টভাবে “Footer Menu” লোকেশনটি নেই।

তাই আপনাকে আগের বলা দ্বিতীয় পদ্ধতিটি (উইজেট ব্যবহার করে) অনুসরণ করতে হবে। নিচে ধাপে ধাপে নিয়মটি দেওয়া হলো:

উইজেট (Widgets) এর মাধ্যমে ফুটারে মেনু যুক্ত করার নিয়ম:

১. প্রথমে ওয়ার্ডপ্রেস ড্যাশবোর্ডের বাম পাশ থেকে Appearance ➔ Widgets-এ যান। ২. সেখানে Footer Bar অথবা Footer Widget 1 নামের একটি সেকশন দেখতে পাবেন, সেটিতে ক্লিক করে ওপেন করুন। ৩. এরপর + (প্লাস) আইকনে ক্লিক করে Navigation Menu লিখে সার্চ করুন এবং উইজেট ব্লকটি যুক্ত করুন। ৪. একটি টাইটেল দিন (যেমন: “Important Links” বা ফাঁকাও রাখতে পারেন) এবং ড্রপডাউন অপশন থেকে আপনার তৈরি করা “Footer Menu” টি সিলেক্ট করে দিন। ৫. সবশেষে, উপরে ডানদিক থেকে নীল রঙের Update বাটনে ক্লিক করে সেভ করুন।

যেহেতু আপনার দেওয়া CSS কোডে ফুটার উইজেটের মেনুর ডিজাইন আগে থেকেই খুব সুন্দরভাবে করা আছে, তাই এই পদ্ধতিতে মেনু যুক্ত করলেই সেটি আপনার ওয়েবসাইটের ডিজাইনের সাথে একদম পারফেক্টলি মানিয়ে যাবে!

 
 
 
 
 

Footer bar ar modde add korce But Hoy nai To

 
 
 
 

আমি আপনার স্ক্রিনশটটি দেখেছি। আপনি একদম ঠিক জায়গাতেই (Footer Bar-এ) উইজেটটি অ্যাড করেছেন! এরপরও যদি ওয়েবসাইটে মেনুটি না দেখায়, তবে চিন্তার কিছু নেই। সাধারণত এর পেছনে দুটি সাধারণ কারণ থাকে।

নিচের বিষয়গুলো একটু চেক করে দেখুন:

১. কাস্টমাইজার থেকে ফুটার বার চালু করা

অনেক সময় GeneratePress থিমে ফুটার বার ডিফল্টভাবে লুকানো (hidden) থাকে, যার কারণে উইজেট অ্যাড করলেও সেটি ওয়েবসাইটে দেখা যায় না।

  • Appearance ➔ Customize-এ যান।

  • এরপর Layout ➔ Footer অপশনে ক্লিক করুন।

  • এখানে একটু খেয়াল করুন “Footer Bar” বা “Footer Widgets”-এর সেটিংসে কিছু বন্ধ (Disable/0) করা আছে কিনা। যদি থাকে, তবে সেটি চালু করুন বা ফুটার বারের এলাইনমেন্ট ঠিক করে দিন।

  • এরপর উপরের Publish বাটনে ক্লিক করুন।

২. মেনুতে লিংক যুক্ত আছে কিনা

যদি আপনার তৈরি করা মেনুটি একদম ফাঁকা থাকে, তবে উইজেটটি ওয়েবসাইটে কিছুই প্রদর্শন করবে না।

  • Appearance ➔ Menus-এ যান।

  • আপনার “Footer Menu” টি সিলেক্ট করে দেখুন সেখানে কোনো পেজ (যেমন: About, Contact, Privacy Policy) বা কাস্টম লিংক অ্যাড করা আছে কিনা। না থাকলে অ্যাড করে সেভ করুন।

আপনি কি একটু কাস্টমাইজারে গিয়ে ফুটার বারের সেটিংটি চেক করে দেখবেন, নাকি সেখানে সব ঠিক থাকার পরও মেনুটি দেখাচ্ছে না?

 
 
 
 
 
 
 
 
 
 
 

হ্যাঁ, আমি একদম বুঝতে পেরেছি! আপনার ওয়েবসাইটের বর্তমান ডিজাইনটি একটি ক্লাসিক নিউজপেপার বা ম্যাগাজিন স্টাইলের (Matchwire)। তাই ফুটারটাকেও সাধারণ না রেখে একদম প্রফেশনাল এবং প্রিমিয়াম পত্রিকার ওয়েবসাইটের মতো একটি লুক দেওয়া দরকার।

আমি আপনার আগের কোডের Section 8 (Footer)-এর ডিজাইনটি পরিবর্তন করে নতুন একটি আকর্ষণীয় ডিজাইন তৈরি করে দিচ্ছি।

এই নতুন ডিজাইনে যা যা থাকছে:

  • ফুটারের একদম উপরে একটি গাঢ় লাল রঙের (Newspaper style) বর্ডার থাকবে।

  • ফুটার উইজেটের মেনুগুলোর নিচে হালকা বর্ডার থাকবে এবং হোভার করলে ডানদিকে সুন্দরভাবে সরে যাবে (অ্যানিমেশন)।

  • আপনি Footer Bar-এ যে মেনুটি যুক্ত করেছেন, সেটি সুন্দরভাবে মাঝখানে (Center) সাজানো থাকবে এবং হোভার করলে লাল রঙের ব্যাকগ্রাউন্ড তৈরি হবে।

  • কপিরাইট অংশটি আরও পরিষ্কার এবং প্রফেশনাল দেখাবে।

আপনার করণীয়:

আপনার বর্তমান CSS কোড থেকে /* ---------- 8. FOOTER (widgets + menu + copyright) ---------- */ এর নিচের পুরো অংশটুকু মুছে ফেলুন এবং নিচের এই নতুন কোডটুকু সেখানে বসিয়ে দিন:

CSS
 
/* ---------- 8. FOOTER (UPGRADED NEWSPAPER STYLE) ---------- */

/* ফুটারের মূল ব্যাকগ্রাউন্ড এবং টপ বর্ডার */
.site-footer {
    background: var(--mw-ink) !important;
    border-top: 4px solid var(--mw-press-red) !important; 
    color: var(--mw-paper) !important;
}

/* ফুটার উইজেট এরিয়া (Footer Widget 1, 2, 3) */
.footer-widgets-container {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
    background: var(--mw-ink) !important;
}

/* উইজেট টাইটেল (Title) */
.site-footer .widget-title {
    font-family: var(--mw-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mw-paper) !important;
    border-bottom: 2px solid var(--mw-press-red);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

/* ফুটারের মেনু বা লিস্ট আইটেম (Vertical List) */
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .widget ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0;
    transition: padding-left 0.3s ease, color 0.3s ease;
}
.site-footer .widget ul li:hover {
    padding-left: 10px; /* হোভার করলে ডানদিকে সরবে */
}
.site-footer .widget ul li a {
    font-family: var(--mw-sans) !important;
    font-size: 14.5px;
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.site-footer .widget ul li a:hover {
    color: var(--mw-press-red) !important;
}

/* ফুটার বার (যেখানে আপনি মেনু অ্যাড করেছেন) */
.footer-bar {
    background: #111111 !important; /* মূল ফুটার থেকে একটু আলাদা ডার্ক কালার */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ফুটার বারের মেনু আইটেম (Horizontal List) */
.footer-bar .widget_nav_menu ul,
.footer-bar nav.menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-bar .widget_nav_menu ul li a,
.footer-bar nav.menu a {
    font-family: var(--mw-mono) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mw-paper-deep) !important;
    padding: 6px 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.footer-bar .widget_nav_menu ul li a:hover,
.footer-bar nav.menu a:hover {
    background: var(--mw-press-red) !important;
    color: #ffffff !important;
}

/* কপিরাইট টেক্সট এবং এরিয়ার ডিজাইন */
.copyright-bar {
    background: #060606 !important;
    padding: 20px 0;
    text-align: center;
}
.copyright-bar .inside-copyright-bar {
    font-family: var(--mw-mono) !important;
    font-size: 12px !important;
    color: var(--mw-meta) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.copyright-bar a {
    color: var(--mw-hairline-strong) !important;
    text-decoration: none !important;
    font-weight: bold;
}
.copyright-bar a:hover {
    color: var(--mw-press-red) !important;
}

এই কোডটি বসিয়ে Publish করুন। এখন দেখবেন আপনার ফুটার এবং ফুটার বারের মেনুটি আপনার ওয়েবসাইটের উপরের হেডারের সাথে দারুণভাবে মানিয়ে গেছে!

 
 
 
 
 

nak base spase Hoy gece Tume dhako

 
 
 
 

হ্যাঁ, আমি স্ক্রিনশটে দেখতে পাচ্ছি। “FOOTER MENU” ডানপাশে চলে গেছে, লিস্টগুলো নিচে নিচে দেখাচ্ছে এবং কপিরাইট ও মেনুর মাঝখানে অনেক বেশি ফাঁকা জায়গা (Space) তৈরি হয়ে একদম বাজে দেখাচ্ছে।

GeneratePress-এ ডিফল্টভাবে কপিরাইট এবং ফুটার বার পাশাপাশি (Left-Right) থাকে, যার কারণে এই সমস্যাটি হয়েছে। আমরা এখন এটাকে সুন্দর করে মাঝখানে (Center) আনব এবং স্পেস কমিয়ে মেনুটাকে পাশাপাশি (Horizontal) সেট করে দিব।

আপনার Custom CSS এর একদম শেষে নিচের এই কোডটুকু কপি করে বসিয়ে দিন। এটি আগের সমস্যাগুলো ফিক্স করে ফেলবে:

CSS
 
/* ==========================================
   FOOTER BAR SPACING & ALIGNMENT FIX
   ========================================== */
.inside-site-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 25px 0 !important;
}

.footer-bar {
    margin-bottom: 15px !important;
    float: none !important;
}

/* "FOOTER MENU" টাইটেলটা লুকিয়ে ফেলি, যাতে অতিরিক্ত স্পেস না নেয় */
.footer-bar .widget-title {
    display: none !important;
}

/* মেনুগুলোকে নিচে-নিচের বদলে সুন্দর করে পাশাপাশি (Horizontal) করা */
.footer-bar .widget ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    border: none !important;
}

/* লিস্টের এক্সট্রা বর্ডার ও প্যাডিং রিমুভ করা */
.footer-bar .widget ul li {
    border-bottom: none !important;
    padding: 0 !important;
}

/* মেনুতে হোভার করলে স্পেস যাতে না বাড়ে */
.footer-bar .widget ul li:hover {
    padding-left: 0 !important; 
}

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

একবার চেক করে দেখুন তো এখন ঠিকঠাক লাগছে কিনা?

 
 
 
 
 

oky akhon amar aro akta bisoy , ta hocce Jokhon Post kore Post golo jate sundor kore Show Hoy Futcher Img soho Show Hoy Bujte parco , mane aktao img and Sondor kore artical Show hobe aita ki babe korbo Bujte parco tume

 
 
 
 

হ্যাঁ, আমি একদম পরিষ্কার বুঝতে পেরেছি! আপনি চাচ্ছেন হোমপেজে থাকা পোস্টগুলো যেন সাধারণ টেক্সটের মতো না দেখিয়ে, উপরে সুন্দর একটি কভার ছবি (Featured Image), আকর্ষণীয় টাইটেল এবং কিছু লেখা (Excerpt) সহ একটি চমৎকার ‘কার্ড’ (Card) স্টাইলে শো করে।

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

ধাপ ১: কাস্টমাইজার থেকে Featured Image চালু করা

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Appearance ➔ Customize-এ যান। ২. এরপর Layout ➔ Blog-এ ক্লিক করুন। ৩. সেখানে Archives সেকশনে গিয়ে একটু নিচে স্ক্রল করলেই “Display featured images” নামে একটি অপশন পাবেন। সেটিতে টিক (✓) দিন। ৪. Location অপশনে “Above Title” সিলেক্ট করুন (যাতে ছবিটা টাইটেলের একদম উপরে দেখায়)। ৫. উপরের Publish বাটনে ক্লিক করুন।

(নোট: আপনার “Hello world!” পোস্টে যদি কোনো Featured Image যুক্ত করা না থাকে, তাহলে ড্যাশবোর্ডের Posts ➔ All Posts থেকে ঐ পোস্টটি এডিট করে ডানপাশের প্যানেল থেকে একটি ছবি “Featured Image” হিসেবে সেট করে নিন। তা না হলে ওয়েবসাইটে ছবি দেখাবে না।)

ধাপ ২: ডিজাইন সুন্দর করার জন্য CSS যুক্ত করা

আপনার বর্তমান “Matchwire” ডিজাইনের সাথে মিলিয়ে পোস্ট কার্ড এবং ছবিটাকে প্রিমিয়াম লুক দেওয়ার জন্য কাস্টমাইজারের Additional CSS-এর একদম নিচে এই কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HOMEPAGE POST CARD & FEATURED IMAGE STYLE
   ========================================== */
/* পোস্ট কার্ডের ভেতরের প্যাডিং মুছে ফুল-উইডথ করা এবং ডিজাইন */
.blog .site-main > article .inside-article,
.archive .site-main > article .inside-article {
    padding: 0 !important; 
    border: 1px solid var(--mw-hairline) !important;
    background: var(--mw-paper) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* কার্ডে হোভার করলে হালকা উপরে উঠবে (3D Effect) */
.blog .site-main > article .inside-article:hover,
.archive .site-main > article .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}

/* Featured Image এর ডিজাইন (যাতে সব ছবি সমান সাইজের দেখায়) */
.post-image {
    margin: 0 !important;
}
.post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9; /* ছবিগুলো সমান অনুপাতে সুন্দর দেখাবে */
    border-bottom: 1px solid var(--mw-hairline);
    transition: opacity 0.3s ease;
}
.post-image img:hover {
    opacity: 0.9;
}

/* ভেতরের টেক্সট অংশের (টাইটেল, মেটা, লেখা) প্যাডিং ঠিক করা */
.entry-header,
.entry-summary,
.entry-content {
    padding: 0 25px !important;
}

.entry-header {
    padding-top: 25px !important;
}

.entry-summary,
.entry-content {
    padding-bottom: 25px !important;
}

এই সেটিংস এবং কোড বসানোর পর হোমপেজের পোস্টগুলো দেখতে কেমন লাগছে, সেটা কি একটু চেক করে আমাকে জানাবেন?

 
 
 
 
 

Display featured images amon kono kicu ase nai to

 
 
 
 

স্ক্রিনশটটি দেখলাম। আপনি একদম ঠিকই ধরেছেন, এখানে “Display featured images” অপশনটি নেই।

এর কারণ হলো, আপনি GeneratePress-এর ফ্রি ভার্সনটি ব্যবহার করছেন (আপনার স্ক্রিনশটের বামপাশে নীল বক্সের লেখাতেও বলা আছে যে আরও অপশনগুলো প্রিমিয়াম ভার্সনে আছে)। প্রিমিয়াম ভার্সনেই ছবি কোথায় দেখাবে, কত বড় দেখাবে—এগুলো কন্ট্রোল করার অপশন থাকে।

তবে চিন্তার একদমই কিছু নেই! GeneratePress-এর ফ্রি ভার্সনে ডিফল্টভাবেই Featured Image শো করে, কিন্তু এর জন্য পোস্টের ভেতর থেকে আগে একটি ছবি সেট করা থাকতে হবে। ওয়ার্ডপ্রেসের ডিফল্ট “Hello world!” পোস্টে কোনো ছবি দেওয়া থাকে না, তাই আপনার ওয়েবসাইটে কোনো ছবি দেখাচ্ছে না।

ছবি শো করানোর জন্য আপনাকে এই সহজ কাজটি করতে হবে:

১. আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Posts ➔ All Posts-এ যান। ২. “Hello world!” পোস্টটির নামের নিচে Edit-এ ক্লিক করুন। ৩. পোস্ট এডিটরের একদম ডানপাশের প্যানেলে (মেনুতে) একটু নিচে স্ক্রল করলেই Featured Image নামের একটি অপশন পাবেন। ৪. সেখানে ক্লিক করে আপনার পছন্দমতো একটি সুন্দর ছবি আপলোড করে দিন। ৫. এবার ডানপাশের উপরে নীল রঙের Update বাটনে ক্লিক করে পোস্টটি সেভ করুন।

এরপর আপনার ওয়েবসাইটের হোমপেজে এসে রিলোড দিন। দেখবেন, আপনার আপলোড করা ছবিটি এবং আমার দেওয়া আগের CSS কোডের কারণে পুরো পোস্টটি একটি দারুণ প্রফেশনাল ‘কার্ড’ (Card) স্টাইলে শো করছে!

 
 
 
 
 
 

HObe amar 2 nd img ar moto , ar lazy log=der , 10 ta lod hobe post tar por scrol korle ar golo lod hobe bujte parco

 
 
 
 

হ্যাঁ, আমি একদম ক্লিয়ার বুঝতে পেরেছি! আপনি চাচ্ছেন ২য় ছবির মতো বামে ছবি এবং ডানে টেক্সট থাকবে। আর স্ক্রল করলে যেন অটোমেটিক পরবর্তী পোস্টগুলো লোড হয় (Infinite Scroll)।

যেহেতু আপনি GeneratePress ফ্রি থিম ব্যবহার করছেন, তাই এই সুন্দর ডিজাইনটি করতে আমরা CSS Grid ব্যবহার করব। আর অটো লোডের জন্য একটি ছোট্ট প্লাগিন লাগবে (কারণ CSS দিয়ে শুধু ডিজাইন করা যায়, ডাটাবেস থেকে নতুন পোস্ট লোড করার জন্য প্লাগিন লাগে)।

চলুন ধাপে ধাপে কাজগুলো করে ফেলি:

ধাপ ১: ২য় ছবির মতো ডিজাইন করা (Left Image, Right Text)

আপনার কাস্টমাইজারের Additional CSS-এ আগে যে “HOMEPAGE POST CARD & FEATURED IMAGE STYLE” কোডটুকু বসিয়েছিলেন, সেটুকু মুছে ফেলে নিচের এই নতুন কোডটুকু বসিয়ে দিন:

CSS
 
/* ==========================================
   HORIZONTAL POST CARD (IMAGE LEFT, TEXT RIGHT)
   ========================================== */

/* মোবাইল বাদে বড় স্ক্রিনের জন্য (কম্পিউটার/ট্যাব) গ্রিড ডিজাইন */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 40% 60%; /* বামে ৪০% ছবি, ডানে ৬০% টেক্সট */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: start;
        padding: 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* ছবির অংশ */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        height: 100%;
        margin: 0 !important;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-right: 1px solid var(--mw-hairline);
    }

    /* টেক্সটের অংশ */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 25px 25px 10px 25px !important;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 0 25px 15px 25px !important;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 0 25px 25px 25px !important;
    }
}

/* মোবাইলের জন্য রেসপন্সিভ (উপরে ছবি, নিচে টেক্সট থাকবে) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 0 0 20px 0 !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 6px;
        overflow: hidden;
    }
    .post-image img {
        width: 100%;
        height: auto;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 15px 20px 0 20px !important;
    }
}

এটি পাবলিশ করলেই দেখবেন আপনার পোস্টগুলো ২য় ছবির মতো ডানে-বামে সুন্দরভাবে সাজানো হয়ে গেছে!

ধাপ ২: ১০টা পোস্টের পর অটোমেটিক স্ক্রল লোড (Infinite Scroll)

স্ক্রল করলে অটো পোস্ট লোড হওয়ার জন্য আপনাকে নিচের কাজগুলো করতে হবে:

১. ১০টি পোস্ট সেট করা: * ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Settings ➔ Reading-এ যান।

  • “Blog pages show at most” অপশনে 10 লিখে সেভ করুন। (এর ফলে একসাথে ১০টার বেশি পোস্ট লোড হবে না)।

২. প্লাগিন ইনস্টল করা:

  • ড্যাশবোর্ড থেকে Plugins ➔ Add New-এ যান।

  • সার্চ বক্সে Catch Infinite Scroll লিখে সার্চ করুন। এটি খুবই ভালো এবং ফ্রি একটি প্লাগিন।

  • প্লাগিনটি Install করে Activate করুন।

  • এবার প্লাগিনের সেটিংসে গিয়ে Load On অপশনটি “Click” এর বদলে “Scroll” সিলেক্ট করে দিন।

ব্যাস! এখন আপনার ওয়েবসাইটে ১০টা পোস্ট লোড হওয়ার পর ভিজিটর নিচে স্ক্রল করলেই অটোমেটিক পরের পোস্টগুলো লোড হতে থাকবে।

আগে CSS টা বসিয়ে চেক করে দেখুন ২য় ছবির মতো ডিজাইনটা হয়েছে কিনা!

 
 
 
 
 

aro coto Hobe img size , size Thaik babe hobe aber degin ta hobe Them ar moto Degin hobe card ar moto degin hobe aime to just Tumake daro na delam kemon hobe

 
 
 
 

Ami ekdom clear bujhte perechi! Apni chachchen image ta aaro choto hok, ekta fixed shundor size-e thakuk, ebong puro post ta apnar “MatchWire” theme er sathe match kore ekta shundor “Premium Card”-er moto dekhak.

Ager code e image ta 40% chilo dekhe onek boro ar lamba lagchilo. Ebar ami image er size choto kore (28%) dicchi, ar card er charpashe padding diye ekdom ashol magazine card er moto design kore dicchi.

Apnar kustomizer-er Additional CSS theke ager oi Horizontal Post Card-er puro code tuku muche fele, nicher ei notun code tuku bosiye din:

CSS
 
/* ==========================================
   REFINED CARD DESIGN (MATCHWIRE THEME STYLE)
   ========================================== */

/* Computer & Tablet er jonno Grid Design */
@media (min-width: 769px) {
    .blog .site-main > article .inside-article,
    .archive .site-main > article .inside-article {
        display: grid !important;
        grid-template-columns: 28% 72%; /* Image k choto kore 28% kora hoyeche */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        align-items: center; /* Majhaborabor shundor vabe align korbe */
        gap: 0 25px; /* Image ar Text er majhkhaner faka jayga */
        padding: 25px !important; /* Card er vitorer padding */
        border: 1px solid var(--mw-hairline) !important;
        background: var(--mw-paper) !important;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Card Hover Effect */
    .blog .site-main > article .inside-article:hover,
    .archive .site-main > article .inside-article:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* Image er Size o Design */
    .blog .post-image, 
    .archive .post-image {
        grid-area: image;
        margin: 0 !important;
        border-radius: 6px; /* Image er kona ektu gol (round) korbe */
        overflow: hidden;
    }

    .blog .post-image img, 
    .archive .post-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3; /* Image jeno tana-hechra na hoy, ekta perfect size e thake */
        object-fit: cover;
        display: block;
        border: none;
    }

    /* Text er Spacing thik kora */
    .blog .entry-header, 
    .archive .entry-header {
        grid-area: header;
        padding: 0 !important;
        align-self: end;
    }

    .blog .entry-content, .blog .entry-summary,
    .archive .entry-content, .archive .entry-summary {
        grid-area: summary;
        padding: 12px 0 0 0 !important;
        align-self: start;
    }

    .entry-footer, .entry-meta {
        grid-area: footer;
        padding: 15px 0 0 0 !important;
    }
}

/* Mobile er jonno (Mobile e image upore thakbe) */
@media (max-width: 768px) {
    .blog .site-main > article .inside-article {
        padding: 20px !important;
        border: 1px solid var(--mw-hairline) !important;
        border-radius: 8px;
        margin-bottom: 25px;
        background: var(--mw-paper) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }
    .post-image {
        margin: 0 0 15px 0 !important;
    }
    .post-image img {
        border-radius: 6px;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    .entry-header, .entry-summary, .entry-meta {
        padding: 0 !important;
    }
}

Ei code ta boshiye Publish kore din. Ebar apnar homepage e giye dekhun, image ta choto hoye shundor ekta frame-e (aspect-ratio: 4/3) chole esheche. Ar puro post ta ekdom Theme er design er sathe matching kora Premium Card er moto lagche.

Ebar kemon lagche ektu janaben!

 
 
 
 
 

haik acce aro akto Sundor Hobe Ta hocce Akta Buton thakbe jaita Thake Contunu reding , amon akta Buton jaitar modee Click korle Oi post ar page cole jay Tume Ki bujte parco

 
 
 
 

Ha, ami ekdom 100% bujhte perechi! Apni chachchen lekhar niche ekta shundor “Continue Reading” ba “Read More” button thakbe, jekhane click korle visitor ra pura post ta porte parbe.

Ekhon apnar website-e button ta na ashar ektai karon— apnar “Hello world!” post er lekha khub choto (matro ek line). WordPress-e lekha ektu boro hole ba limit cross korlei auto button ta show kore.

Button ta anar jonno apnake chotto 3-ti kaj korte hobe:

Dhap 1: Post ektu boro kora o “More” tag add kora

  1. Dashboard theke Posts ➔ All Posts e jan ebong ‘Hello world!’ post ta Edit korun.

  2. Post er vitor aaro 2-3 line dummy text copy-paste kore bariye din.

  3. Ebar lekhar majhkhan borabor (jekhan theke button chan), “+” icon e click kore “More” namer block ti add kore din (Search box e more likhlei paben).

  4. Post ti Update korun.

Dhap 2: Customizer theke setting thik kora

  1. Appearance ➔ Customize ➔ Layout ➔ Blog e jan.

  2. Ekhane “Content Type” er dropdown theke “Excerpt” change kore “Full” ba “Full Content” select kore din. (Karon Excerpt dewa thakle GP free theme-e onek shomoy button ashe na, shudhu ... ashe। Full Content diye “More” block use korle 100% button ashbe).

  3. Upore Publish e click korun.

Dhap 3: Button ke Premium Design kora

Button ta ashle sheta jate apnar “MatchWire” theme er lal ronger sathe ekdom perfect match kore ar premium lage, tar jonno nicher CSS tuku apnar Additional CSS er ekdom niche bosiye din:

CSS

1 thought on “Hello world!”

Leave a Comment