Bu Wordpress'de nasıl yapılır?

Merhaba, bir blog konusu önerici yapmak istiyorum. Elementor vs ile de olabilir ama bunu nasıl yapabilirim?

Elementor ile yapılır ama html ile de yapılır Örnek gösterdiğin site'de mouse duyarlı arkaplanın adı neydi ya ?

Cümleleri veritabanına kayıt ettirecek bir araç yazarsın. Ardından butona bastığında ajax ile verileri çeker ve yazdırırsın

<center><div class="fikir"></div></center>
<center><div id="gonder" onclick="generatefikir()"><span class="fikir-text">fikir üret</span></div></center>

#secme {
  border-style: solid;
  border-color: #1b1b1b;
  border-width: 1px;
  border-radius: 5px;
  background-color: white;
  font-size: 10px;
  margin: 5px;
  padding: 20px;
  padding-left: 20px;
  padding-right: 20px;
  width: 465px;
}

#gonder  {
display:inline-block;
padding:0.35em 1.2em;
border:0.01em solid #ECC31FFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
background-color:#ECC31FFF;
font-family: "Open Sans";
font-weight:900;
color:#1b1b1b;
text-align:center;
transition: all 0.2s;
font-size: 1.4em
}

#gonder:hover{
color:#f2f2f2;
background-color:#1b1b1b;
border-color: #f2f2f2;
Cursor: pointer;
}




.fikir {
display:inline-block;
padding:0.35em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
font-family: "Open Sans";
font-weight:100;
color:#444;
text-align:center;
transition: all 0.2s;
font-size: 1.5em
}

 const fikir = document.querySelector('.fikir')
  const gonder = document.querySelector('gonder')
  let secme = document.querySelector('#secme')
  
  const pool = ['Birinci öneri konusu', 'İkinci öneri konusu', 'Üçüncü öneri konusu']
0
  function generatefikir() {
    fikir.innerText = pool[Math.floor(Math.random(pool) * pool.length)]
  }