Easy Step-by-Step Guide – Create Your Own Linktree-Style Landing Page with Pinegrow

Disclaimer: This guide uses Pinegrow Web Editor. The AI assistant feature in this tutorial requires a paid subscription to Anthropic (Claude 3.5 Sonnet works wonder with the following tutorial) or OpenAI for the initial part of the process.

With the rising popularity of services like Linktree, which lets you create a customizable page to gather all the important links you want to share, I’ve decided to show you how to use Pinegrow to craft your very own landing page and host it on your personal domain.

When it comes to hosting, I personally use GitHub Pages, and I’ve detailed the method I use in this Pinegrow tutorial on hosting your HTML website on GitHub Pages for free. Pinegrow also makes it super easy to publish on Netlify (see Publishing on Netlify with Pinegrow).

The choice is yours!

Part 1: Kickstarting Your Project

Starting Fresh in Pinegrow:

• Launch a new project in Pinegrow, choosing to work with TailwindCSS.
• Lacking design inspiration – and this is an important step of this tutorial – I grabbed some small and simple screenshots of similar landing pages from the web and placed them in a subfolder within my project directory. (See the Bonus chapter for some examples.)

Setting Up Your Project:

• In Pinegrow: Go to ‘New Project’ > ‘Create a new page or project’ > Select ‘Tailwind CSS > Version 3.x’ (index.html).

Leveraging Pinegrow’s AI Assistant:

• Head over to the AI Assistant tab:
• Open the settings dialog.
• Activate the model: Claude Sonnet 3.5 (This model works incredibly well with Tailwind. It’s a perfect match and really delivers great results) or OpenAI GPT4.
• Set your project settings: Describe it as a “a Linktree clone template to use as a landing page to display and organize multiple links in a visually appealing and user-friendly manner. The template should be modern, colorful, customizable and responsive.”

Designing Your Template:

• Still from the AI Assistant tab, after setting your preferences, select ‘Just chatting from the dropdown’, click the image icon, select ‘Look at image’, then ‘Image Browser’, and click on your chosen image from the samples you have gathered from the web.
• Then, from the assistant input, type in:
  Describe the design of the image, replace text references with lorem Ipsum.
• After you get the description, rework it and tweak it to your liking in order to make it a an efficient “prompt” (copy paste the description in a text editor, then work there for more comfort) Here is mine
  Using Tailwind CSS and Font Awesome icons, build a web page layout on a pink background. At the top center, there is a circular profile picture placeholder for an individual photo.Below the photo is the person's name in a bold, larger font, with a job description or title in a slightly smaller font just beneath it. In the middle of the page, there are four rounded rectangular buttons aligned vertically. Each button has a thick black border and contains dummy text such as "Lorem ipsum dolor sit," "Consectetur adipiscing elit," "Sed do eiusmod tempor," and "Incididunt ut labore et." The buttons are intended to represent links to various destinations. These buttons have a minimalistic design, with a black outline and a solid fill color for the background. The first button has a yellow background, while the remaining three have a white background, indicating a state of inactivity or less prominence compared to the first button.At the bottom of the template, there are social media platform names listed in a smaller font, indicating links to the individual's social media profiles. These include Facebook, GitHub, Twitter, LinkedIn, Instagram, and TikTok. The template is credited to the Pinegrow Team, as indicated by the text at the very bottom of the image. Overall, the design is clean, uses a limited color palette, and focuses on ease of navigation and clarity of information.

Bringing It to Life:

• Select the top level of your document in the tree.
• Enter your custom prompt
• Use Pinegrow’s “Generate the whole page” feature within the AI Assistant to create your page.
• It is possible that the first results provided by the AI assistant are not ok. In this case, polish your prompt to get a better result and retry!

Part 2: Personalizing Your Design

Tailoring Your Page:

• After your page is generated, make any obvious necessary tweaks, then head to the design panel and hit “Surprise Me!”.

Fine-tuning Colors:

• The Design panel will then ask if you want to activate additional colors (four in total), which you should accept. These will automatically match your design with the background image.
• In the ‘IMAGE OPTIONS’ section, uncheck “Only use the image Colors” and leave the selector on BODY.

Finding the Perfect Background:

• In ‘Query’, type in ‘Pastel’ or whatever suits your initial idea.
• Click “Surprise me!” until you find a background image you love.

Part 3: Color Coordinating and Content Customization

Selecting Elements:

• Back in the ‘Element Properties’ tab, select elements in the TREE or directly in the page view. Choose all elements you wish to color-coordinate (text color, background color, hover color, etc.), associating them with the new color references of your choice (primary, secondary, color3, and color4).

Customizing Content:

• Naturally, you’ll want to change the text, links, and other content to match what you wish to display on your page.

Part 4: Final Touches

Adjusting Your Design:

• Return to the design panel tab, refine your settings, and click on “Surprise Me!” Gradually, “lock” your font, color choices, etc., using the small lock icon for each section.

Achieving Your Vision:

• With your main choices set, “Surprise Me!” will frequently yield results that align with your expectations.

Saving Your Favorites:

• For designs you’re especially fond of, use the “SAVED DESIGNS” function to store your top creations for future use.

And there you have it! A beginner-friendly guide to creating your own personalized Linktree-style landing page using Pinegrow. This approach allows you to craft a unique space on the web where all your important links are easily accessible, all while giving you the freedom to let your creativity shine.

Bonus

Here are 2 sample images you can use in your projects.