How to create a page like the 'Start' (Pricing Plans) page?

Hello UNA Team,

Please could you help us with a step-by-step tutorial on how to create a page like the 'Start' (Pricing Plans)  page found here on UNA.io: https://una.io/page/start ? 

A straightforward tutorial like the one made by LeonidS on how to create a drop-down menu.

We would like to create the very same Start/Pricing page with all the section and background colors.

Example:

- PRICING - Launch your own network (with the comparaison chart for three products/memberships).

- Building something special?

- Building something big? (a Comparison chart for two products/memberships)

- Info about NON-PROFITS

- Frequently asked questions

etc.

This is just an example. We will change the text and products and replace them with our memberships.

If possible, could you also share with us the HTML code used on that 'Pricing Plans' page?

We got products (memberships) that we would like to showcase the same way as seen on the Start page. As already mentioned above we will just modify the text but the page sections and presentation will remain the same. This UNA.io Pricing Plans page really fits our needs.

Also, I think that this Start/Pricing (or Membership compararison) page should have been added as a core (built-in) page in UNA as it is a good way to showcase your products/services and incentivize your members to buy them.

Many thanks in advance.

  • View
    554
  • More
Replies (9)

    • Hello, Please any help? Thanks

      • Hello OneEagle !

        It is the plain page from the builder with the blocks by the custom module. So you may try to create your own RAW (for CSS and JS) and HTML blocks to ake similar effects.

        • Hello, LeonidS 

          I have created a page and added a RAW and HTML blocks but honestly I dont even know what CSS, JS and HTML code to add to create a page such as the Pricing Plans page here on UNA.io.with the comparison chart, Faq etc.

          Would you mind sharing the CSS, JS and HTML code used on the Pricing Plans page on UNA,io?

          This page should have been added to the core pages in UNA.

          • I guess you'd better investigate this page with the browser developer tool. For example, in the Chrome browser, it is available by the pressing F12 button, see the attached screenshot.

            unaio_start.jpg 116.5 KB

            • Hello @LeonidS

              What are the block types used for the pricing page? I am trying to figure out the best approach to create such a page, similar to the one used here on UNACMS (Pro Plans) with a price comparison table.

              1. Block type

              Is the pricing page made of a single raw or html block that contains all the php and html codes? (All the page sections in one single block)? or maybe each page section is a separate raw or html block by itself? Each page section is placed in a different block.

              Example:

              The Section: 'Choose a Pro plan to supercharge your network' is a raw or html block.

              The Section: 'Need a special feature or modification?' is another raw or html block.

              The Section: 'UNA Pricing FAQ' is also another raw or html block.

              2. Translation

              I run a multilingual site. What will be the best approach to translate the pricing page?

              Should I use a raw, html or lang block?

              Should I use language keys all over the place for every title/header, text (paragraph), word in the price comparison table/chart etc? (That would probably be time consuming and tedious as it will require the creation of too many language keys)

              3. FAQ Section

              How is the UNA Pricing FAQ section created? Is it made of two different language keys? meaning one for the question and another one for the answer? Or are the text of both question and answer placed directly into the html/php code without the use of language keys?

              Thanks and happy new year.

              • The main block of the Pro plans page is the part of our own custom module where we are placing the similar non-standard things.

                • Thanks for your reply @LeonidS. Would you mind being more specifc for my use case? I don't need to create a custom module. I am just trying to create a custom page that should look like the Pro plans page. I've mentioned the Pro plans page just as an example.

                  I am wondering:

                  - whether to use a raw, html or lang block,

                  - whether to use a single block for the whole page and place all the html/php codes inside or use many blocks and place each page section in its own block,

                  - whether to use a lang block for translation or use a raw or html block, then use language keys inside,

                  - whether to place the FAQ question in a language key and FAQ answer in the another one or to place both question and answer (text) directly inside the html/php code without the use of a language key.

                  Hope It all makes sense now. Thanks

                  • Let's review your questions:

                    - whether to use a raw, html or lang block,

                    The RAW block is the most universal solution. You may use there the lnaguage kye too as the code like this one:

                    <bx_text:_bx_contact_menu_item_title_system_contact />

                    It will be inserted as the translated part too.

                    - whether to use a single block for the whole page and place all the html/php codes inside or use many blocks and place each page section in its own block

                    It depends from the task and design. If you consider that there is no need to connect the page parts then it would be good to have several blocks.

                    The last 2 questions - as I answered above, you may use the langauge keyes directly in the RAW code.

                    • Thanks a lot for reviewing my question. I appreciate it. I was trying to run away from using language keys as I will have to create many of them. Anyway, I think that I don't have any better option. Thanks a lot for your advise and tips.

                      Login or Join to comment.