Adding a hyperlink to HTML Code

[maverick99]

Attn HTML Experts

Can anyone care to modify the HTML code below to incorporate a hyperlink "#" so that when clicked, it opens a webpage page on the same tab ?

<p class="color-white text-center" style="letter-spacing: 0.1em; font-weight: bold; display: block; line-height: 1.5; padding: 5px 0; margin-bottom: 0;">INTRODUCING OUR NEW BONNA COLLECTION: BLUE WAVE, MESOPOTAMIA &amp; SWAY COLLECTION - MADE by <span class="nasa-underline">Bonna Premium Porcelain</span></p>

Webpage image banner



The hyperlink should be linked to the text "Bonna Premium Porcelain".

The hyperlink "#" will be replaced by the relevant webpage link.

Thanks in Advance.

 

[Malcolm]

Hi @maverick99,

Welcome to Code Forum! So my understanding is that you want to make Bonna Premium Porclain as hyperlink. You can do this by wrapping the phrase within an anchor tag <a>. The code would look something like this:

<p class="color-white text-center" style="letter-spacing: 0.1em; font-weight: bold; display: block; line-height: 1.5; padding: 5px 0; margin-bottom: 0">
    INTRODUCING OUR NEW BONNA COLLECTION: BLUE WAVE, MESOPOTAMIA &amp; SWAY COLLECTION - MADE by <span class="nasa-underline"><a href="#">Bonna Premium Porcelain</a></span>
</p>

 

[maverick99]

Hi @maverick99,

Welcome to Code Forum! So my understanding is that you want to make Bonna Premium Porclain as hyperlink. You can do this by wrapping the phrase within an anchor tag <a>. The code would look something like this:

<p class="color-white text-center" style="letter-spacing: 0.1em; font-weight: bold; display: block; line-height: 1.5; padding: 5px 0; margin-bottom: 0">
    INTRODUCING OUR NEW BONNA COLLECTION: BLUE WAVE, MESOPOTAMIA &amp; SWAY COLLECTION - MADE by <span class="nasa-underline"><a href="#">Bonna Premium Porcelain</a></span>
</p>

As simple as that !

Thanks for sharing the code, however, can we improve the aesthetics ?

On page load up screenshot



On mouse hover screenshot



Can you modify the code so that the text 'Bonna Premium Porcelain' is displayed in white color ? On mouse hover, it should also display in white colour.

Rgds

 

[Johna]

As simple as that !

Thanks for sharing the code, however, can we improve the aesthetics ?

On page load up screenshot

View attachment 2978

On mouse hover screenshot

View attachment 2979

Can you modify the code so that the text 'Bonna Premium Porcelain' is displayed in white color ? On mouse hover, it should also display in white colour.

Rgds

Hey there,
So this is done with CSS. In the head of your HTML document, add a style element and then select the hyperlink. This can be done by giving the like an id (id="id-name") and then selecting it in the CSS with #id-name. After selecting the element you can give it a colour with the color property.

It should look something like this:

<style>
#hyperlink {
  color: white;
}

#hyperlink:hover {
  color: white;
}
</style>

 

[maverick99]

Hey there,
So this is done with CSS. In the head of your HTML document, add a style element and then select the hyperlink. This can be done by giving the like an id (id="id-name") and then selecting it in the CSS with #id-name. After selecting the element you can give it a colour with the color property.

It should look something like this:

<style>
#hyperlink {
  color: white;
}

#hyperlink:hover {
  color: white;
}
</style>

How do I incorporate this into the Elementor section ?

The banner is designed with Elementor page builder.

 

[Johna]

How do I incorporate this into the Elementor section ?

The banner is designed with Elementor page builder.

View attachment 2980

I haven't ever used this, but perhaps it's in the "Advanced" tab?

 

[maverick99]

I haven't ever used this, but perhaps it's in the "Advanced" tab?

Here's the screenshot for the Adv TAB.



There is aa Custom CSS TAB, but it's blocked. 🙁

 

[Johna]

It seems strange that it wouldn't allow you to directly change the colour without even using CSS.

If you can add attributes, try adding something like style="color: white;"

 

[maverick99]

It seems strange that it wouldn't allow you to directly change the colour without even using CSS.

If you can add attributes, try adding something like style="color: white;"

This worked:

<p class="color-white text-center" style="letter-spacing: 0.1em; font-weight: bold; display: block; line-height: 1.5; padding: 5px 0; margin-bottom: 0">
    INTRODUCING OUR NEW BONNA COLLECTION: BLUE WAVE, MESOPOTAMIA &amp; SWAY COLLECTION - MADE by <span class="nasa-underline"><a style="color: white;" href="#">Bonna Premium Porcelain</a></span>
</p>

Thanks.