Elementor – Web-operis https://www.web-operis.be créations de site web pour professionnels et particuliers Thu, 07 Dec 2023 09:54:53 +0000 fr-FR hourly 1 https://www.web-operis.be/wp-content/uploads/2022/11/ico-web-operis-150x150.png Elementor – Web-operis https://www.web-operis.be 32 32 5 addons Elementor que j’utilise pour améliorer mes sites https://www.web-operis.be/5-addons-elementor-que-jutilise/ Fri, 01 Dec 2023 22:35:18 +0000 https://web-operis.be/?p=2398

Les addons Elementor pas toujours indispensables, mais...

Les addons  Elementor représentent une extension des fonctionnalités du constructeur de pages déjà puissant Elementor, utilisé pour la création de sites Web sous WordPress.

Ces addons, ou plugins supplémentaires, sont conçus pour élargir la gamme d’éléments, de fonctionnalités et de styles disponibles dans Elementor, permettant aux développeurs et aux designers de réaliser des sites web encore plus personnalisés et sophistiqués.

Des galeries d’images avancées aux onglets personnalisables, en passant par des éléments d’animation interactive, les addons offrent une infinite variété de widgets.

L’utilisation de ces outils supplémentaires enrichit non seulement l’expérience visuelle du site, mais offre également des solutions pratiques pour des besoins spécifiques, tels que l’intégration de flux sociaux, des formulaires avancés, et plus encore.

En bref, les addons pour Elementor sont le secret pour amener votre site web au niveau supérieur, en combinant créativité et fonctionnalité.

Les addons que j’utilise le plus souvent sont les suivants, car ils sont graphiquement bien réalisés et codés par leurs développeurs respectifs : 

Element Pack Pro:

Cet addon Elementor offre plus de 280 widgets, allant des plus basiques aux plus avant-gardistes, pour personnaliser au mieux les sites web. Il comprend des fonctionnalités pour créer des éléments interactifs tels que des horaires d’affaires, des publications et des flux Instagram, l’édition d’images, et bien plus. De plus, Element Pack Pro  propose plus de 1900 blocs et designs parmi lesquels choisir et plus de 315 modèles des pages, des plus simples aux plus créatifs.

Avec 300 en-têtes et pieds de page, Element Pack Pro est l’extension la plus complète. Une fonctionnalité intéressante est la possibilité de désactiver les widgets que l’on n’utilise pas. Cela se fait facilement grâce au panneau de contrôle qui permet de visualiser les widgets utilisés et de désactiver les autres.

