Как вывести в Wordpress такой контейнер?

Question

[hypero]

Всем привет. Как в Wordpress вывести такого рода блок?

Answer 1

[Орхан Гасанлы]

Здравствуйте!
По картинке не совсем понятно, как именно этот блок должен вести себя, но все же постараюсь ответить.
Судя по блоку должна быть центровка объекта (можно предположить, что это слайдер или карусель).
Отсюда вывод -
можно подключить slick.js и использовать Center mode
kenwheeler.github.io/slick
или один из этих скриптов
https://owlcarousel2.github.io/OwlCarousel2/docs/s...
flexslider.woothemes.com
Если не ошибаюсь, то можно еще такое создать в плагине Revolution Slider

Comments

[hypero]

Это просто 3 блока. Как вывести картинку с текстом?

[Орхан Гасанлы]

Если вы делаете это на бутстрапе, то

<div class="container">
<div class="col-md-4">
<img src="Ссылка на картинку 1" alt="Картинка 1" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
<div class="col-md-4">
<img src="Ссылка на картинку 2" alt="Картинка 2" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
<div class="col-md-4">
<img src="Ссылка на картинку 3" alt="Картинка 3" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
</div

[Орхан Гасанлы]

Если вы делаете это НЕ на бутстрапе, то можно создать адаптивную сетку.

<style>
* {
    box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
</style>

а потом:

<div class="image_block">
<div class="col-4">
<img src="Ссылка на картинку 1" alt="Картинка 1" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
<div class="col-4">
<img src="Ссылка на картинку 2" alt="Картинка 2" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
<div class="col-4">
<img src="Ссылка на картинку 3" alt="Картинка 3" style="width:100%"/>
<span>Текст</span><br/>
<span style="font-weight:700">от 37 900 рублей.</span>
</div>
</div>

[hypero]

Мне нужно его динамически выводить, сверстать не проблема.