Put the Article Index in a Module Position

How easy is it? It's easier than you think. With one of my free plugins, it's even easier.

1. You need to download my HeadTag plugin - don't worry, it's one of my free extensions.
   1. Enable and configure the plugin, setting "Process Content Tags" to "Yes"
2. Create a new "Custom" module.
   1. Assign it to whatever module position you want the article index to appear
   2. Set "Show Title" to "No"
   3. Assign it to appear on all pages
   4. In the "Options" tab, set "Prepare Content" to "Yes"
   5. In the "Advanced" tab, set the "Module Style" to "HTML5" (this is optional, you will probably want to try others depending on your template)
3. Use the "Toggle Editor" button to view the module content source code, and add the following code:

<div id="mod_article_index">
{headtag:scriptdeclaration}
(function(){
    document.addEventListener('DOMContentLoaded',function(){
        var ai = document.getElementsByClassName('article-index');
        var target = document.getElementById('mod_article_index');
        target.appendChild(ai[0]);
    });
})();
{/headtag}
</div>

And if you want to see a walkthrough - I made one of those too.

I hope this helps you achieve the same on your website!

Update 12-11-2018: Replaced jQuery code with pure Javascript.