Download

Real-world Layouts

XBO Market Kit > Real-world Layouts

Real-world Layout Examples

Practical examples showing how to integrate XBO Market Kit widgets into different page layouts

1. Crypto News Blog with Price Ticker

Use Case: Cryptocurrency news blog or magazine site that needs to display current prices alongside articles.

Layout Strategy:

  • Ticker widget in header (sticky on scroll)
  • Top Movers widget in sidebar
  • Refresh timer for live updates indication

Best For: Content-heavy sites, news portals, blogs

Code Example

// header.php
<?php
echo do_shortcode(
  '
BTC
BTC
BTC/USDT
--
0.00%
ETH
ETH
ETH/USDT
--
0.00%
'
);
?>

// sidebar.php
<?php
echo do_shortcode(
  '
PairPrice24h Change
MUBARAK/USDT		$0.055027+29.60%
AERO/USDT		$0.8905+28.07%
ENA/USDT		$0.26691+19.84%
JTO/USDT		$0.5747+17.45%
SEI/USDT		$0.07265+16.35%
KMNO/USDT		$0.04269+15.94%
SUI/USDC		$1.17+15.86%
SUI/USDT		$1.17+15.84%
CC/USDT		$0.1344+15.51%
SPK/USDT		$0.02392+12.83%
'
);
?>

2. Trading Education Landing Page

Use Case: Educational landing page teaching users about crypto trading concepts with interactive examples.

Layout Strategy:

  • Hero section with headline
  • Slippage Calculator widget to demonstrate order execution
  • Order Book widget showing market depth
  • Explanatory text between widgets

Best For: Educational content, course pages, tutorials

Block Pattern

Gutenberg blocks in sequence:

  • Heading
  • Paragraph (intro)
  • XBO Slippage Calculator
  • Paragraph (explanation)
  • XBO Order Book
  • Call to Action button

3. Crypto Portfolio Showcase

Use Case: Portfolio or showcase page displaying multiple crypto-related services with live market data.

Layout Strategy:

  • Grid layout with 2-column sections
  • Ticker widget (top, full width)
  • Two-column: Order Book (left) + Recent Trades (right)
  • Two-column: Top Movers (left) + Slippage (right)

Best For: Service showcases, product demos, portfolio pages

Gutenberg Layout


<!-- wp:xbo-market-kit/ticker /-->


<!-- wp:columns -->
  <!-- wp:column -->
    <!-- wp:xbo-market-kit/orderbook /-->
  <!-- /wp:column -->
  <!-- wp:column -->
    <!-- wp:xbo-market-kit/trades /-->
  <!-- /wp:column -->
<!-- /wp:columns -->

4. Exchange-Style Dashboard

Use Case: Full-screen trading dashboard mimicking professional exchange interfaces.

Layout Strategy:

  • Full-width page template (no sidebar)
  • Ticker bar at top
  • Three-column layout: Order Book | Chart (placeholder) | Recent Trades
  • Bottom row: Top Movers + Slippage Calculator
  • Fast refresh (15s)

Best For: Trading platforms, financial dashboards, pro interfaces

Template Structure

Use full-width template:

  • Ticker (wide)
  • 3-column Group
  • 2-column Group
  • All widgets: refresh=”15″

Layout Best Practices

✓ Performance

  • Use longer refresh intervals (30s-60s) for multiple widgets
  • Limit to 3-4 widgets per page for optimal load time
  • Server-side caching handles concurrent requests

✓ Mobile Responsive

  • Widgets stack vertically on mobile automatically
  • Use 1-2 columns for ticker on mobile
  • Test on different screen sizes

✓ User Experience

  • Group related widgets together
  • Add refresh timer for transparency
  • Provide context with headings

Try These Layouts Live

Visit our showcase page to see working examples of these layouts

View Showcase