Learn the Framer CMS in 10 minutes! (Crash Course)
Summary
TLDRこのビデオでは、Framer CMSを使用してブログを構築する方法について学びます。Framer CMSは、ウェブサイト上の他のコンテンツと同じようなコンテンツを追加できるシステムです。デフォルトでは、各CMSアイテムにはスラッグとタイトルが必要ですが、他のフィールドはカスタマイズ可能です。例えば、ブログにはタイトル、スラッグ、日付、画像、コンテンツなどが必要で、さらに著者のプロフィール写真や名前などの追加フィールドを設定することもできます。CMSは、スタイルの変更が全体に適用されるため、一つの大きなテンプレートが繰り返し使われると考えることができます。また、キャンバス上のコンテンツをCMSに紐づけ、著者の名前や画像を表示することができます。さらに、スーパーフィールドを使用して、コレクションリストをページネーションしたり、フレームr CMSをさらに強化することができます。このクイックコースを通じて、Framer CMSの柔軟性と強力な機能について学ぶことができます。
Takeaways
- 📝 CMSとは、ウェブサイトに同じような感じでコンテンツを追加できるシステムです。
- 🗂️ Framer CMSを使用すると、ブログのような同じページで異なるコンテンツを簡単に追加できます。
- 📄 CMSの各アイテムには、スラッグとタイトルが必要です。他のフィールドはカスタマイズ可能です。
- 🖼️ ブログには、タイトル、スラッグ、日付、画像、コンテンツなど、必要に応じて追加のフィールドを設定できます。
- 🔄 CMSの変更は、すべてのページにグローバルに適用されます。スタイルの変更は、テンプレートとして再利用されます。
- 📑 ブログページは、他のCMSページと同様に、変更が反映されるため、簡単に異なるページをプレビューできます。
- 🔗 ページ内のコンテンツは、CMSのスラッグにリンクすることができます。
- 🖼️ 画像やテキストコンテンツを、CMSから直接取り込むことができます。
- 📐 フレーム内に要素を選択すると、プロパティパネルからCMSのフィールドに紐づけることができます。
- 🚫 コンテンツが設定されていない場合、その要素を非表示にすることができます。
- 🔄 コレクションリストをページネーションして、一度に表示するアイテム数を制御できます。
- 🌟 Framer CMSをさらに強化するために、SuperfieldsのPower Upを使用することができます。
Q & A
フレームアセットのCMSとは何ですか?
-フレームアセットのCMSは、コンテンツ管理システムの略で、ウェブサイトに同じような他のコンテンツと同様に内容を追加するのに使用できるシステムです。
CMSでブログを追加するにはどうすればよいですか?
-CMSでブログを追加するには、CMSの左上にある「Add a Blog」をクリックして新しいコレクションを追加します。その後、各ブログ記事に対して必要なフィールドを追加またはカスタマイズします。
CMSのアイテムにはどのようなフィールドがデフォルトで必要ですか?
-CMSのアイテムには、スラッグとタイトルという2つのフィールドがデフォルトで必要です。スラッグはウェブサイトのリンクの後ろにくる部分で、ページを指定します。
CMSのフィールドを編集するにはどうすればよいですか?
-CMSのフィールドを編集するには、「Edit fields」をクリックして、必要な入力フィールドを追加または変更します。たとえば、タイトル、スラッグ、日付、画像、コンテンツなどがあります。
フレームアセットのキャンバス上で、CMSのアイテムをどのように表示すればよいですか?
-フレームアセットのキャンバス上でCMSのアイテムを表示するには、新しいページを作成し、そのページにブログのコレクションを表示させます。また、コレクションページですべてのコレクションを表示することもできます。
CMSのスタイル変更がグローバルに適用される理由は何ですか?
-CMSのスタイル変更がグローバルに適用されるのは、コレクションリストやCMSの個々のページに対する変更が、他のページにも反映されるためです。これは大きなテンプレートが繰り返し使われると考えることができます。
CMSのアイテムのスラッグにリンクするにはどうすればよいですか?
-CMSのアイテムのスラッグにリンクするには、キャンバス上のコンテンツをスラッグに紐づけます。これにより、クリック時に個々のブログページに移動できます。
キャンバス上の要素をCMSに紐づけることができる理由は何ですか?
-キャンバス上の要素がCMSに紐づけ可能である理由は、プロパティパネルでプラス記号が表示されている要素はCMSからデータを取得できるためです。たとえば、画像のFillやテキストの内容をCMSのフィールドに紐づけることができます。
フレームアセットのCMSでコンテンツを表示しない場合のルールを設定するにはどうすればよいですか?
-コンテンツを表示しないようにする場合、そのコンテンツホルダーの可視性をNoneに設定し、作者の画像が設定されていない場合に表示しないように変数を設定します。
フレームアセットのCMSでコレクションリストをページネーションするにはどうすればよいですか?
-スーパーフィールドのパワーアップを使用して、コレクションリストをページネーションすることができます。スーパーフィールドからコピーしたコンポーネントをキャンバスに貼り付け、コレクションリストにリンクさせます。
フレームアセットのマスタークラスとは何ですか?
-フレームアセットのマスタークラスは、フレームアセットを使用した高度なデザインとプロトタイピングのスキルを学ぶためのコースです。ビデオスクリプトで言及されている通り、詳細はリンクからアクセスできます。
スーパーフィールドとは何ですか?
-スーパーフィールドは、フレームアセットのCMSを強化するためのプラグインのようなもので、より高度な機能を提供します。たとえば、コレクションリストのページネーションなどが可能です。
Outlines
📝 はじめに:Framer CMSでブログを構築
このビデオでは、Framer CMSを使用してブログを構築するためのクラッシュコースを提供します。Framer CMSは、ウェブサイト上の他のコンテンツと同じように感じるコンテンツを追加できるシステムです。CMSは、同じフォーマットに従う多くの記事が含まれる新聞に例えることができます。デフォルトでは、CMSアイテムにはスラグとタイトルが必要ですが、他のフィールドはカスタマイズ可能です。また、CMSアイテムのレイアウトを指定し、各投稿のコンテンツを指定できます。
🖼️ スタイルとレイアウトの統一:CMSのグローバル性
CMSのグローバル性により、スタイルの変更はすべてのCMSページに反映されます。つまり、1つのページでスタイルを変更すると、他のページも自動的に更新されます。これにより、大きなテンプレートが繰り返し使用され、一貫性を保ちます。また、ブログ記事のスラグにリンクされたコンテンツを個別のページで確認できるように、リンクを設定することが重要です。
📸 コンテンツのカスタマイズ:作者情報の追加
CMSに新しいフィールドを追加し、作者名と作者画像を表示することができます。キャンバス上で要素を選択すると、プロパティパネルにプラス記号が表示され、CMSからコンテンツを引き出すことができます。また、作者情報が設定されていない場合、その要素を非表示にすることができます。これにより、CMSのコンテンツに対するより細かい制御が可能になります。
🔄 ページネーションとスーパーフィールド:Framer CMSの強化
スーパーフィールドを使用して、Framer CMSをさらに強化することができます。例えば、多くのアイテムをページネーションして表示することができます。スーパーフィールドからコンポーネントをコピーし、フレームに貼り付け、コレクションリストにリンクすることで、キャンバスに再表示させることができます。ページネーションを設定し、ボタンを追加することで、コレクションリストを効果的にページ分割できます。
Mindmap
Keywords
💡フレームラーCMS(Framer CMS)
💡スラッグ(Slug)
💡コレクション(Collection)
💡フィールド(Field)
💡グローバルスタイル(Global Style)
💡テンプレート(Template)
💡スーパーフィールド(Superfields)
💡ワイヤーフレーム(Wireframe)
💡プロパティパネル(Properties Panel)
💡ルール(Rule)
💡ページネーション(Pagination)
Highlights
Introduction to Framer CMS for adding a blog to a Framer site.
CMS is used to add content that maintains consistency across the website.
Each CMS item must have a slug and a title by default.
Customization of additional fields for a blog, such as date, image, and author details.
Adding extra fields like author image and author name for blog posts.
Powerful customization options for fields, including links, colors, and toggles.
Framer Masterclass mentioned for in-depth CMS knowledge.
Specifying the layout and content that will be consistent for every blog post.
Creating a new page called 'blog' and linking it to the CMS collection.
Inserting a collection list to display all blog posts on a page.
Styling updates in the CMS apply globally across all pages and collections.
Linking individual content elements on the canvas to CMS variables.
Using conditional visibility to hide elements if certain CMS content is not set.
Paginating the collection list with Superfields components for better navigation.
Adding pagination buttons to the CMS collection list for user-friendly browsing.
Previewing different CMS pages within the Framer canvas for quick testing.
Superfields link provided for further CMS enhancement.
Conclusion and sign-off, inviting viewers to explore Superfields for advanced CMS features.
Transcripts
if you want to build a Blog inside your
framer site in this video I'm going to
give you a crash course on framer CMS
and give you everything that you need to
know let's go okay so here we are inside
one of my framer projects and you'll
notice there's not too much here apart
from a landing page but what I want to
do is add a Blog so when we look at
things like a Blog inside a framer we
utilize the CMS which is the content
management system and this is
essentially A system that we can use to
add content that feels the same as other
sorts of content on our website so for
example I like to refer to the CMS as
like a newspaper and then inside that
newspaper you've got lots of different
articles but each article follows a very
similar format so for example we would
use a CMS for a Blog because it's the
same page just basically different
content so let's go ahead here to the
CMS at the top left and let's go on add
a Blog now this is just going to add a
new collection here which we'll refer to
as our newspaper and inside it we've got
these five items which we refer to as
our newspaper articles so we can add as
many collections as we want here on the
free plan you get up to 10 otherwise you
pay to get more uh but there's plenty of
options that you can do here so you'll
notice if I click into one of these
items inside this collection you'll
notice there's a bunch of different
fields that we have here already now by
default each CMS item must have a slug
now the slug is that part that kind of
comes after your website link that kind
of specifies the page so it must
absolutely have that and it also needs a
title now every other sort of field here
we could customize so if we go to edit
fields at the top of the page here you
notice that we can modify those fields
that we could have inputs for so for a
Blog we might want a title a slug a date
sure an image
the content itself but maybe we want a
couple of extra Fields maybe we want one
for the profile picture of the author so
we might call it author
image and maybe we want another one for
the author name so we could set up
another field here for author name and
you'll see there's lots of different
fields that we could add here we could
specify a link we could specify a
specific color we could add a toggle so
whether we want to show or hide
something inside the frame of UI this
can get really powerful really quickly
and actually cover a ton of this inside
my framer masterclass which you can get
down below but enough selling Let's uh
continue so we can tweak the order of
these fields here but essentially we
want to specify the layout or the
content that's going to be the same for
every single post and then inside my
collection here we can specify that
content here so let's say in this
article here we want the author name to
be John Smith and let's find a random
image to specify for for John Smith he
looks like a John so now if I go back to
my canvas you notice I've created a new
page here which is called blog now if I
click this little drop down you'll see
we've also got a CMS item here called
blog as well so this is our collection
page where we can show all of our
collections now whether we want to show
this on this page or another page it
doesn't matter so let's say on my
homepage here I wanted to add that whole
list of collections from my blog as a
bit of a quarter action if I click on
the insert menu go down to collection
list I could just drag that collection
onto my canvas and you'll notice it'll
show the exact same thing but for now
let's just keep everything on the one
page now if I click on my layers here
you'll notice we have something a little
bit different we've got a collection
list and then inside that collection
list we've got a stack which actually
contains all of our content now if I
make a styling update to something
inside my stack here you'll notice will
update the exact same for all other
items now this is a big thing when it
comes to the Cs anytime I make a styling
change to whether it be a collection
list or an individual page inside my CMS
it'll be Global meaning if I make it for
one it's going to update for the others
so think of it as like a big template
that's being reused and reused so let's
go ahead here and actually just style
this a little bit differently so let's
say if I wanted to make this left
aligned and let's say we want these to
stack in a different way and let's set
the width of this to be 100% and maybe
we even use a grid formation okay
fantastic this looks really good and the
last thing want to make sure is that the
actual content here itself is linked to
the uh slug of that blog so when I
actually preview this and try to click
into one of these it'll actually take me
to that individual blog page so to view
that individual blog page again let's
just go back back to our pages and let's
select this blog page which is
underneath our blog at the moment and
similar to The Collection list any
change I make on this page will be
replicated on any other CMS page for my
blogs so let's say for example I wanted
this hero image here to be a little bit
different let's say I wanted it to have
a border around the outside and let's
say we wanted it to have a drop shadow
as well so now you'll notice if I switch
that CMS page and preview another page
at the top left here you notice that the
styling changes for all other pages and
this is a great quick and easy way to
actually preview different pages of your
CMS inside the framer canvas okay great
so this is looking pretty good and I can
stale this page however I want now let's
say I actually want to tie some content
like a new field on my page to the CMS
itself so beforehand we actually created
this new field here which was for the
author name and the author image so if I
actually go to that article here you
notice there's no author name or image
to be found but we can actually tie
content on the canvas back to the CMS so
let's go ahead here and let's draw a new
frame and let's call this our author
holder and then inside this Frame here
we want to add some text so let's call
this uh author name and we also want the
profile picture as well so I'm just
going to draw in a new frame just like
so and we're essentially just
wireframing where our content is going
to go so let's just set the width and
height of that author holder to be Auto
so everything fits within remove that
background and let's change this to be a
radius as high as possible and now what
you'll notice when I actually have an
element on my canvas selected is on the
properties panel we've got these little
pluses here now any element that has
these little pluses next to it means we
could actually tie it back to the CMS so
for example The Fill where the image
would normally go we can click on that
plus and we can set the variable to be a
field from the CMS so if I set it to be
the author image you'll notice it's
going to pull that author image from the
CMS and then display it on my canvas and
we can do the same for the text here so
let's go into text let's select the
content and set the variable to be auth
name and you'll see it's here just like
so now what we can do is something a
little bit more advanced so let's say
for example on our other page here we
don't have any content for our author
now we can actually set up a rule here
so if there is no content for our author
we can just hide this all together so
what we're going to do here is go down
and we're going to select this author
holder and we're going to select the
variable for visibility so if I selected
the visibility to be none it would just
kind of automatically hide and we're
going to set up a variable for this
visibility and we're going to make it
that if the author image isn't set then
it's not going to show right so to
actually do this properly is we want to
set it to be orth the image is set and
that's going to mean the visibility is
yes so then if it's not set it's not
going to show so you'll notice if I go
to this initial blog post here it's
showing my author holder but if I go to
another blog post without an author you
notice it will just hide it just like
that so this way we can actually have a
lot more control over our content for
the CMS now let's take this one step
further and go back to our collection
list and let's make this a little bit
more powerful so what I'm going to do is
go to superfields doio and grab a power
up for my framer CMS so let's say I have
lots of items I actually want to pagate
some of those items in my collection
list what I can do is just go to super
fields and copy this little component
here go back to framer and let's just
paste this on the canvas just like
so and let's take this collection list
and let's move this outside the canvas
and then we're going to take this
component and we going to link that to
my collection list so it actually
appears back on the canvas and then what
we could quickly do is actually set up
some uh page donation so let's say we
only want to load two per page and then
if I go back to Super fields and add
some buttons here and paste that onto my
page once again okay fantastic and let's
make sure that sits
underneath cool so if I preview this
you'll notice that now I can
successfully pagate my collection list
and then if I click into this I've got
my collection item just like so and
that's a quick Crush course on the
framer CMS now if you do want to power
up your CMS even more check out super
fields. with the link down below but
until then I'll catch you later
Browse More Related Video
How To Use Templates – Bootcamp – Step-By-Step
What's an Expo Development Build?
AI Website Page Builder - Launch Startup Sites - Mixo.io - Mixo Free WebBuilder - Custom Site
Tile-Based Map Generation using Wave Function Collapse in 'Caves of Qud'
盲点!Difyのローカル版でなく、クラウド版を使ったら、RAGチャットが普通に公開できちゃったし、回答も鬼早だった
【超有料級】AI画像×ショート動画で最強バズ動画を作って月100万円達成する方法【ChatGPT】【AI副業】
5.0 / 5 (0 votes)