This section covers some of the more advanced options available in C4EBridge, such as adding PDFs and smooth scrolling links or using shortcodes. These routines allow you to enhance your lesson pages and maximize your efficiency when working in C4EBridge!

ADD SMOOTH SCROLLING LINKS

Smooth scrolling links let you add a link and target on your lesson page so that users can quickly navigate to the specific target when the link is clicked. This not only adds visual interest to your lesson page but also allows for more efficient scrolling. In the steps below, we will link an icon to the ‘Sample PDF’ document at the bottom of the lesson page, so that users are navigated to the PDF once they click the icon. To create a smooth scrolling link, you must first define your target (the item that you want to link to) and your link (what must be clicked). From the Lesson Editor, locate your target item. As, in this example, our target item is the ‘Sample PDF’ document, we will need to access the target item’s settings panel by selecting the Document Settings option:

From your item’s settings panel, locate the HTML Element > ID field on the Advanced tab. In this field, enter a unique ID for this tool module:

Your unique ID must start with a letter and can contain dashes, underscores, letters, or numbers. No spaces are allowed.

Once you have added your unique ID, click SAVE to return to the Lesson Editor. Make note of the ID you created as you will need this for the next step. Next, add the item you will use as your link from the Add Content menu (i.e., an icon or text editor). For this example, we will use the icon tool:

Once the icon has been added, access the icon tool’s settings panel by selecting the Icon Settings option:

From the General tab, access the text field, add your descriptive text, and then highlight the text you wish to link to, then use the hyperlink tool to add your unique ID. If the item is on the same page, then ensure you add a pound(#) sign before the text (ensure it is exactly the same as the unique ID you added for target):

Once you have added your ID to your link, click SAVE to save your changes. When previewing your lesson page (with editing off), you should now be able to click on the link to scroll to your target quickly and easily. Ensure you select Done > Publish

Shortcodes can be added to any text editor across C4EBridge, allowing you to insert saved items (i.e., saved tools) or layouts (i.e., saved columns) into other modules and layouts in the Lesson Editor. Shortcodes are typically reserved for when needing to easily add more complex items into a page (for example, when needing to add a form into a page) or in areas where only text can be entered. Shortcodes can be created for all Lesson Editor items that have IDs, including layouts, rows, columns, and pages.

Before an item can be added via a shortcode, this item must FIRST be saved as a reusable item “template” using the Save As feature. To learn more this feature, visit the Save As a Row, Column, or Tool for Reuse section.

To create a shortcode for a saved item:

• Obtain the item slug or ID. To do so, you can access COURSES > MANAGE TEMPLATES and select the appropriate category for your saved item (i.e., Tools):

  

  Locate the saved item you wish to create a shortcode for and click EDIT SETTINGS (in this example, we are going to create a shortcode for an icon group):

  

  From the Edit Saved Tool window, access the Screen Options menu and ensure SLUG is checked:

  

  Once SLUG has been checked, click SCREEN OPTIONS again to collapse this menu. Copy the item slug, OR locate the item ID in the URL (this appears after ‘post=’):

  

• Add the item shortcode to the text editor. Once you have the item slug or ID, access the Lesson Editor window (with editing on), and locate where you want to add the item shortcode. For example, if you wish to add the saved icon group to a callout tool, locate the tool on your lesson page and access its settings panel:

  

  Add your shortcode to the callout text editor using the following strings:
  • If using the item slug: {fl_builder_insert_layout slug=”icon-group”}
  • If using the item ID: {fl_builder_insert_layout id=”7661″}

  

  Click SAVE to save your changes. Once saved, your item shortcode should now be displayed on your lesson page, as in the screenshot below. Note the addition of the icon group, which we added via shortcode:

  

”