‣
This is the playground and sandbox of Maksym
The Header Image
Notion View
What should be done in Notion
- Click Add cover
- Chose the image The image should be 3840 × 561px, Format webp, Name the same as Heading 1 of the Page.
- Save.
Website View
What should be done in Super
- Type the name of the page.
- Ensure that all words in the title are Capitalized in the correct case.
The Heading 1 for pages WITH Images
Notion View
What should be done in Notion
- Type the name of the page.
- Ensure that all words in the title are Capitalized in the correct case.
- Save.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
- Go to the specific page you edit.
- Select Edit custom code.
- Insert Page-Specific CSS code in the CSS section
‣
‣
The Heading 1 for pages WITHOUT Images
Notion View
What should be done in Notion
- Type the name of the page.
- Ensure that all words in the title are Capitalized in the correct case.
- Save.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
The Heading 2
Notion View
What should be done in Notion
- Type the text.
- Turnthe text into Heading 2
- Save.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
The Heading 3
Notion View
What should be done in Notion
- Type the text.
- Turn the text into Heading 3
- Save.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Paragraph text
Notion View
What should be done in Notion
- Type the text.
- Set the color for the paragraph text as the default. Take advantage of this step.
- Save.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Colorful table section with icons with the hover effect
Notion View
What should be done in Notion
- Type the text for the heading of the cell.
- Turn the text into two or three columns.
- Press Enter to switch on the line below and type the paragraph text of the cell.
- Turn the first line of the text into Heading 3
- Add the Icon above Heading 3. It is essential to use icons in Mixvoip’s style. You can find many icons following the link: https://mixvoip.box.mixvoip.cloud/d/8302b12c84eb414cacd2/. Use SVG format.
- Repeat it for the rest of the cells.
Website View
What should be done in Super
- Open the Page in Super.
- Go to the specific page you edit.
- Select Edit custom code.
- Insert Page-Specific CSS code in the CSS section. The following steps will show how to adjust the code.
- Open developer mode in your browser. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) on your keyboard.
- Copy ID for the first cell.
- Past ID of the cell in the Page-Specific CSS code instead of Past Green Cell ID. Past the ID in three places in the code for each cell.
- This code includes six cells; if you want to use less quantity of the cells, choose the color you want to use. We recommend using colors in the following order: Green, Purple, Blue, Orange, Yellow, and Pink.
‣
3-column section with the hover effect
Notion View
What should be done in Notion
- Ensure that the following code is embedded in the Global CSS section.
Website View
What should be done in Super
- Open the Page in Super.
- Go to the specific page you edit.
- Select Edit custom code.
- Insert Page-Specific CSS code in the CSS section. The following steps will show how to adjust the code.
- Open developer mode in your browser. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) on your keyboard.
- Copy ID for the cell.
- Paste the ID of the cell in the Page-Specific CSS code instead of the ID Block. Past the ID in three places in the code for each cell.
‣
Hide some sections for the mobile view
Notion View
What should be done in Notion
- Describe your action in the Notion
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Partners table
Notion View
What should be done in Notion
- Describe your action in the Notion
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Partners table
Notion View
What should be done in Notion
- Describe your action in the Notion
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Columns without hover effect
Notion View
What should be done in Notion
- Describe your action in the Notion
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Radius for the Call to Action button in the Navbar
Notion View
What should be done in Notion
- Preview the button in the Navbar.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Primary Green button
Notion View
What should be done in Notion
- Preview the button in the Navbar.
Website View
What should be done in Super
- Ensure that the following code is embedded in the Global CSS section.
‣
Partners table
‣
Database
‣