Как реализовать вывод новостей в DLE в таком дизайне?

Question

[De Slow]

Есть вот такой вот дизайн (подобие слайдера)

вывел его на главную через тег {custom}, с указание шаблона, который находится в определенном файле, в папке шаблона.
все хорошо, все отображается, но, верстка данного шаблона выполнена просто в Html 4 "Объектами", вот пример кода:

<section class="no-padding bg-dark border-top-1 border-black">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-padding border-right-1 border-black hidden-xs">
      <div class="post-block first">
        <a href="#" class="link">
          <img src="{THEME}/images/1.jpg" alt="">
          <div class="overlay">
            <div class="caption">
              <span class="label label-warning">Ролевые игры</span>
              <div class="post-title">
                <h4>{title}</h4></div>
              <p>{short-story limit="70"}</p>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding-left no-padding border-right-1 border-black">
      <div class="post-block">
        <a href="#" class="link">
          <img src="{THEME}/images/2.jpg" alt="">
          <div class="overlay">
            <div class="caption">
              <span class="label label-primary">Экшн</span>
              <div class="post-title">
                <h4>{title}</h4></div>
              <p>{short-story limit="70"}</p>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding-left no-padding hidden-xs">
      <div class="post-block border-bottom-1 border-black">
        <a href="#" class="link">
          <img src="{THEME}/images/3.jpg" alt="">
          <div class="overlay">
            <div class="caption">
              <span class="label label-danger">MOVIE</span>
              <div class="post-title">
                <h4>Guardians of the Galaxy</h4></div>
              <p>Praesent eget erat vel odio mattis fermentum nec nec arcu.</p>
            </div>
          </div>
        </a>
      </div>
      <div class="post-block">
        <a href="#" class="link">
          <img src="{THEME}/images/4.jpg" alt="">
          <div class="overlay">
            <div class="caption">
              <span class="label label-success">Xbox</span>
              <div class="post-title">
                <h4>Alien: Isolation Extended Distress</h4></div>
              <p>Quisque maximus nisi ac nisi sollicitudin rhoncu.</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>

Когда подставляю теги {Title} ... и остальные выводится, одна и таже новость, как быть? и как исправить, нужно переверстать как-то Html?-но каакк
прошу помощи