https://winstar.co.nz

Add a code module to the divi page and paste in the code below

<div class=”text-effect”>
<!– Select the text in the preview and type in your own –>
<h1 class=”neon” data-text=”https://winstar.co.nz” >https://winstar.co.nz</h1>
<div class=”gradient”></div>
<div class=”spotlight”></div>
</div>

Change the https://winstar.co.nz with the text you want to show

Add the following CSS to the page css, stylesheet or divi theme css

.text-effect {
overflow: hidden;
position: relative;
filter: contrast(110%) brightness(190%);
}
.neon {
position: relative;
background: black;
color: transparent;
}
.neon::before, .neon::after {
content: attr(data-text);
color: white;
filter: blur(0.02em);
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.neon::after {
mix-blend-mode: difference;
}
.gradient, .spotlight {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
z-index: 10;
}
.gradient {
background: linear-gradient(15deg, #063b43, #e5e18a);
mix-blend-mode: multiply;
}
.spotlight {
animation: light 25s infinite linear;
background: radial-gradient(circle, #063b43, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
top: -100%;
left: -100%;
mix-blend-mode: color-dodge;
}
@keyframes light {
100% {
transform: translate3d(50%, 50%, 0);
}
}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
.neon {
font: 100 25x ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
.neon {
font: 100 25px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}
@media (min-width:1281px) { /* hi-res laptops and desktops */
.neon {
font: 400 110px ‘Rock Salt’, cursive;
text-align: center;
margin: 0;
}}

.neon:focus {
outline: none;
border: 1px dotted white;
}

To Change the speed of the effect

In the CSS change the number below:

animation: light 25s infinite linear;

To make the effect faster change it to a smaller number E.g.

animation: light 5s infinite linear;

To make the effect slower change it to a larger number E.g.

animation: light 50s infinite linear;

To Change the colour of the effect

In the CSS change the colours below:

 background: linear-gradient(15deg, #063b43, #e5e18a);

If the edit section / row / module is not showing the titles as per the image, then you have probably set you H3 tag to be white text.

To fix this either in the theme stylesheet or in the divi theme css settings, set the following:

//You can set the color the to be any you like other than white (#ffffff)  

.et-fb-form__toggle-title h3{
color: #000000 !important;
}

In the divi general css section add

.woocommerce a.button:hover {
padding: 0.3em 1em !important;
}

.woocommerce a.button:after {
display: none;
}