Element pack pro addons elementor
Widgets
  • 360° Product Viewer (PRO)
  • 3D Text (FREE)
  • Accordion (FREE)
  • AdBlock Detector (PRO)
  • Advanced Button (PRO)
  • Advanced Calculator (PRO)
  • Advanced Counter (PRO)
  • Advanced Divider (PRO)
  • Advanced Google Map (PRO)
  • Advanced Heading (PRO)
  • Advanced Icon Box (PRO)
  • Advanced Image Gallery (PRO)
  • Advanced Progress Bar (PRO)
  • Age Gate (FREE)
  • Air Pollution (PRO)
  • Animated Card (PRO)
  • Animated Gradient BG (FREE)
  • Animated Heading (PRO)
  • Animated Link (FREE)
  • Audio Player (PRO)
  • Backdrop Filter (FREE)
  • Background Expand (FREE)
  • Background Overlay (FREE)
  • Background Parallax (PRO)
  • Barcode (PRO)
  • BbPress (PRO)
  • BbPress Forum Form (PRO)
  • BbPress Forum Index (PRO)
  • BbPress Reply Form (PRO)
  • BbPress Single Forum (PRO)
  • BbPress Stats (PRO)
  • BbPress Topic Form (PRO)
  • BbPress Topic Tags (PRO)
  • Booked Calendar (PRO)
  • Brand Carousel (PRO)
  • Brand Grid (FREE)
  • Breadcrumbs (PRO)
  • BuddyPress Friends (PRO)
  • BuddyPress Group (PRO)
  • BuddyPress Member (PRO)
  • Business Hours (FREE)
  • Caldera Form (FREE)
  • Calendly (FREE)
  • Call Out (FREE)
  • Changelog (PRO)
  • Charitable Campaigns (PRO)
  • Charitable Donation Form (PRO)
  • Charitable Donations (PRO)
  • Charitable Donors (PRO)
  • Charitable Login (PRO)
  • Charitable Profile (PRO)
  • Charitable Registration (PRO)
  • Charitable Stat (PRO)
  • Charts (PRO)
  • Circle Info (PRO)
  • Circle Menu (PRO)
  • Comment (PRO)
  • Comparison List (PRO)
  • Confetti Effects (PRO)
  • Contact Form 7 (FREE)
  • Content Protector (PRO)
  • Content Switcher (PRO)
  • Cookie Consent (FREE)
  • Countdown Timer (FREE)
  • Coupon Code (PRO)
  • Creative Button (FREE)
  • Crypto Currency Card (PRO)
  • Crypto Currency Carousel (PRO)
  • Crypto Currency Chart (PRO)
  • Crypto Currency Chart Carousel (PRO)
  • Crypto Currency Grid (PRO)
  • Crypto Currency List (PRO)
  • Crypto Currency Table (PRO)
  • Crypto Currency Ticker (PRO)
  • Cursor Effects (PRO)
  • Custom Carousel (PRO)
  • Custom Gallery (FREE)
  • Custom JS (FREE)
  • Dark Mode (FREE)
  • Device Slider (PRO)
  • Document Viewer (PRO)
  • Download Monitor (PRO)
  • Dropbar (FREE)
  • Dual Button (FREE)
  • Dynamic Carousel (PRO)
  • Dynamic Grid (PRO)
  • Easy Digital Downloads (PRO)
  • EDD Cart (PRO)
  • EDD Category Carousel (PRO)
  • EDD Category Grid (PRO)
  • EDD Checkout (PRO)
  • EDD Downloads (PRO)
  • EDD History (PRO)
  • EDD Login (PRO)
  • EDD Mini Cart (PRO)
  • EDD Portfolio Editor (PRO)
  • EDD Product (PRO)
  • EDD Product Carousel (PRO)
  • EDD Product Reviews (PRO)
  • EDD Product Reviews Carousel (PRO)
  • EDD Profile Editor (PRO)
  • EDD Purchase History (PRO)
  • EDD Register (PRO)
  • EDD Tabs (PRO)
  • Equal Height (FREE)
  • Event Calendar Countdown (PRO)
  • Events Calendar Carousel (PRO)
  • Events Calendar Grid (FREE)
  • Events Calendar List (PRO)
  • Everest Forms (FREE)
  • Facebook Feed (FREE)
  • Facebook Feed Carousel (PRO)
  • Fancy Card (PRO)
  • Fancy Icon (FREE)
  • Fancy List (FREE)
  • Fancy Slider (PRO)
  • Fancy Tabs (PRO)
  • FAQ / Accordion / Spoiler (PRO)
  • Featured Box (FREE)
  • Flip / 3D / Animated Box (FREE)
  • Floating Effects (FREE)
  • Floating Knowledgebase (PRO)
  • Fluent Forms (FREE)
  • Formidable Forms (FREE)
  • Forminator Form (PRO)
  • Give Donation History (PRO)
  • Give Donor Wall (PRO)
  • Give Form (PRO)
  • Give Form Grid (PRO)
  • Give Goal (PRO)
  • Give Login (PRO)
  • Give Profile Editor (PRO)
  • Give Receipt (PRO)
  • Give Register (PRO)
  • Give Totals (PRO)
  • Google Reviews (PRO)
  • Gravity Forms (PRO)
  • Grid Line (FREE)
  • Hash Link (PRO)
  • Help Desk (PRO)
  • Honeycombs (PRO)
  • Horizontal Scroller (PRO)
  • Hover Box (PRO)
  • Hover Video (PRO)
  • Icon Mobile Menu (FREE)
  • Icon Nav (PRO)
  • Iframe (PRO)
  • Image Accordion (FREE)
  • Image Compare (FREE)
  • Image Magnifier (FREE)
  • Widget Tooltip (FREE)
  • Instagram (PRO)
  • Instagram Feed (PRO)
  • Interactive Card (PRO)
  • Interactive Tabs (PRO)
  • Layer Slider (PRO)
  • LearnPress Carousel (PRO)
  • LearnPress Grid (PRO)
  • Lightbox / Modal Box (FREE)
  • Logo Carousel (PRO)
  • Logo Grid (FREE)
  • Lottie Icon Box (PRO)
  • Lottie Image (PRO)
  • Mailchimp (PRO)
  • Mailchimp For WordPress (PRO)
  • Marker/Image Hotspot (PRO)
  • Marquee (PRO)
  • Mega Menu (PRO)
  • Modal (PRO)
  • Navbar (FREE)
  • News Ticker / Post Ticker (PRO)
  • Ninja Forms (FREE)
  • Notation (PRO)
  • Notification (PRO)
  • Offcanvas / Sidebar (PRO)
  • Open Street Map (FREE)
  • Panel Slider (FREE)
  • Parallax Effects (PRO)
  • Particles (PRO)
  • Portfolio Carousel (PRO)
  • Portfolio Gallery / Grid (PRO)
  • Portfolio List (PRO)
  • Post / Blog Carousel (PRO)
  • Post Block (PRO)
  • Post Block Modern (PRO)
  • Post Card (PRO)
  • Post Gallery (PRO)
  • Post Grid (PRO)
  • Post Grid Tab (PRO)
  • Post List (PRO)
  • Post Slider (PRO)
  • Pricing Table (PRO)
  • Product Carousel (FREE)
  • Product Grid (FREE)
  • Profile Card (PRO)
  • Progress Pie (FREE)
  • Protected Content (PRO)
  • QR Code (PRO)
  • QuForm (PRO)
  • Reading Progress (FREE)
  • Reading Timer (FREE)
  • Realistic Image Shadow (PRO)
  • Remote Arrows (PRO)
  • Remote Fraction (PRO)
  • Remote Pagination (PRO)
  • Remote Thumbs (PRO)
  • Reveal Effects (PRO)
  • Review Card Grid (FREE)
  • Revolution Slider (PRO)
  • Right Click Context Menu (PRO)
  • Scroll Box (PRO)
  • Scroll Button (FREE)
  • Scroll Fill Effect (PRO)
  • Scroll Image (PRO)
  • Scrollnav (PRO)
  • Search (FREE)
  • Section Sticky (PRO)
  • Simple Contact Form (FREE)
  • Single Post (PRO)
  • Slider (FREE)
  • Slideshow (PRO)
  • Slinky Vertical Menu (PRO)
  • Social Proof (PRO)
  • Social Share (PRO)
  • Sound Effects (PRO)
  • Source Code (PRO)
  • Stacker (PRO)
  • Static Carousel (FREE)
  • Static Grid Tab (FREE)
  • Step Flow / Process Step (FREE)
  • Sub Menu (PRO)
  • SVG Blob (PRO)
  • SVG Image (FREE)
  • SVG Maps (PRO)
  • Switcher / Toggle (PRO)
  • Table (PRO)
  • Table Of Content (PRO)
  • TablePress (PRO)
  • Tabs (PRO)
  • Tags Cloud (PRO)
  • Testimonial Carousel (PRO)
  • Testimonial Slider (PRO)
  • The Newsletter (PRO)
  • Thumb Gallery (PRO)
  • Tile Scroll (PRO)
  • Timeline (PRO)
  • Timezone (PRO)
  • Toggle (FREE)
  • Total Count (PRO)
  • Trailer Box (FREE)
  • Transform Effects (FREE)
  • Tutor LMS Course Carousel (FREE)
  • Tutor LMS Course Grid (FREE)
  • Twitter Carousel (PRO)
  • Twitter Grid (FREE)
  • Twitter Slider (PRO)
  • User Login (PRO)
  • User Register (FREE)
  • Vertical Menu (PRO)
  • Video Gallery / Playlist (PRO)
  • Video Player (PRO)
  • Visibility Controls (PRO)
  • Weather (PRO)
  • Webhook Form (FREE)
  • WeForms (FREE)
  • Widget Tooltip (FREE)
  • WooCommerce Add To Cart (PRO)
  • WooCommerce Carousel (PRO)
  • WooCommerce Cart Page (PRO)
  • WooCommerce Categories (PRO)
  • WooCommerce Checkout Page (PRO)
  • WooCommerce Mini Cart (PRO)
  • WooCommerce Products (PRO)
  • WooCommerce Slider (PRO)
  • WooCommerce Tracking Form (PRO)
  • WP Forms (PRO)
  • Wrapper Link (FREE)
