Передвинуть объекты с помощью order

@webworkwizard 

Чтобы изменить порядок элементов в виджете Elementor с помощью CSS и использовать свойство order, вам нужно знать, как структурированы HTML-элементы в этом виджете. Обычно, внутри виджета каждый элемент - это отдельный дочерний элемент в контейнере (например, div). Предположим, у вас структура такая:

1
2
3
4
5
6

<div class="testimonial-widget">
  <div class="testimonial-photo">Фото</div>
  <div class="testimonial-title">Заголовок</div>
  <div class="testimonial-subtitle">Второй заголовок</div>
  <div class="testimonial-text">Текст отзыва</div>
</div>

Чтобы изменить порядок этих блоков, можно использовать Flexbox и свойство order. Например, чтобы поставить текст перед заголовками и фото, вы можете сделать следующее:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

.testimonial-widget {
  display: flex;
  flex-direction: column; /* Изменяем порядок в столбце, если нужно горизонтально - используйте row */
}

.testimonial-photo {
  order: 2;
}

.testimonial-title {
  order: 3;
}

.testimonial-subtitle {
  order: 4;
}

.testimonial-text {
  order: 1;
}

Вот шаги, которые нужно предпринять:

1. Включите режим Flexbox для контейнера, содержащего элементы (testimonial-widget в данном примере).
2. Используйте свойство order для управления порядком отображения элементов. Элементы с меньшими значениями order будут располагаться выше.
3. Вставьте эти стили в секцию CSS элемента или в дополнительные пользовательские CSS на уровне страницы или сайта.

Если структура вашего HTML отличается, вы должны отрегулировать селекторы в соответствии с вашей конкретной разметкой. Чтобы получить правильные селекторы, вы можете использовать инструменты разработчика в вашем браузере (например, Chrome DevTools) для изучения структуры HTML и CSS вашего виджета.