{"id":38500,"date":"2014-11-20T04:50:07","date_gmt":"2014-11-20T09:50:07","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=38500"},"modified":"2017-07-12T07:47:35","modified_gmt":"2017-07-12T11:47:35","slug":"joomla-2-5-x-how-to-add-custom-html-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-2-5-x-how-to-add-custom-html-module.html","title":{"rendered":"Joomla 2.5.x. How to add custom HTML module"},"content":{"rendered":"

<\/p>\r\n

This tutorial is going to show you how to add a custom HTML module in Joomla 2.5.x.<\/p>\r\n

Joomla 2.5.x. How to add custom HTML module<\/a><\/p>\r\n

Custom HTML module is like an empty container designed to hold: HTML4 and HTML5 code, text, images, flash animation, Youtube player or a mix of them. You can either copy and paste content into the module or create it from scratch, complete with full formatting. This is, undoubtedly, one of the most universal modules for Joomla. Whether you need to display snippets of code from another web page, feel like displaying contact information for your site administrative team, want to display a photo on your Joomla site without embedding it into any of your articles, or any number of other functions, a custom HTML module is the way to go.<\/p>\r\n

To add a custom HTML module, you should perform the following steps:<\/p>\r\n

    \r\n
  1. \r\n

    Log in your Joomla admin panel and navigate to the Site -> Global Configuration<\/strong> menu.<\/p>\r\n<\/li>\r\n

  2. \r\n

    Find the option Default Editor<\/strong> and select Editor – Code Mirror<\/strong> or Editor – None<\/strong> value from the list:<\/p>\r\n

    \"add_custom_<\/a><\/p>\r\n

    NOTE: Default Joomla WYSIWYG editors may modify the custom HTML module code and cause some issues.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Click Save<\/strong> button in the top right corner to save the changes.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Now navigate to the Extensions -> Module Manager<\/strong> menu: <\/p>\r\n

    \"add_custom_<\/a><\/p>\r\n<\/li>\r\n

  5. \r\n

    Click New<\/strong> button in the right top toolbar.<\/p>\r\n<\/li>\r\n

  6. \r\n

    In the pop-up window select Custom HTML<\/strong>from the module types list :<\/p>\r\n

    \"add_custom_<\/a><\/p>\r\n<\/li>\r\n

  7. \r\n

    Now you can configure the module setting:<\/p>\r\n

      \r\n
    1. \r\n

      In the Title<\/strong> field type the title of your new module.<\/p>\r\n<\/li>\r\n

    2. \r\n

      In the Position<\/strong> field choose the correct position for the new module from the Template Modules Positions table.<\/p>\r\n<\/li>\r\n

    3. \r\n

      Put the module Status<\/strong> to Published<\/strong> and the module Access<\/strong> to Public<\/strong>.<\/p>\r\n<\/li>\r\n

    4. \r\n

      The Text area<\/strong> allows you to integrate outside functionality, like an images with links, social icons made by Font Awesome or a PayPal button, or to display any other content in the sidebar or other module position.<\/p>\r\n

      If you have a WYSIWYG Editor enabled on your site or your user, the Custom Output section will display the WYSIWYG toolbars. But, by default, TinyMCE and JCE allow you to switch to the source code view and use\/edit pure HTML.<\/p>\r\n<\/li>\r\n

    5. \r\n

      In the right column in the Basic Options<\/strong> section you can select background image of your HTML module.<\/p>\r\n<\/li>\r\n

    6. \r\n

      The Advanced Options<\/strong> tab contains layout and caching settings. You can also add Module Class Suffix<\/strong> and create a specific style for this class using CSS code:<\/p>\r\n

      \"add_custom_<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n

    7. \r\n

      When everything is done, press Save & Close<\/strong> button in the top right corner.<\/p>\r\n<\/li>\r\n

    8. \r\n

      Refresh your site to see the changes. The Custom HTML module was successfully added.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

      This is the end of the tutorial. Now you know how to add a custom HTML module in Joomla 2.5.x. <\/p>\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n

      Joomla 2.5.x. How to add custom HTML module<\/a>
      \r\n<\/p>\r\n

      <\/p>\r\n

      <\/p>\r\n\r\n

      \r\n\r\n\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"

      This tutorial is going to show you how to add a custom HTML module in Joomla 2.5.x.<\/p>\n","protected":false},"author":53,"featured_media":40471,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[789,2411,483,557],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/38500"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=38500"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/38500\/revisions"}],"predecessor-version":[{"id":81969,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/38500\/revisions\/81969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/40471"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=38500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=38500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=38500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}