Maak responsieve achtergrondafbeeldingen & Meer in Elementor

Rifat E Jun 17, 2022

Om uw gebruikerservaring te verbeteren, levert Elementor nieuwe mogelijkheden zoals mobiele controle over achtergrondafbeeldingen, een veilige modus voor foutopsporing en meer.

Elementor is altijd trots geweest op zijn vermogen om te ontwerpen voor mobiele apparaten. Voor Elementor-gebruikers was het nog steeds een probleem om de locatie van de achtergrondafbeelding precies goed te krijgen. Als webontwikkelaar kom je vaak dit probleem tegen: je wilt het gezicht van de hond laten zien, maar alleen zijn staart op mobiel.

Met de Responsive Background Image-besturingselementen van Elementor kunt u achtergrondafbeeldingen maken die zich aanpassen aan de grootte en resolutie van elk apparaat.

Responsieve bedieningselementen voor achtergrondafbeeldingen

De nieuwste Elementor-versie geeft klanten uitgebreide controle over besturingselementen voor desktop-, tablet- en mobiele achtergrondafbeeldingen. Besturingselementen voor achtergrondafbeeldingen zijn opgenomen in dit besturingselement (afbeelding, positie, bijlage, herhalen en grootte).

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Voor het eerst kunt u de positie van individuele apparaten aanpassen. Kies 'center-top' voor mobiele apparaten en 'center-center' voor desktops om ervoor te zorgen dat de afbeelding uniform wordt weergegeven op alle platforms. Voor elk apparaat kun je een andere maat kiezen. Wat betreft mobiel, selecteer "bevatten" voor desktop en "bedekken".

We zijn er zeker van dat veel mensen deze nieuwe functie leuk zouden vinden, omdat dit voor veel mensen een groot probleem was.

Elementor brengt de mogelijkheid om volledig verschillende afbeeldingen in te stellen voor elk afzonderlijk apparaat. De eerste extra responsieve bedieningselementen kwamen in de vorm van apparaatspecifieke grootte en locatie. Met verstelbare grootte en positie, kunt u een stap verder gaan en krijgt u een nog flexibelere ontwerpervaring.

Aangepaste achtergrond afbeeldingsgrootte & positie

Voorheen waren er slechts drie opties om de grootte van de achtergrondafbeelding in te stellen: automatisch, bedekken of bevatten. Net als bij 'Linksboven' kunt u alleen algemene plaatsingen van achtergrondafbeeldingen specificeren.

De grootte en positie van de achtergrond zijn nu twee nieuwe aangepaste besturingselementen die in de toekomst beschikbaar zullen zijn.

Met de aangepaste achtergrondpositie kunt u de exacte X- en Y-ascoördinaten van de achtergrondafbeelding selecteren. Als gevolg hiervan heeft u nu de mogelijkheid om de achtergrond van uw pagina nauwkeurig uit te lijnen.

Aangepaste achtergrondformaten zijn ook mogelijk. Stel de breedte van uw achtergrondafbeelding in op een precieze waarde in pixels.

Voor responsief ontwerp zijn deze instellingen—specifiek de aangepaste achtergrondgrootte en positie— van cruciaal belang. Gebruik deze aangepaste instellingen voor desktop-, tablet- en mobiele platforms om een ​​specifieke focus op het belangrijkste brandpunt van de afbeelding vast te stellen.

Responsieve grenscontroles

Bovendien kunt u nu de randradius en breedte voor elk apparaat afzonderlijk aanpassen, naast achtergrondafbeeldingen.

Kolomranden kunnen op verschillende manieren worden gebruikt, bijvoorbeeld wanneer een rij links wordt gedeeld door een kolomrand. Op mobiel is het niet nodig omdat de rij niet langer inline is en elke link in een eigen rij wordt geplaatst.

Het wegnemen van de rand van de mobiele lay-out is in deze omstandigheid een goed idee. Een nieuwe functie voor dynamische grenzen maakt het eenvoudig te bereiken.

Er zijn geen "verweesde grenzen" meer op mobiele apparaten!

