怎么设计一个页面-布局篇

[vc_row][vc_column][vc_column_text woodmart_inline=”no” text_larger=”no”]我们创建一个页面后，可以选择3种编辑器，各有不同的优点，可选择合适自己的来编辑。

后台-模块化编辑器

创建好页面后，默认是经典模式，我们要点击“模块化编辑器”切换。

我们的步骤就是，先设置行和列，再插入功能模块。

点击“添加元素”，选择 “行”的模块

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″ woodmart_css_id=”659804a43bef6″ parallax_scroll=”no” woodmart_sticky_column=”false” wd_collapsible_content_switcher=”no” wd_column_role_offcanvas_desktop=”no” wd_column_role_offcanvas_tablet=”no” wd_column_role_offcanvas_mobile=”no” wd_column_role_content_desktop=”no” wd_column_role_content_tablet=”no” wd_column_role_content_mobile=”no” mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_box_shadow=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk4MDRhNDNiZWY2Iiwic2hvcnRjb2RlIjoidmNfY29sdW1uIiwiZGF0YSI6eyJ0YWJsZXQiOnt9LCJtb2JpbGUiOnt9fX0=” mobile_reset_margin=”no” tablet_reset_margin=”no” wd_z_index=”no”][woodmart_text_block woodmart_css_id=”659802816199f” woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk4MDI4MTYxOTlmIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]

创建行

创建行，也可以复制行，行还可以拖动换位置。[/woodmart_text_block][woodmart_video video_hosted=”7488″ video_poster=”7490″ video_size=”aspect_ratio” video_aspect_ratio=”eyJkZXZpY2VzIjp7ImRlc2t0b3AiOnsidmFsdWUiOiIxNi85In19fQ==” woodmart_css_id=”659810813c79d” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk4MTA4MTNjNzlkIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdmlkZW8iLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==” video_autoplay=”yes” video_mute=”yes” video_loop=”yes” video_controls=”yes”][/vc_column][vc_column width=”1/2″][woodmart_text_block woodmart_css_id=”659802ba67e15″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk4MDJiYTY3ZTE1Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]

嵌套行

同一行里面还可以创建行，这样可以制作复杂的列布局。[/woodmart_text_block][woodmart_video video_hosted=”7487″ video_poster=”7489″ video_size=”aspect_ratio” video_aspect_ratio=”eyJkZXZpY2VzIjp7ImRlc2t0b3AiOnsidmFsdWUiOiIxNi85In19fQ==” woodmart_css_id=”659802ff3392f” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk4MDJmZjMzOTJmIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdmlkZW8iLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==” video_autoplay=”yes” video_mute=”yes” video_loop=”yes” video_controls=”yes”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][woodmart_text_block woodmart_css_id=”65978559e36a0″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk3ODU1OWUzNmEwIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]

调整列数

然后设置行和列，我们可以选择不同的列宽，以下是预设的列数。[/woodmart_text_block][woodmart_video video_hosted=”7483″ video_poster=”7482″ video_size=”aspect_ratio” video_aspect_ratio=”eyJkZXZpY2VzIjp7ImRlc2t0b3AiOnsidmFsdWUiOiIxNi85In19fQ==” woodmart_css_id=”6597e58e1eeae” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk3ZTU4ZTFlZWFlIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdmlkZW8iLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==” video_autoplay=”yes” video_mute=”yes” video_loop=”yes” video_controls=”yes”][/vc_column][vc_column width=”1/2″][woodmart_text_block woodmart_css_id=”65978578238e8″ woodmart_inline=”no” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk3ODU3ODIzOGU4Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGV4dF9ibG9jayIsImRhdGEiOnsidGFibGV0Ijp7fSwibW9iaWxlIjp7fX19″ parallax_scroll=”no” wd_hide_on_desktop=”no” wd_hide_on_tablet=”no” wd_hide_on_mobile=”no”]

调整列的位置

同一行里面的列可以拖拽交换位置，点击列不放进行拖拽。[/woodmart_text_block][woodmart_video video_hosted=”7474″ video_poster=”7476″ video_size=”aspect_ratio” video_aspect_ratio=”eyJkZXZpY2VzIjp7ImRlc2t0b3AiOnsidmFsdWUiOiIxNi85In19fQ==” woodmart_css_id=”6597e5cacdfec” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2NTk3ZTVjYWNkZmVjIiwic2hvcnRjb2RlIjoid29vZG1hcnRfdmlkZW8iLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==” video_autoplay=”yes” video_mute=”yes” video_loop=”yes” video_controls=”yes”][/vc_column][/vc_row]