Elementor: 具有收缩包装效果的灵活柱子

Question

有人在这里使用 Elementor?

我想创建一个标题为 Elementor. 3列，我有一个 标志 在左边的。搜索栏 中间一个 导航菜单 在右边。

基本上，我想实现的是这样的目标。预期输出

但我目前做的是 产量

在上面加个边框 带边界的输出

以下是调整屏幕窗口大小时的问题。问题

应该是这样的 缩小后的预期输出

为了让大家更详细的了解，我想在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>

Answer 1

我认为使用免费版的Elementor是不可能的。然而你仍然可以实现你想要的东西。

这个想法是通过使用 ShortCode.

由于您使用的是 OceanWP 主题插件，那么你将需要安装 海洋特级品 先用插件。

第1步：创建模板 你将需要为这四个元素创建一个模板，通过导航到你的WordPress的 Dashboard > My Library 然后通过点击创建模板的 Add New 按钮，并将其命名为以下内容。

• 搜索栏
• 标志
• 导航菜单
• 头部

您创建的每一个模板都会产生一个 shortcode 所以要注意它们。

第二步：使用Elementor编辑您创建的模板。 编辑您用Elementor创建的模板，在 search-bar 用小部件 高级Woo搜索 既然你说你使用的是它的插件，你也可以使用它的短码，如果它有一个短码，只要搜索小部件 ShortCode 在Elementor中然后拖拽到该栏目中，输入Advanced woo搜索的短码，然后使。width full 和 100%，保存并发布。

在模板中 Logo，使用Elementor再次编辑，然后使用小部件。Custom Header Logo 既然你说你正在使用它，那么就去吧。Advanced > Positioning 然后设置 Width 到 Inline(Auto) 和 Vertical Align 到 Start. 这样就可以将标志定位在左侧的部分，否则，将其定位到左侧，保存并发布。

编辑模板 navigation-menu 使用Elementor，在小组件中搜索 Custom Header Nav 并使用它，然后将其定位到该部分的右侧。

注意：你不需要在Elementor的部分改变任何东西。

最后是 header 模板，然后再编辑 header 模板，你必须 create a shortcode 与你创建的标签，所以先不要编辑它，继续下一步。

第3步: 在function.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].

第四步：编辑 header 模板，并使用短码 [cs_custom_header].

编辑 header 模板，然后从小组件列表中寻找 ShortCode 然后将其拖放到该部分，并输入以下短码。[cs_custom_header].

第五步：编辑 CSS 风格. 进入你的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的想法，所以我不会很具体的说明所有的事情，只是一个指南。

步骤也许很长，但你会用它实现你想要的东西。

祝你有个愉快的一天。