Sidewidget:

This section displays the sidebar for the site with the following widgets:

  • Title image and content section.
  • Navigation menu.
  • Recent Posts.

By default this sidewidget can be added to the blog post layout by enabling the side widget in config.yml file as follows:

# Post Settings
# - Individual Post
post-layout: full-width  # Use options left-sidebar, right-sidebar, full-width

Use left-sidebar option to add side bar to the left side of the screen. Use right-sidebar option to add side bar to the right side of the screen.


Code:


<div class="darkout-section">
{% include do-side-widget.html %}
</div>


How to add content:

  • Step1: Navigate to the data file for sidewidget in _data > do-sidewidget.yml
  • Step2: Add content to the data file as shown in the below example.
- recent-post: true  # Use true or false
  title: Marketing  # Use side-widget title here
  content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use side-widget content here
  image: /assets/images/sample.jpg  # Use side-widget image here
  image-alt: dummy  # Use side-widget image-alt here
  nav: menu  # Use side-widget nav name here
  megamenu: megamenu-4  # Use side-widget megamenu-type here
  • Step3: In the data file set “recent-post” to “true” to display recent post section on side bar. set to “false” so that recent post section will not be displayed.

  • Step4: In the data file title, content and image attributes are used for a separate widget section on the sidebar. Add them accordingly to display it on the sidewidget.

  • Step5: In the data file “nav” option is used for the array name from the data file _data > do-menu.yml

menu:
- title: Home  # Use header title here
  href: /  # Use header title url here
  • Step6: The mentioned menu array will be displayed on the sidewidget.

  • Step7: In the data file “megamenu” option is used for the array name from the data file _data > do-menu.yml

megamenu-2:
- title:  # use menu title here
  image-url:  # Use mega menu column image url here
  option:
    - icon: <img src="/assets/images/icons/layout.svg">  # use submenu icon here
      title: Flexible and multi-purpose layouts  # use submenu title here
      url: /features/#flexible  # use submenu url here
      content: Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do  # use submenu content here
      content-url: /features/#flexible  # use submenu content-url here
  • Step8: The mentioned megamenu array will be displayed on the sidewidget.

How to add in page:

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

<div class="darkout-section">{% include do-side-widget.html %}</div>