Make full use of

I had wanted to write a proper experience sharing about Framer.ai for a while.

But to talk about this, it all starts from when I was "deceived" by Framer.

It Began.

I always wanted to create a website to showcase my various AI works or to write some blogs, so I have kept a few domain names that I like and even rented an Amazon AWS server for a long time. However, due to various miscellaneous matters and procrastination, I haven't really made any serious progress. Although I know how to set up a website, as a designer, dealing with backend and even frontend frameworks is a bit challenging. After creating a few unsatisfactory versions or finding maintenance too tiring, I continued to procrastinate, so the AWS server has been costing money while sitting idle.

I'm someone who realizes things late; I had been out of the design circle for several years and didn't actually know about this site before. I was attracted to Framer.ai because of its AI features. At the time, they were the first to launch AI website building, allowing one to create a webpage by just speaking a command, so I went to give it a try.

The outcome was quite mediocre.

Later, for some reason, they concealed this feature more and more; it might even be taken down now.

But back then, I discovered that this tool wasn't bad. You could set up your own framework, which is quite similar to the editor in WordPress post version 6.

So, that didn't count as being deceived; the real deception was when I finally didn't want to waste AWS space anymore.

I've Been Duped.

At that time, I was fed up with various backends. In fact, I wasn't very interested in backend, so I just wanted to quickly cancel it and look for an existing website platform to use.

So I returned to Framer.

After using it for a while, I found it quite useful, better than the experience of WordPress. The UI is both streamlined and complete, transforming the web’s box structure, along with a built-in, multi-library CMS and cloud image storage, and it comes with SSL certificates. It's simply the best partner for someone like me who is a layman in backend, a half-hearted frontend, and a designer.

Oh? It can bind a domain? Even though it's a paid feature, and the basic version feels a bit pricey at 5 euros per month, it's still much cheaper compared to Amazon's space. I might as well buy it for a year...

Then I found out I had been duped.

It turns out their package strategy is very peculiar—strangely peculiar. The basic version is equivalent to others' free version, and the free version is comparable to others' premium version... Is this like a horse racing strategy?

In simple terms, the package is 5 euros monthly or 75 euros annually, which allows you to bind a domain and remove the watermark, but surprisingly, you can only create one page (plus a 404 page)! The CMS is also limited to one library! There's no localization! In plain words, you can't create a blog with a reading page! The official statement says it's suitable for creating landing pages, which means you can only make a product landing page. So what is the CMS for? It's probably designed to provide a news list on the landing page or something like that.

At the time, I felt this was quite unfair because when I was trying the free version, everything was so good; I could create multiple CMS libraries, and page creation seemed to be unlimited, and even projects could be created in countless numbers. Why, after paying, did it downgrade so much? (I should note here that when I say unlimited, there were actually limits, but enough for usage)

Of course, I couldn't blame them, so the "deception" is in quotes; what could I do when I impulsively spent money without understanding things clearly?

I could only bear it myself, researching how to implement the required functionality on a single page and how to create multi-layer classifications within one library...

It’s of course hard to dance with shackles on, so after more disappointments and dissatisfaction, I finally...

Had an Epiphany.

It's just a watermark; Framer's watermark is just a small logo in the bottom right corner of the page. Although the free domain is *.framer.website and a bit long, since not many people use it, there are actually many short subdomains that can still be claimed.

So if you can abandon your obsession with domain names and watermarks, this is the best platform for building a website for free!

At least, the page building experience with Framer is quite good.

If you're familiar with the concept of Box in web pages and the logic of hierarchical nesting, and also familiar with modal windows and styles and dynamics... (Is this not demanding too much?)... you will find that they have optimized the W3C standards to an extremely minimal extent, where many unnecessary properties, including margin, have been eliminated.

At the same time, they visualized more complex styles like grid, shadow, and backdrop blur, turning styles and components into assets, and images can simply be pasted directly (though I also miss the image asset library that WordPress has but Framer does not)... you will realize that developers have really thought deeply about the architecture of web pages.

If you are not familiar with web basics, actually using templates and official modules, or dabbling like using Word, you can quickly achieve very good results.

At the same time, Framer has excellent support for multiple devices, where slight modifications on the desktop can directly transform into tablet and mobile interfaces.

More importantly, besides the watermark and domain, the free version seems to reach the maximum in terms of functionality and capacity. (Of course, the CMS keeps a maximum record of 1,000 entries, localization is limited to two languages for 5,000 words, but this 5,000 words does not include the content of the articles.)

The number of image uploads also seems to be unlimited as long as each image does not exceed 5MB, and like WordPress, you can visually set the image fill mode, alignment, and Ficial Point.

Moreover, images come with CDN, and there are no CORS restrictions... so sometimes I also use Framer as an image hosting service. The webpage created below with Refly has used images hosted on Framer.

[Flip Card Browser] WeChat Emoji Package Collection Page

Had Fun.

I finally gave up WordPress.

