Wil je blogposts floaten in Divi?
Vandaag laten we je een creatieve manier zien om blogposts te presenteren als zwevende kaarten in Divi. Elke blog of Site web moet streven naar een uitstekende inhoud aantrekkelijk en misschien wel even belangrijk of toegankelijk.
Een manier om ervoor te zorgen dat de inhoud toegankelijk blijft voor gebruikers is om het op de pagina te laten zweven.
En voor bloggers laten we u zien hoe u artikelen kunt presenteren jouw blog als zwevende kaarten, zodat ze zichtbaar blijven tijdens het scrollen over de pagina.
Laten we gaan.
overzicht
Hier is een kort overzicht van het resultaat dat we aan het einde van deze tutorial zullen verkrijgen.
Wat je nodig hebt om te beginnen
Voordat je dit ontwerp in Divi gaat maken, moet je het volgende doen:
- Maak een nieuwe pagina aan, geef een relevante naam op en klik op 'Gebruik Divi Builder'
- Selecteer de optie Kies lay-out".
- Zoek en selecteer lay-out 'blogger-bestemmingspagina'.
- Klik op de knop Kies lay-out om het op de pagina te laden.
Daarna heb je de vooraf gemaakte lay-out klaar voor gebruik voor deze zelfstudie.
Hoe u zwevende kaarten voor blogberichten kunt maken met Divi's blogmodule
Nu de lay-out op de pagina is geladen, zijn we klaar om zwevende kaarten voor onze blogpost te maken.
Lees ook: Hoe maak je een Sticky Global Header in Divi
Maak een nieuwe sectie helemaal onderaan de lay-out.
Voeg vervolgens een nieuwe rij met één kolom toe aan de sectie.
Voeg een blogmodule en een titel toe aan de rij/kolom
In plaats van hier een nieuwe blogmodule te maken, bladert u omhoog en vindt u de bestaande blogmodule met drie blogberichten (deze bevindt zich in het derde gedeelte in het midden van de pagina). Open " Andere moduleparameters »En selecteer« Module kopiëren".
Plak de module vervolgens in de nieuwe rij met één kolom die we onderaan de pagina hebben gemaakt door met de rechtermuisknop op het grijze pluspictogram te klikken en " Module plakken".
Vervolgens voegen we een titel toe boven onze blogposts die ook boven de blogkaarten zweeft. Kopieer hiervoor de bestaande tekstmodule met de kleine titeltekst " Lifestyle".
Plak vervolgens de module net boven de nieuwe blogmodule die we zojuist hebben toegevoegd.
Bewerk vervolgens de titeltekst om het type blogposts te beschrijven dat u wilt weergeven. In dit voorbeeld gebruiken we gewoon " Top Story".
De lijn aanpassen met een vaste positie en aangepaste breedte
We willen de grootte van zwevende blogberichten verkleinen, zodat ze niet te veel ruimte op de pagina innemen als ze een vaste positie hebben. Het zou vermakelijk zijn. Open hiervoor de lijninstellingen en werk het volgende bij:
Om de items te laten zweven, moeten we de lijn een vaste positie geven. Werk het volgende bij op het tabblad Geavanceerd:
- Positie: Vast
- Locatie: Rechtsonder
- Verticale verschuiving: 20px
- Horizontale verschuiving: 20px
- Z-index: 12
Bijgewerkte blogmodule met minimale inhoud en box-schaduw
Over het algemeen heeft de blogmodule al een rasterlay-out met drie kolommen en een mooie stijl die wordt geleverd met het lay-outpakket dat we hebben gekozen. Maar er zijn een paar dingen die we moeten doen.
Zie ook: Hoe maak je een globale header met inlogformulier in Divi
Allereerst moeten we de grootte van de kaarten verkleinen (verticaal) en enkele elementen verwijderen inhoud.
Open hiervoor de bloginstellingen en verberg alle elementen behalve de uitgelichte afbeelding. Hierdoor wordt in het bericht alleen de uitgelichte afbeelding en titel weergegeven.
Configureer op het tabblad Stijl de vakschaduw als volgt:
- Schaduwdoos: Zie screenshot
- Doos Schaduwvervaging Sterkte: 28px
- Letterkleur ondertitel: rgba(0,0,0,0.19)
overzicht
Hier is een preview van het resultaat dat we tot nu toe hebben.
Laat de regel met artikelen verschijnen met de muisaanwijzer
Ten slotte kunnen we een mooi zweefeffect toevoegen dat gebruikers aanmoedigt om te communiceren met de zwevende artikelen.
Lees ook: Hoe de blogpagina te maken met de Blog-module in Divi
Open lijninstellingen en update-opties:
Voor op kantoor
- Transformeren: 50%
Voor hover-status:
- Transformeren: 0%
Dit zal in eerste instantie de hele regel met 50% buiten de browserviewport brengen. Zodra de gebruiker over de lijn zweeft, komt deze weer volledig in beeld.
Rij verbergen op mobiel
Tenzij u een enkele blogpost wilt publiceren, heeft het geen zin om die blogposts op mobiel te laten zweven. Het zou waarschijnlijk veel te veel ruimte in beslag nemen en problemen veroorzaken bij het scrollen.
Zie ook: Een contactformulier toevoegen aan een globale kop in Divi
Om kaarten op mobiel te verbergen, opent u sectie-instellingen en schakelt u de zichtbaarheid van secties uit op telefoon en tablet.
Eindresultaat
Download DIVI nu!!!
Conclusie
Alstublieft ! We hebben je in deze tutorial een creatieve en originele manier laten zien om de blogposts die je wilt uitlichten te presenteren.
Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
