In this guide, we use Thaura.ai to redesign a site’s index page for a site and adding it into Cradle CMS.
Step 1: Prompting the page
- Copy the code and content for the website using the browser inspector, this will depend on the browser that is in use, but usually it is opened with a right click on the site and then choosing inspect.
- Prompt something like: “This is the HTML for a website, can you generate a more modern design with CSS” and paste in the code and content in the prompt window.
If the suggestion is good enough and only minor tweaks to the content are needed, ask for the code.
Step 2: Add the code into a theme
It is a good idea to use a lightweight theme for the new front page or to use the theme already in use.
This landing page canvas theme is a good starting point for adding in one-pagers quickly, but still have templates and styling for pages and articles if needed later.
- Add a new theme or duplicate the old one.
- Go to Edit code and open the
templates/index.liquid.file. - Remove everything in the file.
- If all the code is in one file: copy the code in Thaura and paste it into the file.
- Locate the
<style>tags and copy the contents into the main CSS file which is in/assets/folder, in the end. - Check for
<script>tags; this is the javascript. You want to keep the contents, either in a separate file in assets or inline in the script tags. - Locate the
<body>tags and remove everything else except the contents within. This means the<head>and tags and the content within. Remember to also look for the closing tags:</head>,<body>and</head> - Preview the page
Step 3: Modify the theme
- Add color settings to match the generated code.
- The code can be modified freely in the HTML editor.
Considerations
- There are multiple ways to add the new index page, and what is the best option depends on how the site will be used.
- The information in
<style>and<script>tags can be added as files in assets.