Tutorials

Advanced Techniques

Table of Contents

ADVANCED TECHNIQUES

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:

courses04c035

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:

courses04c036

image3078Your 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:

courses04c037

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

courses04c039

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):

courses04c039

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
image3078
If the link is to a target in another lesson, the link should be the full URL or you can find the lesson by selecting the link in the text editor and either start typing the name of the lesson in the field and the lessons will automatically populate…courses04c040 …or select the Settings wheel and search for the existing lesson in the dropdown, select it and then add your unique ID to the end of the URL for example: courses04c041 Ensure you select the arrow to for the URL to stick courses04c042 Then select Save Select Done > Publish and test it.

SHORTCODES

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.

image3078Before 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):

    courses04c043

    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):

    courses04c044

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

    courses04c045

    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=’):

    courses04c046

  • 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:

    courses04c047

    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″}

    courses04c048

    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:

    courses04c049

Previous Colors
Next Responsive Design
Table of Contents