Section Anchors & Hidden Anchor Points

Step 1: Find the Add Block Button

At the bottom of the editing screen select the arrow box next to the "Accordion Block" box.

Accordion Block Highlighted

Step 2: Add the Row

A dropdown menu will appear, select "Section Anchors" which will create a Section Anchor row on your page.

Screenshot of Add Section Anchor Option

Step 3: Section Anchor Settings

Select an Alignment, a Section Anchor Style, and a Background Color for your Section Anchor.

Screenshot of Section Anchor Alignment, Section Anchors Style, and Background Color Options

Step 4: Adding Hidden Anchor Points

Go to the "Section Anchors" section and fill in the URL and Link Text a page or Hidden Anchor Point that you want the user to redirect to. The website must be within the same domain. To redirect to a Hidden Anchor Point, the Hidden Anchor Point must be created first (See below for instructions), once it has been created, the name of your anchor points in the URL text that is all lowercase, has a hashtag before it and a dash in between every space. For example, to redirect to a Hidden Anchor Point titled: "Example Anchor Point" type "#example-anchor-point" into the URL.  Be sure not to name Hidden Anchor Points with longs names or special characters so that it is accessible and user friendly. 

Screenshot of Section Anchor URL and URL Link text Options

Step 5: Hidden Anchor Points on Other Pages

Section Anchors can also redirect to Hidden Anchor points on other pages, to do this type the pages URL the Hidden Anchor Points name with a hashtag and dashes into the URL box. For example, to link to a Hidden Anchor point on the example page for Section Anchors, insert the URL: "www.webstyle.uccs.edu/row-types/anchor-points-examples" then, insert the name of the Hidden Anchor Point: "Example Anchor Point" with a hashtag and dashes: "www.webstyle.uccs.edu/row-types/anchor-points-examples#example-anchor-point

Screenshot of Example Section Anchor URL

Side Nav Linking

Section Anchors can also redirect to Side Nav Content Sections. If you are not familiar with Side Navs see the tutorial here. To redirect to a Side Nav Section, type the title of the Side Nav Content section with a hashtag, dashes and all lower case. For example, to link to a section titled "Example Side Nav Section", type #example-side-nav-section into the URL. If the Side Nav is on a separate page type the URL before the hashtag (e.g. https://uccs.edu/page#example-side-nav-section) Note: Do not put special characters into Side Nav titles if you want to redirect to them, it will not properly redirect.

Screenshot of Example Side Nav Section Anchor

Step 1: Find the Add Block Button

At the bottom of the editing screen select the arrow box next to the "Accordion Block" box.

Accordion Block Highlighted

Step 2: Adding the Block

A dropdown menu will appear, select "Hidden Anchor Point" which will create a Hidden Anchor Point Row on your page. 

Screenshot of Add Hidden Anchor Point Option

Step 3: Hidden Anchor Point Naming

Insert a name into the Anchor Name section and move this row into the place that the user will redirect to make sure the name is not too long and does not have special characters or numbers to be URL friendly.  Hidden Anchor Points will not appear to the user, and will only appear in the main editing screen. 

Screenshot of Hidden Anchor Point Name Option

Section Anchors & Hidden Anchor Points Video Tutorial

Section Anchors & Hidden Anchor Point rows are a way of allowing the user to redirect to other pages or specific points on a page. Watch our video tutorial to learn how to create and use one.