Elementor: гибкие колонки с эффектом сжатия - PullRequest
Новая
       6

Elementor: гибкие колонки с эффектом сжатия

2 голосов
/ 28 марта 2020

кто-нибудь здесь использует Elementor ?

Я пытаюсь создать заголовок с Elementor . 3 столбца, у меня lo go слева, панель поиска в середине и меню навигации справа.

По сути, я хотел добиться чего-то подобного. Ожидаемый вывод

Но в данный момент я делаю Вывод

Добавление границы для него Вывод с границей

Вот проблема, когда размер экрана / окна изменяется Проблема

Где это должно быть что-то вроде этого Ожидаемый-вывод-при-размере

Чтобы дать вам более подробную информацию, я хотел добиться той же функциональности, что и приведенный ниже код на Elementor. 

.container {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex: 1;
  flex-basis: fill;
}

.flex2:after {
  content: 'fill-remaining-space';
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}
<ul class="container">
  <li class="flex flex1"><div style="background: #000; width: 200px;">Logo</div></li>
  <li class="flex flex2"><div style="background: #000; width: 100%; margin-right: 10px; margin-left-10px;">Search-Bar</div></li>
  <li class="flex flex3"><div style="background: #000; width: 350px;">Navigation Menu</div></li>
</ul>

1 Ответ

1 голос
/ 08 апреля 2020

Я не думаю, что это возможно при использовании бесплатной версии Elementor. Однако вы все равно можете достичь желаемого.

Идея заключается в использовании ShortCode.

Поскольку вы используете плагин темы OceanWP , вам нужно будет установить сначала подключаемый модуль Ocean Extra .

ШАГ 1: Создание шаблонов Вам нужно будет создать шаблон для этих четырех элементов, перейдя в свой WordPress Dashboard> My Library, затем создайте шаблоны, нажав кнопку Add New, и присвойте им следующие имена:

  • панель поиска
  • lo go
  • навигационное меню
  • заголовок

Каждый из созданных вами шаблонов сгенерирует shortcode, поэтому примите их к сведению.

ШАГ 2: Редактируйте шаблоны, созданные с помощью Elementor Отредактируйте шаблон, который вы создали с помощью Elementor, на search-bar используйте виджет Advanced Woo Search , так как вы сказали, что используете его плагин, вы также можете использовать его шорткод, если у него есть шорткод, просто найдите виджет ShortCode в Elementor, затем перетащите его в раздел, введите шорткод расширенного поиска woo, затем сделайте width full и 100%, сохраните и опубликуйте sh it.

In шаблон Logo, отредактируйте его снова с помощью Elementor, затем используйте виджет Custom Header Logo, как вы сказали, что вы используете его, затем go на Advanced> Positioning, затем установите Width на Inline(Auto) и Vertical Align до Start. Это позволит расположить lo go в левой части раздела в противном случае, расположить его в левой части, сохранить и опубликовать sh it.

Редактировать шаблон navigation-menu с помощью Elementor из виджетов найдите Custom Header Nav и используйте его, затем поместите его в правую часть секции.

ПРИМЕЧАНИЕ. Вам не нужно ничего менять в секции Elementor.

Последним является шаблон header, прежде чем редактировать шаблон header, вы должны create a shortcode с тегом, который вы создали, поэтому не редактируйте его пока, переходите к следующему шагу .

ШАГ 3: Создайте шорткод под вашей функцией. php 

function cs_custom_header_shortcode( $atts ) {  
    $logo = do_shortcode('[shortcode of logo template]');
    $search = do_shortcode('[shortcode of search-bar template]');
    $nav = do_shortcode('[shortcode of navigation-menu template]');
    echo '
    <div class="cs-flex-container">
        <div class="cs-flex-item cs-flex1"><div>'.$logo.'</div></div>
        <div class="cs-flex-item cs-flex2"><div>'.$search.'</div></div>
        <div class="cs-flex-item cs-flex3"><div>'.$nav.'</div></div>
    </div>
    ';
}
add_shortcode( 'cs_custom_header', 'cs_custom_header_shortcode');

скопируйте и вставьте указанный выше код в ваш function.php, я использую вашу идею, я просто заменяю тег на div.

Обратите внимание на do_shortcode('[shortcode of logo template]');, замените [shortcode of logo template] шорткодом тех шаблонов, которые вы создали.

Ваш шорткод теперь для этого [cs_custom_header].

ШАГ 4: Отредактируйте шаблон header с помощью elementor и используйте шорткод [cs_custom_header].

Отредактируйте шаблон header с помощью Elementor, затем из списка поиска виджетов для ShortCode затем перетащите его в раздел и введите следующий шорткод [cs_custom_header].

ШАГ 5: Изменить стиль CSS . Go на ваш Wordpress Dashboard> Appearance> Customize> CSS/JS и введите следующий стиль CSS. 

.cs-flex-container {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.cs-flex-item {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.cs-flex-item:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.cs-flex1 {
  flex-basis: auto;
}

.cs-flex1:after {
  content: 'auto';
}

.cs-flex2 {
  flex: 1;
  flex-basis: fill;
}

.cs-flex2:after {
  content: 'fill-remaining-space';
}

.cs-flex3 {
  flex-basis: min-content;
}

.cs-flex3:after {
  content: 'min-content';
}

Вы также можете использовать его в своей css дочерней теме, и снова я просто использую ваш код css.

С предоставленным вами кодом, я полагаю, вы знаете, как работать над большинством вещей, но просто не хватает идеи, как это сделать с помощью Elementor, так что я не буду очень подробно c во всем, только руководство.

Шаги могут быть длинными, но вы будете добейтесь того, что вы хотите с ним.

Хорошего дня.

...