Behöver du veta hur du använder bildwidget i Elementor?

Som man brukar säga. " En bild säger mer än tusen ord ". Ibland är det mycket lättare att förmedla ett meddelande via en bild.

Det gäller också webbdesign. Det är nästan omöjligt att utforma en webbsida utan att involvera ett bildelement. Att vara ett verktyg som betonar design, Elementor låter dig enkelt lägga till en bild i din design genom att tillhandahålla bildwidgeten. Du kan helt enkelt dra bildwidgeten till redigeringsrutan för att lägga till ett bildelement.

Du kan inte bara lägga till statisk bild, men du kan också lägga till dynamisk bild i Elementor. Denna funktion (möjligheten att lägga till en dynamisk bild) är särskilt användbar för att skapa en anpassad mall som ett anpassat unikt meddelande, anpassad kategorisida, anpassad rubrik osv ... - med Elementors temabyggare.

Själva bildwidgeten finns i båda versionerna av Elementor, men för att lägga till en dynamisk bild måste du använda proversionen.

Hur man lägger till en bild i Elementor

Innan vi går vidare antar vi att du redan vet hur man använder Elementor

I Elementors redaktör drar du bara bildwidgeten från vänster panel till redigeringsrutan och klickar sedan på bildväljaren för att välja den bild du vill använda.

Lägga till en dynamisk bild

För att lägga till en dynamisk bild kan du hålla muspekaren över bildväljaren, klicka på databasikonen och välja den typ av dynamisk bild du vill lägga till från de tillgängliga alternativen.

Du kan sedan klicka på skiftnyckelikonen för att välja räddning. Fallback i sig är standardinnehållet som visas när dynamiskt innehåll inte är tillgängligt. I detta fall är Fallback den standardbild som ska visas när Elementor inte kan hitta den dynamiska bilden.

Hur man använder bildwidgeten i Elementor

Bildanpassning

För att anpassa bilden kan du komma åt den på fliken Style från inställningspanelen (panelen på vänster sida). Innan du går till fliken Style, du kan ställa in bildstorlek, bildjustering och lägga till länk till bild i block Bild under fliken Innehåll. 

Läs också: Hur man hanterar formulärinlämningar i Elementor

Under fliken Stil, du kan ställa in kantradie, tillämpa CSS-filter, ställa in anpassad storlek, opacitet och använda områdesskugga.

  • Definition av anpassad storlek

I blocket Bild under fliken Innehåll, du kan ställa in storleken på din bild. Om du vill ställa in anpassad storlek kan du bara ställa in breddvärde och höjdvärde i blocket Bild sous på fliken Style. Du kan använda procentenheten, pixeln eller bredden på displayfönstret (VW).

  • Ställer in bildens opacitet

För att ställa in opacitetsnivån för bilden kan du helt enkelt dra skjutreglaget från Opacitetalternativ under fliken Stil. Du kan ange opacitetsnivån från 0 till 1.

  • Tillämpa CSS-filter

Om du vill kan du använda CSS-filter på din bild för att lägga till några bildeffekter. Det finns fem filteralternativ som du kan använda: Oskärpa, ljusstyrka, kontrast, mättnad och nyans. Klicka bara på pennikonen i alternativet CSS-filter och ställ in önskade CSS-filtervärden genom att dra reglagen.

  • Definition av gräns

För att göra din bild mer övertygande kan du också ställa in gränserna. För att lägga till gränsen, välj först kanttypen i alternativet Typ av gräns. Du kan sedan ställa in kantbredd, kantfärg och kantradie.

Förresten är gränsradien lutningsnivån för bildens sidovinklar (uppe till höger, uppe till vänster, nere till höger, nere till vänster). Ju högre gränsvärdet är, desto mer rundad blir din bild.

 

  • Tillämpa en rutaskugga

För att applicera en rutskugga kan du bara klicka på pennikonen i alternativet Lådans skugga. Välj skuggfärg och ställ in värdet för horisontell orientering, vertikal orientering, suddighetsnivå och spridningsnivå.

Hur man använder bildwidgeten i Elementor

Avancerade inställningar

För att utföra några avancerade inställningar på bilden måste du öppna fliken advanced i inställningspanelen. Från den kan du definiera saker som marginal och stoppning, inmatningsanimering, anpassad CSS, etc.

  • Definiera marginal och stoppning

För att ställa in bildmarginalen och fylla, måste du öppna blocket Avancerad.

  • Tillämpa en postanimation

För att göra din bild mer övertygande kan du använda inmatningsanimering. För att göra det kan du öppna blocket Rörelseeffekter. Från detta block kan du ställa in rullningseffekter, museffekt och klibbigt alternativ.