To be fair, after version 6.0, WordPress also introduced a responsive block editor, changing the old-fashioned method of rigid templates and variables. And the plugins, including those for shops, are numerous and the ecosystem is more mature. However, at least before I gave it up (around mid-last year), the experience of using the editor was still quite chaotic. I guess it might be because they wanted to do everything and couldn't bear to streamline like Framer, and on the other hand, it was also to cater to their existing massive ecosystem of products.

If we don't consider paid services (even though third-party paid platform integration should be quite convenient now, but I haven't researched it specifically), Framer feels like it provides more convenient tools for building. So much so that the AI feature that initially attracted me now seems rather dispensable; its absence doesn’t affect me at all.

Thus, I got so engrossed that whenever I think of a new theme, I might start building another website (you can find some links at the bottom of each site).

Yes, I know that maintaining and promoting even a single personal site can be costly; these sites might not even get much viewership in today's traffic era; I'm not a marketing expert or enthusiast. But let’s treat it as practice, or consider the websites themselves as works, feeling that sense of achievement for a bit of self-gratification. That’s not too bad, right?

Isn't it doable? It's nothing, right? You can't care, right? Can you care?!

In Framer's ecosystem, there are currently ways to sell templates and components, but I'm still not fully prepared to do that.

Since my habit is to learn while playing, I don’t start by watching tutorials; during my research, I've gradually discovered many features that I hope to have but initially thought didn't exist but actually do. Such as the ability to sync components across sites, built-in variables, cross-component events, and self-built code components...

My current plans have changed a lot from my initial thoughts; I intend to use my own templates to build a series of website matrices for AI painting, AI music, design resources, and project exhibitions—these sites can connect with each other... By the way, Framer's free secondary domain can also integrate Google Adsense to run ads, and it also opens up necessary SEO fields and header code blocks.

The only remaining issue is regarding that single-page site I was "deceived" into buying for 75 euros.

Cleared It Up.

Taking advantage of this weekend where I was sick and didn’t want to do anything (but no-code design is usually one of my ways to recuperate), I decided to find a way to make full use of this single-page site.

Why not just turn it into a pure navigation site/work showcase site, only showcasing links to various free sites? Although such a simple page could be written, who cares when the money has already been spent? Besides, at least the CDN is still nice; doing it myself would also be an expense.

Main site address: CATxPAPA.com

First, I designed it in a tofu block grid style, with different weights, some blocks bigger and some smaller, and values can be set in the CMS as variable inputs for components.

Each block can have different display styles, such as images, text, or videos, which can all be placed within the same component in Framer as variants, controlled by parameters.

Since it’s a navigation site, the records in the CMS will no longer contain articles but will directly link to any content I wish.

These are not difficult; I managed to complete them in about one evening.

The most troublesome part is the situation with multiple languages.

The basic version doesn’t support multiple languages (even the free version supports two languages! Peculiar!), but I want to have content in Chinese, English, and French; what should I do?

To make a long story short, with the help of GPT (not very helpful actually) and referring to the official documentation (which is rather sketchy), I figured out how to manage cross-component events and variable controls. First, I used self-embedded code to get the user's browsing language, and then control the self-built variables of components. Then, from the three buttons on the navigation bar, I directed them to three different variant frames of the list, each displaying different fields, and eventually got it done.

The only downside was that I could not enjoy the 5,000 words of AI automatic translation like the free site, and had to fill in all three fields myself. So I summoned Feishu Multi-dimensional tables, exported titles and descriptions as CSV from Framer, beautified the text, then translated it into the three languages, and manually pasted it back, which was a bit of a hassle.

I'll research methods for overall import or synchronization later; I feel that switching to Notion or Google Sheets might do the trick, as Framer also supports using Notion or Google Sheets as CMS sources, and Google's traditional translation functions in Sheets are free.

Speeding Up.

The music site E.T Music, the image site CATxART, and this blog were all sites I created during my "early" research and learning phase, relatively simple and a bit disorganized.

This weekend, I also made a unified template; components created from one of the sites can be directly embedded in other sites and can synchronize changes. So, I unified the header and footer formats of these sites, and I might even standardize the display modules later.

After running through all the processes and having a simple template in place, I set up a new site, Super Meow, in just two hours. It will be used to share scattered skills related to AI painting, such as collected phrases or my unique prompts, aesthetic styles and keywords, and MJ style codes, all organized in the form of snippets and tags.

No kidding, it really only took me two hours, from around 8 to 10 PM on June 2 (approximately).

I spent another half evening adding some simple content, submitted it for Adsense review, and it was approved in one go. Regardless of whether anyone sees it, I can start placing ads now. SEO and such can wait.

See, in this way, isn’t it like I spent the cost of the basic version, but got the effect of a premium version server?

Finished Writing.

The characteristic of a closing statement in my writing style is to get straight to the point, without summarizing. If you want a summary, please hand it over to AI or read it again.

If you think this article has given you even the slightest bit of inspiration or help, or simply feel generous and would like to show some pity on me, thank you, big boss, buy me a cup of coffee.

Of course, if you don’t want to, you can just casually use WeChat to donate a red envelope to squash me; that’s fine too.

At the same time, welcome to follow X @Tresmort "Meow Dad Is Toxic".

Yes, I am toxic.