https://www.youtube.com/watch?v=vQ6L5gs6ylI&

https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-divi-overlapping-logo

 

https://www.youtube.com/watch?v=66mbzTXsy10

(See also separate Word document)

 

https://www.youtube.com/watch?v=0h4ahWFSKQ4

• In the Divi Editor open the relevant page
• In the right sidebar (Template Attributes/ Template/ „blank page“

 

 

 

 

https://www.youtube.com/watch?v=COScGwDG45o

(with plugin “conditional menus” / bei Problemen dazu “Max Mega Plugin” installieren, falls Pfeile nicht aufzeigten, regelt dieses Plugin das ohne dass es gebraucht wird.)

1. find page id
2. upload the different logo in Divi Media
3. Adjust the CSS and paste it into Divi/Theme Options / Allgemein /CSS

 

Plugin: Polylang

Polylang

Hide Navigation Bar Until Scroll

How to hide the menu bars on a single page in Divi

Achtung, im neuen Divi Builder:

In violetter Divi-Builder Leiste oben statt der 3 Punkte, das Settings-Rad klicken und dort unter advanced den CSS Code eingeben:

 

/* Hide the header */

#secondary-menu { display:none; }

#main-header { display:none; }

#page-container {

padding-top:0px !important;

margin-top:-1px !important

}

#top-header {

display: none;

}

/* Adjust padding for transparent headers */

.et_transparent_nav #main-content .container {

padding-top: 58px !important;

}

Siehe dieses Video ab Minute 5:

https://www.youtube.com/watch?v=9msxdZceiEg

Primary Menu, hatte 1. Logo

Secundary Menu (definieren separate) mit 2. Logo

Divi/Theme Options/General Settings/

Disable “fixed Navigation bar”

Beispiel Teresa Meyer

Footer Dynamic Year (ev. inkl. Firmenname)

https://www.youtube.com/watch?v=wgXnTfTIlaE

 

Code für Legal Page:

I <a href=„www.dent.webwing.info/impressum-und-datenschutz“>Impressum & Datenschutz</a>

 

I <a href=„www.mediapressassociation.com“>Design by Media Press Association</a>

 

 

Zeigt manchmal nicht in der Menu bar. Dann ist die Pixel Höhe nicht korrekt.

Pixel Höhe für Flavicon = 43px

 

How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

 

How to Create a Global Transparent Floating Menu Bar with Divi’s Theme Builder

 

 

A Guide to Using Sidebars with the Divi Theme builder

 

How to Create a Search Results Page Template in Divi

How to Create a 404 Page Template with Divi’s Theme Builder

How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder

Wie bei planet hair webseite auf handy.

Phone/Tablet à Menu Slide-in von links mit Hintergrund (Bild oder Farbe)

Source:

https://www.b3multimedia.ie/create-minimalistic-divi-mobile-menu/

 

BASIC CSS

#mobile_menu,  .opened #mobile_menu {

 position: fixed;

 display: flex;

 flex-direction: column;

 justify-content: center;

 min-height: 100%;

 max-height: 100%;

 z-index: 10;

 top: 0;

 border: none;

 overflow-y: auto;

 max-width: 100%;

 float: left;

 transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;

 background-color: rgb(0, 139, 203);

 background-size: cover;

 background-repeat: no-repeat;

}

 

.opened #mobile_menu {

 transform: none;

}

.opened #mobile_menu a {

 transform: none;

 opacity: 1;

}

.opened #mobile_menu .menu-item:nth-child(1) a, .closed #mobile_menu .menu-item:nth-last-child(1) a {

 transition-delay: 100ms;

}

 

.opened #mobile_menu .menu-item:nth-child(2) a, .closed #mobile_menu .menu-item:nth-last-child(2) a {

 transition-delay: 200ms;

}

 

.opened #mobile_menu .menu-item:nth-child(3) a, .closed #mobile_menu .menu-item:nth-last-child(3) a {

 transition-delay: 300ms;

}

 

.opened #mobile_menu .menu-item:nth-child(4) a, .closed #mobile_menu .menu-item:nth-last-child(4) a {

 transition-delay: 400ms;

}

 

.opened #mobile_menu .menu-item:nth-child(5) a, .closed #mobile_menu .menu-item:nth-last-child(5) a {

 transition-delay: 500ms;

}

 

.opened #mobile_menu .menu-item:nth-child(6) a, .closed #mobile_menu .menu-item:nth-last-child(6) a {

 transition-delay: 600ms;

}

.mobile_nav.opened .mobile_menu_bar:before {

 content: ‘\4d’;

 color: #fff;

 transition: all ease-in-out 300ms;

}

.mobile_nav.closed .mobile_menu_bar:before {

 transition: all ease-in-out 300ms;

}

 

 

SPEZIELLER EFFECT

 

/* Menu animations */

 

.closed #mobile_menu {

 opacity: 0;

 pointer-events: none;

 transform: translatex(-100%);

 width: 0px;

 transition-delay: 600ms;

}

 

/* Link animations */

 

#mobile_menu a {

 transform: translatex(-90px);

 opacity: 0;

 transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;

 text-align: left;

}

 

 

PREVENTING BODY FROM SCROLLING WHILE DIVI MENU IS OPEN

(Theme Integrations – body area)

<script>

document.querySelector(“.mobile_menu_bar_toggle”).addEventListener(‘click’, function() {

 var body = document.querySelector(“body”);

 body.classList.toggle(‘noscroll’);

 });

</script>

 

Divi/ ThemeOptions/ Allgemein / CSS:

@media (max-width: 1024px) { #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Fixing Your Responsive Navigation Menu in Divi

How to Create a Rotated Global Header with Divi’s Theme Builder

/*TRANSPARENT VERTICAL MENU*/
@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
}

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}

.et_vertical_nav #page-container #main-header
{
width: 120px;
}

}

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}

.container {

margin-left: 3% !important;

}

#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #000000;
}

.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}

.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {

padding-top: 0px !important;
}}

 

Quelle:

How to Animate Your Global Header with Divi

 

https://elegantthemes.us7.list-manage.com/track/click?u=9ae7aa91c578052b052b864d6&id=d0261d4b69&e=a9246e3935

 

(Checken if Phones work)

 

 

How To Add Breadcrumbs To Your WordPress Website

 

FOR SEO important:Breadcrumbs combine with structured date and Toast SEO:

What is structured data?