Transparant blok in je headerfoto
Op facebook kwam er een vraag langs van hoe je een transparant blok in een foto kunt weergeven, er kwamen een paar reacties langs met welke extentie of module dit gaat. Ik heb ook een reactie gegeven dat dit ook perfect gaat met css en html, daar kreeg ik als reactie op dat niet iedereen zo handig is met css en html, daar had die persoon helemaal gelijk in natuurlijk.
Zo kwam ik op het idee om deze blog te schrijven over hoe je een transparant blok in een foto kunt krijgen met behulp van een beetje css en html, lees deze blog en als er opmerkingen zijn hoor ik dit uiteraard graag.
Zijn Fotosliders helemaal uit de tijd?
Waar er eerst op veel websites een fotoslider aanwezig was in de kop van de site zie je deze steeds minder, bijna niemand gaat zitten wachten op de volgende foto, als het te lang duurt scrollen ze zeker al verder, gaat het te snel dan hebben ze te weinig tijd om alles goed te bekijken.
De bezoeker wil klikken en scrollen en is gekomen voor de informatie waar deze naar zoekt, als er in de kop van jouw website al informatie aanwezig is waar ze naar zoeken heb je al veel gewonnen. Voor een website geldt als je de bezoeker 2 seconden vast kunt houden ze dan meer van je website gaan bekijken omdat de interesse is gewekt.
Om de bezoeker al een beetje te laten zien waar je website overgaat kun je dit met een mooie sprekende foto laten zien, zet er ook nog eens een pakkende tekst in met de service die je aanbied.
Je zou dan al een contactknop kunnen toevoegen, dit noemen ze ook wel een call to action, want met een contactknop kan je bezoeker al contact met je opnemen.
Een transparant blok in een achtergrondfoto plaatsen, hoe doe je dat?
Het maken van een transparant blok op een foto is met een betaalde extentie perfect te maken, maar het kan ook met alleen een beetje html en css. Hoe je dit doet, dat zal ik in gemakkelijke stappen uitleggen zodat je dit op je eigen website ook kan toepassen. Zo leer je stap voor stap een beetje over css en html.
Eerst ga je een nieuw module item maken op de plaats waar de transparant blok zichtbaar moet worden. Ik gebruik hier de gratis template van Joomspirit voor. Deze geeft een mooi resultaat voor het gebruik van een transparant blok bovenop je headerfoto. De plaats waar je de module dan plaatst is de moduleplaats "image".
Je kunt hier elke template voor gebruiken ook degene die je nu gebruikt, om te kijken waar je de foto in een moduleplaats in de header kunt plaatsen moet je wel weten hoe de moduleplaats heet.
Hier kun je eenvoudig achterkomen, ga hiervoor naar templates > dan rechts bovenaan naar opties, nu kun je de optie ''Voorbeeld module opties'' inschakelen.
Nu ga je naar je website toe en typt www.jouwwebsite/?tp=1 dus achter je eigen website url zet je /?tp=1 neer, nu geeft de template alle module plaatsen weer die beschikbaar zijn, als je een template hebt gekocht dan zit er bij de handleiding ook een beschrijving bij van de beschikbare moduleplaatsen. Zet de optie ''Voorbeeld module optie" weer uit als je klaar bent.
Eerst maak je een nieuwe module aan van het type Aangepast, ga hiervoor naar extenties/modules en maak een nieuwe module aan. Geef deze een naam bijvoorbeeld headerfoto, nu open je in de module de code editor, als je de gratis wysiwg editor JCE gebruikt staat deze linksboven het tekstvak. Klik hierop om over te schakelen omdat je nu code gaat invoeren.
Het oproepen van de diverse class namen
We gaan eerst de class oproepen van de foto die bestaat uit code en is <div class="headerfoto"> hiermee zeg je dat er nu een class wordt aangeroepen met de naam headerfoto, deze staat in de custom css van je template om de foto te stylen met css.
De volgende class die we gaan aanroepen is <div class="phome"> deze zorgt ervoor dat de tekst niet over de volle breedte van de foto zichtbaar is maar een percentage of px van de zijkant afblijft, dit wordt ook geregeld vanuit de custom css.
De volgende class die we gaan aanroepen is <div class="transbox"> deze zorgt voor ervoor dat het blok een transparante achtergrond krijgt die aanpasbaar is keuze.
Je mag voor de naam van de class iedere naam gebruiken die je maar wil, kies er wel voor dat deze met de class te maken heeft, is gemakkelijker met het terugzoeken in de custom css.
Als je hier klaar mee bent ziet dit er dus zo uit:
<div class="headerfoto">
<div class="phome">
<div class="transbox">
Nu kun je weer overschakelen naar de editor zodat je de tekst die in het transparant blok moet komen kunt gaan typen. Gebruik hier een lettergrote voor van ongeveer 20pt, dit is goed leesbaar voor een koptekst, voor de overige teksten zou je bv 16pt aan kunnen houden, zet hier niet teveel in anders wordt het gauw te druk en wordt dit niet gelezen, en zet hier nu niet Welkom op mijn website neer.
Met het template van Joomspirit nr 99 heb je nog een voordeel, je kunt er meerdere blokken naast elkaar zetten, met een andere class bepaal je zo hoeveel blokken er naast elkaar komen. Mocht je er niet uitkomen dan kun je altijd contact met mij opnemen.
Het invoegen van een contactknop
Nu is het tijd voor een knop zodat er ook contact kan worden opgenomen, deze bestaat uit een contactknop die we nog helemaal gaan stijlen met css. Zet eerst de editor weer op code rechtsbovenaan, de code voor een knop is: <button class="contactbutton">
Nu moeten we de contactknop nog werkend krijgen dat als er op wordt geklikt de bezoeker wordt doorgestuurd naar jouw contactpagina. Hoe gaat dit in zijn werk? Schakel om te beginnen weer over naar de editor modus zodat je de contactknop te zien krijgt, deze ziet er nu nog saai grijs uit maar die gaan we straks ook stylen met css.
Dubbelklik op de contactknop met ''Neem contact op'' deze veranderd nu van kleur. Dan moet je de contactknop gaan linken aan de contactpagina van je website, als er op de knop wordt geklikt dat je op de contactpagina terechtkomt. Klik op het tekentje dat lijkt op een ketting.
Je komt nu op de pagina met de mogelijkheid om de knop te gaan linken aan de contactpagina. Bij contact kun je de contactknop linken zodat deze naar je contactpagina gaat als er op wordt geklikt. Om de contactknop in het midden onderaan te laten verschijnen kun je deze met de teksteditor naar het midden zetten.
Controleer de code die je nodig hebt voor het transparant blok in een achtergrondfoto.
Als het goed is heb je nu alles klaar, alle code staat nu in het artikel om zo te worden gestyld met css. Om dit nog een keer te controleren schakel nogmaals over naar Code, dit staat nu in het artikel, bij de regel voor de contactknop staat als het goed meer code dan in het voorbeeld, dit is de code voor het werkend maken van de contactknop.
<div class="headerfoto''>
<div class="phome">
<div class="transbox">
<p><span style="font-size: 20pt;">Hier zet je de tekst neer die in de transparant blok moet komen te staan, dit is tekst van 20pt</span></p>
<p><span style="font-size: 16pt;">Hier komt de kleinere tekst te staan met je boodschap, dit is tekst van 16pt</span></p>
<p style "text-align: center;>Hier staat de code om de knop te linken aan de contactpagina<button class="contactbutton"> Neem contact op </button><a/></p>
</div>
</div>
</div>
De contact button staat nu ook in het transparant blok, wil je deze buiten en onder het transparant blok hebben dan moet je de volledige code van de contactknop verplaatsen zodat deze na de laatste </div> staat dan komt de contactknop buiten het blok.
Een geschikte foto voor achter het transparante blok
Voor een achtergrond heb je wel een foto nodig waar het transparant blok zichtbaar op is, je zou een mooie eigen foto kunnen gebruiken, haal in ieder geval nooit een foto van Google afbeeldingen omdat deze beschermd kunnen zijn met copyright, een boete is heel hoog.
Wat wel een optie is, kijk eens op pixabay, hier kun je vast wel een leuke foto vinden die je kunt gebruiken voor je website, deze zijn niet beschermd met copyright en zijn dus vrij te gebruiken, als je de foto hebt aangeklikt die je wil gebruiken kun je zien of de foto commercieel is te gebruiken, download een mooie foto en upload deze naar je imagemap op je website.
Het transparantblok stylen met css
Nu is het tijd om het transparant blok te gaan stylen met css, eerst sla je het (module)artikel op wat je net hebt gemaakt.
Ga naar extenties/templates en kies het template wat je gebruikt voor je website, ik gebruik voor dit voorbeeld Joomspirit nr 99. Open nu aan de rechterkant de template en niet style, nu kom je in de template waar je aanpassingen kunt doen.
Open nu css en kies custom css, hier kun je alle css code toevoegen die je in de template aangepast wil hebben. Je kunt alle code kopieren en in je eigen custom css bestand zetten. De /***** tekst*****/ kun je ook meenemen om te zien waar de css over gaat, als je veel aanpassingen in de custom css doet blijft het met deze teksten toch nog overzichtelijk.
Styling van de headerfoto
/*****Headerfoto*****/
.headerfoto{
background-image:url(/images/Headerfoto.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
height: auto;
padding-top: 25px;
padding-bottom: 15px;
}
/*****Einde Headerfoto*****/
Hier staat de styling van de headerfoto die achter het transparant blok komt te staan.
Hier wordt de background-image opgeroepen, wordt de achtergrond nu niet getoond dan moet je het volledige pad invullen, er staat nu (/images/Headerfoto.jpg) plaats hier dan nog voor (https://www.jewebsite.nl, de naam achter image is de naam van jouw eigen foto natuurlijk
de background-size is cover, dus over de volledige breedte
background-attachment is fixed, dus de foto blijft stilstaan als je naar beneden scrolt
background-position staat op center, de foto staat in het midden van het scherm
height staat op automatisch
De padding is de ruimte die het tekstblok krijgt boven en onder, anders staat de tekst tegen de randen aan, is niet zo fraai.
Styling van de transparante blok
/*****Transbox*****/
.transbox{
margin: 20px;
background-color: rgba(255, 255, 255, 0.85);
border: solid 1px #0090e1;
border-radius: 10px 10px;
filter: alpha(opacity=85); / For IE8 and earlier /
}
.transbox p {
margin: 10px;
color: #555;
padding: 1px 1px 25px 1px;
}
/*****Einde Transbox*****/
De styling van het transparant blok is nu aan de beurt, kopieer alle code die hier staat in de custom css.
De achtergrondkleur kleur wordt normaal met #fff aangeduid, maar met transparatie gebruik je een andere code, dit zijn de RGB kleuren, als je het nr van een jouw gekozen kleur wil weten zou je bij hexkleuren kunnen kijken.
De kleur die je kiest bestaat uit 3 cijfers, bij mij is dat 255, 255, 255, dat is helder wit. Het cijfer 0,85 wat helemaal achteraan staat is het percentage van de transparantie van het blok, speel hier een beetje mee tot je het gewenste resultaat hebt.
Dan de border geeft aan of je een randje om het transparant blok wil hebben, welke kleur en hoe dik dit randje moet zijn.
Wil je eventueel ook een radius om je transparant blok dan geef je dit aan bij border-radius met 5px 5px. Probeer diverse afmetingen totdat je de gewenste afmetingen hebt gevonden.
De volgende is een filter voor de oudere browsers, deze worden nog steeds gebruikt door de oudere computers.
Dan staat er nog 1 dat is de styling van de tekst in het transparant blok, aangeduid met .transbox p. Hier kun je de specifieke styling doen van de tekst die in het blok komt. Ik heb hier tekstkleur #555 aangehouden, dat is niet helemaal zwart. Met padding zorg je voor meer ruimte in je tekstblok.
Styling van de contactknop
.contactbutton{
background-color:#ff6600;
color:#555;
padding: 5px 10px;
border: solid 2px #555;
border-radius: 20px 20px 10px 10px;
font-size: 14pt;
width: auto;
transition: all 0,5s ease-in-out 0,5s; }
.contactbutton:hover{
background-color:#808080;
border: solid 2px #ff6600;
box-shadow: 5px 5px 8px #ff6600; }
Nu gaan we de contactbutton stylen in de custom-css van de template, nu ziet deze er nog grijs en saai uit.
We kiezen eerst een background-color, maak hiervoor gebruik van het Adobe kleurwiel om een gewenste kleur te kiezen, vergeet niet het # voor de nummers anders werkt het niet.
Met color regel je de tekstkleur van de button, ik heb hier #555 voor gekozen.
Om wat tekstruimte te krijgen heb je wat padding nodig, hou hier 5px en 10px aan, of kijk wat voor jou mooier uitkomt.
Om een randje om de knop te krijgen kun een border gebruiken, in deze code staat deze op solid 2px in de kleur #555.
Ik heb voor de hoeken een radius toegevoegd, deze zijn 20px 20px 10px 10px, probeer de waarde die voor jouw het beste bij de website passen.
De font-size(lettergrote) is met deze knop 14pt.
De with(breedte) staat nu op auto om als de tekst langer is de knop meegroeit.
Transition is de tijd van veranderen van kleur als je met de muis over de knop gaat.
De volgende is het stylen van de hoverstatus van de knop(het veranderen van kleur als je met de muis over de knop heengaat)
Als je met de muis over de knop heen gaat veranderd ook de randkleur en komt er een box-shadow te voorschijn, deze kun je helemaal aanpassen naar eigen smaak.
De tekst niet over de volledig breedte tonen
/*****Tekstruimte*****/
@media screen and (min-width: 960px) {
.phome{
margin:1px;
padding:0 12% 0 12%;
}
}
/*****Einde Tekstruimte*****/
Dan de tekstruimte, deze werkt nu alleen op schermen die groter zijn dan 960px, voor mobiele schermen is het niet nodig dat er 12% ruimte komt aan de linker en rechterkant. Voor de grotere schermen leest het veel beter als de tekst niet de volledige breedte van je scherm gebruikt, anders wordt het net een tennis wedstrijd, je kunt dit percentage gewoon naar je eigen smaak aanpassen.
We hebben dit nu gedaan met de headerfoto maar dit kan ook heel mooi staan in een artikel, maak hiervoor een module aan die je oproept vanuit een artikel waar de foto met tranparantblok in getoond moet worden.
Ik hoop dat je er een beetje wijs uit kunt worden om dit zelf te kunnen maken, kom je er tijdens het maken niet helemaal uit of is er een foutje in de code geslopen(kan gebeuren) laat dit dan even weten via mijn contactformulier.
Kun je er niet uitkomen neem dan even contact op
Meest gelezen artikelen