Extension 
  • Live Copy Paste (Gratuito e Pro)
  • Cross Domain & Live Template Copy (Pro)
  • Template Library (Pro)
  • Floating Effects (Pro)
  • Widget Tooltip (Pro)
  • Equal Height (Gratuito e Pro)
  • Visibility Controls (Pro)
  • Wrapper Link (Pro)
  • Background Overlay (Gratuito e Pro)
  • Confetti Effects (Pro)
  • Duplicate Option (Pro)
  • Particles Effects (Pro)
  • Transform Effects (Pro)
  • Iframe (Pro)
  • Cursor Effects (Pro)
  • Grid Line (Gratuito e Pro)
  • Dynamic Grid & Carousel (Pro)
  • Remote Arrows (Pro)
  • Notation (Pro)
  • Tile Scroll (Pro)
  • Horizontal Scroller (Pro)

 

ElementsKit:

Offre une collection de widgets hautement personnalisables et intégrés avec Elementor, idéaux pour la création d’en-têtes, de pieds de page, de pages de destination, de méga-menus, etc. Il présente des commandes personnalisées utiles et robustes, et une série de fonctionnalités telles que le générateur d’en-têtes et de pieds de page, les kits de mise en page, et plus encore.

L’interface utilisateur intuitive garantit une expérience utilisateur fluide et comprend plus de 100 composants prédéfinis tels que des boutons, des curseurs, des onglets. ElementsKit  offre également une large gamme de mises en page et de modèles prédéfinis, en plus de plus de 500 blocs prêts et plus de 35 modèles de pages prédéfinis.

