English Русский Українська

Documentation HTML-Content PRO

Allows you to create and customize grids of text blocks on your website. With this tool, you can easily create an unlimited number of text blocks and customize them according to your needs and design. Complete flexibility and control over the placement and content of the text on your website.

Version: 2.1.1
Release: 19.02.2024
Return to the catalog
More about the module
1. Information to users
2. Module installation
3. Module configuration
4. Stylization
5. List of changes

Information to users

Please carefully review this information before starting to use our products. We have endeavored to provide maximum compatibility and user convenience, but some aspects may require your attention and configuration. Do not hesitate to contact us with any questions or if you need assistance.

Try first installing «Localcopy OCMOD», and then attempt to install our module again. This sequence may resolve potential conflicts and help you successfully implement our changes on your website.

Download for OpenCart 2x
Download for OpenCart 3x

Module installation

To install the module, follow these steps:

  • Log in to the Admin panel and go to Menu -> Extensions -> Extension Installer;
  • Upload and install the archive file HTML_Content_Pro_x_OpenCart_x.ocmod.zip;
  • After successful installation, go to Menu -> System -> User Groups and set access permissions for the administrator (select extension/module/cs_html_content_pro in the «Allow Access» and «Allow Modify» sections).
  • Once you've completed these steps, go to Menu -> Extensions -> Modules and install the HTML-Content PRO module.

Module configuration

To configure the module, navigate to Menu -> Extensions -> Modules -> HTML-Content PRO

Main Configuration Options:

  • Module Name - the name that will be displayed in the admin panel;
  • Status - the module status is responsible for displaying the module on the website.

Section:

  • Image - inserting images for different screen sizes or one for all;
  • Video List - selecting where the video will be inserted;
  • Video Link - for supported services, simply insert any video link, others can copy the link from iframe src="".

Blocks:

  • Image - inserting images for different screen sizes or one for all;
  • Icon Class - to display an icon, add its CLASS. Refer to the documentation of the connected library;
  • Video List - selecting where the video will be inserted;
  • Video Link - for supported services, simply insert any video link, others can copy the link from iframe src="";
  • Media Element Positioning - positioning media elements relative to text;
  • Category - link to a category;
  • Article - link to an informational article;
  • Manufacturer - link to a manufacturer;
  • Other Link - any other link;
  • Button Name - text displayed on the button;
  • Class - individual CSS class for the block;
  • Id - individual CSS identifier for the block;
  • Attributes - individual HTML attribute for the block.

Settings:

  • Content Grid - the order in which blocks will be displayed;
  • Class - individual CSS class for the section;
  • Id - individual CSS identifier for the section;
  • Attributes - individual HTML attribute for the section;
  • Columns - setting the number of columns for different screens;
  • Text Alignment in Blocks - aligning the header and text in blocks;
  • Change Large Image Size - enable size change for custom / disable for original size display;
  • Large Image Size (W x H) - for large screens;
  • Change Medium Image Size - enable size change for custom + if no image for medium screens is added, it will be created from the large one. Disable for original size display;
  • Medium Image Size (W x H) - for medium screens;
  • Change Small Image Size - enable size change for custom + if no image for small screens is added, it will be created from the large one. Disable for original size display;
  • Small Image Size (W x H) - for small screens.

Access:

  • Access - who will see this block: for all users / only for registered / only for guests;
  • Customer Groups - managing access to customer groups.

Design:

  • Template - after creating a template for the module, you can select it here.

Styling

The module has four types of block display:

  • cs_html_content_pro - blocks are displayed in columns / each block can be a link (Template - default);
  • cs_html_content_pro_item_with_button - blocks are displayed in columns / links in the form of buttons;
  • cs_html_content_pro_tabs - blocks are displayed as tabs;
  • cs_html_content_pro_accordion - blocks are displayed as an accordion.

Module Template Placement

Create a new module template and place it in the folder:

For successful creation and usage of a new module template, follow these steps:

  • Create a new template file and save it with an extension indicating its purpose (e.g., ".twig" or ".tpl").
  • Move this file to the appropriate folder for modules:
catalog/view/theme/default/template/custom_templates/module/html_content_pro/file_name_in_latin.(twig.tpl)

After completing these steps, your new module template will be available in the list.

Making Changes to CSS Styles

If the standard design does not match your website's design, you can make changes to the CSS styles in the file cs_html_content_pro.min.css, located at the following path:

catalog/view/javascript/cs_libs/css/cs_html_content_pro.css

Problems and solutions

If you have any questions or problems, we have collected in this section answers to frequently asked questions and solutions to the most common and common problems.

Familiarize

List of changes

  • v2.1.119.02.2024

    Latest Release

    Changes:

    • Fixed errors.
  • v2.119.11.2023

    Changes:

    • Code optimization.
  • v2.018.09.2023

    The module has been completely rewritten

    • Use of a custom template for the module;
    • Content access management;
    • Insertion of images for different screen sizes;
    • Control over image sizes;
    • Deferred loading of images using browser capabilities;
    • Insertion of videos;
    • Block positioning;
    • Positioning media content within a block;
    • Adding CSS classes and identifiers for sections or blocks;
    • Adding HTML attributes for sections or blocks;
    • Assignment of links to blocks.
  • v1.031.10.2017

    Added:

    • Displaying text blocks on the website;
    • Creating an unlimited number of blocks;
    • Using icon fonts;
    • Assigning: image and/or icon;
    • Assigning CLASS and/or ID.