mei 012017
 

Gekocht bij elegantthemes:

De 70 onderdelen van divi builder in video’s en tekst uitgelegd

customization: https://quiroz.co/divi-tutorials-much/tutorials-for-web-designers/#divi-customization

https://divibooster.com/customizing-the-divi-wordpress-theme/

10 hidden tips: https://www.elegantthemes.com/blog/divi-resources/10-hidden-divi-features-you-need-to-know-about

Nog meer over teksten: https://www.elegantthemes.com/blog/divi-resources/5-text-styling-tricks-for-wordpress-and-divi

Shortcodes: http://madlemmings.com/elegant-theme-shortcodes-explained/

zoals: [tooltip text=”Add a caption title”] Content [/tooltip]

Zijbalk links -< op mobiel als eerste getoond. Maar dat kan anders. Zie deze uitleg

Je single.php aanpassen,

logo

logo laten uitsteken onder de menubalk: https://quiroz.co/expand-logo-main-menu-fullscreen-divi/

Afmetingen zelf controleren bij kleinere apparaten middels css:

[collapse]
Fullwidth

Selecteer de sectie:

[collapse]
breadcrumbs

gekocht voor 5,95 bij de man van divibooster: https://divibooster.com/breadcrumbs-module/

Unlimited sites

[collapse]

mooier submenu: http://divicio.us/effects/10-dropdown-animations-for-divi-submenu/

DIVI Booster diverse tips a 19 $

uit Divi booster

Site speed: zet vinkje naast: enable compression
Header – Main header: Don’t shrink header on scroll
Posts: Don’t stretch featured images
Divi builder: hide visual builder

[collapse]

Easy To Use Divi Snippets & Hacks

footer vast onderaan

Dit is echt de mooiste oplossing:
https://divi4u.com/divi-quasi-sticky-footer-plugin/

[collapse]
niet tonen op tablet/telefoon

Dat kan je instellen per module]

[collapse]
events manager en divi

Locatie aanmaken: dat werkt alleen prima als je het invulformulier invult. Locaties achter de schermen als admin invullen werkt niet. I kweet niet of het aan divi ligt, maar dit is in ieder geval een praktische oplossing.

[collapse]
Fotoos

Zorg zelf ze tevoren te verkleinen tot 60 a 200 kB

https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi

https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website
Kies bij Opties voor thema Divi – General – Pak de eerste post afbeelding: laat dit uitgeschakeld. Dan pakt hij de thumbnail.
Als je hier kiest voor Inschakelen, dan kiest hij het eerste plaatje. Dat kan wel eens net een maatje kleiner zijn, met alds gevolg dat het dan wordt opgeblazen en onscherp wordt.

[collapse]
zijbalken verwijderen per pagina of voor hele website

Maar ik vind het praktischer om de pagina in te stellen op Fullwidth. Dat moet je per pagina doen.

Let op: dit krijg je niet te zien als je al de divi opbouwfunctie gebruikt.
In dat geval: sla je layout op in de bibliotheek. Stel de pagina in op: Gebruik standaard editor. Wijzig in Full wodth en laadt vervolgensde inhuod weer vanuit de bib.

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Of alleen verbergen voor bijv. single posts:
 

/*** Hide Sidebar for single posts ***/
.single  #sidebar {display:none;}

Uit https://www.elegantthemes.com/blog/divi-resources/how-to-remove-sidebars-from-divi

[collapse]

 

theme options exporteren en importeren in andere website

Voor theme options: klik op de 2 pijltjes rechts:

Geef een naam aan het export bestand en importeer het.

Zo kan je ook export bestanden maken voor de library.

Voor de theme options kan je deze plugin gebruiken: https://wordpress.org/plugins/backup-restore-divi-theme-options/, maar hij lijkt niet alles te kopieren.

[collapse]

afbeeldingen verkleinen of andere maat geven

featured image verkleinen

Standaard wordt hij uitgerekt; voorkom dit met

body.single article.has-post-thumbnail .et_post_meta_wrapper > img:nth-of-type(1) { width: 40% !important;}

[collapse]

In overzichtslijst van meerdere berichten: featured afbeelding links, tekst rechts

Gevonden op /*Post Title Design*/

.et_pb_post h2 a, .entry-title {
text-decoration: none;
font-size: 28px;
color: #263B5D;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Playfair Display" !important;
line-height: 1.3em;
}

/*Post Meta Design*/
.post-meta {
color: #d51f26 !important;
font-family: "Open Sans" !important;
font-size: 11px !important;
letter-spacing: 1px;
text-transform: uppercase;
}

/*Custom Read More Link on Blog Homepage*/
.bbb_blog_list a.more-link {
clear: both;
display: inline-block;
position: relative;
background: #c1dbee;
font-family: "Playfair Display", serif;
font-size: 16px;
color: #ffffff;
max-width: 100%;
padding: 5px 5px;
text-align: center;
margin-top: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

/*Adjust Hover Style*/
.bbb_blog_list a.more-link:hover {
background: #c1dbee;
color: #263b60;
}

https://www.brandedbybritt.co/how-to-style-your-divi-blog-page/

Vul bij  Kies voor Blog module en vul bij CSS klasse in: bij bbb_blog_list

[collapse]
Van divi overstappen op ander thema?

gebruik dan de plugin Divi builder. Dan werken de codes gewoon door.
Als je overstapt naar Genesis, gebruik dan ook de dambuster plugin, daarmee kan je ook full width pagina’s maken (met behoud van DIVI)
Few points: You’re still locked into ElegantThemes ecosystem. If you’re looking to move away, this tutorial won’t help you. Also, not all themes support full edge-to-edge layouts like Divi does, and like DamBuster enables for your StudioPress theme.
zie https://www.youtube.com/watch?v=CZ-XdRiScYE

[collapse]

 

mooie accordion: betaalde plugin