elementskit-logo
Widgets
  • Accordéon
  • Onglet Avancé (PRO)
  • Collant avancé (PRO)
  • Lecteur audio (PRO)
  • Curseur avancé (PRO)
  • Accordéon avancé (PRO)
  • Bascule avancée (PRO)
  • Parallaxe avancée (PRO)
  • Info-bulle avancée (PRO)
  • Bouton
  • Retour au sommet
  • Articles de blog
  • Flux Behance (PRO)
  • Miette de pain (PRO)
  • Heures de travail
  • Appel à l’action
  • Formes de caldeira
  • Liste des catégories (PRO)
  • Ticker de contenu (PRO)
  • Code promo (PRO)
  • Tableau de comparaison (PRO)
  • Compte à rebours
  • Logo Client
  • Contenu conditionnel (PRO)
  • Copier entre domaines (PRO)
  • Formulaire de contact 7
  • Bouton créatif (PRO)
  • Graphique (PRO)
  • Tableau de données (PRO)
  • Lettrines
  • Flux de dribble (PRO)
  • Double bouton
  • Menu de navigation ElementsKit
  • FAQ
  • Flux Facebook (PRO)
  • Revue Facebook (PRO)
  • Texte animé fantaisie (PRO)
  • Fait amusant
  • Formulaires courants
  • Boîte à rabat (PRO)
  • Galerie (PRO)
  • Morphisme du verre (PRO)
  • Google Map (PRO)
  • Titre
  • Générateur d’en-tête et de pied de page
  • En-tête hors toile
  • Recherche d’en-tête
  • Informations d’en-tête
  • Effet de point chaud (PRO)
  • Boîte à icônes
  • Boîte à images
  • Transformation d’images (PRO)
  • Effet de survol de l’image (PRO)
  • Accordéon à images
  • Comparaison d’images
  • Échange d’images (PRO)
  • Masquage d’image (PRO)
  • Flux Instagram (PRO)
  • Liens interactifs (PRO)
  • Lottie
  • MailChimp
  • Constructeur de mégamenu
  • Curseur de la souris (PRO)
  • Texte de mouvement (PRO)
  • Formes Ninja
  • Défilement d’une page
  • Liste des pages
  • Particules (PRO)
  • Diagramme circulaire
  • Flux Pinterest (PRO)
  • Menu des prix (PRO)
  • Barre de progression
  • Modal contextuel (PRO)
  • Liste des messages
  • Grille de publication
  • Onglet Publication
  • Icônes sociales
  • Partage Social
  • Liste élégante (PRO)
  • Carrousel d’équipe (PRO)
  • Languette
  • Presse de table
  • Équipe
  • Témoignage
  • Chronologie (PRO)
  • Fil Twitter (PRO)
  • Se dérouler (PRO)
  • Menu vertical (PRO)
  • galerie vidéo (PRO)
  • Vidéo
  • Générateur de widgets
  • WhatsApp (PRO)
  • Lien d’emballage (PRO)
  • Liste des catégories Woo (PRO)
  • Woo Mini Chariot (PRO)
  • Carrousel de produits Woo (PRO)
  • Liste des produits Woo (PRO)
  • WeForms
  • WPForms
  • Japper (PRO)
  • Zoom (PRO)
  •  
Extension 
  • Générateur d’en-tête et de pied de page
  • Contenu conditionnel
  • Copier Coller entre domaines
  • Générateur de méga menus
  • Collant avancé
  • Masquage d’image
  • Générateur de widgets
  • Parallaxe avancée
  • Info-bulle avancée
  •  

Essential Addons for Elementor:

Cet addon fournit plus de 90 widgets pour la conception de pages web et 11 extension. Parmi ses fonctionnalités, il y a des galeries de photos, des effets de survol, des boutons d’appel à l’action, des onglets, des compteurs, et des graphiques. Il est disponible à la fois dans une version freemium et dans une version payante.

Développé par WPDeveloper, qui a également créé d’autres plugins exceptionnels, je le recommande à ceux qui ont un budget limité car il est peu coûteux.

