How can I make hyperlinks in one Web section - jump to other sections within the same template

So, I found out that I can have multiple sections within a single template. Now I want to create links from one section to the other - the idea being that jumping form section to section is more efficient that loading web content from multiple web templates…

But then again - maybe I’m thinking of functionality that’s not there…

OK, so I’m going to try and answer my own question, which will raise another…

A relative link can be used to navigate across sections. However, the visible Section names (Section 1, Section 2, Section 3) are not the actual names of the html files which the hyperlinks need. I managed to find the actual html names for each section (in the template zip) and when I used these, it works perfectly.

So, here’s my next question… How can I get the actual html file name associated with each section - without having to dig deep into the template?

Hello Colin,

I think that you can use processes with create web content in workflow with the same template. In Create web content, you can select the section you want to download.

Hi Colin,

You could theoretically use anchors (<a name=“my_anchor”></a> , <a href=“#my_anchor”>link</a>) for this… but not between sections. Thing is, in Designer you can switch between sections but when you’re actually generating Web Content Items in Workflow, only one section is generated, the rest are not available.

So, if we’re talking about only using “Designer UI Features”, what you’re asking is not possible - either the whole page is shown, or none, and only one section at a time. If you accept that a refresh happens, my favourite is to have multiple snippets inside of a single template (rather than sections), then a very small script to handle them (see my Tips & Tricks post). This makes it easy to manage a single template with different contents loaded dynamically (what is generally called, well, a “template” in the web world), with a single CSS, and single instance of header and footer.

If you don’t want any refresh at all, you’ll have to dig a little deeper into JavaScript. For example, you use jQuery UI Tabs to show different sections when the user clicks a tab, or if you prefer to stick with Foundation (what we use for most templates), it has tabs also.

So yes the functionality is possible, just not with Sections. Personally, I don’t use sections in Web and Email contexts at all, just with Print.

Greetings,

In Connect Designer, the sections are considered as Web contexts.

The purpose of creating Web contexts is to send them to the Workflow tool, to generate Web pages based on that and also based on related Data mappers if applicable.

This can be done by using the plugin: Create Web Content, where there is the field: Section.

This field is the adequate place to reference a section.

Many sections ca be created in the same Web Page Template as needed, and referred in workflow tool by using the plugin: Create Web Content. The Http Server Input task is used to capture http gets/posts requests.

Evidently, a Section displayed as Web Page in a browser by the Workflow tool can send as well a post/get http request from a form or a simple hypertext link. This can be captured as well by another Http Server Input task and generate a Web Page based on a Web context using another section created in the same Web Page template

The following online course explains basically how to generate html files or web pages, in workflow tool, based on a Web context created by Connect Designer:

http://learn.objectiflune.com/planetpress-connect/workflow/introduction/part3

Hope this will help.

Regards,

Thanks everyone, very helpful.

There can be several ways to design a layout, but you need to be more careful about its responsiveness. Actually wide varieties of screen size are out there from smart phones to 4k monitors. Really it’s hard to make a design that could fit exact within all these devices. Some of the developers use PhotoShop to design theme’s layout and further by slicing it converts to WordPress. No doubt it’s an easy way but not that effective in order to make a responsive layout. Dreamviewer is also an alternative option, hence you can look forward to it. For the most prominent steps to create an ideal layout you can see http://singapore.fortune-softtech.com/8-most-significant-steps-design-perfect-website-layout.