< Retour au blog

Une icône par défaut pour les widgets bouton d’Elementor

Publié le

dans la catégorie


Elementor permet de définir des styles par défaut, dans le panel Réglages du site.
Malheureusement, cela ne permet pas de définir une icône par défaut pour les boutons. Donc si votre design comprend une icône dans tous les boutons, vous devrez le définir dans les réglages de chaque widget. Ennuyeux.

Vous trouverez ci-dessous deux fonctions qui vous permettront de définir une icône par défaut pour tous les widgets boutons.

La première ajout des réglages dans Réglages du site, Boutons :

  • une icône par défaut
  • la position par défaut de l’icône (avant ou après)
  • l’espacement par défaut de l’icône

La seconde met à jour les réglages par défaut pour tous les boutons, avec la valeur définis dans les Réglages du site.

Vous pouvez placer ce code dans le fichier functions.php de votre thème ou une extension sur mesure.

À noter que cela mettre à jour tous les boutons, qui n’ont pas une icône, déjà présents dans vos pages, et pas seulement les nouveaux.

<?php

add_action( 'elementor/element/kit/section_buttons/after_section_end', 'prefix_add_site_setting_button_icon', 10, 2 );
/**
 * Add Site setting for button default Icon
 * 
 * @param $element Element_Widget The edited element.
 * @param $args The $args that sent to $element->after_section_end
 */
function prefix_add_site_setting_button_icon( $element, $args ) {
	$element->start_injection([
        'at' => 'after',
        'of' => 'button_padding',
    ]);
    
    $element->add_control(
    	'button_icon',
    	[
    		'label' => __( 'Default icon', 'elementor' ),
    		'type' => \Elementor\Controls_Manager::ICONS,
    		'fa4compatibility' => 'icon',
    		'skin' => 'inline',
    		'separator' => 'before',
    	]
    );

    $element->add_control(
    	'button_icon_align',
    	[
    		'label' => __( 'Icon Position', 'elementor' ),
    		'type' => Controls_Manager::SELECT,
    		'default' => 'left',
    		'options' => [
    			'left' => __( 'Before', 'elementor' ),
    			'right' => __( 'After', 'elementor' ),
    		],
    		'condition' => [
    			'button_icon[value]!' => '',
    		],
    	]
    );

    $element->add_control(
    	'button_icon_indent',
    	[
    		'label' => __( 'Icon Spacing', 'elementor' ),
    		'type' => Controls_Manager::SLIDER,
    		'range' => [
    			'px' => [
    				'max' => 50,
    			],
    		]
    	]
    );

    $element->end_injection();
}

add_action( 'elementor/element/button/section_button/before_section_end', 'prefix_default_button_icon', 10, 2 );
/**
 * Set default icon for button widget
 * 
 * @param $element Element_Widget The edited element.
 * @param $args The $args that sent to $element->before_section_end
 */
function prefix_default_button_icon( $element, $args ) {

	$elementor_active_kit = get_option( 'elementor_active_kit', $default = false );

	if ( ! $elementor_active_kit ) {
		return;
	}
	// get Active kit post meta (settings)
	$active_kit_settings = get_post_meta( $elementor_active_kit, '_elementor_page_settings', $single = true );
	if ( $active_kit_settings ) {
		if ( isset( $active_kit_settings[ 'button_icon' ] ) && is_array( $active_kit_settings[ 'button_icon' ] ) ) {
			// Set default values for buttons icon
			$element->update_control(
				'selected_icon',
				[
					'default' => $active_kit_settings[ 'button_icon' ]
				]
			);
		}
		if ( isset( $active_kit_settings[ 'button_icon_align' ] ) && ! empty( $active_kit_settings[ 'button_icon_align' ] ) ) {
			// Set default value for buttons icon
			$element->update_control(
				'icon_align',
				[
					'default' => $active_kit_settings[ 'button_icon_align' ]
				]
			);
		}
		if ( isset( $active_kit_settings[ 'button_icon_indent' ] ) && ! empty( $active_kit_settings[ 'button_icon_indent' ] ) ) {
			// Set default value for buttons icon
			$element->update_control(
				'icon_indent',
				[
					'default' => $active_kit_settings[ 'button_icon_indent' ]
				]
			);
		}
	}		
}

Une réponse à “Une icône par défaut pour les widgets bouton d’Elementor”

  1. Dev Java dit :

    Merci pour l’article.

    Elementor .. Il faut que je m’y mette, j’ai cru comprendre que c’est beaucoup demandé comme compétences aussi dans le domaine de la création de site avec WordPress ?

    Si il y a un marché pour Elementor, ça serait bien de se former.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.