Google Fonts in Divi Hochladen

Das Hinzufügen von benutzerdefinierten Google Fonts in den Divi Builder ist einfacher, als du vielleicht denkst. Mit dieser Anleitung zeige ich dir, wie du Google Fonts Schritt für Schritt hochlädst und in deinem Divi-Projekt verwendest.

1. Google Fonts herunterladen

Zuerst brauchst du die gewünschten Schriftarten auf deinem Computer. Gehe dazu auf die folgende Website:

Google Webfonts Helper

Wähle die gewünschte Schriftart aus.
Lade sie herunter und speichere die Datei entweder in deinem Download-Ordner oder direkt auf dem Desktop, damit du sie später leicht wiederfinden kannst.

2. Plugin oder Child-Theme vorbereiten

Um die Schriftarten in den Divi Builder hochzuladen, musst du bestimmte Dateiformate erlauben. Dazu kannst du entweder das Code Snippets Plugin nutzen oder direkt in deinem Child-Theme arbeiten.

Option 1: Code Snippets Plugin

Installiere das Code Snippets Plugin über die WordPress Plugin-Bibliothek.
Erstelle ein neues Snippet und füge den untenstehenden Code ein.

Option 2: Child-Theme verwenden

Öffne die functions.php -Datei deines Divi Child-Themes.
Füge den folgenden Code ein:

Füge dies in Dein CHILD-THEME ein (functions.php)

