在wordpress中创建图形元素

Question

我有一个关于 Wordpress 和 elementor 的问题。我试图创建一个像这样的图形元素，但我不知道是否可以这样做。这个元素会出现在每一页上（矩形）。如果有人有创造这个的想法，我就是一个接受者。提前谢谢你

graphic element

Answer 1

这里有一个可能符合您需求的解决方案：

.element-wrapper{
  display:flex;
  align-items:center;
  justify-content: space-between;
  position:relative;
}


.element-wrapper .text{
  background-color:tomato;
  color:#fff;
  font-size:20px;
  padding:10px;
  width:60%;
  position:relative;
  z-index:2;
}

.element-wrapper .text:after{
  content:'';
  display:block;
  width:20px;
  height:20px;
  position:absolute;
  background-color:#fff;
  right:-10px;
  top:-10px;
  transform: rotate(45deg);
}

.element-wrapper .text span{
  display:block;
  
}

.element-wrapper .line{
  background-color:tomato;
  height:1px;
  position: absolute;
  width:100%;
  z-index:1;
}

.element-wrapper .face-wrapper{
  position: relative;
  z-index:1;
  width:50px;
  height:50px;
  background-color: #fff;
  padding:20px;
}

.element-wrapper .face{
  background-image: url("https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210522_960_720.png");
  background-size:cover;
  width:100%;
  height:100%;
}

<div class="element-wrapper">

  <div class="text">
    <span class="title">Defile de cosplay</span>
    <span class="content">Lorem ipsum dolor sit amet</span>
  </div>
  <div class="line">
  </div>
  <div class="face-wrapper">
    <div class="face">
      
    </div>
  </div>
</div>

在wordpress中创建图形元素

Creation of graphic element in wordpress

wordpress

elementor