Learn the Framer CMS in 10 minutes! (Crash Course)

Summary

このビデオでは、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

00:00

📝 はじめに：Framer CMSでブログを構築

このビデオでは、Framer CMSを使用してブログを構築するためのクラッシュコースを提供します。Framer CMSは、ウェブサイト上の他のコンテンツと同じように感じるコンテンツを追加できるシステムです。CMSは、同じフォーマットに従う多くの記事が含まれる新聞に例えることができます。デフォルトでは、CMSアイテムにはスラグとタイトルが必要ですが、他のフィールドはカスタマイズ可能です。また、CMSアイテムのレイアウトを指定し、各投稿のコンテンツを指定できます。

05:01

🖼️ スタイルとレイアウトの統一：CMSのグローバル性

CMSのグローバル性により、スタイルの変更はすべてのCMSページに反映されます。つまり、1つのページでスタイルを変更すると、他のページも自動的に更新されます。これにより、大きなテンプレートが繰り返し使用され、一貫性を保ちます。また、ブログ記事のスラグにリンクされたコンテンツを個別のページで確認できるように、リンクを設定することが重要です。

📸 コンテンツのカスタマイズ：作者情報の追加

CMSに新しいフィールドを追加し、作者名と作者画像を表示することができます。キャンバス上で要素を選択すると、プロパティパネルにプラス記号が表示され、CMSからコンテンツを引き出すことができます。また、作者情報が設定されていない場合、その要素を非表示にすることができます。これにより、CMSのコンテンツに対するより細かい制御が可能になります。

🔄 ページネーションとスーパーフィールド：Framer CMSの強化

スーパーフィールドを使用して、Framer CMSをさらに強化することができます。例えば、多くのアイテムをページネーションして表示することができます。スーパーフィールドからコンポーネントをコピーし、フレームに貼り付け、コレクションリストにリンクすることで、キャンバスに再表示させることができます。ページネーションを設定し、ボタンを追加することで、コレクションリストを効果的にページ分割できます。

Keywords

💡フレームラーCMS（Framer CMS）

フレームラーCMSは、ウェブサイトにコンテンツを追加するためのシステムです。このシステムを使用することで、同じようなフォーマットを持つ記事を簡単に追加できます。ビデオでは、ブログを追加する際にフレームラーCMSを利用し、記事を「新聞記事」と比喩して説明しています。

💡スラッグ（Slug）

スラッグは、ウェブサイトのリンクの一部であり、ページを特定する役割を果たします。フレームラーCMSでは、各CMSアイテムにはスラッグが必要です。ビデオでは、スラッグがウェブサイトのURLの後ろにくる部分として説明されています。

💡コレクション（Collection）

フレームラーCMSで、同じフォーマットを持つコンテンツをグループ化するために使用されます。ビデオでは、ブログ記事を含めるために新しいコレクションを作成し、その中に記事を格納しています。

💡フィールド（Field）

フレームラーCMSのアイテムに含まれる情報の入力欄です。デフォルトではタイトルやスラッグがありますが、必要に応じて追加のフィールドをカスタマイズできます。ビデオでは、ブログ記事にタイトル、スラッグ、日付、画像、コンテンツなどのフィールドが必要であると説明されています。

💡グローバルスタイル（Global Style）

フレームラーCMSで、一度スタイルを変更すると、その変更はCMS内のすべてのページに適用されます。ビデオでは、コレクションリストや個々のページのスタイルを変更することで、全体的なデザインの一貫性を保つ方法が紹介されています。

💡テンプレート（Template）

フレームラーCMSで、同じレイアウトを持つ複数のページを効率的に作成するために使用されます。ビデオでは、テンプレートを使用して、ブログ記事の共通部分を一度に管理し、更新するプロセスが説明されています。

💡スーパーフィールド（Superfields）

フレームラーCMSの機能を強化するためのプラグインです。ビデオでは、スーパーフィールドを使用して、コレクションリストのページネーション機能を追加し、ユーザーがページを簡単にナビゲートできるようにしています。

💡ワイヤーフレーム（Wireframe）

デザインの初期段階で、コンテンツのレイアウトを視覚的に表現するために使用されます。ビデオでは、ワイヤーフレームを使用して、コンテンツが配置される場所を示し、デザインの仮説を構築しています。

💡プロパティパネル（Properties Panel）

フレームラーのインターフェースで、選択中のエレメントのプロパティを編集することができるパネルです。ビデオでは、プロパティパネルを使用してCMSから取得したデータをキャンバスに反映させる方法が説明されています。

💡ルール（Rule）

フレームラーCMSで、特定の条件に基づいてコンテンツの表示を制御するために使用されます。ビデオでは、もし作者の情報が設定されていない場合、そのセクションを非表示にすることで、コンテンツの表示を制御しています。

💡ページネーション（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