ワードプレス 見出しデザイン変更について

 : 困ってます

お世話になります。

以下の件でお見積りをお願いしたいと思っております。

現在ワードプレスでHPを製作しています。
記事の見出しデザインの作業をしていましたがCSSをいじっても上手く反映されませんでした。

https://nakaeshogo.com/wp-htag-design/
こちらにそって実施していました。

キャッシュをクリアしたり、CSSを確認したりプラグインを停止したりなどwebに乗っているような事を一通り試しましたが上手く反映されませんでした。

デザインはこちらのHPから
https://saruwakakun.com/html-css/reference/h-design
いただいてきて

ビジュアルエディターの

見出し1を
1. シンプルな見出し・二重線
コード
h1 {
border-bottom: double 5px #FFC778;
/*線の種類（二重線）太さ 色*/
}

見出し2を
1. シンプルな見出し・左線
コード
h1 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}

見出し3を
1.シンプルな見出し・上下に線
コード
h1 {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

見出し4を
2. オシャレ系デザイン・タグ風
コード
h1{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

見出し5を
2. オシャレ系デザイン・吹き出し
コード
h1 {
position: relative;
padding: 0.6em;
background: #e0edff;
}

h1:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

以上のように変更させていただきたいと考えております。

上記の内容ですとおいくらくらいかかりますでしょうか？

お忙しいところ大変恐縮ですがご検討のほど宜しくお願いいたします。