_shortcodes

 

✅ 1. Feature Box (Basic Card Style)

Use for: simple feature highlights

<div style="border:1px solid #ddd;padding:15px;border-radius:8px;margin-bottom:10px;">
<h3>✔ Step-by-Step Guides</h3>
<p>Easy instructions designed for quick understanding and practical use.</p>
</div>

👉 Detail:

  • Clean and traditional
  • Works everywhere
  • Best for listing multiple features one by one

✅ 2. Grid Features (Modern Layout)

Use for: homepage-style features section

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;">

<div style="border:1px solid #ddd;padding:15px;border-radius:8px;">
<h3>Simple Language</h3>
<p>Content written in easy words.</p>
</div>

<div style="border:1px solid #ddd;padding:15px;border-radius:8px;">
<h3>Practical Tips</h3>
<p>Real-life solutions that work.</p>
</div>

</div>

👉 Detail:

  • Responsive (mobile-friendly automatically)
  • Looks modern
  • Best for 4–6 features in one section

✅ 3. Icon Feature (Highlight Style)

Use for: making features stand out visually

<div style="display:flex;align-items:center;margin-bottom:10px;">
<div style="font-size:20px;margin-right:10px;">✔</div>
<div>
<strong>Beginner Friendly</strong><br>
<span style="color:#555;">Perfect for users with no prior knowledge.</span>
</div>
</div>

👉 Detail:

  • Clean and minimal
  • Easy to scan
  • Good for short feature lists

✅ 4. Highlight Box (Important Feature)

Use for: showing your main strength

<div style="background:#f1f7ff;border-left:5px solid #0d6efd;padding:15px;border-radius:6px;">
<strong>Focused on Practical Knowledge</strong>
<p>We provide solutions that can be applied immediately in real life.</p>
</div>

👉 Detail:

  • Grabs attention
  • Use only 1–2 times (don’t overuse)
  • Good for key selling point

✅ 5. Two Column Feature Section

Use for: detailed explanation of features

<div style="display:flex;gap:20px;flex-wrap:wrap;">

<div style="flex:1;min-width:250px;">
<h3>Time-Saving Content</h3>
<p>Information is direct and to the point without unnecessary details.</p>
</div>

<div style="flex:1;min-width:250px;">
<h3>Regular Updates</h3>
<p>New guides are added frequently to keep content fresh.</p>
</div>

</div>

👉 Detail:

  • More professional layout
  • Good for detailed explanation
  • Works well in long pages

🔥 Best Practice (What Most People Do Wrong)

Don’t just repeat one style.

👉 Smart structure:

  1. Start with Highlight Box
  2. Then use Grid Features
  3. Add Icon List
  4. End with Detailed Two Column

That’s how real websites do it.

Post a Comment

0 Comments