There is such a plugin as the Page Builder from SiteOrigin. I want to make the same animation window. I am writing code through builder

<a href="/kompleksnaya-strategiya/"> <img src="/wp-content/uploads/2017/07/line-1.svg" class="mainpage__service__svg" /> <div class="mainpage__service__caption"> <img src="/wp-content/uploads/2017/07/1.svg" class="img-responsive mainpage__service__img" /> <div class="mainpage__service__title">КОМПЛЕКСНАЯ<br>PERFORMANCE<br>СТРАТЕГИЯ</div> </div> <div class="mainpage__service__descr"> Это комплексная стратегия продвижения в digital-среде, целью которой является достижение конкретных и измеримых результатов. </div> </a>

I click save and after that the bloder changed the code itself a little

  <a href="/kompleksnaya-strategiya/"> <img class="mainpage__service__svg" src="/wp-content/uploads/2017/07/line-1.svg" /></a> <div class="mainpage__service__caption"> <img class="img-responsive mainpage__service__img" src="/wp-content/uploads/2017/07/1.svg" /> <div class="mainpage__service__title"> КОМПЛЕКСНАЯ PERFORMANCE СТРАТЕГИЯ</div> </div> <div class="mainpage__service__descr"> Это комплексная стратегия продвижения в digital-среде, целью которой является достижение конкретных и измеримых результатов. </div>

And the animation does not work and the text is floating .... enter image description here SSS stl here (yourself svg image)

 .mainpage__service{ display: block; text-decoration: none; padding: 80px 0; height: 280px; position: relative; } .mainpage__service__svg { position: absolute; top: 0; left: 0; pointer-events: none; } .mainpage__service__svg:hover { fill: #f4783e; /* цвет обводки */ stroke: white; /* имя анимации (keyframes) */ animation-name: draw_symbol; /* длительность анимации */ animation-duration: 2.5s; } @media (max-width: 767px){ .mainpage__service__svg { display: none; } } .mainpage__service__svg line { stroke-width: 1; stroke: #F3773D; fill: none; -webkit-transition: -webkit-transform .6s ease-out; transition: transform .6s ease-out; } .mainpage__service .mainpage__service__svg line.top, .mainpage__service .mainpage__service__svg line.bottom { stroke-dasharray: 390; } .mainpage__service:hover .mainpage__service__svg line.left, .mainpage__service:hover .mainpage__service__svg line.right { stroke-dasharray: 280; } .mainpage__service .mainpage__service__svg line.top{ -webkit-transform: translateX(-390px); transform: translateX(-390px); } .mainpage__service .mainpage__service__svg line.bottom { -webkit-transform: translateX(390px); transform: translateX(390px); } .mainpage__service .mainpage__service__svg line.left { -webkit-transform: translateY(-280px); transform: translateY(-280px); } .mainpage__service .mainpage__service__svg line.right { -webkit-transform: translateY(280px); transform: translateY(280px); } .mainpage__service:hover .mainpage__service__svg line { transition-delay: 0ms; } .mainpage__service:hover .mainpage__service__svg line { transition-delay: 150ms; } .mainpage__service:hover .mainpage__service__svg line.top, .mainpage__service:hover .mainpage__service__svg line.bottom { -webkit-transform: translateX(0); transform: translateX(0); } .mainpage__service:hover .mainpage__service__svg line.left, .mainpage__service:hover .mainpage__service__svg line.right { -webkit-transform: translateY(0); transform: translateY(0); } .mainpage__service__caption{ font-size: 0; text-align: center; margin-bottom: 30px; } .mainpage__service__img, .mainpage__service__title{ display: inline-block; vertical-align: middle; } .mainpage__service__img{ fill: #18242c; display: inline-block; width: 122px; margin-right: 19px; -webkit-transition: fill .9s; -o-transition: fill .9s; transition: fill .9s; } .mainpage__service:hover .mainpage__service__img{ fill: #F3773D; } .mainpage__service__img .st1{ fill:#1e94d2 } .mainpage__service__title{ display: inline-block; font-size: 20px; font-family: "Roboto"; color: #18242c; text-transform: uppercase; line-height: 1.2; text-align: left; width: 150px; } .mainpage__service__descr{ font-size: 14px; font-family: "Roboto"; color: rgba(24, 36, 44, 0.78); line-height: 1.2; text-align: center; max-width: 280px; margin: auto; }
  • You have an error in the layout, so he closes the blocks where he wants. Add in the end before the tag </a> closing tag `</ div> ' - Klimenkomud
  • It did not give any results - Ilya Burmaka
  • Correct your html in the question so that you can see where and what you should be in, then it will be clear what and where you wrote incorrectly. - Klimenkomud

1 answer 1

I did it differently, I created an additional file in .php format, I inserted all the code there, I connected it via the include () command; and the PHP Code Widget plugin did great!