Искусственный интеллект в контролах Elementor

Elementor добавил возможности прикрутить искусственный интеллект (ИИ) ко множеству элементов управления, чтобы пользователи могли улучшить свои веб-сайты с помощью оригинального или улучшенного текста, а также пользовательского кодов (HTML & CSS), чтобы повысить свою производительность как создателей веб-сайтов.

Разработчики аддонов могут выбирать, включать или отключать кнопку ИИ.

Возможности ИИ

Решение ИИ в Elementor позволяет пользователям создавать новый или обновлять существующий контент в процессе редактирования. При нажатии на кнопку ИИ появляется новый диалог, который позволяет пользователям писать подсказки, создающие генерируемый ИИ контент. Затем пользователи могут выбрать, хотят ли они добавить контент в элемент управления, к которому они применили ИИ, или внести в него изменения, например, сделать его длиннее или короче, изменить его тон и т. д.

Поддерживаемые контроллы

Не все элементы управления редактора поддерживают возможности искусственного интеллекта, например, элементы управления checkbox, switcher, select не имеют кнопки искусственного интеллекта. Однако, текстовые элементы управления и элементы управления мультимедиа (скоро) получили новую кнопку ИИ.

Следующие элементы управления по умолчанию имеют кнопку ИИ:

• Text control
• Textarea control
• WYSIWYG control
• Code control
• Media control (скоро)

Поскольку в некоторых случаях вы можете не захотеть отображать кнопку ИИ на поддерживаемом элементе управления, вы можете отключить кнопку ИИ. Например, для текстового элемента управления, который позволяет пользователю задать Element ID.

Могут быть и другие случаи, когда вы захотите добавить возможности ИИ, в этом случае вы можете выбрать добавление кнопки AI. Например, когда создаете новые элементы управления Elementor с пользовательскими возможностями, которые имеют текстовые области, где вы хотите позволить создателям сайтов вставлять контент, созданный искусственным интеллектом.

Каждый тип элементов управления вызывает различные варианты подсказок и предложений. Если текстовые элементы управления в основном используются для создания коротких заголовков и длинных абзацев, то предложения кода используются для создания HTML & CSS.

Аргументы ИИ

Чтобы управлять возможностями ИИ для элементов управления Elementor, используйте аргумент ai. Это массив, который принимает следующие параметры:

Использование ИИ

Давайте посмотрим несколько живых примеров использования кнопки Elementor ИИ для улучшения элементов управления редактора.

Написание текста с помощью ИИ

Включите возможности искусственного интеллекта на текстовом элементе управления:

// Text control with an AI button that generates short texts
$this->add_control(
	'title',
	[
		'label' => esc_html__( 'Title', 'textdomain' ),
		'type' => ElementorControls_Manager::TEXT,
	]
);

// Textarea control with an AI button that generates paragraphs
$this->add_control(
	'description',
	[
		'label' => esc_html__( 'Description', 'textdomain' ),
		'type' => ElementorControls_Manager::TEXTAREA,
	]
);

// WYSIWYG control with an AI button that generates paragraphs
$this->add_control(
	'content',
	[
		'label' => esc_html__( 'Content', 'textdomain' ),
		'type' => ElementorControls_Manager::WYSIWYG,
	]
);

// Textarea control with an AI button that generates short texts
$this->add_control(
	'subheading',
	[
		'label' => esc_html__( 'Subheading', 'textdomain' ),
		'type' => ElementorControls_Manager::TEXTAREA,
		'ai' => [
			'type' => 'text',
		],
	]
);

// Text control without an AI button
$this->add_control(
	'title-id',
	[
		'label' => esc_html__( 'Title ID', 'textdomain' ),
		'type' => ElementorControls_Manager::TEXT,
		'ai' => [
			'active' => false,
		],
	]
);

// Add AI button to custom controls
$this->add_control(
	'unique-control-name',
	[
		'label' => esc_html__( 'Custom Element', 'textdomain' ),
		'type' => My_Addon::CUSTUM_TEXT_CONTROL,
		'ai' => [
			'active' => true,
			'type' => 'text',
		],
	]
);

Программирование с помощью ИИ

Для включения возможностей искусственного интеллекта, генерирующего пользовательский код, мы будем использовать следующее:

// Code control with an AI button that generates CSS
$this->add_control(
	'custom-css',
	[
		'label' => esc_html__( 'Custom CSS', 'textdomain' ),
		'type' => ElementorControls_Manager::CODE,
		'language' => 'css',
	]
);

// Code control with an AI button that generates HTML
$this->add_control(
	'custom-html',
	[
		'label' => esc_html__( 'Custom HTML', 'textdomain' ),
		'type' => ElementorControls_Manager::CODE,
		'language' => 'html',
	]
);

// Code control without an AI button
$this->add_control(
	'css',
	[
		'label' => esc_html__( 'CSS', 'textdomain' ),
		'type' => ElementorControls_Manager::CODE,
		'language' => 'css',
		'ai' => [
			'active' => false,
		],
	]
);

// Override control language for AI
$this->add_control(
	'html',
	[
		'label' => esc_html__( 'HTML', 'textdomain' ),
		'type' => ElementorControls_Manager::CODE,
		'language' => 'html',
		'ai' => [
			'language' => 'css',
		],
	]
);

Источник: Elementor Developers: AI