Elementor：具有收缩包装效果的柔性列

Question

这里有人用Elementor吗？

我正在尝试使用Elementor 创建一个标题。 3 列，左侧有一个徽标，中间有一个搜索栏，右侧有一个导航菜单。

基本上，我想要实现的是这样的。 Expected Output

但我目前所做的是Output

在其上添加边框Output-with-Border

这是调整屏幕/窗口大小时的问题Issue

应该是这样的Expected-output-on-resize

为了给你更多细节，我想在 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 主题插件，因此您需要先安装Ocean Extra 插件。

第 1 步：创建模板
您需要通过导航到 WordPress Dashboard > My Library 为这四个元素创建一个模板，然后通过单击 Add New 按钮创建模板并使用以下名称命名它们：

• 搜索栏
• 徽标
• 导航菜单
• 标题

您创建的每个模板都会生成一个shortcode，因此请记下它们。

第 2 步：编辑您使用 Elementor 创建的模板
编辑您使用 Elementor 创建的模板，在 search-bar 上使用 Advanced Woo Search 的小部件，因为您说您正在使用它的插件，如果它有简码，您也可以使用它的简码，只需搜索小部件 ShortCode Elementor然后将其拖放到该部分，输入高级woo搜索的简码然后制作width full和100%，保存并发布。

在模板 Logo 中，使用 Elementor 再次对其进行编辑，然后按照您所说的使用小部件 Custom Header Logo，然后转到 Advanced > Positioning 然后将 Width 设置为 Inline(Auto)和Vertical Align 到Start。这会将徽标定位在该部分的左侧，否则，将其定位到左侧，保存并发布。

使用 Elementor 编辑模板 navigation-menu，从小部件中搜索 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]。

第 4 步：使用 elementor 编辑 header 模板并使用简码 [cs_custom_header]。

使用 Elementor 编辑header 模板，然后从小部件列表中搜索ShortCode，然后将其拖放到该部分并输入以下短代码[cs_custom_header]。

第 5 步：编辑 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 来完成，所以我不会对所有内容都非常具体，只是一个指南。

步骤可能很长，但你会得到你想要的。

祝你有美好的一天。