Créez des images d'arrière-plan réactives et amp; Plus dans Elementor

Rifat Élémentaire Jun 17, 2022

Pour améliorer votre expérience utilisateur, Elementor offre de nouvelles fonctionnalités telles que le contrôle mobile des graphiques d'arrière-plan, un mode sans échec pour le débogage, etc.

Elementor a toujours été fier de sa capacité à concevoir pour les appareils mobiles. Pour les utilisateurs d'Elementor, obtenir l'emplacement exact de l'image d'arrière-plan était toujours un problème. En tant que développeur Web, vous pouvez souvent rencontrer ce problème: vous voulez montrer le visage du chien, mais ne montrer que sa queue sur mobile.

Les commandes Responsive Background Image d' Elementor vous permettent de créer des images d'arrière-plan qui s'adaptent à la taille et à la résolution de n'importe quel appareil.

Contrôles d'image d'arrière-plan réactifs

La dernière version d'Elementor offre aux clients un contrôle complet sur les commandes d'image de fond de bureau, de tablette et de mobile. Les champs Image d'arrière-plan sont inclus dans ce champ (image, position, pièce jointe, répétition et taille).

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Pour la toute première fois, vous pouvez personnaliser la position des appareils individuels. Choisissez «centre-haut» pour les appareils mobiles et «centre-centre» pour les ordinateurs de bureau afin de vous assurer que l'image s'affiche de manière uniforme sur toutes les plateformes. Pour chaque appareil, vous pouvez choisir une taille différente. Comme pour le mobile, sélectionnez "contenir" pour le bureau et "couvrir".

Nous sommes sûrs que beaucoup de gens aimeraient cette nouvelle fonction car c'était un problème majeur pour beaucoup de gens.

Elementor apporte la possibilité de définir des images entièrement distinctes pour chaque appareil individuel. Les premiers contrôles réactifs supplémentaires se présentaient sous la forme d'une taille et d'un emplacement spécifiques à l'appareil. Avec sa taille et sa position ajustables, il vous permet d'aller plus loin et vous offre une expérience de conception encore plus flexible.

Taille de l'image d'arrière-plan personnalisée Position &

Auparavant, il n'y avait que trois options pour définir la taille de l'image d'arrière-plan: automatique, couverture ou contenu. Semblable à "En haut à gauche", vous ne pouviez spécifier que les emplacements généraux de l'image d'arrière-plan.

La taille et la position de l'arrière-plan sont désormais deux nouveaux contrôles personnalisés qui seront disponibles à l'avenir.

La position d'arrière-plan personnalisée vous permet de sélectionner les coordonnées exactes des axes X et Y de l'image d'arrière-plan. En conséquence, vous avez maintenant la possibilité d'aligner précisément le fond de votre page.

Des tailles de toile de fond personnalisées sont également possibles. Définissez la largeur de votre image de fond sur une valeur précise en pixels.

Pour une conception réactive, ces paramètres—, en particulier la taille et la position d'arrière-plan personnalisées—, sont essentiels. Pour les ordinateurs de bureau, les tablettes et les plates-formes mobiles, utilisez ces paramètres personnalisés pour établir une mise au point spécifique sur le point focal principal de l'image.

Contrôles frontaliers réactifs

De plus, vous pouvez désormais personnaliser le rayon et la largeur de la bordure pour chaque appareil séparément, en plus des images de fond.

Les bordures de colonne peuvent être utilisées de différentes manières, par exemple lorsqu'une ligne de liens est divisée par une bordure de colonne. Il n'est pas nécessaire sur mobile car la ligne n'est plus en ligne et chaque lien est placé dans une ligne qui lui est propre.

Supprimer la bordure de la mise en page mobile est une évidence dans cette circonstance. Une nouvelle fonctionnalité de limites dynamiques le rend simple à réaliser.

Il n'y a plus de "frontières orphelines" sur les appareils mobiles!

Mode sans échec pour résoudre les problèmes