ea logo full
Widgets

  • ÉLÉMENTS DE CONTENU (22):

    • Recherche Avancée
    • Calendrier d’Événements
    • Boîte d’Information
    • Carrousel de Témoignages
    • Témoignages
    • Interrupteur
    • Menu Simple
    • Boîte Basculante
    • Carrousel de Membres d’Équipe
    • Membre d’Équipe
    • Contenu Protégé
    • Liste de Fonctionnalités
    • Boutons Créatifs
    • Carrousel de Logos
    • Accordéon Avancé
    • Info-bulle
    • Hors-Canvas
    • Produit Statique
    • Titre Bicolore
    • Onglets Avancés
    • Vidéo Collante
    • Menu Avancé

    ÉLÉMENTS DE CONTENU DYNAMIQUE (13):

    • Tableau de Données Avancé
    • Google Map Avancé
    • Grille de Publications
    • Avis d’Entreprises
    • Bloc de Publications
    • Ticker de Contenu
    • Tableau de Données
    • Galerie NFT
    • Chronologie de Publications
    • Chronologie de Contenu
    • Liste de Publications Intelligente
    • Galerie Dynamique
    • Carrousel de Publications

    ÉLÉMENTS MARKETING (3):

    • Tableau de Prix
    • Appel à l’Action
    • Menu de Prix

    ÉLÉMENTS CRÉATIFS (17):

    • Cercle Interactif
    • Galerie Filtrable
    • Diviseur
    • Lightbox et Modal
    • Dessin SVG
    • Cartes Interactives
    • Points Chauds d’Image
    • Texte Fantaisie
    • Carrousel à Basculer
    • Graphique Fantaisie
    • Promo Interactive
    • Défilement d’Image
    • Compteur
    • Barre de Progression
    • Navigation sur une Page
    • Comparaison d’Images
    • Compte à Rebours
    • Accordéon d’Images

    ÉLÉMENTS DE STYLE DE FORMULAIRE (11):

    • Typeform
    • MailChimp
    • WeForms
    • Contact Form 7
    • Caldera Forms
    • Formstack
    • WPForms
    • Formulaire de Connexion/Inscription
    • Gravity Forms
    • Ninja Forms
    • FluentForm

    ÉLÉMENTS SOCIAUX (4):

    • Carrousel de Flux Twitter
    • Flux Twitter
    • Flux Instagram
    • Flux Facebook

    ÉLÉMENTS LEARNDASH (1):

    • Liste de Cours LearnDash

    ÉLÉMENTS DE DOCUMENTATION (3):

    • Grille de Catégorie BetterDocs
    • Boîte de Catégorie BetterDocs
    • Formulaire de Recherche BetterDocs

    ÉLÉMENTS WOOCOMMERCE (12):

    • Remerciement Woo
    • Panier Woo
    • Carrousel de Produits Woo
    • Galerie de Produits Woo
    • Caisse Woo
    • Diapositive de Produits Woo
    • Collections de Produits Woo
    • Grille de Produits Woo
    • Comparaison de Produits Woo
    • Ventes Croisées Woo
    • Tableau de Bord du Compte Woo
    • Liste de Produits Woo 
Extension 
  • Copier-Coller Interdomaines
  • Retour en Haut
  • Protection de Contenu
  • Duplication de Publication
  • Table des Matières
  • Parallaxe
  • Barre de Progression de Lecture
  • Particules
  • Info-bulle Avancée
  • Affichage Conditionnel
  • Lien de Conteneur
  •  

Premium Addons for Elementor:

Comprend plus de 90  widgets et extensions innovants, ainsi qu’une variété de modèleset plus de 500 sections prête. Il offre des widgets et des addons qui étendent les fonctionnalités des widgets Elementor existants, comme l’ajout d’effets magic scroll et de particules. Environ 22 widgets sont disponibles gratuitement, avec 30 autres disponibles dans la version premium. Il inclut également des modèles premium et offre l’option de personnalisation de la marque dans l’interface pour les sites web des clients.

Même si j’ai rencontré à plusieurs reprises des problèmes d’incompatibilité avec certains widgets et extensions, pour moi Premium Addons reste un produit valable.

premium Addons
Widgets
    • Heading
    • Dual Heading
    • Fancy Text
    • Bullet List
    • Carousel
    • Tabs
    • Content Switcher
    • Unfold
    • Mega Menu
    • Team Members
    • Woo Products Listing
    • Woo Products Carousel
    • Divider
    • Google Maps
    • Contact Form 7
    • Facebook Messenger
    • WhatsApp Chat
    • Blog
    • Smart Post Listing
    • News/Content Ticker
    • World Clock
    • Weather Forecast
    • Posts Notification
    • Tags Cloud
    • Button
    • Image Button
    • Banner
    • Hover Box
    • Icon Box
    • iHover
    • Countdown
    • Media Grid
    • Advanced Carousel
    • Image Separator
    • Image Scroll
    • Image Comparison
    • Image HotSpots
    • Image Layers
    • Image Accordion
    • SVG Draw
    • Lottie Animations
    • Site Logo
    • Video Box
    • Facebook Reviews
    • Google Reviews
    • Yelp Reviews
    • Testimonials
    • Facebook Feed
    • Instagram Feed
    • Twitter Feed
    • Behance Feed
    • Pinterest Feed
    • TikTok Feed
    • Counter
    • Progress Bar
    • Pricing Table
    • Tables
    • Charts and Graphs
    • Modal Box
    • Alert Box
    • Preview Window
    • Magic Section
    • Magic Scroll
    • Horizontal Scroll
    • Vertical Scroll
    • Multi-Scroll
    • Animated Shape Divider
    • Parallax
    • Particles
    • Animated Gradients
    • Ken Burns
    • Lottie Background
    • Blob Generator
    • Background Transition
Extension 
  • Défilement Magique
  • Infobulles Globales
  • Effets Flottants
  • Conditions d’Affichage
  • Conditions d’Affichage WooCommerce
  • Hauteur Égale
  • Lien d’Enveloppe (NOUVEAU)
  • Curseur de Souris Personnalisé
  • Badge Global
  • Éditeur en Direct de Modèles
  • Dessin SVG
  • Rayon de Bordure Avancé
  • Copie et Collage entre Domaines
  •  

