📜  EQUAL COLUMNS GRID Divi 博客 (1)

📅  最后修改于: 2023-12-03 14:40:59.828000             🧑  作者: Mango

EQUAL COLUMNS GRID Divi 博客

介绍

EQUAL COLUMNS GRID Divi是一款为Divi WordPress主题设计的功能强大的等列栅格布局插件。它允许您轻松地创建响应式布局,使每个网格都具有相同的高度和宽度,无论您的内容与否。此插件不仅提供了许多布局选项,而且非常易于使用。

安装

要安装EQUAL COLUMNS GRID Divi插件,您必须先安装Divi主题。然后,从DIVI插件库或第三方插件市场下载引擎。

安装完成后,您可以在Divi Theme Panel下的插件选项中找到EQUAL COLUMNS GRID Divi插件。启用插件后,在Divi布局编辑器中,您可以轻松使用此插件。

使用

EQUAL COLUMNS GRID Divi插件的使用非常简单。您只需在Divi布局编辑器中添加模块,然后单击模块设置,进入模块设置页面。在外观选项卡中,您将找到高级设计选项,其中包含EQUAL COLUMNS GRID选项。启用此选项后,您可以选择等分布局的列宽和行高。此外,它还允许您选择包含内容、包含边距、填充、背景颜色等。

示例

下面是一个简单的例子,展示如何使用EQUAL COLUMNS GRID Divi插件,创建一个包含文字和图片的等分栅格布局。

[et_pb_section fb_built="1" admin_label="Section" _builder_version="4.5.1" background_color="#ededed" custom_padding="0px||0px||false|false"][et_pb_row _builder_version="4.5.1" custom_padding="0px|||||"][et_pb_column type="4_4" _builder_version="4.5.1" custom_padding="0px|||||"][et_pb_text _builder_version="4.5.1" header_font_size="34px" header_2_font_size="24px" header_2_font="||||||||" header_2_line_height="1.7em" header_2_font_size_tablet="22px" header_2_font_size_phone="16px" header_2_text_align="left" header_2_font_size_last_edited="on|desktop" header_font="|700|||||||" header_font_tablet="|||on" header_font_phone="||||" header_font_last_edited="on|desktop" header_level="h2" text_orientation="left" font_size="17px" font_size_tablet="16px" font_size_phone="14px" text_text_color="#000000" text_line_height="1.8em" custom_margin="|20px||20px" custom_padding="30px||30px||false|false" z_index_tablet="4" z_index_last_edited="on|tablet" min_height="0px" hover_enabled="0" sticky_enabled="0"]

 ## EQUAL COLUMNS GRID Divi博客

[/et_pb_text][et_pb_row admin_label="Row" _builder_version="4.5.1" custom_padding="20px||20px||true|false" custom_margin="||3.5%|||"][et_pb_column type="1_3" _builder_version="4.5.1" custom_padding="|||20px||"][et_pb_image src="https://mypicture.com/image1.jpg" alt="IMAGE 1" title_text="IMAGE 1" _builder_version="4.5.1" custom_padding="|||20px||" z_index_tablet="4" url_new_window="off" line_height="1.6em" max_width_last_edited="off|desktop" sticky_enabled="0" module_alignment="center" custom_padding_last_edited="on|tablet" srcset_small_last_edited="on|desktop" srcset_medium_last_edited="on|desktop" srcset_large_last_edited="on|desktop"][/et_pb_image][et_pb_text _builder_version="4.5.1" text_text_color="#000000" text_line_height="1.8em" custom_margin="||" custom_padding="||" z_index_tablet="4" z_index_phone="4"]

 This is some sample text for Image 1 in EQUAL COLUMNS GRID Divi.

[/et_pb_text][/et_pb_column][et_pb_column type="1_3" _builder_version="4.5.1" custom_padding="|||20px||"][et_pb_image src="https://mypicture.com/image2.jpg" alt="IMAGE 2" title_text="IMAGE 2" _builder_version="4.5.1" custom_padding="|||20px||" z_index_tablet="4" url_new_window="off" line_height="1.6em" max_width_last_edited="off|desktop" sticky_enabled="0" module_alignment="center" custom_padding_last_edited="on|tablet" srcset_small_last_edited="on|desktop" srcset_medium_last_edited="on|desktop" srcset_large_last_edited="on|desktop"][/et_pb_image][et_pb_text _builder_version="4.5.1" text_text_color="#000000" text_line_height="1.8em" custom_margin="||" custom_padding="||" z_index_tablet="4" z_index_phone="4"]

 This is some sample text for Image 2 in EQUAL COLUMNS GRID Divi.

[/et_pb_text][/et_pb_column][et_pb_column type="1_3" _builder_version="4.5.1" custom_padding="|||20px||"][et_pb_image src="https://mypicture.com/image3.jpg" alt="IMAGE 3" title_text="IMAGE 3" _builder_version="4.5.1" custom_padding="|||20px||" z_index_tablet="4" url_new_window="off" line_height="1.6em" max_width_last_edited="off|desktop" sticky_enabled="0" module_alignment="center" custom_padding_last_edited="on|tablet" srcset_small_last_edited="on|desktop" srcset_medium_last_edited="on|desktop" srcset_large_last_edited="on|desktop"][/et_pb_image][et_pb_text _builder_version="4.5.1" text_text_color="#000000" text_line_height="1.8em" custom_margin="||" custom_padding="||" z_index_tablet="4" z_index_phone="4"]

 This is some sample text for Image 3 in EQUAL COLUMNS GRID Divi.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.5.1" custom_padding="||10px||false|false" use_custom_width="on" width_unit="off" make_equal="on" equalizer_labels="left column,right column" custom_margin="0px||-3.5%|||"][/et_pb_row][/et_pb_column][/et_pb_row][/et_pb_section]
结束语

以上是EQUAL COLUMNS GRID Divi博客的介绍及示例。此插件为Divi主题用户提供了一种简单有效的方式,可以轻松创建响应式布局,保持每个网格都具有相同的高度和宽度,让您的网站布局更加美观和专业。