How to build a configurable template?

I want to create an app that has a relatively fixed structure to it. There's some logic that shows or hides things based mainly on some timing criteria (so many days from a start date). The user gets to edit the content that visitors to this "site" see over time.

More specifically, I want to create an app that offers the user a template that combines both content and logic. A lot of people use Wordpress for this, and it's quite difficult to build something that combines both content and logic without requiring some level of programming. There are 3rd-party themes / plugins that can do it, but if they don't do exactly what you want, you need to resort to programming. The audience is NOT programmers or people who could even remotely handle such stuff, so they end up going to Fiverr or some job site to hire someone to do it for them, and they end up with a half-assed result built by someone who doesn't really understand how to program Wordpress, and that probably breaks with the next WP update. (In WP, the look-and-feel is handled by the Theme, but logic is handled by a Plugin. When you want to make a "smart theme" that alters what's displayed in the theme based on logic, you're entering an area where there aren't many people who can do this well. And the 3rd-party products are expensive and mostly overkill for what we need here.)

In this case, the content is static, defined almost entirely in advance before it's made visible to anybody. Think of it as a fancy sales page rather than a traditional website. A single page where what's visible on it changes over time. The structure itself doesn't change. Parts are displayed or hidden over time.

For example, there's a header block at the top where you can change the text and add/change an icon or logo image. Below that is a panel where up to four videos can be displayed -- mainly a thumbnail, and when it's clicked the corresponding video is loaded and played in a section below. (The thumbnails could be aniGifs to simulate a video playing.) A different video is made available on some pre-defined schedule. Other things below that are shown or hidden depending on certain logic. Once everything is set up, this is all very easy to handle.

What I'm curious about is configuring the page. If this were built in Wordpress, one might go into Admin mode and be able to edit things right on the page. A lot of template page editors work this way -- you go into an "edit mode" and you can set properties for things on the page right where they are. There might be a popup property editor, or one at the side, that lets you edit some properties, but some stuff would be edited right in-place. (A lot of template builders exist for Wordpress, where you can build a template and say what goes where, but then leave the content for somebody else to fill in. That's pretty much what I'm building here, and using Delphi and Web Core to build the template, mainly so we don't have to deal with Wordpress.)

However, to edit the page content, a typical Delphi app would have a Settings page, or even a separate configuration app, with a big list of things to which you can assign values, much like how you set compiler and path properties in Delphi.

> Header text: _________________________
> Header logo: _________________________
> Video #1 URL: ___________________________
> Video #1 thumbnail: _________________________
> Video #1 legend: _________________________
> Video #2 URL: ___________________________
> Video #2 thumbnail: _________________________
> Video #2 legend: _________________________
. . .

I'd like something a little more similar to the Delphi IDE or template editors you find for Wordpress. Again, the structure is fixed by Delphi, we're only allowing users to change content and visual attributes. 

What's the best way to do this?

Also, a secondary question I have is kind of tricky to say: how can I allow the user to create or pull in a "theme" type of template? That is, something that sets the background and foreground color scheme, fonts and font attributes, stuff like that. It's just one page, so maybe there could be a separate "theme editor" for that stuff. I guess it's mostly CSS for this part.

Another question comes to mind: how do we present the "admin" side of this to our users, where they edit the content and theme attributes? Within the app using a login (like how Wordpress does things) or a separate tool used to configure things and save them to a DB?

This kind of approach is fairly common for web designers, not so much for the usual Delphi dev. Web Core lets you build something that's more Delphi-like. How can I bring something more familiar to web folks to this party?



Maybe this is a bit too far fetched and too complex for your audience, but we demonstrated in this blog building a sort of IDE as a web application:

https://www.tmssoftware.com/site/blog.asp?post=493
Maybe this offers some inspiration of possibilities with TMS WEB Core.

Yes, that's the general idea. It says you have not published any of that code (as of Oct 2018). Perhaps you could strip it down and publish something like a basic property editor, like what Raize Inspex offers? (That's just one of several property editor simulators that are available. Would any of them work inside of Web Core or could they be adapted easily? You guys seem to have solved that problem, however, but it would be nice to not require another library for the grid.) 

Our TMS FNC UI Pack has the TTMSFNCObjectInspector

https://www.tmssoftware.com/site/tmsfncuipack.asp?s=fncobjectinspector#features
and the TMS FNC UI Pack is web enabled.