Piotnet Addons For Elementor (PAFE):

Cet addon offre plus de 100 widgets et extension pour Elementor, iI est renommé pour son constructeur de formulaires avancé, avec des fonctions telles que Repeater Field, Multi Step Form, et Logic Conditionnel. De plus, il facilite la mise en œuvre de sites basés sur WooCommerce et permet de créer des widgets uniques avec des connaissances de codage minimales. Enfin, il comprend de nombreux widgets et extensions d’effets pour rendre les sites plus attrayants.

piotnet addons for elementor
Formulaires

 

Générateur de Formulaires

    • Réservation
    • Formulaire à Étapes Multiples
    • Champs Répétables Multiniveaux
    • Générateur de Formulaire d’Inscription et de Connexion
    • Mise à Jour du Profil Utilisateur
    • Paiement en Une Étape de WooCommerce
    • Tarification Dynamique de WooCommerce
    • Formulaire d’Envoi et de Modification d’Articles
    • Générateur de PDF
    • Logique Conditionnelle dans les Formulaires
    • Base de Données des Formulaires
    • Email/Email 2
    • Abandon de Formulaire
    • Champ Curseur de Plage
    • Champ de Sélection d’Image
    • Champ Signature
    • Aperçu en Direct de la Valeur du Champ
    • Calcul des Champs de Formulaire
    • Calcul de la Distance
    • Champs Calculés pour Plage de Dates
    • Champ Code Promo
    • Prévisualisation de la Soumission
    • Paiement PayPal
    • Paiement Stripe
    • Paiement Mollie
    • Champ d’Autocomplétion d’Adresse Google Maps
    • Intégration avec Google Agenda
    • Connectez le Formulaire à Google Sheets
    • Suivi d’Événements Google Analytics
    • Requête à Distance
    • Masque de Saisie
    • ActiveCampaign
    • Intégration Constant Contact
    • Getresponse
    • Intégration Hubspot
    • MailerLite
    • Mailpoet
    • MailChimp V3
    • Intégration Meta Box
    • Intégration Pods
    • Intégration reCAPTCHA (v3)
    • Slack
    • Sendfox
    • Intégration Sendinblue
    • Intégration Sendy
    • Twilio SMS
    • Twilio Whatsapp
    • Twilio Sendgrid
    • Webhook
    • Zoho CRM
    •  
Widgets
  • Recherche Avancée
  • Comparaison d’Images Avant-Après
  • Compte à Rebours du Panier
  • Titre en Deux Couleurs
  • Point Chaud
  • Accordion d’Image
  • Lightbox d’Image avec Titre et Légende
  • Galerie Lightbox en Maçonnerie
  • Galerie de Miniatures Lightbox + Taille Personnalisée
  • Barre de Progression
  • Liste d’Articles
  • Popups de Vente
  • Basculer le Contenu
  • Constructeur de Sliders avec Animation
  • Tableau
  • Timeline Verticale
  • Liste de Vidéos
Extension 
  • Rendu de Champ Répéteur ACF
  • Style Avancé pour Onglets
  • Recherche Ajax en Direct
  • Points de Rupture de Requête Média Personnalisés
  • Transition en Fondu Croisé pour Images de Fond Multiples
  • Filtres CSS
  • Hauteur Égale pour les Widgets et les CTA
  • Hauteur Égale pour les Produits WooCommerce
  • Font Awesome 5
  • Images de Fond Multiples
  • Déclencheur de Popup par URL
  • Fond Parallaxe pour Chaque Élément
  • Couleur de Fond Responsive
  • Positionnement Personnalisé Responsive
  • Contenu Basculable (Afficher Plus de Contenu)
  • Changement de Couleur du Texte au Survole de la Colonne
  • Style Avancé pour Menu de Navigation
  • Style Avancé pour les Formulaires
  • Logique Conditionnelle dans les Formulaires
  • Champs Calculés dans les Formulaires
  • Connectez le Formulaire à Google Sheets
  • Largeur de Colonne (Pixel, %, calc)
  • Rapport de Aspect de Colonne
  • Style du Formulaire
  • Rapport des Images dans le Carrousel Média
  • Champ de Sélection d’Image
  • Champ Curseur de Plage
  • Largeur de Colonne de la Gallerie Responsive
  • Espacement des Images dans la Gallerie Responsive
  • Ordre des Colonnes Responsive
  • Cacher la Colonne Responsive
  • En-Tête Collant
  • Infobulle (Tooltip)
  • Position Absolue
  • Style Avancé pour les Points (Dots)
  • Visibilité Conditionnelle
  • Lien de Colonne
  • Convertir Image en Noir et Blanc
  • Fermer le Premier Accordion
  • Afficher en Bloc Inline
  • Changement de Couleur du Texte au Survole de la Colonne
  • Carrousel d’Images avec URLs Personnalisées Multiples
  • Icône de Navigation pour les Flèches
  • Largeur Maximale
  • Particules
  • Alignement Texte des Colonnes de Section Responsive
  • Shortcode avec E Gratuit pour Modèles Sauvegardés
  • Boîte de Défilement avec Barre de Défilement Personnalisée
  • Lien de Section
  •  