Elementor s'engage à fournir une expérience fluide et sans bogue à tous les clients. Il existe des dizaines de milliers de plugins et de thèmes parmi lesquels choisir, et il existe un nombre infini de façons de les faire fonctionner les uns avec les autres. Indépendamment du fait qu'Elementor soit impliqué ou non, ces combinaisons ne manqueront pas de mener à des conflits.

Elementor est toujours à la recherche de moyens de faciliter les choses pour nos utilisateurs en réduisant les frictions dans leurs processus de travail.

Lorsque les gens ne peuvent pas ouvrir l'éditeur, c'est un problème courant. De nombreux noms ont été donnés à ce problème: j'obtiens un écran vide, je ne peux pas modifier et mon ordinateur reste bloqué lors du chargement…

Le mode sans échec est la réponse!

Lorsque Windows est sorti pour la première fois, il incluait une fonctionnalité de mode sans échec qui pouvait être utilisée pour résoudre divers problèmes. Elementor a développé lui-même une solution similaire.

Chaque fois que vous rencontrez une page qui refuse de se charger, vous pourrez activer le "Mode sans échec" en cliquant sur un bouton.

Elementor et WordPress sont protégés en "mode sans échec" contre tous les thèmes ou plugins qui pourraient causer des problèmes.

Plus de 80% problèmes de chargement peuvent être temporairement résolus en mode sans échec.

Lorsque vous entrez en mode sans échec, tout se charge-t-il correctement?

Cela suggère que votre thème ou l'un de vos plugins est responsable de l'erreur. Allez-y et désactivez-les un par un afin d'identifier l'auteur.

J'ai activé le mode sans échec, mais il ne se charge toujours pas.

Cela suggère que vous devriez rechercher une solution ailleurs, et il s'agit probablement d'un problème lié au code personnalisé ou à l'hébergement.

"Le mode sans échec affectera-t-il mon site Web?"

Les visiteurs de votre site Web ne remarqueront aucune différence s'ils utilisent le mode sans échec. Tous vos plugins et thèmes installés seront affichés sur votre site et vos visiteurs pourront les utiliser comme ils le feraient normalement.

Les plugins et les thèmes ne sont pas activés tout au long du processus de chargement de l'éditeur Elementor.

Les utilisateurs d' Elementor bénéficieront grandement du mode sans échec en termes d'expérience plus stable, transparente et sans erreur.

En savoir plus Balise & Widget

La balise read more de WordPress a été l'une des premières choses que elementor a reçues en tant que demande de fonctionnalité.

Il s'agissait d'une simple demande, mais le constructeur de pages a finalement réussi à l'implémenter.

Lorsque vous utilisez la balise "En savoir plus" dans votre article de blog, l'affichage de l'article de l'archive coupera le reste du texte. Avec cela, votre teaser de contenu peut maintenant être affiché directement sur la page principale de votre blog pour que tout le monde puisse le voir.

Dans le widget de l'éditeur de texte ou en tant que widget séparé, vous pouvez maintenant ajouter rapidement la balise en savoir plus. Il est encore plus facile d'afficher un extrait sur votre page d'archive avec le nouveau widget "Read More" d'Elementor, qui peut être inséré entre deux widgets d'éditeur de texte et s'arrête exactement là où vous le souhaitez.

Afin d'éviter toute confusion, ce widget ne s'applique qu'aux pages d'archives WordPress régulières qui utilisent «le contenu» dans leur contenu. Les modèles d'archive Elementor ne sont pas affectés.

Derniers mots

Elementor est l'un des constructeurs de pages WordPress les plus développés. Avec de nouvelles fonctionnalités, il devient de plus en plus puissant à chaque fois. Avec ce plugin, vous pouvez littéralement explorer un immense océan de conception et de décoration pour votre site Web. J'espère que vous deviendrez bénéfique de ce poste. Visitez plus de tutoriels elementor et partagez-les avec vos amis.

Divi WordPress Theme