Anchors practice

Never used anchors had to look up tailwind and css so just starting not sure what is required no idea if I will be able to do much more but first go for practice

An anchor is really just a marker on a page with a specified ID. You can then create a link to the ID. When the link is clicked it will jump to the marker. These markers can be ID’s that are specified in different elements such as a header. But most commonly you insert the marker at a location on a page and then by linking to it you can jump to that part of the page.

These anchors can also be set on a different page allowing you to jump from one page to a specific part of another page. There is a specific syntax used when specifying this type of link. The normal in page anchor is simply specified as #anchor-name

An anchor if written in HTML looks as follows.

<a id="anchor-name">The  name where you want to jump</a>

There can only be one anchor on a page with a specified ID, so if there are multiple anchors they all have to have unique IDs.

1 Like

@upssjw nice work!

@handshaper next beta of Elements should include anchor support :wink:

3 Likes

Excellent

1 Like

Yippee!

1 Like

Hiya, Dan. I’m using the beta in a side-by-side mode with Classic to create a one page site. I want to have links in the menu to sections of the page. Easy enough in Classic. And, it seems it will be easy in Elements once anchor support is ready. But I’ll be curious to see how the site menu can be built to include the link to those anchor points. Hopefully you can cover that in the video that introduces the arrival of anchor support.

Thanks!

2 Likes

ok progressing my practice I started with 3 links then moved to adding a new link into the popover menu it works except for the added line with the adding a link, this is a good practice for me, hopefully I will get where ll links are added by dropping in into a component
hihi was dropped in as a component

1 Like

had 15 mins before need to go out
now the links and anchors are jut drop in, will use Elements components to drop in for anchors hopefully, just need to name components on left to align

Nice work, this is what makes Elements so powerful, you can easily roll your own solutions :nerd_face:

The next beta we release will have Anchors a little more tightly integrated :wink:

Have a good weekend!

just got back, 15 more minutes, made some progress

I need to have switch to make popover visible in edit, only manually entered code it works

almost finished for now

1 Like

That’s a great little component you’ve built there. Love it!

1 Like

I hope the anchor support in Elements will allow one to assign an ID to almost any component and then be able to link to that ID in order to jump to the location of the component. In addition, to having a dedicated anchor component that can be place anywhere.

I fogot to label the second link to mid, just for ease of viewing, the important bit is the link and anchor naming is the same

still progress to be made, some bugs I expect, and a few controls to add, this is just practice for me as I am still trying improve my tailwind etc

blank version

elementsapp://downloadDocument/uCYYSM0rd5SR

my example

elementsapp://downloadDocument/jdhC97MGxdZ1

1 Like

In theory… If ALL components can have an ID, why would there be a need for a separate Anchor component? :face_with_monocle:

1 Like

you can use the link and anchor without the popover, needs some control to make that a bit better

You are correct if ALL components can have an anchor ID then there would be no need for a separate component. At least for my needs. The operative word here being - ALL.

The only reason I could see for one is that it might be much easier to identify it in a layout. If ALL components have the potential to be assigned an ID, there is no visual clue that one has been assigned. So you would be always looking in the property inspector to find the presence of one. That is unless you have plans of making this more visible in the UI.

Perfect!

ok the previous downloads were missing a div, when you keep trying things my closing divs get left or not deleted

I added an extra drop zone you can drop an anchor not just in the original drop zone

new blank

elementsapp://downloadDocument/5V942db2vlZe

example
elementsapp://downloadDocument/g8mSCKJ2yWwW