WordPress教程

关于Astra+Elementor的使用方法

Astra主题是一款注重性能的轻量级WordPress主题,支持WordPress Gutenberg、Elementor和Beaver Builder三种编辑器,拥有众多的demo,可以一键导入,如果你对代码不熟悉,希望快速搭建一个网站,一定要试试这款主题。Elementor编辑器则是众多编辑器中十分出众的一款,对css属性的覆盖比较完整,支持自定义断点,大部分属性可以针对断点来设置,对responsive设计的支持非常出色。如果你对网站性能有要求,建议使用Astra主题。

本文简单介绍一下用Astra主题和Elementor搭建网站时要解决的一些基本问题,基础搭好,就可以享受犹如拼图游戏一样的网站制作过程了。

以下内容是基于Astra 3.9.3Elementor3.8.0

同步两者的Responsive Breakpoints

Astra主题支持三种编辑器,由主题控制的部分遵守主题的断点设置,比如header、footer和sidebar。Elementor编辑器和Astra的断点设置不同,所以内容区域的Responsive行为会与Header和Footer不一致,但这更多的是个人偏好问题,用默认设置是完全可行的。

下图列出了Astra主题和Elementor的断点以及断点触发时的网站样貌变化,这样就能根据需求来决定如何同步两者的断点设置。

断点和用途AstraElementor
Mobile544px767px
Tablet921px1024px
断点用途小于Mobile断点:顶部主菜单切换至手机版
小于Tablet断点:网站页脚由多栏切换到一栏布局
小于Mobile断点:column由多栏切换到一栏布局。
小于Tablet断点:没有特别明显的影响
Astra和Elementor的breakpoint对比,规则为@media (max-width:[breakpoint])

有四种方案,应该根据具体的需求来选择。

方案一

不匹配Astra主题和Elementor编辑器的断点,只用astra控制header和footer,其余部分全部用elementor创建,那可以这样使用:

  • 用astra的mobile breakpoint控制header 菜单何时切换成手机版,用它的tablet breakpoint控制footer Column何时切换成一栏。
  • 用elementor的mobile breakpoint控制内容区域的分栏何时变为一栏结构,可以根据需要设定,不用与Astra的breakpoint有任何关联。

方案二

如果希望手机版菜单和内容区域里变为单栏的行为同时出现,那就更改一下elementor的断点设置,将elementor的mobile breakpoint设为544,tablet breakpoint设为921.

solagirl.net: elementor改变断点设置的截图
用elementor编辑任意页面,并切换到site settings,找到layout选项,就能更改breakpoints

方案三

让Astra服从Elementor的断点设置,在主题的functions.php里添加如下代码即可。

// Update mobile breakpoint
add_filter( 'astra_mobile_breakpoint', function() {
    return 767;
});
// Update tablet breakpoint
add_filter( 'astra_tablet_breakpoint', function() {
    return 1024;
});

方案四

不使用Astra的Header Footer Builder,直接用elementor来制作,安装插件Elementor Header & Footer Builder即可。如果需要在不同页面使用不同的header,用这个方案可能更方便一些。

如果在测试过程中发现临界情况的responsive样式有问题,比如921px时菜单变成了手机版,但header还是desktop的样子,这可能与电脑屏幕的缩放有关,viewport的实际宽度可能是921.121px这样,所以导致responsive样式失效。由于实际设备很少有这个尺寸的,所以忽略也没关系。通常会将断点写成921.9px这样来规避这个问题,但Astra的断点必须是整数,所以不用过分纠结这个问题。

设定内容区域宽度

设计网站时内容宽度很重要,而Astra的container width决定的是Header和Footer的宽度,Elementor的container width决定了内容区域的宽度,二者不一定要一样,但在开始制作网站前应该设定号。

  • Astra主题:依次打开Appearance > Customize > Global > Container,找到Container Width选项。
  • Elementor:依次打开Site Settings > Layout,找到Container Width。

自定义字体

除了使用Google Fonts或Adobe Fonts等网络字体之外,很多设计者会使用一些不常见的字体,因此对任何编辑器而言,支持自定义字体是必须的。这一点Astra和Elementor都做的很好, Sola用过很多带有这个功能的收费主题,但遇到过不少bug。

方法一 —— 用Astra开发的插件

Astra主题支持自定义字体,方法是到Appearance > Astra Options中找到custom fonts,点击Activate,会自定安装custom fonts插件,之后就可以上传字体文件了。安装好的字体会自动显示在Elementor的字体列表里,十分方便。

方法二 —— 用Elementor的filter,即写代码的方法

如果你想直接引入字体,不用插件。那就制作好的网络字体文件放到主题文件夹下,并使用@font-face规则引入,例如:

@font-face {
    font-family: 'ryujin_attackregular';
    src: url('ryujinattack-webfont.woff2') format('woff2'),
         url('ryujinattack-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

接下来,只需要让elementor支持这个字体就可以了,使用如下代码即可。

// Define a custom font group
add_filter( 'elementor/fonts/groups', function( $font_groups ){
    $new_groups['group-name'] = 'My Font Group';
    return $new_groups + $font_groups;
});

// Add your fonts, key is the name of the font, value is the group name.
add_filter( 'elementor/fonts/additional_fonts', function($fonts){
    $fonts['ryujin_attackregular'] = 'group-name';
    return $fonts;
});

elementor也有上传自定义字体的功能,但我们不仅要在编辑器里使用,也要在主题的样式表里使用,所以最好自己管理字体文件,只是让elementor知道有这些字体就行了。

控制Elementor的Column Order

Elementor的Column基于flexbox,flexbox允许通过order属性来更改column的顺序,elementor默认没有这个选项,想开启的话可以使用如下代码。

function bleye_add_responsive_column_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order', 'bleye-elementor-extras' ),
			'type' => \Elementor\Controls_Manager::NUMBER,
			'separator' => 'before',
			'selectors' => [
				'{{WRAPPER}}' => '-webkit-order: {{VALUE}}; -ms-flex-order: {{VALUE}}; order: {{VALUE}};',
			],
		]
	);
}
add_action( 'elementor/element/column/layout/before_section_end', 'bleye_add_responsive_column_order', 10, 2 );

代码来自:
How to Reorder Stacking Multiple Columns in Elementor – with Order Control

使用Elementor时需要注意的问题

  1. 不同主题可能会更改elementor选项的位置,比如Elementor的button element的全宽设定,默认情况下需要将alignment设为justified,再到Advanced选项卡的position菜单下控制宽度。但Astra主题移除了button的position选项卡,将宽度设置和margin padding的设置放在一起,按钮宽度的控制也不再依赖justified这个选项。
  2. 在elementor的text editor里直接输入shortcode代码,输出时可能会产生空的p标签,产生样式问题。将shortcode放入elementor的shortcode element里可以避免这个问题。

暂时只想到这些,未完待续。

2条评论

留言

您的电子邮箱地址不会被公开。 必填项已用*标注