Show Options

Widget Navigation:

This section consist of a number of gradient buttons with links.


Available Options:

  • Widget Navigation with number of buttons.

Widget Navigation with number of buttons:

Output:

Code:


<div class="darkout-section">
  {% include do-widget-nav.html tag="module" buttons=4 %}
</div>


How to add content:

  • Step1: Navigate to the data file for widget navigation in _data > do-widget-nav.yml
  • Step2: Add content to the data file as shown in the below example.
- tags: module  # Use carousel logo tag here
  buttons:
    - name: Button - 1  # Use button name here
      href: /#  # Use button url here
      gradient: green  # Use green, purple, blue, yellow, pink as gradient color here
  • Step3: In the data file tags is a mandatory value. Without using tags widget navigation will not be displayed.

How to add in page:

  • Step1: Add widget navigation to the page using the include statement.
  • Step2: On the page use

<div class="darkout-section">{% include do-widget-nav.html tag="module" buttons=4 %}</div>

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag widget navigation will not be displayed. (Mandatory)
    • Buttons: Use number of buttons here.
      • 2, 3, 4 and 6 buttons. 3 buttons is the default options.
    • Class:
      • Use additional class here as include variable.