global $da_allowed_mimes;
$da_allowed_mimes = ['ttf' => 'application/x-font-ttf', 'otf' => 'application/x-font-otf', 'woff' => 'application/x-font-woff', 'woff2' => 'application/x-font-woff2'];
/**
* Allow Custom Mime
*
* @param $mimes
*
* @return mixed
*/
if (!function_exists('pac_da_upload_mimes')):
function pac_da_upload_mimes($mimes)
{
global $da_allowed_mimes;
foreach ($da_allowed_mimes as $key => $val) {
$mimes[$key] = $val;
}
return $mimes;
}
endif;
/**
* Allow Divi To Upload Fonts Format
*
* @return string[]
*/
if (!function_exists('pac_da_filter_divi_supportedt_font_formats')):
function pac_da_filter_divi_supportedt_font_formats()
{
return ['otf', 'woff', 'woff2', 'ttf'];
}
add_filter('et_pb_supported_font_formats', 'pac_da_filter_divi_supportedt_font_formats', 999);
endif;
/**
* Fixes the issue in WordPress 4.7.1 being unable to correctly identify type
*
* @param $file
* @param $tmp_file
* @param $filename
* @param $mimes
*
* @return array|mixed|null
*/
if (!function_exists('pac_da_fix_mime_type_ext')):
function pac_da_fix_mime_type_ext($file, $tmp_file, $filename, $mimes)
{
if (isset($file['ext']) && empty($file['ext'])) {
$file_ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
global $da_allowed_mimes;
foreach ($da_allowed_mimes as $key => $val) {
if ($key === $file_ext) {
$file['ext'] = $key;
$file['type'] = $val;
}
}
}
return $file;
}
endif;
if (current_user_can('administrator')) {
add_filter('upload_mimes', 'pac_da_upload_mimes');
add_filter('wp_check_filetype_and_ext', 'pac_da_fix_mime_type_ext', 75, 4);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

global $da_allowed_mimes;

$da_allowed_mimes = ['ttf' => 'application/x-font-ttf', 'otf' => 'application/x-font-otf', 'woff' => 'application/x-font-woff', 'woff2' => 'application/x-font-woff2'];

/**

* Allow Custom Mime

*

* @param $mimes

*

* @return mixed

*/

if (!function_exists('pac_da_upload_mimes')):

function pac_da_upload_mimes($mimes)

{

global $da_allowed_mimes;

foreach ($da_allowed_mimes as $key => $val) {

$mimes[$key] = $val;

}

return $mimes;

}

endif;

/**

* Allow Divi To Upload Fonts Format

*

* @return string[]

*/

if (!function_exists('pac_da_filter_divi_supportedt_font_formats')):

function pac_da_filter_divi_supportedt_font_formats()

{

return ['otf', 'woff', 'woff2', 'ttf'];

}

add_filter('et_pb_supported_font_formats', 'pac_da_filter_divi_supportedt_font_formats', 999);

endif;

/**

* Fixes the issue in WordPress 4.7.1 being unable to correctly identify type

*

* @param $file

* @param $tmp_file

* @param $filename

* @param $mimes

*

* @return array|mixed|null

*/

if (!function_exists('pac_da_fix_mime_type_ext')):

function pac_da_fix_mime_type_ext($file, $tmp_file, $filename, $mimes)

{

if (isset($file['ext']) && empty($file['ext'])) {

$file_ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

global $da_allowed_mimes;

foreach ($da_allowed_mimes as $key => $val) {

if ($key === $file_ext) {

$file['ext'] = $key;

$file['type'] = $val;

}

return $file;

}

endif;

if (current_user_can('administrator')) {

add_filter('upload_mimes', 'pac_da_upload_mimes');

add_filter('wp_check_filetype_and_ext', 'pac_da_fix_mime_type_ext', 75, 4);

}

3. Google Fonts hochladen

Um die Schriftarten direkt hochzuladen, kannst du folgende Schritte ausführen:

Öffne die Seite, auf der du die Schriftart verwenden möchtest, zum Beispiel die Startseite.
Aktiviere den Divi-Builder.
Klicke im Textmodul oder einem anderen Bereich, in dem du die Schriftart verwenden möchtest, auf Schriftart hochladen und wähle deine heruntergeladene Datei aus.

Extra

Video in einem Popup öffnen ohne Plugin.

Dafür benötigst Du nur eine CSS-Klasse und ein kleines Script, was man in Divi integriert, oder mit einem Code-Modul in die Seite einbindet.
Als CSS-Klasse: „video-popup“
Zur Integration: Divi –> Integration –> body das Script einfügen und speichern.
Integration in die Seite: ein Code-Modul einfügen und das selbige Script einfügen.
Erstelle einen Button und füge die CSS-Klasse: „video-popup“ ein.
In den Button fügst Du noch den Link zu deinem Video (local) ein.
Damit auch alles richtig funktionier musst Du noch in Divi folgendes deaktivieren: gehe zu Divi –> Allgemeines –> Leistung und deaktiviere „Dynamisches CSS“ und „Dynamische JavaScript-Bibliotheken“.
Teste deinen Button ob alles funktioniert!

https://bigbearfrankfurt.com/blog/

Video als Popup Script ohne Plugin

<script>
jQuery(document).ready(function() {
jQuery('.slider-video-icon').magnificPopup({
disableOn: 0,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
fixedContentPos: true
});
});
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

jQuery(document).ready(function() {

jQuery('.slider-video-icon').magnificPopup({

disableOn: 0,

type: 'iframe',

mainClass: 'mfp-fade',

removalDelay: 160,

fixedContentPos: true

});

</script>

Video als Popup CSS für Mobile Geräte hochkant

<style>
/* Button Styling */
.video-popup {
display: inline-block;
padding: 10px 20px;
background-color: #FFD700;
color: #000;
text-transform: uppercase;
font-size: 16px;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease;
}
.video-popup:hover {
background-color: #FFC107;
}
/* Pop-up Styling */
.mfp-iframe-holder .mfp-content {
max-width: 470px;
margin: 0 auto;
border-radius: 10px;
}
.mfp-bg {
background: rgba(0, 0, 0, 0.8);
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<style>

/* Button Styling */

.video-popup {

display: inline-block;

padding: 10px 20px;

background-color: #FFD700;

color: #000;

text-transform: uppercase;

font-size: 16px;

border-radius: 5px;

font-weight: bold;

text-decoration: none;

transition: background-color 0.3s ease;

}

.video-popup:hover {

background-color: #FFC107;

}

/* Pop-up Styling */

.mfp-iframe-holder .mfp-content {

max-width: 470px;

margin: 0 auto;

border-radius: 10px;

}

.mfp-bg {

background: rgba(0, 0, 0, 0.8);

}

</style>

Google Fonts lokal in Divi Hochladen

Google Fonts in den Divi Builder hochladen – Schritt-für-Schritt-Anleitung

1. Google Fonts herunterladen

2. Plugin oder Child-Theme vorbereiten

Füge dies in Dein CHILD-THEME ein (functions.php)

3. Google Fonts hochladen

Extra

Video in einem Popup öffnen ohne Plugin.

Video als Popup Script ohne Plugin

Video als Popup CSS für Mobile Geräte hochkant