För att tillämpa en inmatningsanimation behöver du bara inmatningsanimationsstilen i alternativet Entré animation.

Hur man använder bildwidgeten i Elementor

  • Lägga till anpassad CSS

Om du har CSS-kunskap kan du också lägga till anpassad CSS till Image-widgeten. För att lägga till anpassad CSS kan du bara öppna blocket Anpassad CSS och klistra in din CSS-kod i det tillgängliga fältet.

  • Dölj bilden på en viss typ av enhet

I Elementor kan du använda en annan inställning på en viss widget för olika typer av enheter. Dessutom kan du ställa in att en widget ska inaktiveras på en viss typ av enhet.

Du kan till exempel stänga av widgeten Bild på surfplattan. För att göra detta kan du öppna blocket Lyhörd. Dra knapparna för att dölja widgeten på en viss enhet.

  • Definiera anpassad position

När du lägger till en bild i Elementor är standardpositionen inställd på statisk (par défaut). Det finns två andra positionsalternativ som du kan ställa in: fixe et absolut.

Fast: Om du väljer det här alternativet kommer bilden att placeras relativt användarens displayfönster

absolut : Om du väljer det här alternativet kommer bilden att placeras absolut vid sin först placerade förälder.

För att ställa in den anpassade positionen kan du öppna blocket positionering under fliken Avancerad. Välj den anpassade position som du vill ställa in i alternativet Placera och ställ in förskjutningen mellan horisontell och vertikal orientering.

Kort sagt

Bild är en viktig del av en design. Du kan verkligen designa en sida utan bild, men din design blir smaklös. Du kan använda bildwidgeten för att lägga till ett bildelement i din Elementor-design, oavsett om det är en sidmall eller ett tema.

Elementor låter dig lägga till både statisk och dynamisk bild (endast proversion). Utöver bildwidgeten finns det även widgeten Bildruta för att lägga till ett bildelement med textinnehållet. Den här senast nämnda widgeten är bättre lämpad för ett visst behov som att skapa en gruppmedelsavdelning, funktionslistavsnitt och andra avsnitt som involverar bild- och textinnehåll.

Skaffa Elementor Pro nu!

Andra ytterligare premium WordPress-plugins 

Upptäck också andra Wordpress plugins premium som optimerar prestandan för din WordPress-blogg eller webbplats.

1. MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises lokala, leverantörslistor etc. Mapsvg plugin wordpress-katalog

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

Läs också vår artikel om Hur du håller dina besökare längre på din webbplats

Ladda ner| demo | webbhotell

2. Pan Zoom Bild

Detta plugin låter dig enkelt lägga till panoreringszoomfunktion för bilder på din Wordpress blogg genom en kortkod. Du kan till exempel integrera den i din artikel eller din sida.

Image zoom pan wordpress plugin för zoom

Som funktioner har du bland annat: panoramazoom på en enda bild eller ett galleri med obegränsade bilder, kontrollstångens läge kan vara topp, höger, botten och vänster, botten på behållaren kan vara mörk, ljus och inget av det; liveförhandsgranskningen i instrumentpanelen, exemplet med flera panoreringszoom på samma sida, etc.

Upptäck också vår 5 kortkoder premium WordPress plugins

Ladda ner | demo | webbhotell

3. Marknadsföring Automation

Ce Wordpress plugin premium ger ett enkelt och flexibelt användargränssnitt, vars syfte kommer att vara att hjälper dig att enkelt skapa ett kraftfullt nyhetsbrev på din webbplats. Dess flexibilitet gör att du kan hantera ett brett spektrum av händelser, villkor och åtgärder - så att du enkelt kan konfigurera din e-postmarknadsföringsstrategi för att skicka, spåra och dra nytta av den.

Marknadsföringsautomatisering wordpress plugins skapar nyhetsbrev webbplats

Dess huvudsakliga funktioner är: möjligheten att tillämpa villkorlig logik baserat på reaktionen och på besökarnas beteende, spårning av handlingarna från besökarna på webbplatsen, perfekt för alla lojalitetsprogram, utmärkt för marknadsföringsstrategier som satsar på belöningarna, en intuitiv instrumentbräda, segmenteringen av webbplatsbesökare, möjligheten att göra undersökningar, sms-aviseringar och via e-post, popup-fönster baserade på besökarnas beteende, bannerannonser baserade på besökarnas beteende och mycket mer.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Här! Det är det för vår artikel som visar hur du använder bildwidgeten i Elementor. Om du har kommentarer eller förslag, tveka inte att meddela oss i det reserverade avsnittet.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk