greyscale logo hover effect
How to Create a Grayscale to Color Logo Hover Effect .friend-logo { filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity: .6; -webkit-transition: .6s; -moz-transition: .6s; transition: .6s; } .friend-logo:hover {...
hero centered
DESIGN Let's make some cool things! We are a digital agency that specializes in User Experience Design
how to highlite menu items on 1 page
R43: How to Highlight Active Links on Scroll and Click for One Page Divi Websites Next, open up the first section of your first content area, click the Advanced tab and in the CSS ID field, add the same unique name you used in the URL field for the custom...
image overlap
/*----------Sign Up Image Desktop View----------*/ .sign-up-image { margin-top: -75px; margin-bottom: -45px!important; } @media only screen and (max-width: 1100px) { .sign-up-image { margin-top: -45px; } } /*----------Sign Up...
Increase width on mobile
Increase the width on mobile @media only screen and (max-width: 980px) { #top-header > .container, #main-header > .container, #et_search_outer > .container, #main-content > .container, div.et_pb_row, div.et_pb_row.et_pb_row_fullwidth { width: 90%...
logo swap effect
How to Create a Logo Swap Effect in Divi In this quick tutorial, I show you how to create a logo swap effect on your Divi site, just like the effect I currently have on mine. It’s a subtle, buy very cool way to add some spice to your Divi designs. My...
overlapping logo
How to Create an Overlapping Logo in Divi /*----------Overlapping Logo that Shrinks on Scroll----------*/ #et-info { float: right; } .et_fixed_nav #top-header { position: fixed; z-index: 9998!important; } #logo { max-height: 100px;...
Overlapping text boxes
Our Courses Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie, velit ut eleifend sollicitudin, neque orci tempor nulla, id sagittis nisi ante nec arcu. Duis egestas aliquet aliquet. Maecenas erat eros, fringilla...
replacing home with icon
Replace home menu item with an icon Step 1 – Copy Your Icon Code Choose any icon from the ET Icon list. Step 2 – Add Code to Navigation Label in Menu The code will show up as a weird square symbol after you save but it’s ok. Keep it as is. Step...
sliding in menu button
split full screen
F2: Fullscreen Split Hero Section with Animated Content http://advent2017.divisoupdemos.com/advent-2-fullscreen-split-hero-section-with-animated-content/
Toggle and scroll on hover
Give your webdesign clients the option to choose from a menu of premade designs. This way of working has rapidly become more popular over time since it speeds up the development, increases costumer satisfaction and in most cases provides a lower cost website for the...
Media Queries
Divi Media Queries by Stephen James | Sep 19, 2015 | 5 comments Media queries Media queries can be used to tell your browser what to do at certain screen sizes or resolutions. For example; It is media queries that decide when the top navigation stops and...
My Sites
Easy As 1...2...3... Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie, velit ut eleifend sollicitudin, neque orci tempor nulla, id sagittis nisi ante nec arcu. Fusce porta bibendum convallis. Morbi fringilla...
Floating Button
<!-- [et_pb_line_break_holder] --><style><!-- [et_pb_line_break_holder] -->.sticky-divi-button {<!-- [et_pb_line_break_holder] -->color: #ffffff; /* You can change font color */<!-- [et_pb_line_break_holder] -->font-family:...