Veilige modus voor het oplossen van problemen

Elementor streeft ernaar om alle klanten een soepele, bugvrije ervaring te bieden. Er zijn tienduizenden plug-ins en thema's om uit te kiezen, en er zijn oneindig veel manieren om ze met elkaar te laten samenwerken. Ongeacht of Elementor erbij betrokken is of niet, deze combinaties zullen ongetwijfeld tot strijd leiden.

Elementor is altijd op zoek naar manieren om het onze gebruikers gemakkelijker te maken door wrijving in hun werkprocessen te verminderen.

Wanneer mensen de editor niet kunnen openen, is dit een veelvoorkomend probleem. Er zijn veel namen aan dit probleem gegeven: ik krijg een leeg scherm, ik kan niet bewerken en mijn computer loopt vast bij het laden van …

Veilige modus is het antwoord!

Toen Windows voor het eerst uitkwam, bevatte het een functie voor de veilige modus die kon worden gebruikt om verschillende problemen op te lossen. Elementor heeft zelf een vergelijkbare oplossing ontwikkeld.

Telkens wanneer u een pagina tegenkomt die weigert te laden, kunt u 'Veilige modus' activeren door op een knop te klikken.

Elementor en WordPress worden in de "Veilige modus" beschermd tegen thema's of plug-ins die mogelijk problemen veroorzaken.

Meer dan 80% laadproblemen kunnen tijdelijk worden opgelost in de veilige modus.

Wanneer u de Veilige modus opent, wordt alles correct geladen?

Dit suggereert dat ofwel je thema of een van je plug-ins verantwoordelijk is voor de fout. Ga je gang en deactiveer ze één voor één om de dader te identificeren.

Ik heb de veilige modus ingeschakeld, maar hij laadt nog steeds niet.

Dit suggereert dat u ergens anders naar een oplossing moet zoeken, en het is hoogstwaarschijnlijk een probleem met aangepaste code of hosting.

"Heeft de veilige modus invloed op mijn website?"

Bezoekers van uw website merken geen verschil als ze de veilige modus gebruiken. Al uw geïnstalleerde plug-ins en thema's worden op uw site weergegeven en uw bezoekers kunnen ze gebruiken zoals ze dat normaal zouden doen.

Plug-ins en thema's worden niet geactiveerd tijdens het laadproces van de Elementor-editor.

Gebruikers van Elementor zullen enorm profiteren van de veilige modus in termen van een stabielere, naadloze en foutloze ervaring.

Lees meer Tag & Widget

De lees meer-tag van WordPress was een van de eerste dingen die elementor als functieverzoek kreeg.

Dit was een eenvoudig verzoek, maar de pagebuilder is er uiteindelijk in geslaagd om het te implementeren.

Wanneer je de tag "Lees meer" in je blogpost gebruikt, zal de postweergave van het archief de rest van de tekst afsnijden. Hiermee kan je contentteaser nu direct op je hoofdblogpagina worden weergegeven, zodat iedereen deze kan zien.

In de teksteditor-widget of als aparte widget kun je nu snel de lees meer-tag toevoegen. Het is nog gemakkelijker om een ​​uittreksel op uw archiefpagina weer te geven met de nieuwe 'Lees meer'-widget van Elementor, die tussen twee teksteditor-widgets kan worden ingevoegd en precies stopt waar u maar wilt.

Om verwarring te voorkomen, is deze widget alleen van toepassing op reguliere WordPress-archiefpagina's die 'de inhoud' in hun inhoud gebruiken. Elementor-archiefsjablonen worden niet beïnvloed.

Laatste woorden

Elementor is een van de sterk ontwikkelde WordPress-paginabuilders. Met nieuwe functies wordt het elke keer krachtiger. Met deze plug-in kun je letterlijk een enorme oceaan aan ontwerpen en decoratie voor je website verkennen. Ik hoop dat je baat zult hebben bij dit bericht. Bezoek meer elementor-tutorials en deel ze met je vrienden.

Divi WordPress Theme