I am using Elementor on Wordpress and I need some graphics that dynamically change based on certain Infusionsoft tags applied for logged in users at our online school, to indicate which courses they have not yet started or completed. I would prefer that this be an Elementor Widget, or code that works inside an existing widget like Code Highlight, as long as I also have a user-friendly interface to control the settings. I currently use Elementor Pro, Premium Add-ons, and iMember360.
Basic Structure - A graphic that I can place in the sidebar of several pages, consisting of an optional CIRCLE at the top with a percentage text display in the center (determined by a show/hide setting that I can control), and a grid of squares below it (where each square represents a course or training we offer). Without the circle, only the grid would show. See screenshots.
Optional Sub-Headers - The graphic will optionally have sub-headers between sections of the grid of squares (screenshots). If sub-headers are selected in the tool, the tool should ask me what the first header is, and how many squares should be placed below it. It will ask if I would like to add another sub-header, and how many squares should go below that one, and so forth.
Circle Graph Section - This shows the percentage of the number of courses that have been completed (blue), started but not completed (green), and not yet started (gray), with the percentage complete displayed as text in the center. The percentage should be calculated by the number of squares that are blue by the total number of squares in the graphic, regardless of the presence of sub-headers that break up the grid into separate groupings. Green is ignored in this calculation.
Size Settings - I need the dynamic table to be something that I can easily adjust, later. I want to be able to select the number of squares that will show up, and the squares size in pixels. The space between the squares should also be a setting I can control.
Hyperlink - I need to be able to set a title and hyperlink for each square, so the user can hover over the square to see what course it represents, and click to go to that course.
Square Colors - Each square in the table will be one of three colors, based on the presence of Infusionsoft tags for the logged in user (blue #45627b, green #def2ce, gray #d9d9d9). Each square should be gray by default. If a grid has less than enough squares to fill the grid completely, any empty squares need to be transparent.
Tag Settings - I need a field in the backend for each square where I can set the Infusionsoft TAGS that will control the color. In other words, the field should allow me to select which Infusionsoft tags will turn that square blue, and which tags will turn it green. It will be gray by default, or transparent if no data (ie. link, title, tag) is entered for that square. There needs to be a way to choose OR or AND when listing multiple tags for each color (because some squares will require more than one tag to turn blue, or in case a square can be green with any one of the listed tags present).
Live Updates - The user should be able to refresh the page and see the grid UPDATE if a tag was recently applied or removed in Infusionsoft.
I will attach a screenshot of my mock-up for the large grid/mosaic, the main page and each sub-page (showing how smaller sub-topic grids are grouped together under the same circle graph).
The main graphic EXAMPLE is only provided to show how it might look with the circle graphic hidden, and without sub-headers. Instead, use my colors / font / style as seen in the page screenshots.
Please let me know if you have any questions.