Compatibilité et CSS:

La compatibilité entre Elementor, ses addons et d’autres plugins peut parfois poser des défis. Les développeurs doivent garder à l’esprit que les styles CSS personnalisés ou les fonctionnalités spécifiques d’un addon peuvent ne pas se comporter comme prévu lorsqu’ils sont utilisés ensemble. Il est donc essentiel de tester soigneusement les addons dans votre environnement de site afin de garantir une compatibilité continue.

En effectuant des tests approfondis, vous pouvez identifier les éventuels problèmes de compatibilité et prendre les mesures nécessaires pour les résoudre. La prise en compte de ces aspects dès le début du processus de développement peut vous faire gagner du temps et éviter des problèmes à long terme.

N’oubliez pas également de consulter la documentation et les forums de support pour obtenir des conseils et des solutions spécifiques à votre situation. Avec une approche proactive et une attention aux détails, vous pouvez optimiser l’expérience utilisateur et créer des sites Web performants et harmonieux.

Conclusion:

Chaque addon disponible sur le marché a ses propres particularités et offre une multitude de fonctionnalités variées. Il est important de noter que les versions premium peuvent parfois être onéreuses, ce qui peut rendre difficile leur acquisition pour les tester. Mais ne t’inquiète pas, j’ai une solution pratique à te proposer ! Tu peux te tourner vers les versions lite gratuites qui te permettront de te familiariser avec les principales fonctionnalités de l’addon sans avoir à dépenser d’argent. C’est vraiment une excellente opportunité pour découvrir les possibilités offertes par ces extensions avant de prendre une décision finale.

Cependant, si tu souhaites explorer plus en profondeur les fonctionnalités d’un addon spécifique, je suis là pour toi ! Je peux te fournir un essai complet ou répondre à toutes tes questions afin de t’aider à prendre une décision éclairée. N’hésite surtout pas à me contacter pour obtenir plus d’informations ou pour toute autre assistance dont tu pourrais avoir besoin. Je suis là pour t’aider dans ta recherche de la meilleure solution pour répondre à tes besoins spécifiques.

Cliquez ici
]]> Comment concevoir une barre inférieure optimisée pour mobile avec menu, téléphone et retour en haut https://www.web-operis.be/comment-concevoir-une-barre-inferieure-optimisee-pour-mobile-avec-menu-telephone-et-retour-en-haut/ https://www.web-operis.be/comment-concevoir-une-barre-inferieure-optimisee-pour-mobile-avec-menu-telephone-et-retour-en-haut/#respond Sun, 26 Mar 2023 09:42:43 +0000 https://web-operis.be/?p=925

Création d'une barre inférieure de navigation pour mobile avec Elementor

Dans cet article, je vais vous guider à travers le processus de création d’une barre de navigation inférieure pour mobile avec Elementor, qui inclut un bouton “scroll to top” pour permettre aux utilisateurs de revenir rapidement en haut de la page. 

Je vais vous expliquer en détail chaque étape, depuis la création de la barre de navigation avec Elementor jusqu’à l’ajout du script jQuery pour activer la fonction “scroll to top” les icones pour le téléphone, l’email et pour ouvrir un menu popup.

Si vous avez créé un footer avec Elementor, nous allons ajouter une nouvelle section directement en dessous du footer existant pour y placer la barre de navigation inférieure pour mobile.

Si vous utilisez Flexbox pour la mise en page, vous pouvez ajouter une nouvelle section et organiser les colonnes de la barre de navigation de gauche à droite ou avec les sections classiques, vous pouvez ajouter quatre colonnes pour la barre de navigation : une colonne pour le menu, une pour l’icone telephone, une pour le bouton “scroll to top”, et une pour les coordonnées de contact ou toute autre information que vous souhaitez inclure dans la barre de navigation.

Dans les options de la section pour la barre de navigation inférieure, vous pouvez choisir la couleur de fond de votre choix.

Si vous voulez utiliser une couleur blanche pour la barre de navigation et que votre site a un fond blanc, vous pouvez ajouter une ombre pour donner une démarcation à la barre.

conteneur pou barre inferieure
modifier une ombre pour le conteneur de la barre inferieure mobile

Pour faire cela, rendez-vous dans la section “Style”, puis cliquez sur “Bordure” et “Ombre de boîte”, vous pouvez utiliser le curseur “Vertical Offset” dans les options de l’ombre et le régler à -3 (ou tout autre chiffre selon votre préférence) pour donner une légère ombre qui donnera de la profondeur et un contraste visuel à votre barre de navigation inférieure.

ajouter une ombre pour le conteneur de la barre inferieure mobile
rendre visible la section seulement pour mobile

