How to build a landing page with AI | Scribe

    How to build a landing page with AI

    • Scott Colenutt |
    • 20 steps |
    • 10 minutes
    1
    Navigate to <https://dorik.com/>\ \ Click "**Try it Free**" on the homepage.
    2
    Sign up for an account and watch the introduction video. \ \ Click "**+ Create New Site With AI**"
    3
    Click the "**Name of Your Website**" field and enter '\[Your name\] 100DaysofNoCode Portfolio'.
    4
    Click the "**Website/Business Description**" field.\ \ Now enter a description of the website you'd like to build. \ \ In this example, we'll create a portfolio style website for our 100DaysofNoCode journey. We'll just focus on some basic homepage features that we'd like included for now.\ \ Feel free to experiment, but if you'd like a starting point, you can copy and paste this description:\ \ '*Create a minimalistic portfolio style website that enables me to showcase my 100DaysofNoCode journey. The home page should feature a big heading, with a section for an image and some associated text describing my journey. Add a footer section that features social media icons and contact information.*'
    5
    Click "**Generate Your Website**"
    6
    Dorik will now use its AI power to build your website!\ \ Once the site is ready, you will have the option to edit the elements on the page and an "**AI Quick Style**" menu will appear on the left-hand side of the page.\ \ If the "AI Quick Style" menu doesn't appear automatically, you can find it in the left-hand menu, just above the "Feedback" button.
    7
    Now you're going to use Dorik's AI suggested colour pallette switcher to switch things up a little. \ \ Select your preferred set of colours from the menu.\ \ Close this menu and review how the colours have changed on your homepage.
    8
    Now you're going to change the font styling on your website. \ \ Re-open the "**AI Quick Style**" menu and select your preferred font pairing.
    9
    Now you're going to use Dorik's AI image generator to replace a default image on your homepage. \ \ Find an image you'd like to replace, click the image and then in the right-hand menu that appears, click the "**Generate image with AI"** button that's highlighted in the screenshot below.\ \ In this example below, there's an image displaying code 😱 - that needs replacing for this 100DaysofNoCode challenge!
    10
    You're now going to generate a new image using AI.\ \ Click in the "**Type your Image command**" field.\ \ Feel free to describe any image you want. \ \ If you'd like to follow along with this example, you can try:\ \ "*Create a close-up, photorealistic image of a laptop screen featuring an inspiring photo of the sea."*
    11
    Click "**Generate**"
    12
    An AI-generated image will now appear below your prompt. \ \ If your prompt worked and created an image you like, great! If not, feel free to experiment by tweaking your description and clicking the '**Generate**' button again, until you find something you like. \ \ Hover over the image you want to use and click "**Insert**" to replace your previously selected homepage image.
    13
    Now you're going to use Dorik's AI Generated Text functionality to rewrite some of your homepage copy. \ \ Select any text on your homepage, but preferably something you think could use some improvement. \ \ Hover over the text you'd like to change, follow the drop-down menu from the **blue "Generate AI Text" button** and then select your preferred improvement option.\ \ Feel free to experiment here by repeating this step and selecting the different options to see how your copy is edited by AI.
    14
    Now you're going to use Dorik's AI-powered "**Regenerate Section**" functionality.\ \ This will allow you to redesign entire sections of the page in just a click!\ \ Find a section of your homepage that you'd like redesigned by ensuring the entire section is selected (it helps to move your cursor to the edge of a section to ensure the section is selected).\ \ Hover over the blue button and click the "**Regenerate Section**" option.
    15
    You'll now be invited to tell the AI how you want the section redesigned. \ \ Feel free to experiment here with your own command to describe how you'd like this section redesigned. \ \ If you're not sure and could use some AI assistance, helpfully, the command section is already pre-populated with a suggestion.
    16
    Click "**Regenerate Section**"
    17
    You'll now see the entire section is regenerated and stays aligned with the style of the rest of your homepage!\ \ Experiment with the "**Regenerate Section**" function and command until you find a design you like.
    18
    Take a step back and admire your landing page!
    19
    In the top menu, click "**Save**" to save your draft website project.
    20
    Congratulations, **you have built a landing page using AI in Dorik without as much as seeing a single line of code!**\ \ In fact, in this lesson you built a landing page using just AI features and commands, without even tapping into the power of Dorik's no-code drag and drop editing features.\ \ Powerful stuff.\ \ Take a screenshot of your landing page and share it with the 100DaysofNoCode community.\ \ Maybe at the end of the challenge you could come back to Dorik and complete your portfolio website with examples of what you've built?
    external-screenshot