Link within Paragraph or Text Block?

Fantastic - so happy this was added!

I have little blue underlines on my span that I can’t seem to get rid of. Anyone know? I can’t figure out where it’s coming from.

1 Like

@evan Can you send me a screenshot to support@webflow.com? Also, could you please include a public troubleshooting link so I can take a closer look? Thanks!

@callmevlad Ok - I sent it.

This is great! How do we changed the colour of the link?

@kain, we’re working on making this more obvious, but here’s how you’d do it:

  1. Double click on a text element, select part of the text, and make it into a link - it should be the default browser blue
  2. Click out of the text element, then hover over the link itself and click on it
  3. Add a class to the link, then style the Text Color property in the Typography section
  4. To remove the underline, click on the X button to clear the formatting:

Let me know if that doesn’t work for you.

1 Like

YAAAAAAY! Really glad to see this one.

1 Like

Hi @callmevlad, I’ve done an inline link using the span so I could assign it a class for links. When I turn the underline off for that class, the underline remains but reverts to the default link blue color:

Same with hover state:

Looking great so far!

Hi @callmevlad, I know it’s on your list for this feature, but an “Open in new tab” checkbox for the link url would be great as soon as you can get there!

Maybe in a future version, the UI could be brought more into alignment with other link objects - for example, when I click on the settings icon of the link ( ), it currently opens the settings panel, but there’s no Link Settings there as there is for other link objects. It would be great to just include the Link Settings section of that panel for inline text that has a link url assigned.

Come to think of it, any reason that using the settings icon on the link to open that panel couldn’t just be the sole or primary UI for setting links? I guess it would break down a pattern you’ve established between link objects and their non-link counterparts (like Text Link/Text Block and Link Block/Block), but that pattern always seems a little forced anyway. Perhaps Webflow might evolve to remove that distinction from the object type model and simply depend on whether the url field in an always-present Link Settings was populated or not?

Thanks!

Hey @ramatsu,

You actually don’t need another span inside a link just to style the link itself. Just click outside of the paragraph you’re editing, click on the link, and add a class directly to that. In fact, you can now add classes to strong (bold) and em (italic) nodes directly as well! No need to have a wrapper or inner span :smile:

I’ve also just pushed a change to make it harder to mess up with spans, so now a few things are slightly different (as of 5 minutes ago if you refresh your designer):

  • The span button is disabled, unless you select some text
  • If the selected text makes up the entirety of the outer node (e.g. you select all the text inside a strong tag or an a tag, the span button will remain disabled - this is to make sure that redundant spans are not created in places where you could just add a class to the outer node (the bold or the link tags in this example).
  • When a new span is added, Webflow will immediately switch context to that span and select it - so you can start adding classes to it right away

On, and for links, after you enter a link in the text editor, you can click out of that parent element (e.g. paragraph), then click on the link, and you should have full control of the behavior of that link through the Settings panel. It was very challenging trying to fit the entire Link Settings control panel to the tiny text editor, so we decided to go for this lightweight approach → create the base link inline with the text editor, then change settings by clicking directly on that link through the Settings panel if needed. Does that make sense?

By the way, the Text Block is going away soon in favor of a much more natural interaction! Stay tuned :smile:

Ah, that’s what I was suggesting above - I guess that when I was testing the span element I got it into a state where that didn’t work.

That’s not the first time I’ve asked about something to find out it’s done already or will be within a few days. Way cool!

1 Like

_blank as a minimum would be handy
or as ramatsu suggested use the panel as with other links.
Also if a mailto: link is used a blank browser page opens and then an email client - a little clumsy, can this be improved.

Otherwise great progress, look forward to other updates…

Tony

@PixelAce, you can set the target to _blank by selecting the link you created, going to the Settings tab, and clicking ‘Open in a new window’.

I’m taking a closer look at mailto - will update soon.

@ramatsu, I just pushed the change to remove Text Blocks, and make Div Blocks (and List Items) be editable by double clicking on them (when they’re empty). That means you can now have UL/LI elements without ugly nested Text Block divs inside of them. To revert a text DIV or LI back to a node that you can drag other nodes inside, just remove all the text and leave the text editor - it should go back to being a normal empty node.

Thanks Vlad, I missed that as I was only using the small pop-up menu

:0)

Hi Vlad

I have gone to select the ‘open in new tab’. The check box shows but it won’t accept my click.

The link I am setting up is at the very bottom of the page.

I have activated the public link for you to see. Have I done something wrong or is this a bug?

Your help is appreciated.

Tony

https://webflow.com/design/laura-test?preview=d4cf936b4b259340c6b0c039aea40fe0

I think it’s a bug.
I have fixed the issue and replicated it.

  1. I highlight text to make a link.
  2. In the pop-up I specify the URL
  3. Then I go to the settings tab for the ‘Link’ and the ‘Open in new
    tab’ cannot be selected
  4. I then click on ‘link to a page’ and back
    to the external link URL I re-enter the URL and the check box
    becomes clickable…

Looking more closely at the inline linking I have revisited for the mailto:link.

Initially I entered ‘mailto:123@xyz.com’ into the little pop-up window.
Doing that lead to the blank browser window opening before the email client was fired.

Now I have gone back to it and taken the ‘manual’ mailto link input out and used the Link Settings and the @Tab and now a browser window does not open.

I think the settings tab needs to be accessible in the small pop-up and then the confusion is minimised.

I hope this all helps.

Tony

Tony, thanks for the bug reports - I’m taking a look and hoping to fix soon!

Yes, definitely agree that the link settings should be accessible in the small popup! Working on it :smile: