De homepage van Devoked ontwerpen

Laatste update: 08/02/2021
17:20
De ervaring als: Ontwerper
Met: Een website

Leestijd: < 1 minuut

Het heeft lang geduurd voor ik de homepage een beetje heb kunnen stylen. Dat komt omdat ik nog niet de goede inhoud had verzameld op mijn website. Dat is nu wel het geval en daarmee heb ik de volgende schets gemaakt:

De laatste aanpassingen met betrekking tot de indeling van het zoekveld en de titels.

Ik had eerst op de homepage de filters primaire functie en toen zag de homepage er nog zo uit:

Ontdek de ervaring

				
					.woocommerce .widget_price_filter .ui-slider .ui-slider-range {

background-color: #fff;

}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {

background-color: #fff;

}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {

background-color: #000;

}

				
					<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });

</script>
<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

De homepage van Devoked ontwerpen

Ontdek de ervaring

Long Read

Devoked