Pour rendre la section de la barre de navigation inférieure visible uniquement sur les appareils mobiles, accédez à la section “Avancé” des options de la section, cochez la case “Masquer sur ordinateur et tablette” dans les options de visibilité responsive.

id css pour le conteneur de la barre inférieure 
				
					my-footer

Maintenant nous allons ajouter un identifiant CSS à la section de la barre de navigation inférieure pour pouvoir l’utiliser avec le script jQuery que nous verrons plus tard.

L’identifiant que nous allons utiliser sera “my-footer”.

Nous devrons l’ajouter en avancée> mise page> ID de css

Css conteneur barre inferieure

Ensuite, nous allons ajouter toujours dans les options avancées de la section (CSS personnalisée) un code CSS pour positionner la barre de navigation inférieure.

Ce code CSS sera appliqué uniquement aux appareils avec une largeur d’écran maximale de 767 pixels, c’est-à-dire aux appareils mobiles et Il fixera la barre de navigation inférieure en bas de la page.

				
					@media only screen and (max-width: 767px) {
  #my-footer.show-scroll-to-top {
    position: fixed;
    bottom: 0;
    display: block;
  }
}
barre mobile 1
barre mobile 2

Maintenant, ajoutez votre propre icône de taille 16 ou 18 pixels et appliquez-lui une couleur personnalisée de votre choix

Pour l’icône de flèche ver le haut utilisée pour le bouton “scroll to top”, nous utiliserons l’ID CSS  scroll-to-top

id css pour icone scroll to top

Si vous avez décidé d’intégrer une icône de téléphone, nous créerons un lien personnalisé avec la syntaxe suivante : tel:+indicatif pays-numéro téléphone.

Pour un numéro de téléphone mobile, vous devrez supprimer le zéro initial du numéro.

 

Par exemple, pour un numéro de téléphone mobile belge, le lien serait : tel:+32465123456

lien telephone pour icone

Pou une icône d’email, nous allons créer un lien personnalisé en utilisant la syntaxe suivante : mailto:adresse-email. Par exemple, si notre adresse email est “exemple@gmail.com”, le lien serait : mailto:.”

si vous souhaitiez également ajouter l’objet de l’e-mail. mailto:exemple@gmail.com coml?subject=Demande d’information

link pour icone email

Enfin, pour l’icône du menu, dans le lien de l’icône, accédez aux options de la balise dynamique > actions > fenêtre modale. 

ajouter action pour menu mobile

Enfin, pour l’icône du menu, dans le lien de l’icône, accédez aux options de la balise dynamique > actions > fenêtre modale. 

ajouter action pour menu mobile

Ensuite, cliquez sur l’icône en forme de clé anglaise pour ouvrir une fenêtre, puis cliquez sur “Tout” et recherchez votre popup de menu en écrivant son nom. 

Si vous en avez déjà créé un, il apparaîtra dans la liste.

Dernière étape, nous devons insérer un script pour faire fonctionner le bouton “retour en haut”. Tout d’abord, rendez-vous dans Elementor > Code personnalisé > Ajouter.

ajout du script pour back to top 
				
					<script>
jQuery(document).ready(function($) {
  var offsetPercent = 0.6; //Décalage en pourcentage de la hauteur de la fenêtre
  var duration = 500; // la durée de l'animation coulissante vers le haut

  $(window).scroll(function() {
    var windowHeight = $(window).height();
    var footerHeight = $('#my-footer').outerHeight();
    var offset = (windowHeight - footerHeight) * offsetPercent;
    if ($(this).scrollTop() > offset) {
      $('#my-footer').addClass('show-scroll-to-top');
    } else {
      $('#my-footer').removeClass('show-scroll-to-top');
    }
  });

 $('#scroll-to-top').click(function(event) {
  event.preventDefault();
  $('html, body').animate({scrollTop: 0}, duration);
  return false;
  });
});
</script>

Attribuez un nom au code, nous l’appellerons “scroll to top”. Sélectionnez l’emplacement <body> Débout et collez le code.

 Enregistrez et c’est tout !

Si vous avez suivi toutes les étapes, votre barre de navigation devrait fonctionner correctement.

Si vous souhaitez modifier le moment où votre barre doit apparaître, vous pouvez modifier les valeurs de “var offsetPercent = 0.6;” et “var duration = 500;”. Le 0,6 correspond à 60% de la hauteur de l’écran, ce qui signifie que la barre apparaîtra lorsque vous aurez fait défiler 60% de la page vers le bas. Le 500 est le temps en millisecondes pour faire apparaître la barre.

 

Je vous recommande de faire une sauvegarde avant de commencer ce petit travail qui vous permettra d’économiser l’utilisation d’un plugin.

]]> https://www.web-operis.be/comment-concevoir-une-barre-inferieure-optimisee-pour-mobile-avec-menu-telephone-et-retour-en-haut/feed/ 0 Elementor - Web-operis nonadult