Using the link target types (eg: modals)

In most of the Page builder elements or theme’s options, you’ll find options as links, having 3 fields: the url, the target of the link, and the URL’s title. For example in Theme options > General options > Header – Call to action options, which is in fact just a button/link in the header:

What makes this option field so special is the diversity of the link targets, which can be either simple “same window”/”new window” or links that will open modal windows with various content.

The target types are:

  • Same window
  • New window
  • Modal Image
  • Modal Iframe
  • Modal inline content
  • Modal Inline – Dynamic
  • Smooth scroll to anchor

 

Same Window:#

Nothing special, the link will just redirect to the specified link in the same tab/window.

 

New Window:#

This target type will open the specified link into a new tab/window. Good for external links.

 

Video Screencast: https://youtu.be/Z-ZAxkDTNLA?t=642

This target-type, will open an image into a modal window: eg: http://hogash.d.pr/19y4z . You will need to link to the image directly and getting the link is very easy eg: http://hogash.d.pr/1hSnP .

 

Video Screencast: https://youtu.be/Z-ZAxkDTNLA?t=461

This will open a link you specify into the URL field, into a modal window, for example: http://hogash.d.pr/1apph .

 

Video Screencast:  https://youtu.be/Z-ZAxkDTNLA?t=4

Adding Inline Modals Globally:  https://youtu.be/Z-ZAxkDTNLA?t=242

This target type will open a modal window with custom defined content inside, eg: http://hogash.d.pr/1lu8k . To achieve this, you’ll first need to know the target’s ID and you will need to use it inside the URL field.

First you’ll need to define the content that will be loaded inline. The element that will hold the content is a Section but it’ll need some configs. Create a new section, add your content inside and then open the Section’s options and go to the Advanced tab. Here enable the Inline modal toggle eg: http://hogash.d.pr/12CC5 . This option will change make the section visible on Page builder editing mode, but hidden in View mode (public), and as you can see here http://hogash.d.pr/1lkrO there will be a badge onto the top right corner of the section, called “MODAL WINDOW”.

Assuming you created the content in the section and enabled the Modal option, you will need to get the ID of the section so you can make the link. Access the options of a particular Section element from the page you’re editing with the page builder. To get the ID, go to HELP tab, located the Unique ID field, and click it to copy the ID, eg: http://hogash.d.pr/10HNU .

Now, you’re having the ID copied on the clipboard. Go to the element where the link field is placed, and inside the URL field, paste the ID, eg: http://hogash.d.pr/R10m . As you can notice, there’s a “#” hash symbol right before the ID. You will need to add it manually. This will “tell” the URL that it’s a hash link and will link to a specific area in the page.

 

This option was mostly developed for a certain type of scenario. It’ll only link to a modal inline window, with a Contact form inside, to pass text from link onto the form. The scenario is something like this: You have a list of services showcased by some Image boxes or Icon boxes (or whatever content), each one having a call to action button, for example to get a quote for that particular service. Here’s a quick demo video how it works http://hogash.d.pr/14X1U (the INTEREST field from the form, will contain the dynamic value of the image boxes’s link title). This will help having a single form for all the image boxes elements.

Basically the behaviour is the same as the “Modal Inline Content” so you can follow the steps above and do the exact same thing. The only difference, will be that you have to fill the “title” field of the link option. This will be passed onto the form’s dynamic field.

Onto the form, there’s only one special step you have to make. Just create a form and for the “dynamic” field which will be filled with the link’s title content, upon creating the form fields, select “Dynamic” as field type, eg: http://hogash.d.pr/10O45 .

This feature is limited to only one single Dynamic field in the form. If you’ll be adding more than one, they won’t be filled at all, just the first one.

 

SmoothScroll to anchor:#

This target type, will link to a specific area on the same page, but with a smooth scrolling effect, eg: http://hogash.d.pr/14Z3Z . To achieve this, you’ll first need to know the target’s ID and you will need to use it inside the URL field.

To begin, first you’ll need to access the options of a particular element from the page you’re editing with the page builder. To get the ID, go to HELP tab, located the Unique ID field, and click it to copy the ID, eg: http://hogash.d.pr/10HNU .

Now, you’re having the ID copied on the clipboard. Go to the element where the link field is placed, and inside the URL field, paste the ID, eg: http://hogash.d.pr/R10m . As you can notice, there’s a “#” hash symbol right before the ID. You will need to add it manually. This will “tell” the URL that it’s a hash link and will link to a specific area in the page.

After doing these, save & close and double check the page, normally the link should smooth scroll to the target anchor.

Screencast#