PageFly Shopify Page Builder App
내용
[subtitle-meta] lang=en auto=True
did you know that optimizing your blog
post page could boost your traffic by up
to 30% welcome to page fly Academy in
today's video we're going to show you
how to optimize your blog post page and
Skyrocket your rankings ready let's dive
in all right here we are in the pagefly
editor I'll go ahead and create a new
blog post page now that we're in the
pagefly canvas let's take a look at the
sample page layout and start building
you'll see a clean layout ready to go in
section one we've got a background image
with a blog post tag a title and a
subheading let's drag and drop these
elements into
place I'll now adjust the heading
paragraph content and spacing to make
everything look more organized and
Visually appealing
to achieve the rounded border like the
sample page I will choose this border
type and click on a more settings to
adjust its width and border
next use a two column layout for the
second section then add margin top
margin left and margin right to create
space between this section and the
section above to add a divider similar
to the one in the sample we can use the
Border top property in the flex section
I'll adjust the width to 20 pixel and
choose a sleek black
color for section two let's break it
down into two Flex blocks block one will
have hug content width and block two
will fill the remaining space there's a
quicker way to build this if you already
have a blog post set up in your Shopify
admin just drag and drop the available
Shopify blog post elements right into
your layout and tweak the
Styles now let's assign our blog title
to dressing for the holiday function and
move on to the next
elements once we're done with the layout
it's all about the styling don't worry
it's simple now navigate to The Styling
tab where you can adjust the content
color
facing F family font size and
more repeat with others heading elements
and for the final section let's add a
section that highlights related products
since this is about the holiday season
let's show off some holiday themed
products you can use the copy style
function to speed things up for the
header and make everything match the
sample page perfectly to adjust the gap
between these blocks click on the flex
section and tweak the vertical Gap under
the general tab to 100 pixel VOA we're
done next up let's switch to mobile view
and make sure everything looks great on
smaller screen on mobile you'll notice
the font size may be too big for smaller
screens let's make it a bit smaller for
a better mobile experience
also margins and paddings that apply to
all devices will automatically adjust
for mobile a common setting is zero
pixel margin for a clean look but on
this example I still want to have some
space between the pages edges and the
content so I set the margin left and
right to 10 pixel for layout we
recommend switching from a two column
layout to a single column for mobile
devices let's show you how to do that
and that's it your page is now mobile
friendly ready to rock on any device now
it's time to save and publish your page
it's as simple as hitting saves and then
publish and that's a wrap you now know
two ways to build a blog post page
including all the essential
sections here's something super exciting
when building pages with pagefly we
provide a ton of pre-made templates to
save you time instead of starting from
scratch let's use a template to speed up
the process I'll go back to the page fly
admin dashboard and this time I'll
choose create from
template I'll choose the sapato template
because it's the closest to the sample
layout we're aiming for now all you need
to do is change the content by clicking
on the elements on the canvas and update
them to fit your needs
then let's spruce up the page with some
styling you can do this quickly using
the styling Tab and boom your page is
ready to go but we're not stopping there
in our next video we'll show you how to
take things up a notch by building a
luxury coming soon page that captures
your Brand's high-end Timeless feel
don't miss out on this exciting Next
Step
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.080 --> 00:00:02.350 align:start position:0% did<00:00:00.280><c> you</c><00:00:00.440><c> know</c><00:00:00.919><c> that</c><00:00:01.240><c> optimizing</c><00:00:01.839><c> your</c><00:00:02.040><c> blog</c> 00:00:02.350 --> 00:00:02.360 align:start position:0% did you know that optimizing your blog 00:00:02.360 --> 00:00:04.670 align:start position:0% did you know that optimizing your blog post<00:00:02.679><c> page</c><00:00:02.919><c> could</c><00:00:03.120><c> boost</c><00:00:03.399><c> your</c><00:00:03.600><c> traffic</c><00:00:04.319><c> by</c><00:00:04.520><c> up</c> 00:00:04.670 --> 00:00:04.680 align:start position:0% post page could boost your traffic by up 00:00:04.680 --> 00:00:08.230 align:start position:0% post page could boost your traffic by up to<00:00:04.960><c> 30%</c><00:00:05.960><c> welcome</c><00:00:06.240><c> to</c><00:00:06.440><c> page</c><00:00:06.759><c> fly</c><00:00:07.080><c> Academy</c><00:00:08.080><c> in</c> 00:00:08.230 --> 00:00:08.240 align:start position:0% to 30% welcome to page fly Academy in 00:00:08.240 --> 00:00:09.950 align:start position:0% to 30% welcome to page fly Academy in today's<00:00:08.719><c> video</c><00:00:09.200><c> we're</c><00:00:09.320><c> going</c><00:00:09.440><c> to</c><00:00:09.559><c> show</c><00:00:09.719><c> you</c> 00:00:09.950 --> 00:00:09.960 align:start position:0% today's video we're going to show you 00:00:09.960 --> 00:00:12.549 align:start position:0% today's video we're going to show you how<00:00:10.120><c> to</c><00:00:10.559><c> optimize</c><00:00:11.120><c> your</c><00:00:11.320><c> blog</c><00:00:11.719><c> post</c><00:00:12.040><c> page</c><00:00:12.400><c> and</c> 00:00:12.549 --> 00:00:12.559 align:start position:0% how to optimize your blog post page and 00:00:12.559 --> 00:00:16.990 align:start position:0% how to optimize your blog post page and Skyrocket<00:00:13.240><c> your</c><00:00:13.480><c> rankings</c><00:00:14.480><c> ready</c><00:00:15.040><c> let's</c><00:00:15.320><c> dive</c> 00:00:16.990 --> 00:00:17.000 align:start position:0% Skyrocket your rankings ready let's dive 00:00:17.000 --> 00:00:19.510 align:start position:0% Skyrocket your rankings ready let's dive in<00:00:18.000><c> all</c><00:00:18.160><c> right</c><00:00:18.359><c> here</c><00:00:18.520><c> we</c><00:00:18.600><c> are</c><00:00:18.760><c> in</c><00:00:18.840><c> the</c><00:00:19.000><c> pagefly</c> 00:00:19.510 --> 00:00:19.520 align:start position:0% in all right here we are in the pagefly 00:00:19.520 --> 00:00:21.710 align:start position:0% in all right here we are in the pagefly editor<00:00:20.279><c> I'll</c><00:00:20.480><c> go</c><00:00:20.600><c> ahead</c><00:00:20.880><c> and</c><00:00:21.080><c> create</c><00:00:21.359><c> a</c><00:00:21.519><c> new</c> 00:00:21.710 --> 00:00:21.720 align:start position:0% editor I'll go ahead and create a new 00:00:21.720 --> 00:00:23.990 align:start position:0% editor I'll go ahead and create a new blog<00:00:22.080><c> post</c><00:00:22.439><c> page</c><00:00:23.279><c> now</c><00:00:23.439><c> that</c><00:00:23.560><c> we're</c><00:00:23.720><c> in</c><00:00:23.800><c> the</c> 00:00:23.990 --> 00:00:24.000 align:start position:0% blog post page now that we're in the 00:00:24.000 --> 00:00:26.349 align:start position:0% blog post page now that we're in the pagefly<00:00:24.560><c> canvas</c><00:00:25.359><c> let's</c><00:00:25.599><c> take</c><00:00:25.720><c> a</c><00:00:25.880><c> look</c><00:00:26.039><c> at</c><00:00:26.199><c> the</c> 00:00:26.349 --> 00:00:26.359 align:start position:0% pagefly canvas let's take a look at the 00:00:26.359 --> 00:00:29.349 align:start position:0% pagefly canvas let's take a look at the sample<00:00:26.800><c> page</c><00:00:27.119><c> layout</c><00:00:27.760><c> and</c><00:00:28.039><c> start</c><00:00:28.359><c> building</c> 00:00:29.349 --> 00:00:29.359 align:start position:0% sample page layout and start building 00:00:29.359 --> 00:00:33.389 align:start position:0% sample page layout and start building you'll<00:00:29.519><c> see</c><00:00:29.679><c> a</c><00:00:30.000><c> clean</c><00:00:30.560><c> layout</c><00:00:31.080><c> ready</c><00:00:31.400><c> to</c><00:00:32.160><c> go</c><00:00:33.160><c> in</c> 00:00:33.389 --> 00:00:33.399 align:start position:0% you'll see a clean layout ready to go in 00:00:33.399 --> 00:00:35.430 align:start position:0% you'll see a clean layout ready to go in section<00:00:33.719><c> one</c><00:00:34.239><c> we've</c><00:00:34.399><c> got</c><00:00:34.520><c> a</c><00:00:34.680><c> background</c><00:00:35.120><c> image</c> 00:00:35.430 --> 00:00:35.440 align:start position:0% section one we've got a background image 00:00:35.440 --> 00:00:38.150 align:start position:0% section one we've got a background image with<00:00:35.559><c> a</c><00:00:35.680><c> blog</c><00:00:36.000><c> post</c><00:00:36.280><c> tag</c><00:00:36.719><c> a</c><00:00:36.920><c> title</c><00:00:37.480><c> and</c><00:00:37.640><c> a</c> 00:00:38.150 --> 00:00:38.160 align:start position:0% with a blog post tag a title and a 00:00:38.160 --> 00:00:40.549 align:start position:0% with a blog post tag a title and a subheading<00:00:39.160><c> let's</c><00:00:39.440><c> drag</c><00:00:39.879><c> and</c><00:00:40.039><c> drop</c><00:00:40.399><c> these</c> 00:00:40.549 --> 00:00:40.559 align:start position:0% subheading let's drag and drop these 00:00:40.559 --> 00:00:43.549 align:start position:0% subheading let's drag and drop these elements<00:00:41.039><c> into</c> 00:00:43.549 --> 00:00:43.559 align:start position:0% 00:00:43.559 --> 00:00:45.990 align:start position:0% place<00:00:44.559><c> I'll</c><00:00:44.760><c> now</c><00:00:44.960><c> adjust</c><00:00:45.280><c> the</c><00:00:45.399><c> heading</c> 00:00:45.990 --> 00:00:46.000 align:start position:0% place I'll now adjust the heading 00:00:46.000 --> 00:00:48.389 align:start position:0% place I'll now adjust the heading paragraph<00:00:46.559><c> content</c><00:00:47.239><c> and</c><00:00:47.440><c> spacing</c><00:00:47.960><c> to</c><00:00:48.120><c> make</c> 00:00:48.389 --> 00:00:48.399 align:start position:0% paragraph content and spacing to make 00:00:48.399 --> 00:00:50.189 align:start position:0% paragraph content and spacing to make everything<00:00:48.760><c> look</c><00:00:49.000><c> more</c><00:00:49.280><c> organized</c><00:00:49.960><c> and</c> 00:00:50.189 --> 00:00:50.199 align:start position:0% everything look more organized and 00:00:50.199 --> 00:01:09.670 align:start position:0% everything look more organized and Visually<00:00:50.680><c> appealing</c> 00:01:09.670 --> 00:01:09.680 align:start position:0% 00:01:09.680 --> 00:01:11.590 align:start position:0% to<00:01:09.920><c> achieve</c><00:01:10.320><c> the</c><00:01:10.479><c> rounded</c><00:01:10.920><c> border</c><00:01:11.280><c> like</c><00:01:11.479><c> the</c> 00:01:11.590 --> 00:01:11.600 align:start position:0% to achieve the rounded border like the 00:01:11.600 --> 00:01:14.230 align:start position:0% to achieve the rounded border like the sample<00:01:12.080><c> page</c><00:01:13.000><c> I</c><00:01:13.080><c> will</c><00:01:13.280><c> choose</c><00:01:13.680><c> this</c><00:01:13.840><c> border</c> 00:01:14.230 --> 00:01:14.240 align:start position:0% sample page I will choose this border 00:01:14.240 --> 00:01:16.390 align:start position:0% sample page I will choose this border type<00:01:14.520><c> and</c><00:01:14.759><c> click</c><00:01:14.960><c> on</c><00:01:15.119><c> a</c><00:01:15.280><c> more</c><00:01:15.520><c> settings</c><00:01:16.159><c> to</c> 00:01:16.390 --> 00:01:16.400 align:start position:0% type and click on a more settings to 00:01:16.400 --> 00:01:49.830 align:start position:0% type and click on a more settings to adjust<00:01:16.840><c> its</c><00:01:17.080><c> width</c><00:01:17.360><c> and</c><00:01:17.520><c> border</c> 00:01:49.830 --> 00:01:49.840 align:start position:0% 00:01:49.840 --> 00:01:52.030 align:start position:0% next<00:01:50.159><c> use</c><00:01:50.360><c> a</c><00:01:50.560><c> two</c><00:01:50.880><c> column</c><00:01:51.200><c> layout</c><00:01:51.640><c> for</c><00:01:51.840><c> the</c> 00:01:52.030 --> 00:01:52.040 align:start position:0% next use a two column layout for the 00:01:52.040 --> 00:01:54.670 align:start position:0% next use a two column layout for the second<00:01:52.439><c> section</c><00:01:53.159><c> then</c><00:01:53.439><c> add</c><00:01:53.680><c> margin</c><00:01:54.159><c> top</c> 00:01:54.670 --> 00:01:54.680 align:start position:0% second section then add margin top 00:01:54.680 --> 00:01:57.270 align:start position:0% second section then add margin top margin<00:01:55.159><c> left</c><00:01:55.600><c> and</c><00:01:55.799><c> margin</c><00:01:56.320><c> right</c><00:01:56.600><c> to</c><00:01:56.799><c> create</c> 00:01:57.270 --> 00:01:57.280 align:start position:0% margin left and margin right to create 00:01:57.280 --> 00:01:58.950 align:start position:0% margin left and margin right to create space<00:01:57.719><c> between</c><00:01:58.039><c> this</c><00:01:58.240><c> section</c><00:01:58.680><c> and</c><00:01:58.799><c> the</c> 00:01:58.950 --> 00:01:58.960 align:start position:0% space between this section and the 00:01:58.960 --> 00:02:01.230 align:start position:0% space between this section and the section<00:01:59.320><c> above</c><00:01:59.920><c> to</c><00:02:00.079><c> add</c><00:02:00.240><c> a</c><00:02:00.399><c> divider</c><00:02:00.880><c> similar</c> 00:02:01.230 --> 00:02:01.240 align:start position:0% section above to add a divider similar 00:02:01.240 --> 00:02:03.190 align:start position:0% section above to add a divider similar to<00:02:01.399><c> the</c><00:02:01.479><c> one</c><00:02:01.640><c> in</c><00:02:01.759><c> the</c><00:02:01.920><c> sample</c><00:02:02.640><c> we</c><00:02:02.759><c> can</c><00:02:02.880><c> use</c><00:02:03.079><c> the</c> 00:02:03.190 --> 00:02:03.200 align:start position:0% to the one in the sample we can use the 00:02:03.200 --> 00:02:06.469 align:start position:0% to the one in the sample we can use the Border<00:02:03.640><c> top</c><00:02:03.920><c> property</c><00:02:04.680><c> in</c><00:02:04.840><c> the</c><00:02:04.960><c> flex</c><00:02:05.479><c> section</c> 00:02:06.469 --> 00:02:06.479 align:start position:0% Border top property in the flex section 00:02:06.479 --> 00:02:08.669 align:start position:0% Border top property in the flex section I'll<00:02:06.680><c> adjust</c><00:02:07.039><c> the</c><00:02:07.200><c> width</c><00:02:07.600><c> to</c><00:02:07.880><c> 20</c><00:02:08.200><c> pixel</c><00:02:08.599><c> and</c> 00:02:08.669 --> 00:02:08.679 align:start position:0% I'll adjust the width to 20 pixel and 00:02:08.679 --> 00:02:11.190 align:start position:0% I'll adjust the width to 20 pixel and choose<00:02:08.920><c> a</c><00:02:09.000><c> sleek</c><00:02:09.319><c> black</c> 00:02:11.190 --> 00:02:11.200 align:start position:0% choose a sleek black 00:02:11.200 --> 00:02:14.070 align:start position:0% choose a sleek black color<00:02:12.200><c> for</c><00:02:12.480><c> section</c><00:02:12.840><c> two</c><00:02:13.480><c> let's</c><00:02:13.680><c> break</c><00:02:13.920><c> it</c> 00:02:14.070 --> 00:02:14.080 align:start position:0% color for section two let's break it 00:02:14.080 --> 00:02:16.790 align:start position:0% color for section two let's break it down<00:02:14.319><c> into</c><00:02:14.599><c> two</c><00:02:14.800><c> Flex</c><00:02:15.200><c> blocks</c><00:02:16.000><c> block</c><00:02:16.280><c> one</c><00:02:16.599><c> will</c> 00:02:16.790 --> 00:02:16.800 align:start position:0% down into two Flex blocks block one will 00:02:16.800 --> 00:02:18.869 align:start position:0% down into two Flex blocks block one will have<00:02:16.959><c> hug</c><00:02:17.280><c> content</c><00:02:17.640><c> width</c><00:02:18.120><c> and</c><00:02:18.280><c> block</c><00:02:18.599><c> two</c> 00:02:18.869 --> 00:02:18.879 align:start position:0% have hug content width and block two 00:02:18.879 --> 00:02:21.190 align:start position:0% have hug content width and block two will<00:02:19.040><c> fill</c><00:02:19.280><c> the</c><00:02:19.560><c> remaining</c><00:02:19.959><c> space</c><00:02:20.879><c> there's</c><00:02:21.040><c> a</c> 00:02:21.190 --> 00:02:21.200 align:start position:0% will fill the remaining space there's a 00:02:21.200 --> 00:02:22.869 align:start position:0% will fill the remaining space there's a quicker<00:02:21.519><c> way</c><00:02:21.640><c> to</c><00:02:21.760><c> build</c><00:02:22.040><c> this</c><00:02:22.239><c> if</c><00:02:22.360><c> you</c><00:02:22.560><c> already</c> 00:02:22.869 --> 00:02:22.879 align:start position:0% quicker way to build this if you already 00:02:22.879 --> 00:02:24.910 align:start position:0% quicker way to build this if you already have<00:02:23.000><c> a</c><00:02:23.160><c> blog</c><00:02:23.440><c> post</c><00:02:23.680><c> set</c><00:02:23.879><c> up</c><00:02:24.000><c> in</c><00:02:24.120><c> your</c><00:02:24.239><c> Shopify</c> 00:02:24.910 --> 00:02:24.920 align:start position:0% have a blog post set up in your Shopify 00:02:24.920 --> 00:02:27.550 align:start position:0% have a blog post set up in your Shopify admin<00:02:25.920><c> just</c><00:02:26.160><c> drag</c><00:02:26.519><c> and</c><00:02:26.680><c> drop</c><00:02:26.959><c> the</c><00:02:27.120><c> available</c> 00:02:27.550 --> 00:02:27.560 align:start position:0% admin just drag and drop the available 00:02:27.560 --> 00:02:30.229 align:start position:0% admin just drag and drop the available Shopify<00:02:28.200><c> blog</c><00:02:28.519><c> post</c><00:02:28.800><c> elements</c><00:02:29.599><c> right</c><00:02:30.040><c> into</c> 00:02:30.229 --> 00:02:30.239 align:start position:0% Shopify blog post elements right into 00:02:30.239 --> 00:02:38.229 align:start position:0% Shopify blog post elements right into your<00:02:30.360><c> layout</c><00:02:30.760><c> and</c><00:02:30.879><c> tweak</c><00:02:31.160><c> the</c> 00:02:38.229 --> 00:02:38.239 align:start position:0% 00:02:38.239 --> 00:02:41.030 align:start position:0% Styles<00:02:39.239><c> now</c><00:02:39.599><c> let's</c><00:02:39.800><c> assign</c><00:02:40.080><c> our</c><00:02:40.239><c> blog</c><00:02:40.560><c> title</c> 00:02:41.030 --> 00:02:41.040 align:start position:0% Styles now let's assign our blog title 00:02:41.040 --> 00:02:42.990 align:start position:0% Styles now let's assign our blog title to<00:02:41.200><c> dressing</c><00:02:41.519><c> for</c><00:02:41.720><c> the</c><00:02:41.879><c> holiday</c><00:02:42.280><c> function</c><00:02:42.879><c> and</c> 00:02:42.990 --> 00:02:43.000 align:start position:0% to dressing for the holiday function and 00:02:43.000 --> 00:02:54.070 align:start position:0% to dressing for the holiday function and move<00:02:43.239><c> on</c><00:02:43.440><c> to</c><00:02:43.599><c> the</c><00:02:43.760><c> next</c> 00:02:54.070 --> 00:02:54.080 align:start position:0% 00:02:54.080 --> 00:02:56.270 align:start position:0% elements<00:02:55.080><c> once</c><00:02:55.239><c> we're</c><00:02:55.400><c> done</c><00:02:55.560><c> with</c><00:02:55.680><c> the</c><00:02:55.800><c> layout</c> 00:02:56.270 --> 00:02:56.280 align:start position:0% elements once we're done with the layout 00:02:56.280 --> 00:02:58.550 align:start position:0% elements once we're done with the layout it's<00:02:56.519><c> all</c><00:02:56.760><c> about</c><00:02:57.000><c> the</c><00:02:57.200><c> styling</c><00:02:57.959><c> don't</c><00:02:58.200><c> worry</c> 00:02:58.550 --> 00:02:58.560 align:start position:0% it's all about the styling don't worry 00:02:58.560 --> 00:03:01.030 align:start position:0% it's all about the styling don't worry it's<00:02:58.760><c> simple</c><00:02:59.640><c> now</c><00:02:59.840><c> navigate</c><00:03:00.200><c> to</c><00:03:00.360><c> The</c><00:03:00.560><c> Styling</c> 00:03:01.030 --> 00:03:01.040 align:start position:0% it's simple now navigate to The Styling 00:03:01.040 --> 00:03:03.630 align:start position:0% it's simple now navigate to The Styling tab<00:03:01.360><c> where</c><00:03:01.480><c> you</c><00:03:01.599><c> can</c><00:03:01.800><c> adjust</c><00:03:02.120><c> the</c><00:03:02.280><c> content</c> 00:03:03.630 --> 00:03:03.640 align:start position:0% tab where you can adjust the content 00:03:03.640 --> 00:03:06.270 align:start position:0% tab where you can adjust the content color 00:03:06.270 --> 00:03:06.280 align:start position:0% color 00:03:06.280 --> 00:03:10.869 align:start position:0% color facing<00:03:07.280><c> F</c><00:03:07.640><c> family</c><00:03:08.080><c> font</c><00:03:08.519><c> size</c><00:03:08.959><c> and</c> 00:03:10.869 --> 00:03:10.879 align:start position:0% facing F family font size and 00:03:10.879 --> 00:03:36.229 align:start position:0% facing F family font size and more<00:03:11.879><c> repeat</c><00:03:12.239><c> with</c><00:03:12.360><c> others</c><00:03:12.680><c> heading</c><00:03:12.959><c> elements</c> 00:03:36.229 --> 00:03:36.239 align:start position:0% 00:03:36.239 --> 00:03:38.670 align:start position:0% and<00:03:36.360><c> for</c><00:03:36.560><c> the</c><00:03:36.720><c> final</c><00:03:37.040><c> section</c><00:03:37.879><c> let's</c><00:03:38.159><c> add</c><00:03:38.480><c> a</c> 00:03:38.670 --> 00:03:38.680 align:start position:0% and for the final section let's add a 00:03:38.680 --> 00:03:41.070 align:start position:0% and for the final section let's add a section<00:03:39.080><c> that</c><00:03:39.280><c> highlights</c><00:03:39.720><c> related</c><00:03:40.239><c> products</c> 00:03:41.070 --> 00:03:41.080 align:start position:0% section that highlights related products 00:03:41.080 --> 00:03:43.229 align:start position:0% section that highlights related products since<00:03:41.400><c> this</c><00:03:41.519><c> is</c><00:03:41.680><c> about</c><00:03:41.920><c> the</c><00:03:42.080><c> holiday</c><00:03:42.480><c> season</c> 00:03:43.229 --> 00:03:43.239 align:start position:0% since this is about the holiday season 00:03:43.239 --> 00:03:50.789 align:start position:0% since this is about the holiday season let's<00:03:43.480><c> show</c><00:03:43.799><c> off</c><00:03:44.040><c> some</c><00:03:44.280><c> holiday</c><00:03:44.680><c> themed</c> 00:03:50.789 --> 00:03:50.799 align:start position:0% 00:03:50.799 --> 00:03:53.149 align:start position:0% products<00:03:51.799><c> you</c><00:03:51.920><c> can</c><00:03:52.079><c> use</c><00:03:52.360><c> the</c><00:03:52.519><c> copy</c><00:03:52.840><c> style</c> 00:03:53.149 --> 00:03:53.159 align:start position:0% products you can use the copy style 00:03:53.159 --> 00:03:55.110 align:start position:0% products you can use the copy style function<00:03:53.959><c> to</c><00:03:54.159><c> speed</c><00:03:54.480><c> things</c><00:03:54.680><c> up</c><00:03:54.840><c> for</c><00:03:55.000><c> the</c> 00:03:55.110 --> 00:03:55.120 align:start position:0% function to speed things up for the 00:03:55.120 --> 00:03:56.910 align:start position:0% function to speed things up for the header<00:03:55.480><c> and</c><00:03:55.640><c> make</c><00:03:55.959><c> everything</c><00:03:56.439><c> match</c><00:03:56.760><c> the</c> 00:03:56.910 --> 00:03:56.920 align:start position:0% header and make everything match the 00:03:56.920 --> 00:04:00.110 align:start position:0% header and make everything match the sample<00:03:57.360><c> page</c><00:03:57.840><c> perfectly</c><00:03:58.840><c> to</c><00:03:59.159><c> adjust</c><00:03:59.519><c> the</c><00:03:59.879><c> gap</c> 00:04:00.110 --> 00:04:00.120 align:start position:0% sample page perfectly to adjust the gap 00:04:00.120 --> 00:04:02.309 align:start position:0% sample page perfectly to adjust the gap between<00:04:00.480><c> these</c><00:04:00.720><c> blocks</c><00:04:01.439><c> click</c><00:04:01.680><c> on</c><00:04:01.799><c> the</c><00:04:01.920><c> flex</c> 00:04:02.309 --> 00:04:02.319 align:start position:0% between these blocks click on the flex 00:04:02.319 --> 00:04:04.830 align:start position:0% between these blocks click on the flex section<00:04:02.760><c> and</c><00:04:02.920><c> tweak</c><00:04:03.319><c> the</c><00:04:03.519><c> vertical</c><00:04:04.000><c> Gap</c><00:04:04.439><c> under</c> 00:04:04.830 --> 00:04:04.840 align:start position:0% section and tweak the vertical Gap under 00:04:04.840 --> 00:04:09.309 align:start position:0% section and tweak the vertical Gap under the<00:04:05.000><c> general</c><00:04:05.439><c> tab</c><00:04:05.760><c> to</c><00:04:06.159><c> 100</c><00:04:06.959><c> pixel</c><00:04:07.959><c> VOA</c><00:04:08.760><c> we're</c> 00:04:09.309 --> 00:04:09.319 align:start position:0% the general tab to 100 pixel VOA we're 00:04:09.319 --> 00:04:12.470 align:start position:0% the general tab to 100 pixel VOA we're done<00:04:10.319><c> next</c><00:04:10.599><c> up</c><00:04:11.159><c> let's</c><00:04:11.360><c> switch</c><00:04:11.680><c> to</c><00:04:11.840><c> mobile</c><00:04:12.120><c> view</c> 00:04:12.470 --> 00:04:12.480 align:start position:0% done next up let's switch to mobile view 00:04:12.480 --> 00:04:14.429 align:start position:0% done next up let's switch to mobile view and<00:04:12.680><c> make</c><00:04:12.799><c> sure</c><00:04:13.280><c> everything</c><00:04:13.720><c> looks</c><00:04:14.000><c> great</c><00:04:14.239><c> on</c> 00:04:14.429 --> 00:04:14.439 align:start position:0% and make sure everything looks great on 00:04:14.439 --> 00:04:17.150 align:start position:0% and make sure everything looks great on smaller<00:04:14.879><c> screen</c><00:04:15.840><c> on</c><00:04:16.040><c> mobile</c><00:04:16.680><c> you'll</c><00:04:16.880><c> notice</c> 00:04:17.150 --> 00:04:17.160 align:start position:0% smaller screen on mobile you'll notice 00:04:17.160 --> 00:04:19.069 align:start position:0% smaller screen on mobile you'll notice the<00:04:17.280><c> font</c><00:04:17.560><c> size</c><00:04:17.799><c> may</c><00:04:17.919><c> be</c><00:04:18.040><c> too</c><00:04:18.320><c> big</c><00:04:18.479><c> for</c><00:04:18.680><c> smaller</c> 00:04:19.069 --> 00:04:19.079 align:start position:0% the font size may be too big for smaller 00:04:19.079 --> 00:04:21.390 align:start position:0% the font size may be too big for smaller screens<00:04:20.000><c> let's</c><00:04:20.199><c> make</c><00:04:20.320><c> it</c><00:04:20.479><c> a</c><00:04:20.600><c> bit</c><00:04:20.799><c> smaller</c><00:04:21.239><c> for</c> 00:04:21.390 --> 00:04:21.400 align:start position:0% screens let's make it a bit smaller for 00:04:21.400 --> 00:04:32.990 align:start position:0% screens let's make it a bit smaller for a<00:04:21.519><c> better</c><00:04:21.840><c> mobile</c><00:04:22.320><c> experience</c> 00:04:32.990 --> 00:04:33.000 align:start position:0% 00:04:33.000 --> 00:04:35.350 align:start position:0% also<00:04:33.360><c> margins</c><00:04:33.919><c> and</c><00:04:34.120><c> paddings</c><00:04:34.560><c> that</c><00:04:34.759><c> apply</c><00:04:35.120><c> to</c> 00:04:35.350 --> 00:04:35.360 align:start position:0% also margins and paddings that apply to 00:04:35.360 --> 00:04:37.790 align:start position:0% also margins and paddings that apply to all<00:04:35.680><c> devices</c><00:04:36.160><c> will</c><00:04:36.440><c> automatically</c><00:04:37.240><c> adjust</c> 00:04:37.790 --> 00:04:37.800 align:start position:0% all devices will automatically adjust 00:04:37.800 --> 00:04:40.749 align:start position:0% all devices will automatically adjust for<00:04:38.080><c> mobile</c><00:04:39.080><c> a</c><00:04:39.320><c> common</c><00:04:39.639><c> setting</c><00:04:40.080><c> is</c><00:04:40.320><c> zero</c> 00:04:40.749 --> 00:04:40.759 align:start position:0% for mobile a common setting is zero 00:04:40.759 --> 00:04:43.189 align:start position:0% for mobile a common setting is zero pixel<00:04:41.120><c> margin</c><00:04:41.479><c> for</c><00:04:41.639><c> a</c><00:04:41.759><c> clean</c><00:04:42.120><c> look</c><00:04:42.880><c> but</c><00:04:43.039><c> on</c> 00:04:43.189 --> 00:04:43.199 align:start position:0% pixel margin for a clean look but on 00:04:43.199 --> 00:04:45.029 align:start position:0% pixel margin for a clean look but on this<00:04:43.400><c> example</c><00:04:43.919><c> I</c><00:04:44.039><c> still</c><00:04:44.280><c> want</c><00:04:44.400><c> to</c><00:04:44.600><c> have</c><00:04:44.800><c> some</c> 00:04:45.029 --> 00:04:45.039 align:start position:0% this example I still want to have some 00:04:45.039 --> 00:04:47.310 align:start position:0% this example I still want to have some space<00:04:45.360><c> between</c><00:04:45.720><c> the</c><00:04:45.880><c> pages</c><00:04:46.240><c> edges</c><00:04:46.960><c> and</c><00:04:47.080><c> the</c> 00:04:47.310 --> 00:04:47.320 align:start position:0% space between the pages edges and the 00:04:47.320 --> 00:04:49.270 align:start position:0% space between the pages edges and the content<00:04:47.880><c> so</c><00:04:48.080><c> I</c><00:04:48.160><c> set</c><00:04:48.400><c> the</c><00:04:48.520><c> margin</c><00:04:48.880><c> left</c><00:04:49.039><c> and</c> 00:04:49.270 --> 00:04:49.280 align:start position:0% content so I set the margin left and 00:04:49.280 --> 00:04:52.390 align:start position:0% content so I set the margin left and right<00:04:49.440><c> to</c><00:04:49.600><c> 10</c><00:04:50.240><c> pixel</c><00:04:51.240><c> for</c><00:04:51.479><c> layout</c><00:04:52.240><c> we</c> 00:04:52.390 --> 00:04:52.400 align:start position:0% right to 10 pixel for layout we 00:04:52.400 --> 00:04:54.310 align:start position:0% right to 10 pixel for layout we recommend<00:04:52.919><c> switching</c><00:04:53.320><c> from</c><00:04:53.479><c> a</c><00:04:53.680><c> two</c><00:04:54.000><c> column</c> 00:04:54.310 --> 00:04:54.320 align:start position:0% recommend switching from a two column 00:04:54.320 --> 00:04:56.390 align:start position:0% recommend switching from a two column layout<00:04:54.800><c> to</c><00:04:54.960><c> a</c><00:04:55.080><c> single</c><00:04:55.440><c> column</c><00:04:55.759><c> for</c><00:04:56.000><c> mobile</c> 00:04:56.390 --> 00:04:56.400 align:start position:0% layout to a single column for mobile 00:04:56.400 --> 00:05:02.629 align:start position:0% layout to a single column for mobile devices<00:04:57.400><c> let's</c><00:04:57.639><c> show</c><00:04:57.840><c> you</c><00:04:58.039><c> how</c><00:04:58.199><c> to</c><00:04:58.400><c> do</c><00:04:58.639><c> that</c> 00:05:02.629 --> 00:05:02.639 align:start position:0% 00:05:02.639 --> 00:05:05.110 align:start position:0% and<00:05:02.880><c> that's</c><00:05:03.080><c> it</c><00:05:03.720><c> your</c><00:05:04.000><c> page</c><00:05:04.199><c> is</c><00:05:04.400><c> now</c><00:05:04.720><c> mobile</c> 00:05:05.110 --> 00:05:05.120 align:start position:0% and that's it your page is now mobile 00:05:05.120 --> 00:05:08.510 align:start position:0% and that's it your page is now mobile friendly<00:05:05.720><c> ready</c><00:05:05.919><c> to</c><00:05:06.120><c> rock</c><00:05:06.400><c> on</c><00:05:06.600><c> any</c><00:05:07.320><c> device</c><00:05:08.320><c> now</c> 00:05:08.510 --> 00:05:08.520 align:start position:0% friendly ready to rock on any device now 00:05:08.520 --> 00:05:10.430 align:start position:0% friendly ready to rock on any device now it's<00:05:08.680><c> time</c><00:05:08.840><c> to</c><00:05:08.960><c> save</c><00:05:09.199><c> and</c><00:05:09.360><c> publish</c><00:05:09.680><c> your</c><00:05:09.880><c> page</c> 00:05:10.430 --> 00:05:10.440 align:start position:0% it's time to save and publish your page 00:05:10.440 --> 00:05:20.230 align:start position:0% it's time to save and publish your page it's<00:05:10.639><c> as</c><00:05:10.800><c> simple</c><00:05:11.039><c> as</c><00:05:11.240><c> hitting</c><00:05:11.560><c> saves</c><00:05:12.240><c> and</c><00:05:12.400><c> then</c> 00:05:20.230 --> 00:05:20.240 align:start position:0% 00:05:20.240 --> 00:05:23.110 align:start position:0% publish<00:05:21.240><c> and</c><00:05:21.400><c> that's</c><00:05:21.520><c> a</c><00:05:21.720><c> wrap</c><00:05:22.560><c> you</c><00:05:22.720><c> now</c><00:05:22.880><c> know</c> 00:05:23.110 --> 00:05:23.120 align:start position:0% publish and that's a wrap you now know 00:05:23.120 --> 00:05:24.909 align:start position:0% publish and that's a wrap you now know two<00:05:23.319><c> ways</c><00:05:23.520><c> to</c><00:05:23.680><c> build</c><00:05:23.880><c> a</c><00:05:24.000><c> blog</c><00:05:24.280><c> post</c><00:05:24.600><c> page</c> 00:05:24.909 --> 00:05:24.919 align:start position:0% two ways to build a blog post page 00:05:24.919 --> 00:05:28.110 align:start position:0% two ways to build a blog post page including<00:05:25.400><c> all</c><00:05:25.560><c> the</c><00:05:25.720><c> essential</c> 00:05:28.110 --> 00:05:28.120 align:start position:0% including all the essential 00:05:28.120 --> 00:05:31.469 align:start position:0% including all the essential sections<00:05:29.120><c> here's</c><00:05:29.360><c> something</c><00:05:30.000><c> super</c><00:05:30.479><c> exciting</c> 00:05:31.469 --> 00:05:31.479 align:start position:0% sections here's something super exciting 00:05:31.479 --> 00:05:33.790 align:start position:0% sections here's something super exciting when<00:05:31.639><c> building</c><00:05:32.080><c> pages</c><00:05:32.440><c> with</c><00:05:32.680><c> pagefly</c><00:05:33.600><c> we</c> 00:05:33.790 --> 00:05:33.800 align:start position:0% when building pages with pagefly we 00:05:33.800 --> 00:05:36.070 align:start position:0% when building pages with pagefly we provide<00:05:34.160><c> a</c><00:05:34.360><c> ton</c><00:05:34.759><c> of</c><00:05:35.000><c> pre-made</c><00:05:35.440><c> templates</c><00:05:35.919><c> to</c> 00:05:36.070 --> 00:05:36.080 align:start position:0% provide a ton of pre-made templates to 00:05:36.080 --> 00:05:38.430 align:start position:0% provide a ton of pre-made templates to save<00:05:36.280><c> you</c><00:05:36.560><c> time</c><00:05:37.479><c> instead</c><00:05:37.800><c> of</c><00:05:37.919><c> starting</c><00:05:38.240><c> from</c> 00:05:38.430 --> 00:05:38.440 align:start position:0% save you time instead of starting from 00:05:38.440 --> 00:05:40.790 align:start position:0% save you time instead of starting from scratch<00:05:39.160><c> let's</c><00:05:39.319><c> use</c><00:05:39.479><c> a</c><00:05:39.680><c> template</c><00:05:40.160><c> to</c><00:05:40.319><c> speed</c><00:05:40.600><c> up</c> 00:05:40.790 --> 00:05:40.800 align:start position:0% scratch let's use a template to speed up 00:05:40.800 --> 00:05:43.189 align:start position:0% scratch let's use a template to speed up the<00:05:41.039><c> process</c><00:05:41.880><c> I'll</c><00:05:42.080><c> go</c><00:05:42.240><c> back</c><00:05:42.360><c> to</c><00:05:42.479><c> the</c><00:05:42.639><c> page</c><00:05:42.880><c> fly</c> 00:05:43.189 --> 00:05:43.199 align:start position:0% the process I'll go back to the page fly 00:05:43.199 --> 00:05:45.189 align:start position:0% the process I'll go back to the page fly admin<00:05:43.639><c> dashboard</c><00:05:44.479><c> and</c><00:05:44.680><c> this</c><00:05:44.840><c> time</c><00:05:45.039><c> I'll</c> 00:05:45.189 --> 00:05:45.199 align:start position:0% admin dashboard and this time I'll 00:05:45.199 --> 00:05:46.909 align:start position:0% admin dashboard and this time I'll choose<00:05:45.720><c> create</c><00:05:46.039><c> from</c> 00:05:46.909 --> 00:05:46.919 align:start position:0% choose create from 00:05:46.919 --> 00:05:49.510 align:start position:0% choose create from template<00:05:47.919><c> I'll</c><00:05:48.039><c> choose</c><00:05:48.280><c> the</c><00:05:48.440><c> sapato</c><00:05:49.000><c> template</c> 00:05:49.510 --> 00:05:49.520 align:start position:0% template I'll choose the sapato template 00:05:49.520 --> 00:05:51.150 align:start position:0% template I'll choose the sapato template because<00:05:49.759><c> it's</c><00:05:49.960><c> the</c><00:05:50.120><c> closest</c><00:05:50.479><c> to</c><00:05:50.639><c> the</c><00:05:50.800><c> sample</c> 00:05:51.150 --> 00:05:51.160 align:start position:0% because it's the closest to the sample 00:05:51.160 --> 00:05:53.710 align:start position:0% because it's the closest to the sample layout<00:05:51.440><c> we're</c><00:05:51.639><c> aiming</c><00:05:52.120><c> for</c><00:05:53.120><c> now</c><00:05:53.280><c> all</c><00:05:53.400><c> you</c><00:05:53.520><c> need</c> 00:05:53.710 --> 00:05:53.720 align:start position:0% layout we're aiming for now all you need 00:05:53.720 --> 00:05:55.830 align:start position:0% layout we're aiming for now all you need to<00:05:53.880><c> do</c><00:05:54.120><c> is</c><00:05:54.280><c> change</c><00:05:54.600><c> the</c><00:05:54.800><c> content</c><00:05:55.360><c> by</c><00:05:55.520><c> clicking</c> 00:05:55.830 --> 00:05:55.840 align:start position:0% to do is change the content by clicking 00:05:55.840 --> 00:05:58.150 align:start position:0% to do is change the content by clicking on<00:05:56.000><c> the</c><00:05:56.120><c> elements</c><00:05:56.600><c> on</c><00:05:56.759><c> the</c><00:05:56.960><c> canvas</c><00:05:57.479><c> and</c><00:05:57.720><c> update</c> 00:05:58.150 --> 00:05:58.160 align:start position:0% on the elements on the canvas and update 00:05:58.160 --> 00:06:02.550 align:start position:0% on the elements on the canvas and update them<00:05:58.560><c> to</c><00:05:58.720><c> fit</c><00:05:58.919><c> your</c><00:05:59.080><c> needs</c> 00:06:02.550 --> 00:06:02.560 align:start position:0% 00:06:02.560 --> 00:06:04.350 align:start position:0% then<00:06:02.960><c> let's</c><00:06:03.160><c> spruce</c><00:06:03.520><c> up</c><00:06:03.639><c> the</c><00:06:03.800><c> page</c><00:06:04.000><c> with</c><00:06:04.160><c> some</c> 00:06:04.350 --> 00:06:04.360 align:start position:0% then let's spruce up the page with some 00:06:04.360 --> 00:06:06.430 align:start position:0% then let's spruce up the page with some styling<00:06:05.160><c> you</c><00:06:05.280><c> can</c><00:06:05.440><c> do</c><00:06:05.639><c> this</c><00:06:05.840><c> quickly</c><00:06:06.199><c> using</c> 00:06:06.430 --> 00:06:06.440 align:start position:0% styling you can do this quickly using 00:06:06.440 --> 00:06:09.390 align:start position:0% styling you can do this quickly using the<00:06:06.599><c> styling</c><00:06:07.160><c> Tab</c><00:06:08.160><c> and</c><00:06:08.400><c> boom</c><00:06:08.759><c> your</c><00:06:09.000><c> page</c><00:06:09.240><c> is</c> 00:06:09.390 --> 00:06:09.400 align:start position:0% the styling Tab and boom your page is 00:06:09.400 --> 00:06:11.870 align:start position:0% the styling Tab and boom your page is ready<00:06:09.599><c> to</c><00:06:09.840><c> go</c><00:06:10.639><c> but</c><00:06:10.759><c> we're</c><00:06:10.919><c> not</c><00:06:11.120><c> stopping</c><00:06:11.599><c> there</c> 00:06:11.870 --> 00:06:11.880 align:start position:0% ready to go but we're not stopping there 00:06:11.880 --> 00:06:13.749 align:start position:0% ready to go but we're not stopping there in<00:06:12.000><c> our</c><00:06:12.240><c> next</c><00:06:12.520><c> video</c><00:06:12.960><c> we'll</c><00:06:13.120><c> show</c><00:06:13.319><c> you</c><00:06:13.479><c> how</c><00:06:13.599><c> to</c> 00:06:13.749 --> 00:06:13.759 align:start position:0% in our next video we'll show you how to 00:06:13.759 --> 00:06:15.589 align:start position:0% in our next video we'll show you how to take<00:06:14.000><c> things</c><00:06:14.199><c> up</c><00:06:14.360><c> a</c><00:06:14.560><c> notch</c><00:06:14.880><c> by</c><00:06:15.000><c> building</c><00:06:15.319><c> a</c> 00:06:15.589 --> 00:06:15.599 align:start position:0% take things up a notch by building a 00:06:15.599 --> 00:06:17.710 align:start position:0% take things up a notch by building a luxury<00:06:16.000><c> coming</c><00:06:16.319><c> soon</c><00:06:16.800><c> page</c><00:06:17.160><c> that</c><00:06:17.360><c> captures</c> 00:06:17.710 --> 00:06:17.720 align:start position:0% luxury coming soon page that captures 00:06:17.720 --> 00:06:20.350 align:start position:0% luxury coming soon page that captures your<00:06:17.880><c> Brand's</c><00:06:18.319><c> high-end</c><00:06:19.120><c> Timeless</c><00:06:19.560><c> feel</c> 00:06:20.350 --> 00:06:20.360 align:start position:0% your Brand's high-end Timeless feel 00:06:20.360 --> 00:06:21.909 align:start position:0% your Brand's high-end Timeless feel don't<00:06:20.599><c> miss</c><00:06:20.759><c> out</c><00:06:20.919><c> on</c><00:06:21.080><c> this</c><00:06:21.280><c> exciting</c><00:06:21.680><c> Next</c> 00:06:21.909 --> 00:06:21.919 align:start position:0% don't miss out on this exciting Next 00:06:21.919 --> 00:06:24.199 align:start position:0% don't miss out on this exciting Next Step