Weebly Tip of the Week: Visual Table of Contents

[RiahG]

Want to direct visitors to other pages on your site (or even sections on the same page) in a dramatic, visual way? Create a Gallery Table of Contents! 

Creating a table of contents in this way gives your visitors a taste of what they'll see by clicking through, and it gives your page added visual interest to boot.

This is pretty easy to do, but not immediately obvious. There are several steps involved, so we’ll go through it with pictures!

First add a Gallery element to your page. 

Then upload whatever images you want to use, one for each page or section to which you want to link.

Click on the individual image to bring up that image’s dialog box, where you can delete, caption and link. Delete any you don’t want in there! 

Add a caption for each by clicking Caption.

Enter your caption, then hit Done.

Click on the Gallery’s settings (click on the white space below or above images if it’s not coming up), and adjust the number of columns to your liking.

Now within the same settings box go into Caption > Thumbnail, and either choose Lightbox & Partial Thumbnails or Lightbox & Full Thumbnails. The two options look like this:

If you want, these can display at all times, or you can select them to display on hover. 

Now, click on the image again and select Link, and link to another page on your site. 

(Note that you can create a link on the same page by creating an anchor link, follow the directions at the HC article link below.)

Once all your links are set, Publish and you're done! Links as usual aren't active within the Editor, so once you publish you should test them all to make sure they're working.

Here are some related Help Center articles, if you get stuck on some of the steps.

Links https://hc.weebly.com/hc/en-us/articles/201018148-Create-Links

Anchor Links (if you want to create a link for somewhere else on the same page) https://hc.weebly.com/hc/en-us/articles/203905186-Create-Anchor-Links

Gallery element https://hc.weebly.com/hc/en-us/articles/201273653-Upload-Multiple-Images-w-Slideshows-and-Galleries

Share your own table of contents in the comments!

-Riah

Content Producer & Community Specialist

[TrishO]

The problem with Gallery is that you cannot add Alt Text for visually impaired or Pinterest captions.

I had to change my gallery to individual clickable images.

Use the gallery concept, except make each image stand alone.

http://www.chromatherapylight.com/chroma-topics-chroma-therapy-light.html

(PS, I still have to add the alt text, the site isn't ready for public viewing yet.)

for more information on Alt Text view my page

http://www.chromatherapylight.com/guidelines-for-guest-editors.html

Thanks Trish

[Schoolatmayland]

Those are some awesome tips!!

[pcantellow]

I really like anchor links and it's great that weebly support it!

But, galleries don't load correctly on mobile (and I just happened to make an idea about this).

According to your CS, 'links override captions' on mobile - meaning visitors only see a picture with no caption.

[Adam7]

If you want your captions visible on mobile you might want to change them so they're visible all the time.  This might mean you need to change themes, though, since some themes cover the whole image with the caption.

[Schoolatmayland]

thanks for the tip ;}

[NateMcClain_Art]

Thank you VERY much as this will totally help from an SEO perspective.

Originally, I had Captions set to "Display on Hover" with "Lightbox Only" and my captions/links were not visible from an SEO perspective

I turned on Lightbox & Full Thumbnails on and now my captions/links appear for SEO (works for partial thumbnails too)!!

Here's my page with the new settings: http://www.natemcclain.com/portfolio.html

Also, here's the SEO before & after via http://www.browseo.net