Divi - drei kubik

Elegant Themes Divi Icon Font ETModules – 406 Icons, CSS Klassen und Unicode (Stand: November 2023)

by drei kubik | 19. Dezember 2023 | Tipps & Tricks, WordPress

Im Folgenden findet Ihr eine Übersicht aller 406 Icons (Stand: November 2023) im Elegant Themes Icon Font „ETModules“ mit dem entsprechenden Unicode und der CSS-Klasse, um das jeweilige Symbol auf Eurer Website zu integrieren. Nach einem Update des Divi Themes im November 2023 wurde das Twitter Logo mit dem Vogel durch das neue Twitter Logo (X Logo) in dem Icon Font ETModules (von Elegant Themes) ersetzt. Die CSS-Klasse behält ihren ursprünglichen Namen bei. Auch der Unicode für das „Twitter Icon“ ist derselbe geblieben, so dass automatisch alle Twitter Logos ausgetauscht wurden, die auf der Website unter Einsatz des Divi Icon Fonts ETModules integriert wurden. Wer gerne das alte Twitter Logo mit dem Vogel zurück auf seiner Website haben möchte, der findet hier einen Beitrag mit einer Erläuterung (How to) und Download eines Icon Fonts, der nur das alte Twitter Logo enthält.

Tabelle mit allen 406 Icons im Elegant Themes Divi Icon Font ETModules

css class name: icon-arrow_up

css class name: icon-arrow_down

css class name: icon-arrow_left

css class name: icon-arrow_right

css class name: icon-arrow_left-up

css class name: icon-arrow_right-up

css class name: icon-arrow_right-down

css class name: icon-arrow_left-down

css class name: icon-arrow-up-down

css class name: icon-arrow_up-down_alt

css class name: icon-arrow_left-right_alt

css class name: icon-arrow_left-right

css class name: icon-arrow_expand_alt2

css class name: icon-arrow_expand_alt

css class name: icon-arrow_condense

css class name: icon-arrow_expand

css class name: icon-arrow_move

css class name: icon-arrow_carrot-up

css class name: icon-arrow_carrot-down

css class name: icon-arrow_carrot-left

css class name: icon-arrow_carrot-right

css class name: icon-arrow_carrot-2up

css class name: icon-arrow_carrot-2down

css class name: icon-arrow_carrot-2left

css class name: icon-arrow_carrot-2right

css class name: icon-arrow_carrot-up_alt2

css class name: icon-arrow_carrot-down_alt2

css class name: icon-arrow_carrot-left_alt2

css class name: icon-arrow_carrot-right_alt2

css class name: icon-arrow_carrot-2up_alt2

css class name: icon-arrow_carrot-2down_alt2

css class name: icon-arrow_carrot-2left_alt2

css class name: icon-arrow_carrot-2right_alt2

css class name: icon-arrow_triangle-up

css class name: icon-arrow_triangle-down

css class name: icon-arrow_triangle-left

css class name: icon-arrow_triangle-right

css class name: icon-arrow_triangle-up_alt2

css class name: icon-arrow_triangle-down_alt2

css class name: icon-arrow_triangle-left_alt2

css class name: icon-arrow_triangle-right_alt2

css class name: icon-arrow_back

css class name: icon-icon_minus-06

css class name: icon-icon_plus

css class name: icon-icon_close

css class name: icon-icon_check

css class name: icon-icon_minus_alt2

css class name: icon-icon_plus_alt2

css class name: icon-icon_close_alt2

css class name: icon-icon_check_alt2

css class name: icon-icon_zoom-out_alt

css class name: icon-icon_zoom-in_alt

css class name: icon-icon_search

css class name: icon-icon_box-empty

css class name: icon-icon_box-selected

css class name: icon-icon_minus-box

css class name: icon-icon_plus-box

css class name: icon-icon_box-checked

css class name: icon-icon_circle-empty

css class name: icon-icon_circle-slelected

css class name: icon-icon_stop_alt2

css class name: icon-icon_stop

css class name: icon-icon_pause_alt2

css class name: icon-icon_pause

css class name: icon-icon_menu

css class name: icon-icon_menu-square_alt2

css class name: icon-icon_menu-circle_alt2

css class name: icon-icon_ul

css class name: icon-icon_ol

css class name: icon-icon_adjust-horiz

css class name: icon-icon_adjust-vert

css class name: icon-icon_document_alt

css class name: icon-icon_documents_alt

css class name: icon-icon_pencil

css class name: icon-icon_pencil-edit_alt

css class name: icon-icon_pencil-edit

css class name: icon-icon_folder-alt

css class name: icon-icon_folder-open_alt

css class name: icon-icon_folder-add_alt

css class name: icon-icon_info_alt

css class name: icon-icon_error-oct_alt

css class name: icon-icon_error-circle_alt

css class name: icon-icon_error-triangle_alt

css class name: icon-icon_question_alt2

css class name: icon-icon_question

css class name: icon-icon_comment_alt

css class name: icon-icon_chat_alt

css class name: icon-icon_vol-mute_alt

css class name: icon-icon_volume-low_alt

css class name: icon-icon_volume-high_alt

css class name: icon-icon_quotations

css class name: icon-icon_quotations_alt2

css class name: icon-icon_clock_alt

css class name: icon-icon_lock_alt

css class name: icon-icon_lock-open_alt

css class name: icon-icon_key_alt

css class name: icon-icon_cloud_alt

css class name: icon-icon_cloud-upload_alt

css class name: icon-icon_cloud-download_alt

css class name: icon-icon_image

css class name: icon-icon_images

css class name: icon-icon_lightbulb_alt

css class name: icon-icon_gift_alt

css class name: icon-icon_house_alt

css class name: icon-icon_genius

css class name: icon-icon_mobile

css class name: icon-icon_tablet

css class name: icon-icon_laptop

css class name: icon-icon_desktop

css class name: icon-icon_camera_alt

css class name: icon-icon_mail_alt

css class name: icon-icon_cone_alt

css class name: icon-icon_ribbon_alt

css class name: icon-icon_bag_alt

css class name: icon-icon_creditcard

css class name: icon-icon_cart_alt

css class name: icon-icon_paperclip

css class name: icon-icon_tag_alt

css class name: icon-icon_tags_alt

css class name: icon-icon_trash_alt

css class name: icon-icon_cursor_alt

css class name: icon-icon_mic_alt

css class name: icon-icon_compass_alt

css class name: icon-icon_pin_alt

css class name: icon-icon_pushpin_alt

css class name: icon-icon_map_alt

css class name: icon-icon_drawer_alt

css class name: icon-icon_toolbox_alt

css class name: icon-icon_book_alt

css class name: icon-icon_calendar

css class name: icon-icon_film

css class name: icon-icon_table

css class name: icon-icon_contacts_alt

css class name: icon-icon_headphones

css class name: icon-icon_lifesaver

css class name: icon-icon_piechart

css class name: icon-icon_refresh

css class name: icon-icon_link_alt

css class name: icon-icon_link

css class name: icon-icon_loading

css class name: icon-icon_blocked

css class name: icon-icon_archive_alt

css class name: icon-icon_heart_alt

css class name: icon-icon_star_alt

css class name: icon-icon_star-half_alt

css class name: icon-icon_star

css class name: icon-icon_star-half

css class name: icon-icon_tools

css class name: icon-icon_tool

css class name: icon-icon_cog

css class name: icon-icon_cogs

css class name: icon-arrow_up_alt

css class name: icon-arrow_down_alt

css class name: icon-arrow_left_alt

css class name: icon-arrow_right_alt

css class name: icon-arrow_left-up_alt

css class name: icon-arrow_right-up_alt

css class name: icon-arrow_right-down_alt

css class name: icon-arrow_left-down_alt

css class name: icon-arrow_condense_alt

css class name: icon-arrow_expand_alt3

css class name: icon-arrow_carrot_up_alt

css class name: icon-arrow_carrot-down_alt

css class name: icon-arrow_carrot-left_alt

css class name: icon-arrow_carrot-right_alt

css class name: icon-arrow_carrot-2up_alt

css class name: icon-arrow_carrot-2dwnn_alt

css class name: icon-arrow_carrot-2left_alt

css class name: icon-arrow_carrot-2right_alt

css class name: icon-arrow_triangle-up_alt

css class name: icon-arrow_triangle-down_alt

css class name: icon-arrow_triangle-left_alt

css class name: icon-arrow_triangle-right_alt

css class name: icon-icon_minus_alt

css class name: icon-icon_plus_alt

css class name: icon-icon_close_alt

css class name: icon-icon_check_alt

css class name: icon-icon_zoom-out

css class name: icon-icon_zoom-in

css class name: icon-icon_stop_alt

css class name: icon-icon_menu-square_alt

css class name: icon-icon_menu-circle_alt

css class name: icon-icon_document

css class name: icon-icon_documents

css class name: icon-icon_pencil_alt

css class name: icon-icon_folder

css class name: icon-icon_folder-open

css class name: icon-icon_folder-add

css class name: icon-icon_folder_upload

css class name: icon-icon_folder_download

css class name: icon-icon_info

css class name: icon-icon_error-circle

css class name: icon-icon_error-oct

css class name: icon-icon_error-triangle

css class name: icon-icon_question_alt

css class name: icon-icon_comment

css class name: icon-icon_chat

css class name: icon-icon_vol-mute

css class name: icon-icon_volume-low

css class name: icon-icon_volume-high

css class name: icon-icon_quotations_alt

css class name: icon-icon_clock

css class name: icon-icon_lock

css class name: icon-icon_lock-open

css class name: icon-icon_key

css class name: icon-icon_cloud

css class name: icon-icon_cloud-upload

css class name: icon-icon_cloud-download

css class name: icon-icon_lightbulb

css class name: icon-icon_gift

css class name: icon-icon_house

css class name: icon-icon_camera

css class name: icon-icon_mail

css class name: icon-icon_cone

css class name: icon-icon_ribbon

css class name: icon-icon_bag

css class name: icon-icon_cart

css class name: icon-icon_tag

css class name: icon-icon_tags

css class name: icon-icon_trash

css class name: icon-icon_cursor

css class name: icon-icon_mic

css class name: icon-icon_compass

css class name: icon-icon_pin

css class name: icon-icon_pushpin

css class name: icon-icon_map

css class name: icon-icon_drawer

css class name: icon-icon_toolbox

css class name: icon-icon_book

css class name: icon-icon_contacts

css class name: icon-icon_archive

css class name: icon-icon_heart

css class name: icon-icon_profile

css class name: icon-icon_group

css class name: icon-icon_grid-2×2

css class name: icon-icon_grid-3×3

css class name: icon-icon_music

css class name: icon-icon_pause_alt

css class name: icon-icon_phone

css class name: icon-icon_upload

css class name: icon-icon_download

css class name: icon-social_facebook

css class name: icon-social_twitter

css class name: icon-social_pinterest

css class name: icon-social_googleplus

css class name: icon-social_tumblr

css class name: icon-social_tumbleupon

css class name: icon-social_wordpress

css class name: icon-social_instagram

css class name: icon-social_dribbble

css class name: icon-social_vimeo

css class name: icon-social_linkedin

css class name: icon-social_rss

css class name: icon-social_deviantart

css class name: icon-social_share

css class name: icon-social_myspace

css class name: icon-social_skype

css class name: icon-social_youtube

css class name: icon-social_picassa

css class name: icon-social_googledrive

css class name: icon-social_flickr

css class name: icon-social_blogger

css class name: icon-social_spotify

css class name: icon-social_delicious

css class name: icon-social_facebook_circle

css class name: icon-social_twitter_circle

css class name: icon-social_pinterest_circle

css class name: icon-social_googleplus_circle

css class name: icon-social_tumblr_circle

css class name: icon-social_stumbleupon_circle

css class name: icon-social_wordpress_circle

css class name: icon-social_instagram_circle

css class name: icon-social_dribbble_circle

css class name: icon-social_vimeo_circle

css class name: icon-social_linkedin_circle

css class name: icon-social_rss_circle

css class name: icon-social_deviantart_circle

css class name: icon-social_share_circle

css class name: icon-social_myspace_circle

css class name: icon-social_skype_circle

css class name: icon-social_youtube_circle

css class name: icon-social_picassa_circle

css class name: icon-social_googledrive_alt2

css class name: icon-social_flickr_circle

css class name: icon-social_blogger_circle

css class name: icon-social_spotify_circle

css class name: icon-social_delicious_circle

css class name: icon-social_facebook_square

css class name: icon-social_twitter_square

css class name: icon-social_pinterest_square

css class name: icon-social_googleplus_square

css class name: icon-social_tumblr_square

css class name: icon-social_stumbleupon_square

css class name: icon-social_wordpress_square

css class name: icon-social_instagram_square

css class name: icon-social_dribbble_square

css class name: icon-social_vimeo_square

css class name: icon-social_linkedin_square

css class name: icon-social_rss_square

css class name: icon-social_deviantart_square

css class name: icon-social_share_square

css class name: icon-social_myspace_square

css class name: icon-social_skype_square

css class name: icon-social_youtube_square

css class name: icon-social_picassa_square

css class name: icon-social_googledrive_square

css class name: icon-social_flickr_square

css class name: icon-social_blogger_square

css class name: icon-social_spotify_square

css class name: icon-social_delicious_square

css class name: icon-icon_wallet_alt

css class name: icon-icon_shield_alt

css class name: icon-icon_percent_alt

css class name: icon-icon_pens_alt

css class name: icon-icon_mug_alt

css class name: icon-icon_like_alt

css class name: icon-icon_globe_alt

css class name: icon-icon_flowchart_alt

css class name: icon-icon_id_alt

css class name: icon-icon_hourglass

css class name: icon-icon_globe

css class name: icon-icon_globe-2

css class name: icon-icon_floppy_alt

css class name: icon-icon_drive_alt

css class name: icon-icon_clipboard

css class name: icon-icon_calculator_alt

css class name: icon-icon_floppy

css class name: icon-icon_easel

css class name: icon-icon_drive

css class name: icon-icon_dislike

css class name: icon-icon_datareport

css class name: icon-icon_currency

css class name: icon-icon_calulator

css class name: icon-icon_building

css class name: icon-icon_easel_alt

css class name: icon-icon_dislike_alt

css class name: icon-icon_datareport_alt

css class name: icon-icon_currency_alt

css class name: icon-icon_briefcase_alt

css class name: icon-icon_target

css class name: icon-icon_shield

css class name: icon-icon_search_alt

css class name: icon-icon_rook

css class name: icon-icon_puzzle_alt

css class name: icon-icon_printer-alt

css class name: icon-icon_percent

css class name: icon-icon_id-2_alt

css class name: icon-icon_building_alt

css class name: icon-icon_briefcase

css class name: icon-icon_balance

css class name: icon-icon_wallet

css class name: icon-icon_search1

css class name: icon-icon_puzzle

css class name: icon-icon_printer

css class name: icon-icon_pens

css class name: icon-icon_mug

css class name: icon-icon_like

css class name: icon-icon_id

css class name: icon-icon_id-2

css class name: icon-icon_flowchart

css class name: icon-toggle

css class name: icon-tabs

css class name: icon-subscribe

css class name: icon-slider

css class name: icon-sidebar

css class name: icon-share

css class name: icon-pricing-table

css class name: icon-portfolio

css class name: icon-number-counter

css class name: icon-header

css class name: icon-filtered-portfolio

css class name: icon-divider

css class name: icon-cta

css class name: icon-countdown

css class name: icon-circle-counter

css class name: icon-blurb

css class name: icon-bar-counters

css class name: icon-audio

css class name: icon-accordion

css class name: icon-text

css class name: icon-testimonial

css class name: icon-shop

css class name: icon-person

css class name: icon-menu

css class name: icon-map

css class name: icon-login

css class name: icon-image

css class name: icon-gallery

css class name: icon-follow

css class name: icon-contact

css class name: icon-blog

css class name: icon-reset

css class name: icon-code

css class name: icon-underline

css class name: icon-bold

css class name: icon-italic

css class name: icon-uppercase

css class name: icon-divi

css class name: icon-D

css class name: icon-import_export

css class name: icon-double-underline

css class name: icon-smallcaps

css class name: icon-strikethrough

css class name: icon-menu-expand

css class name: icon-strikethrough1

css class name: icon-icon_external_link

Vogel-Liebhaber aufgepasst: So bekommt Ihr das alte Twitter Icon mit dem Vogel zurück auf Eure Divi Website

by drei kubik | 29. September 2023 | Tipps & Tricks, WordPress

Alles begann auf meinem Smartphone: Was ist da für ein gruseliges X in der Notification Bar? Ich habe diese App nicht installiert! Bin ich gehackt worden? Nein, Elon Musk hatte wohl geglaubt mit so einem radikalen Re-Branding den Umsatz von Twitter wieder in die schwarzen Zahlen zu bekommen. Meiner Meinung als Designer nach: Absoluter Fail!

Am 21. März 2006 wurde Twitter Inc. in San Francisco, United States of America, gegründet. Seit dem begleitet uns dieses ikonische Vögelchen auf all unseren Geräten. Auf jeder Website war es zu sehen. Das App Icon sprang einem immer direkt ins Auge und überhaupt hatte dieser „sweetie Tweetie“ eine magische und sympathische Aura, von der man sich einfach angezogen fühlen musste. Der Name Twitter war Programm. Jeder Liebhaber von Kurznachrichten zwitscherte täglich interessante Kurznachrichten, persönliche Meinungen und interessante Links in dem sozialen Netzwerk (Social Network) Twitter. Sollen wir jetzt etwa alle iksen?
Ich war so sauer über dieses radikale Re-Branding von Twitter, dass ich die App umgehend von meinem Smartphone deinstalliert habe.

Divi Update 4.22.1 mit aktualisiertem Icon Font „ET Modules“

Mit dem Divi Update auf Version 4.22.1 hat Elegant Themes* auch den Divi Icon Font mit dem neuen Twitter Logo aktualisiert. Sweetie Tweetie wurde daraus komplett verbannt. Das neue X Logo wurde an die Stellen der Unicode Tabelle kopiert, wo vorher das Twitter Logo in 3 Varianten zu finden war.

Nur der Vogel ohne Hintergrund
Ein Kreis mit dem ausgestanzten Twitter Vogel
Ein Quadrat mit runden Ecken und dem ausgestanzten Vogel von Twitter

Ich habe mich an den Support von Divi gewendet und darum gebeten, den alten Twitter Vogel nicht komplett zu eliminieren, sondern für Liebhaber der Nostalgie immer noch zur Auswahl in dem Icon Font zu belassen. Das wird aber mit Sicherheit keine hohe Priorität bei der Entwicklung genießen und von daher musste ich mir selbst etwas einfallen lassen, um das Twitter Logo weiterhin auf meiner Website haben zu können. Natürlich war es mir sehr wichtig das alte Twitter Logo ebenfalls als frei skalierbare und einfärbbare Vektorgrafik in Form eines Icon Fonts verwenden zu können. Auch die Position und der zu verwendende Code in der Unicode Tabelle sollte identisch sein zu dem letzten Divi Icon Font mit dem Vogel von Twitter in Divi Version 4.22.0.

Divi Nutzer: 3 Möglichkeiten, um wieder den Twitter Vogel in den Social Media Icons auf Eurer Website zu haben

Möglichkeit 1

Der Divi Support* hat mir innerhalb einer Stunde bereits mit einer Lösung geantwortet und sogar den CSS-Code mitgeschickt. Respekt! Ziemlich starke Leistung von dem Support für Millionen von Kunden aus aller Welt. Da ich mich mit CSS sehr gut auskenne, wäre das nicht nötig gewesen. Man riet mir ein PNG mit dem alten Twitter Logo hochzuladen und das Icon dann mit CSS Code in meinem Child Theme mit !important zu überschreiben. Diese Idee war mir aber nicht flexibel genug. Das Icon wäre dann ein statisches Bitmap gewesen. Das Umfärben per CSS und eine stufenlose Vergrößerung in bester Qualität wäre damit nicht möglich gewesen.

Möglichkeit 2

Ein „Quick-Fix“ war für mich, den Elegant Themes Icon Font in allen 4 Webfont Formaten (eot, svg, ttf, woff) aus der Divi Version 4.22.0 an die Stelle im Divi Theme der aktuellen Version* zu kopieren. Das hat natürlich sehr schnell und einfach funktioniert, nur würde diese Änderung mit jedem Divi Update in Eurem Parent Theme wieder überschrieben, so dass Ihr nach jedem Update von Divi den alten Icon Font wieder in den Divi Ordner \core\admin\fonts\modules\all\ kopieren müsstet. Ein weiterer Nachteil dieses Quick-Fix ist, dass über die Zeit mit Sicherheit neue Icons hinzukommen werden, die Ihr dann nicht verwenden könnt, wenn Ihr den alten Icon Font mit dem Vogel im Twitter Logo verwenden wollt.

Möglichkeit 3

Da es absolut zwingend erforderlich ist, ein Child Theme zu verwenden, halte ich dies auf Dauer für die beste Lösung. In der Icomoon App könnt Ihr einen Icon Font als SVG hochladen. Auch dort seht Ihr dann alle darin enthaltenen Icons in einer großen Tablle mit dem entsprechenden Unicode. Ich habe darin nur die 3 Twitter Icons ausgewählt und daraus einen neuen Icon Font mit einem neuen Namen in allen gängigen Webfont Formaten generiert und diese Dateien dann in einem Unterordner meines Child Themes (/fonts/) abgelegt. Wenn Ihr dann den folgenden CSS-Code in die style.css Eures Child Themes kopiert bekommt das Soziale Netzwerk X wieder einen Vogel… auf Eurer Website.

CSS Code für den Icon Font von Elegant Themes nur mit 3 Versionen des alten Twitter Logos

/* Divi Twitter Icons Font: drei kubik saves the birdie! */

@font-face {
     font-family: "modules_twitter";
     font-display: block;
     src: url("fonts/modules_twitter.eot");
     src: url("fonts/modules_twitter.eot?#iefix") format("embedded-opentype"),
            url("fonts/modules_twitter.ttf") format("truetype"),
            url("fonts/modules_twitter.woff") format("woff"),
            url("fonts/modules_twitter.svg?#modules_twitter") format("svg");
     font-weight: 400;
     font-style: normal;
}

.et-social-twitter a.icon::before {
    font-family: "modules_twitter" !important;
    text-transform: none;
    content: "\e094"; /* Set "\e0ab" for the circle icon and "\e0c2" for the rounded square icon */
}

ET Modules Icon Font mit alten Twitter Icons als Webfont herunterladen

Wer den alten Twitter Vogel auch so gerne hatte, kann hier einen Icon Font für das Divi Theme herunterladen, in dem nur die 3 originalen Twitter Icons designed by Elegant Themes* integriert sind. Den CSS Code findet Ihr auch in einer Readme Datei in diesem fast 7kb großen Download. Ich hätte nie gedacht, dass 7kb einem so viel Freude bereiten können 😉

Icon Font mit Twitter Birdie herunterladen

Nachtrag: Das alte Twitter Logo auch in Shariff zum Teilen von Beiträgen wieder haben

Die meisten von Euch kennen das DSGVO-konforme Social Sharing PlugIn Shariff, mit dem Ihr auf Eurer WordPress Website an allen gewünschten Positionen Links mit Logo zum Teilen in allen gewünschten Social Media Plattformen hinzufügen könnt. Hier wurde seitens der Entwickler selbstverständlich auch das neue Twitter Logo X eingebaut. Wenn Ihr auch dort (wie unter diesem Beitrag zu sehen) wieder das Twitter Vögelchen in den alten Brand Colors sehen wollt, dann editiert die Datei aus dem PlugIn Verzeichnis /wp-content/plugins/shariff/services/shariff-twitter.php

Ab dem Kommentar „// Colors.“ könnt Ihr den folgenden Code hinzufügen und den vorhandenen Code bis zum letzten Zeichen in der Datei ersetzen.

	// Colors.
	$main_color      = '#1d9bf0';
	$secondary_color = '#177cc0';
	$wcag_color      = '#177cc0';

	// SVG icon.
	$svg_icon = '';

	// Backend available?
	$backend_available = 0;

	// Button alt label.
	$button_title_array = array(
		'bg' => 'Сподели във Twitter (X)',
		'cs' => 'Sdílet na Twitter (X)',
		'da' => 'Del på Twitter (X)',
		'de' => 'Bei Twitter (X) teilen',
		'en' => 'Share on Twitter (X)',
		'es' => 'Compartir en Twitter (X)',
		'fi' => 'Jaa Twitter (X)',
		'fr' => 'Envoyer par Twitter (X)',
		'hr' => 'Podijelite na Twitter (X)',
		'hu' => 'Megosztás Twitter (X)',
		'it' => 'Condividi su Twitter (X)',
		'nl' => 'Delen op Twitter (X)',
		'no' => 'Del på Twitter (X)',
		'pl' => 'Udostępnij na Twitter (X)',
		'pt' => 'Compartilhar no Twitter (X)',
		'ro' => 'Partajează pe Twitter (X)',
		'ru' => 'Поделиться на Twitter (X)',
		'sk' => 'Zdieľať na Twitter (X)',
		'sl' => 'Deli na Twitter (X)',
		'sr' => 'Podeli na Twitter (X)',
		'sv' => 'Dela på Twitter (X)',
		'tr' => 'Twitter (X)\'ta paylaş',
	);
}

Schluss

Wenn Ihr Fragen habt, nutzt gerne die Kommentarfunktion unter diesem Beitrag, oder schreibt mir eine direkte Nachricht über das Medium Eurer Wahl. Ich hoffe Ihr werdet eben so viel Freude über das Twitter Vögelchen in Euren Social Media Links auf Eurer Website haben. Falls Ihr Freunde habt, die sich ebenso über das Re-Branding von Twitter ärgern und sich den Twitter Vogel auf Ihrer Website zurückwünschen, dann teilt diesen Beitrag mit ihnen und das sympathische Vögelchen kommt wieder auf Eurer Divi Website* vorbeigeflattert.

Elegant Themes Divi Icon Font ETModules – 406 Icons, CSS Classes & Unicode (November 2023)

Die Tabelle mit allen Icons des Elegant Themes Divi* Icon Font ETModules findet Ihr nun in einem separaten Beitrag. Hier klicken, um zu diesem Beitrag zu gelangen.

Elegantthemes Black Friday 2022 mit dem größten Divi Rabatt aller Zeiten

by drei kubik | 17. November 2022 | Empfehlungen, WordPress

Elegantthemes ist die von Nick Roach gegründete Firma hinter dem Divi Theme. Dieses Jahr kommt der Black Friday bei Elegantthemes etwas früher. Bereits ab Dienstag, den 22.11.2022 können sämtliche Produkte von Elegantthemes mit nie da gewesenen Discounts bezogen werden.

Das Divi Theme kann im Black Friday 2022 Aktionszeitraum von Elegantthemes zu einem einmaligen Preis für die Lifetime-Membership mit 25% Rabatt bezogen werden, so dass Ihr anstelle von einmalig $249 nur einmalig $186,75 bezahlt. Ich habe Black Friday 2019 das Divi Theme mit 20% Rabatt für $199,20 gekauft und es nicht eine Sekunde lang bereut!

Jetzt Divi Black Friday Deal ansehen*

Was macht das Divi Theme so besonders?

Das Divi Theme kommt mit einer „Unlimited License“ daher, d.h. einmal kaufen und auf beliebig vielen Websites einsetzen (auch bei Kundenaufträgen)
Der Divi Page Builder und Divi Theme Builder beschleunigt den Entwicklungsprozess erheblich, bester WordPress Theme und Page Builder aller Zeiten
Elegantthemes betreibt einen riesigen Marktplatz für Divi Erweiterungen, so dass keine Wünsche offen bleiben
Elegantthemes stellt für alle Mitglieder eine riesige Layout und Seitenbibliothek kostenfrei zur Verfügung (Landing Pages mit zwei Klicks erstellen!)
Elegantthemes betreibt einen eigenen YouTube Kanal, in dem Ihr alles rund um das Divi Theme lernen könnt
Der Support von Divi ist freundlich, schnell und geht auf alle Deine Fragen ein
Im Divi Theme und Page Builder funktionieren viele Keyboard Shortcuts, die man aus den Designprogrammen gewöhnt ist (genial!)

Auf dieser Seite* findet Ihr alle Features, die Divi zu bieten hat.

Jetzt Divi Black Friday Deal ansehen*

Unendlich viele Lizenzen für das Divi Theme kosten weniger als 3 Theme Lizenzen auf Envato Themeforest.net

Es gibt wahrscheinlich noch viele weitere Gründe sich für das Divi Theme von Elegantthemes zu entscheiden. Die Elegantthemes Lifetime Membership mit 25% Rabatt auf $249 (= $186,75) solltet Ihr Euch auf keinen Fall entgehen lassen! Die besten WordPress Themes auf dem Envato Marktplatz Themeforest.net kosten mittlerweile auch $59 zzgl. Steuern und Gebühren, so dass man schnell bei $70 landet. Drei Themes bei Envato Themeforest.net kaufen, die jeweils nur auf einer Website verwendet werden dürfen? Oder lieber einmalig in die Lifetime Membership bei Elegantthemes investieren und nie wieder ein Theme kaufen müssen? Die Frage beantworet sich von selbst.

Jetzt Divi mit 25% Rabatt kaufen*

Nie da gewesener Rabatt von 25% kommt wahrscheinlich so schnell nicht wieder

Wer jetzt nicht zuschlägt ist selber Schuld, denn ich gehe davon aus, dass der Rabatt von 25% für die Lifetime Membership so schnell nicht wieder kommen wird. Aber auch mit 20% Rabatt finde ich das einen Megadeal! Vermutlich ist das Divi Theme im Sommer 2023 wieder im Divi Summer Sale mit 20% Rabatt erhältlich.

Jetzt Divi mit 25% Rabatt kaufen*

WordPress & Divi Tutorial 2022 Deutsch, 10: Layout, Lottiefiles mit dem Divi Supreme PlugIn integrieren, WP Divi Icons & PHP/CSS Code

by drei kubik | 12. November 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 10: Layout Anpassung, Divi Supreme, WP Divi Icons & PHP/CSS Code

In diesem Teil installieren und konfigurieren wir das PlugIn Divi Supreme Modules Lite, eine Erweiterung für das Divi Theme, WP And Divi Icons und passen unser Layout mit individuellem CSS Code in der style.css Datei unseres Child-Themes an. Außerdem limitieren wir die Suchfunktion von WordPress mit einer kleinen PHP Funktion für die functions.php Datei unseres Child Themes.
Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

In diesem Teil des Tutorials passen wir die Suchfunktion von WordPress mit PHP Code in unserer functions.php an. Füge den folgenden PHP Code ein, um die Suchfunktion von WordPress auf die drei Post Types "post", "product" und "project" zu limitieren. Falls Du weitere Post Types in Deinen Suchergebnissen ausgeben lassen möchtest, finde den Namen des Custom Post Types heraus und füge ihn in derselben Form innerhalb der runden Klammern hinter dem Wort Array hinzu:

/**
 * Include 'post types' in search
 */

function limitSearchFunction($query) {
if ( $query->is_main_query() ) {
		if ( $query->is_search ) {
			$query->set( 'post_type', array('post','product','project') );
		}
	}
}
add_filter( 'pre_get_posts','limitSearchFunction' );

Wir haben uns mit Hilfe der Divi Erweiterung Divi Supreme Modules Lite auch ein Layout in einer Zeile (Row) erstellt. Darin befindet sich das "Posts Module", mit dessen Hilfe wir uns die 5 neuesten Beiträge mit Featured Image, Titel, Meta Daten und einem kurzen Textauszug in einem Footer Widget darstellen lassen können. Im Folgenden findest Du alle bisher gemachten Formatierungen für den gesamten Footer. Füge den CSS-Code in der style.css Deines Child Themes ein, um alle Elemente der "Latest Posts" im Footer Deiner Website zu formatieren.

/********************* FOOTER *************************/

#footer-widgets {
    padding: 5% 0 3% 0;
}

#footer-widgets .footer-widget h1, #footer-widgets .footer-widget h2, #footer-widgets .footer-widget h3, #footer-widgets .footer-widget h4, #footer-widgets .footer-widget h5, #footer-widgets .footer-widget h6 {
    padding-bottom: 1em;
}

#footer-widgets .footer-widget .et_pb_post .post-meta {
    position: relative;
	display: inline-block;
	font-size: 12px;
	padding-bottom: 0;
	margin-bottom: 0;
	text-align: left;
	top: -8px;
}

#footer-widgets .footer-widget .et_pb_post a.entry-featured-image-url {
	width: 40%;
	float: left;
	margin-right: 20px;
	margin-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post h2.entry-title,
#footer-widgets .footer-widget .et_pb_post div.post-content {
	width: calc(60% - 20px) !important;
	float: right;
	padding-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post .entry-featured-image-url {
    margin-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post h5.entry-title {
    padding-bottom: 0;
}

#footer-widgets .footer-widget .et_pb_post div.post-content-inner p {
    font-size: 75%;
    line-height: 150%;
}

#footer-widgets .footer-widget .et_pb_post:first-child {
    margin-top: 8px;
}

#footer-widgets .footer-widget .et_pb_post:not(:last-of-type) {
	hyphens: auto;
	-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
	padding-bottom: 20px;
    margin-bottom: 1em;
	border-bottom: 2px dotted #3a3937;
}

#footer-widgets .footer-widget .et_pb_post .entry-title {
	font-size: 16px !important;
}

#footer-widgets {
    padding: 60px 0 30px 0;
}

.et_pb_widget {
    float: none;
}

#footer-widgets .footer-widget li {
	padding: 0;
}

#footer-widgets .footer-widget li::before {
	display: none;
}

#footer-widgets .footer-widget li {
	list-style-type: "\2794";
	margin-left: 1em;
	padding: 0 0 0 .5em;
}

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 Deutsch, 09: ReGenerate Thumbnails, Contact Form 7, Postman SMTP Installation & Konfiguration

by drei kubik | 8. November 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 9: ReGenerate Thummbnails, Contact Form 7, Postman SMTP Installation & Konfiguration

In diesem Teil installieren und konfigurieren wir drei essentielle WordPress PlugIns, die man unbedingt installieren sollte. Regenerate Thumbnails von Alex Mills, Contact Form 7 von Takayuki Miyoshi und Postman SMTP, aka Postman, aka Post SMTP von Post SMTP.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 Deutsch, 08: Design Tweaks mit CSS und Design der Startseite

by drei kubik | 1. November 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 8: Design Tweaks mit CSS und Design der Startseite

In diesem Teil werden wir die Startseite unserer Website (Homepage) aufbauen und lernen zwei Module des Divi Page Builders kennen. Außerdem schreiben wir ein bisschen CSS Code in die style.css unseres Child Themes, um ein paar Formatierungen auf unserer Website anzupassen, die nicht über die Einstellungen im Divi Theme vorgenommen werden können.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 7: Alle Divi Customizer Einstellungen und Divi Theme Builder Layouts aufbauen

by drei kubik | 25. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 7: Alle Divi Customizer Einstellungen und Divi Theme Builder Layouts aufbauen

In diesem Teil gehen wir alle Customizer Einstellungen des Divi Themes durch und lernen den Divi Theme Builder kennen. Wir bauen mit dem Divi Theme Builder ein Template für die Darstellung des Blogs und Archivseiten auf und erstellen ein weiteres Template für die Einzelansicht von Blogbeiträgen, das wir auch für mehrere geeignete Custom Post Types (CPT's) verwenden.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 6: SEOPress PRO Installation und einstellen

by drei kubik | 19. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 6: SEOPress PRO Installation, alle Einstellungen und Review

Wir installieren das kostenpflichtige WordPress SEO PlugIn SEOPress PRO und gehen alle Einstellungen Schritt für Schritt durch. Das PlugIn SEOPress PRO kostet zwar ein wenig, aber es ist jeden Cent wert. Was dieses SEO PlugIn für WordPress so extrem gut und günstig macht:

Du erhältst eine Lizenz für unendlich viele Websites für gerade einmmal 50 EUR pro Jahr (zzgl. USt.), Yoast SEO Preis für diese Leistungen: Über $400 zzgl. USt. für EINE Lizenz (pro Website)!

Bei SEOPress PREO bekommst Du

Lizenz für unendliche viele Websites inklusive (auch für Deine Kunden)
WooCommerce SEO inklusive
Google Local Business SEO inklusive
Google News SEO inklusive
Easy Digital Downloads SEO inklusive
Automatische strukturierte Daten inklusive
Open Graph Meta Tags (OG Meta Tags) und Dublin Core Meta Tags (DC Meta Tags) inklusive
Breadcrumbs
Broken Link Checker (Bot)
URL Rewriting
Page Speed Insights
Google Inspect URL
White Label Lösung
Und viel mehr, absolute Kaufempfehlung

SEO Press PRO Features

SEO Press PRO kaufen

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 5: SEOPress installieren und alle Einstellungen

by drei kubik | 18. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 5: SEOPress installieren und alle Einstellungen

Wir installieren das kostenlose WordPress SEO PlugIn SEOPress und gehen alle Einstellungen Schritt für Schritt durch. Lerne wie Du sätmliche Custom Post Types (CPT) mit in die Optimierung durch SEOPress aufnimmst, oder auch aus der Optimierung ausschließt. Erfahre auch, warum Du Schlagwörter (Tags) auf keinen Fall mit in den Index der Suchmaschinen aufnehmen solltest.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 4: Divi Theme & Divi Child Theme Installation

by drei kubik | 17. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 4: Divi & Child Theme Installation

In diesem Teil werden wir das Divi Theme und ein Divi Child Theme installieren und uns die Divi Theme Options vornehmen. Die Installation eines Child Themes ist obligatorisch.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 3: PlugIn Installation & Konfiguration von WP Maintenance Mode

by drei kubik | 17. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 3: PlugIn Installation & Konfiguration von WP Maintenance Mode

Lerne in diesem Teil, wozu Du das PlugIn "WP Maintenance Mode & Comming Soon" von ThemeIsle gebrauchen kannst, wie Du es installierst und konfigurierst.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 2: WordPress Einstellungen & Datenbank Backup mit DropTable

by drei kubik | 17. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 2: WordPress Einstellungen & Datenbank Backup mit DropTable

Lerne in diesem Teil, welche Einstellungen Du in einer frischen WordPress Installation vornehmen solltest und was sie bedeuten. Außerdem erfährst Du, wie Du mit myPHPAdmin ein Datenbank Backup mit DropTable erstellst und wofür das gut ist.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

WordPress & Divi Tutorial 2022 (deutsch) – Teil 1: WordPress Installation

by drei kubik | 17. Oktober 2022 | WordPress

drei kubik Tutorial Tuesday, Teil 1: WordPress 6.0.2 installieren

In diesem Teil installieren wir WordPress 6.0.2 auf Deutsch ganz frisch auf unserer final genutzten Domain. Lerne in diesem Teil, was für eine E-Mail Adresse Du am besten für die Registrierung Deines Administrator Accounts verwenden solltest und warum Du die Checkbox "Suchmaschinen davon abhalten, diese Website zu indexieren" deaktiviert lassen solltest.

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Alle veröffentlichten Teile des drei kubik WordPress Divi Tutorials 2022 (deutsch)

Webhosting Empfehlung für gute Performance (Google PageSpeed): All-Inkl Premium

Diesen Tarif nutze ich auch. Deine Websites werden auf schnellen SSD Laufwerken gehostet. Für gerade einmal 10 EUR im Monat kannst Du Dir bis zu 10 Domains kostenlos dazu sichern. Du kannst 50 Datenbanken einrichten, hast 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich kann Dir diesen Tarif nur sehr empfehlen.

Hast Du Fragen?

Wenn Du individuelle Fragen rund um WordPress, WordPress PlugIns, WordPress Themes oder das Divi Theme mit dem Divi Page Builder und Theme Builder hast, dann nutze die Kommentarfunktion unter diesem Beitrag oder unter dem YouTube Divi Tutorial Video und ich beantworte Dir gerne alles, was Du wissen musst, um Dir eine professionelle SEO WordPress Website mit dem Divi Theme aufbauen zu können. Feel Vergnügen!

drei kubik – Tutorial Tuesday – WordPress & Divi Tutorial 2022 (deutsch) – WordPress Website selber machen

by drei kubik | 1. Oktober 2022 | Tipps & Tricks, WordPress

Hallo liebe Freunde von WordPress! Ab Dienstag, den 4. Oktober 2022, starte ich mit einer Tutorial-Serie, wie Du Dir selbst mit dem Divi Theme für WordPress eine performante, sichere und suchmaschinenoptimierte (SEO) WordPress Website aufbauen kannst. Komme am besten jeden Dienstag wieder und verpasse keinen Teil meiner Schritt-für-Schritt Anleitung für eine WordPress Website mit dem Divi Theme auf deutsch. Abonniere meinen drei kubik YouTube Kanal und aktiviere die Glocke, so dass Du als erster am Start bist und keinen Teil verpasst.

Was erwartet Dich in diesem Tutorial?

Dieses Tutorial versteht sich als Schritt-für-Schritt-Anleitung, wie Du mit WordPress und dem Divi Theme eine professionelle, suchmaschinenoptimierte (SEO) WordPress Website aufbaust. Ich zeige Dir, wie Du als Grafik-Designer eine Portfolio Website aufbauen kannst. Das Tutorial eignet sich aber auch für andere Branchen, denn das gelernte Wissen lässt sich leicht auf andere Themen übertragen.

Intro zum drei kubik WordPress Divi Tutorial

Wann geht es los?

Ab Dienstag, den 4. Oktober 2022 geht es los mit dem ersten Teil über die WordPress Installation. Wenn Du bereits Erfahrung mit WordPress hast, denkst Du Dir vielleicht, dass dies für Dich uninteressant sein könnte. Weit gefehlt! Denn bereits bei der Installation musst Du Dir einen Administrator Account für Deine WordPress Website anlegen. Und weißt Du, warum Du dort NICHT Deine beste E-Mail-Adresse verwendesn solltest? Schau Dir am besten auch den ersten Teil an und Du wirst es erfahren.

Wie geht es weiter?

In weiteren Teilen werde ich Dir alle wichtigen PlugIns empfehlen und erklären. Alle PlugIns, die ich obligatorsich bei meinen WordPress Websites einsetze, habe ich bereits in einer dreiteiligen Beitragsserie (Teil 1) hier auf meiner Website veröffentlicht. Schaue Dir gerne meine alphabetisch sortierte Liste für die besten WordPress PlugIns 2022 hier (Teil 1) an.

Was erwartet mich am Ende?

Wenn Du alle Teile des Tutorials durchmachst, dann wirst Du am Ende eine fertige suchmaschinenoptimierte (SEO) WordPress Website erstellt haben und außerdem mit wertvollem Wissen ausgestattet sein, um auch eigenen Kunden eine SEO WordPress Website verkaufen zu können. Falls bei Dir zwischendurch Fragen aufkommen sollten, nutze gerne die Kommentarfunktion unter den YouTube Videos. Ich werde Dir gerne alle Deine Fragen beantworten.

Nun wünsche ich Dir "feel Vergnügen" und noch mehr Erfolg beim Aufbau einer WordPress Website mit dem Divi Theme.

Das Divi Theme

Falls Du unsicher bist, ob das Divi Theme etwas für Dich ist, dann kannst Du es vorher ausprobieren. Dazu hast Du die Möglichkeit auf der Website von Elegant Themes, oder Du lädst Dir von mir das Divi Theme in einer aktuellen Version herunter, so dass Du es direkt in Deiner eigenen WordPress Website ausprobieren kannst. Den Link für den Download findest Du etwas weiter unten.

Divi Page Builder ausprobieren

https://www.drei-kubik.com/link/elegant-themes/divi-builder/

Divi Theme kaufen

https://www.drei-kubik.com/link/elegant-themes/divi/

Divi Theme und das drei kubik Divi Child Theme herunterladen

Melde Dich mit dem folgenden Formular zu meinem WordPress Secrets Newsletter an und erhalte 2 kostenlose Downloads. Damit kannst Du direkt loslegen und das drei kubik WordPress & Divi Tutorial vollständig mitmachen. Wenn Dich die E-Mail nicht erreicht, sieh bitte auch in Deinem Spam-Ordner nach.

Webhosting? All-Inkl!

Wenn Du noch keinen Webhosting Tarif hast, dann sei froh und werde Kunde bei all-inkl.com. Eine Empfehlung aus purer Überzeugung. Ich bin schon seit fast 20 Jahren höchst zufriedener Kunde bei all-inkl.com und kann Dir diesen Webhoster nur sehr ans Herz legen. Das Kundenadministrationssystem von all-inkl.com (KAS, zu finden auf kasserver.com) ist äußerst performant, übersichtlich und bietet Dir sehr viele Tools, die Dir das Leben als Webdesigner sehr viel einfacher machen. Vergiss Strato, IONOS und all die großen "Volksprovider". Dort musst Du für alle Funktionen extra bezahlen und wirst in deren Kundenmenü mit Werbung für alle möglichen, kostenpflichtigen Extrafunktionen überschüttet, die bei all-inkl.com, alle inklusive sind. In meiner Review zu All-Inkl Webhosting erfährst Du ganz genau, was All-Inkl so besonders empfehlenswert macht.

Welchen Tarif soll ich wählen?

Im Prinzip gibt es für den Einstieg bei all-inkl.com nur zwei Tarife, die in Frage kommen, weil in den kleineren Tarifen keine kostenlosen SSL-Zertifikate von Let's Encrypt enthalten sind. Diese sind obligatorisch, sobald Du ein Kontaktformular zur Verfügung stellst, bist Du auch gesetzlich dazu verpflichtet, Deine Website über eine gesicherte Verbindung laufen zu lassen. Wähle einen dieser beiden Tarife. Aus Performance-Gründen empfehle ich Dir den Tarif All-Inkl Premium.

All-Inkl PrivatPlus

Entscheide Dich für diesen Tarif, wenn Du 2 EUR im Monat sparen möchtest. Dann bist Du mit rund 8 EUR pro Monat dabei und kannst Dir bis zu 5 Domains kostenlos dazu sichern. Du kannst bis zu 25 Datenbanken einrichten und Dir stehen 100 GB HDD Speicherplatz zur Verfügung.

All-Inkl Premium

Diesen Tarif nutze ich auch. Der Vorteil in diesem Tarif liegt in einer wesentlich besseren Performance, weil Deine Websites auf SSD Laufwerken gehostet werden. Für gerade einmal 10 EUR im Monat hast Du schnelles SSD Hosting und kannst Dir bis zu 10 Domains kostenlos dazu sichern. Außerdem hast Du 50 Datenbanken, 250 GB Speicherplatz und noch jede Menge mehr inklusive. Ich empfehle Dir diesen Tarif.

Wichtiger Hinweis

Bei den hier angegebenen Links handelt es sich um Affiliate Links. Das heißt, wenn Du Dich dazu entscheidest, Divi über diesen Link zu kaufen, erhalte ich eine kleine Provision. Das ist allerdings nicht der Grund meiner Empfehlung. Ich habe mir am Black Friday 2019 die Divi Lifetime Membership gegönnt und bin ein absoluter Fan von Divi und Elegant Themes geworden. Bei meiner Empfehlung für eine Lifetime Membership von Elegant Themes handelt es sich um eine aufrichtige Empfehlung aus purer Überzeugung von einem großartigen Produkt für alle, die eine professionelle SEO Website mit WordPress und dem Divi Theme aufbauen wollen. Und bei all-inkl.com bin ich nun seit fast 20 Jahren höchst zufriedener Kunde. Das KAS (Kundenadministrationssystem) von all-inkl.com erleichtert mir die Arbeit erheblich. Auch das eine Empfehlung aus tiefster Überzeugung für einen Top-Webhosting-Service!

Alle bisher veröffentlichten Teile des WordPress & Divi Tutorials

Divi Page Builder ausprobieren
Divi Theme kaufen
Webhosting All-Inkl PrivatPlus (3 Monate kostenlos, danach ~8 EUR pro Monat)
Webhosting Empfehlung All-Inkl Premium (3 Monate kostenlos, danach ~10 EUR pro Monat)

Divi Summer Sale 2022 – 20% sparen (diesen Theme und Page Builder muss man haben)

by drei kubik | 25. August 2022 | Empfehlungen, WordPress

Dieses Angebot* sollte sich niemand entgehen lassen, der WordPress Websites für sich und Kunden realisiert.

Hier ist besonders die Divi Lifetime License für aktuell $199 (Summer Sale 2022)* interessant, denn wenn Du diese hast, musst Du nie wieder ein WordPress Theme kaufen. Mit dieser Lizenz erhältst Du lebenslang Updates und Premium Support. Und das beste an allem: Du darfst beliebig viele Websites mit dem Divi Theme mit dem Divi Page und Theme Builder aufbauen, ohne dass weitere Kosten für Dich entstehen. Das gilt auch für Websites, die Du als Kundeauftrag realisierst.

Gute Gründe für das Divi Theme

Lebenslange Updates
Lebenslanger Premium Support
Lizenz für unendlich viele Websites (nie wieder Themes kaufen)
Zugriff auf die Divi Library mit fertigen Layouts für komplette Websites und Landing Pages
Marktplatz mit vielen Erweiterungen (Module, Layouts und mehr) für das Divi Theme
Mit dem Theme Builder kannst Du Deine Layouts frei aufbauen (jedes Design ist möglich)
Gute Performance Scores (Lighthouse Analyse)
Wahnsinnig schneller Workflow bei der Realisierung von Websites (vergiss Elementor!)
Anlegen von (globalen) Templates als Sektion, Reihe oder Modul

Divi Theme mit 20% Rabatt kaufen*

Der Divi Page und Theme Builder

Der Divi Page Builder ist ein Tool, das als separates PlugIn erhältlich ist und auch mit anderen Themes verwendet werden kann, er ist aber auch fester Bestandteil des Divi Themes. Der in Divi integrierte Divi Theme Builder macht sich den Divi Page Builder zunutze, um damit individuelle Designs für eine Website völlig frei umsetzen zu können. Du kannst globale Header, Body und Footer Layouts anlegen und für alle erdenklichen Fälle ein neues Layout.

Wenn Du zum Beispiel globale Header, Body und Footer Templates angelegt hast, kann es sein, dass Du für die Darstellung Deines Blogs und die Darstellung des Inhalts einzelner Beiträge ein anderes Layout haben möchtest. Der globale Header und Footer soll ja meistens immer gleich bleiben. Nur der Inhalt soll anders dargestellt werden. Also legst Du dann für den Body zwei neue Templates an: eines für den Blog und „Alle Archivseiten“ und eines für „Alle Beiträge“.

Divi Theme mit 20% Rabatt kaufen*

Hast Du neben Deinem Blog auf Deiner Website noch einen Bereich für „News“, den Du als Blog-Kategorie angelegt hast, und möchtest dass die Beiträge in „News“ anders dargestellt werden, kannst Du wieder ein oder zwei neue Templates anlegen: Eines für „Bestimmte Kategorie Seiten: News“ und bei Bedarf einer anderen Darstellung für einzelne Beiträge auch noch ein neues Template für „Beiträge in Bestimmte Kategorien: News“.

Funktion des Divi Page Builders als Video ansehen

Templates und globale Templates in der eigenen Library anlegen

Die Divi Library ist bestandteil des Divi Themes. Du kannst hunderte von fertigen Vorlagen von Elegant Themes umsonst herunterladen und auch eigene Teile Deiner Website in der Divi Library speichern. Du kannst dazu auch die Divi Cloud verwenden, so dass alle Deine Layouts für Dich für alle Deine Websites verfügbar sind. Du kannst die Layouts in der Divi Library als Sektion (Section), Reihe (Row) oder Modul (Module) anlegen.

Eine Sektion in ein alles umfassender Container, der sich immer über die volle (maximale) Breite einer Seite auf Deiner Website erstreckt. In einer Sektion werden Reihen/Zeilen platziert, die aus einer oder mehreren Spalten bestehen können. In den Spalten werden dann Module (Inhalte) angelegt. Besonders genial finde ich, dass man alle diese Elemente auch als globale Templates in der Divi Bibliothek speichern kann. Wenn Du ein globales Layout egal an welcher Stelle auf Deiner Website änderst, dann wirkt sich diese Änderung sofort auf alle Bereich aus, an denen Du dieses globale Element verwendest. Ein Beispiel für so ein globales Element ist ein Newsletter Opt-In. Am Ende jedes Blogbeitrags, oder auf bestimmten Seiten möchtest Du unten einen Newsletter Opt-In einbinden. Stell Dir vor, Du hast das auf über 100 Seiten und Blogbeiträgen gemacht. Wenn Du dann ein neues Layout für Dein Opt-In haben möchtest, dann müsstest Du es auf über 100 Seiten und Blogbeiträgen ändern, wenn Du es NICHT als globales Template angelegt hättest. Als globales Element änderst Du es nur einmal und die Änderung ist sofort auf über 100 Platzierungen erledigt. Absolut genialer Time Saver!
Divi Theme mit 20% Rabatt kaufen*

Presets und globale Presets

Hier musst Du erst einmal Deine Erfahrungen sammeln, um richtig gut damit umgehen zu können. Generell würde ich Dir empfehlen alle Elemente, die Du mit dem Page Builder platzierst, erst einmal komplett Deinen Wünschen anzupassen. Das können zum Beispiel die Außen- und Innenabstände (Margins und Paddings) Deiner Sektionen, Reihen und Module sein, aber genau so auch die Positionierung, individueller CSS Code und Animationen.

Alles, was Du in den Einstellungen des jeweiligen Elements vornimmst solltest Du mit der Option „Apply Styles To Active Preset“ als globale Voreinstellung definieren. Denn alle Module, die Du mit den Einstellungen unverändert in Deinen Inhalten verwendest, erfahren ebenfalls eine Änderung, wenn Du den Preset Style erneut bearbeitest. Ein gutes Beispiel ist eine Animation für Zeilen. Da jeder Inhalt in Zeilen platziert wird, animiere ein Zeile und lege diese Animation als „Active Preset“ fest. Auf diese Weise erreichst Du in wenigen Sekunden eine komplett durchanimierte Website und kannst diese Animation auch mit genau so wenigen Klicks wieder entfernen oder ändern.

Solltest Du für diverse Elemente andere Voreinstellungen benötigen, kannst Du zusätzlich zu den globalen Voreinstellungen auch noch weitere Presets (Voreinstellungen) alegen, die Du dann für gewünschte Bereiche anwenden kannst. Das habe ich jedoch noch nicht benötigt und da sollte man auch schon ganz genau wissen, was man da tut, den sonst können da schnell ungewollte Konflikte mit den Formatierungen entstehen. Ich nutze ausschließlich die globalen Voreintellungen. Auch das ist ein absoluter Time Saver!

Divi Theme mit 20% Rabatt kaufen*

divi page und theme builder templates global presets

Fazit

Zugegeben, wer ganz neu im Thema WordPress, Themes und Webdesign ist, der wird erst einmal eine steile Lernkurve hinlegen müssen, um zu verstehen, wie man am besten mit dem Divi Page und Theme Builder umgeht.

Wer bereits Erfahrung mit WordPress hat und weiß, wie man ein Child-Theme einrichtet, was Post Types und Taxonomien sind, der wird sehr schnell mit dem Divi Theme und Page Builder zurecht kommen und wissen, wie und wofür er seine Templates anlegen muss.

Generell finde ich auch $249 für die Divi Lifetime License einen sboluten Steal! Wer jetzt aber noch mal $50 sparen möchte, der sollte sich den Divi Summer Sale 2022 nicht entgehen lassen. 4 Themes als Lizenz für eine Website bei themeforest.net kaufen? Oder unendlich viele Lizenzen für eines der besten Themes auf dem Markt für einmalig $200 kaufen? Diese Frage ist wohl sehr leicht zu beantworten! Ich bin ein absoluter Divi Fan und baue alle meine Websites für mich und Kunden mit dem Divi Theme auf. Ich liebe es!

Divi Theme mit 20% Rabatt kaufen*

Divi Summer Sale – 20% off

by drei kubik | 18. August 2020 | Web & Technologie, WordPress

Wenn Ihr schon länger über eine eigene Website mit WordPress nachdenkt, dann ist JETZT der richtige Zeitpunkt, um damit loszulegen! Lasst Euch dieses Angebot (*) nicht entgehen, oder Ihr müsst wieder ein ganzes Jahr darauf warten.

In den kommenden 14 Tagen erhaltet Ihr im Divi Summer Sale (*) satte 20% Rabatt! Egal, ob Ihr Euch die Lifetime-Membership gönnt, oder nur für einzelne Produkte entscheidet.

Video von der Funktionsweise des Divi Page Builders*

Der Vorteil der Lifetime-Membership liegt auf der Hand

Es ist eine einmalige Zahlung
Ihr erhaltet Zugriff auf alle Themes und PlugIns von Elegant Themes
Die Lizenz gilt für beliebig viele Websites, auch wenn Ihr sie für Eure Kunden erstellt

Und ich dachte Ende letzten Jahres, dass ich mit 10% Rabatt zu diesen Konditionen schon einen fetten Deal gemacht habe 😉

Divi Summer Sale ist beendet!

Angebot anshen (*)
Elegant Themes ist die Firma hinter Divi, dem meist genutzten WordPress Theme aller Zeiten. Es kommt mit dem Divi Page Builder daher, der auch einen Theme Builder integriert hat. Seht hier die Ankündigung des Summer Sales von Elegant Themes Gründer und Geschäftsführer Nick Roach:

WordPress Page Builder PlugIns

by drei kubik | 21. April 2020 | WordPress

Es gibt einige große Page Builder für WordPress. Das sind PlugIns, die es Euch ermöglichen, einzelne Seiten in WordPress per Drag’n’Drop aufzubauen, ohne HTML- und CSS-Kenntnisse zu besitzen. Zu diesem Angebot gehört meistens auch eine Anbindung an ein System der Entwickler, vom dem man vorgestaltete Seiten zu fast jedem Thema in seine Seite laden kann, so dass man nur noch Photos, Videos, Texte, Farben und Schriften anpassen muss und fertig ist die Landing Page (One Pager).

Elementor, der beliebteste Page Builder

Der bekannteste und beliebteste Page Builder ist „Elementor“. In der kostenlosen Variante leider stark eingeschränkt.Es ist wahrlich der einfachste und intuitivste Page Builder auf dem Markt, der auch einen Theme Builder für globale Styles und viele Seitenvorlagen zur Verfügung stellt. Da man mit dem Elementor Theme Builder ein Theme nach belieben aufbauen kann, empfiehlt sich der Einsatz eines besonders schlanken und wenig vorgestylten Themes, wie z.B. „Hello Elementor“. Mit diesem Theme als Basis könnt Ihr Eure Website nach belieben mit dem Theme Builder von Elementor gestalten und Eure Seiten und Beiträge mit dem Page Builder aufbauen. Ich habe mir 3 Lizenzen der Pro Version* gegönnt und ich habe es nicht bereut. Der Preis ist echt fair*.

Der Divi Page Builder

Ähnlich wie Elementor verfügt auch Divi von Elegant Themes über einen integrierten Theme Builder. Der Divi Page Builder ist ein PlugIn, das bereits im Divi Theme* integriert ist. Wer sich für das weltbekannte und von SEO-Agenturen hoch geschätzte Divi Theme* entscheidet, bekommt einen der weltbesten Page Builder gratis dazu. Eine Installation des Divi Builder PlugIns ist dann nicht mehr erforderlich.

Ich habe in den vergangen Monaten viele Page Builder ausprobiert, aber Divi hat sich insbesondere wegen der Freiheit bei der Gestaltung einzelner Seiten und dem integrierten Theme Builder zu meinem absoluten Liebling entwickelt. Wer sich nicht ganz sicher ist, der kann die Tools von Elegant Themes erst mal ein Jahr lang für $ 89* testen. Spätestens nach einem Jahr lohnt sich der Erwerb des Lifetime Access*, wenn man dabei bleiben möchte. Ich selbst habe mir letztes Jahr zu den Black Friday Sales die „Life Time Membership“* gegönnt. Das möchte ich Euch auch empfehlen, zu dieser Jahreszeit solche Deals zu machen, da Ihr da mitunter bei allen Anbietern die besten Deals des Jahres machen und viel Geld sparen könnt.

Das ist insbesondere interessant für Webdesigner, da die Divi Lizenz auf unendlich vielen Websites auch für Kunden eingesetzt werden darf. Im Prinzip braucht man nie wieder ein anderes Theme kaufen, da man mit dem integrierten Theme Builder globale Styles für alle Seiten und Bereiche (Blog, Header, Body, Footer, etc.) definieren kann und das Divi Theme für jedes Projekt höchst individuell aussehen lassen kann.

Video von der Funktionsweise des Divi Page Builders*

Der Theme Builder von Divi* funktioniert genau so, wie der Page Builder (im Video zu sehen), nur werden dort andere Inhalts-Module eingefügt, die für global verwendete Templates Sinn ergeben, wie z.B. ein Blog Modul zur Darstellung der Blog Posts.

Thrive Architect und Thrive Theme Builder (kostenpflichtig)

Viele Entwickler von Page Builder PlugIns haben dieses Problem erkannt. Darum geht der Trend nun in Richtung Theme Builder. Richtig für Furore sorgt derzeit der Thrive Theme Builder von Thrive Themes, der derzeit exklusiv für Thrive Members erhältlich ist. Mit derselben Funktionalität des Thrive Page Builders „Thrive Architect“, wird nun exemplarisch eine Seite aufgebaut, die grundlegend die globale Formatierung durch das Theme vorgibt, so dass jede neu angelegte Seite ohne Inhalte erst einmal dieselbe einheitliche Formatierung verwendet.

Fusion Builder, der Page Builder im Avada Theme

Viele Theme Entwickler bieten ihre Themes auch mit einem der größten Page Builder an, oder haben sogar selbst einen entwickelt, den sie zusammen mit ihren Themes vertreiben. Zum Beispiel der Fusion Builder aus dem wohl bekanntesten WordPress Theme Avada* von Theme Fusion.

Problematisch ist, dass diese Page Builder zwar schöne einzelne Seiten aufbauen, die Formatierung des Layouts aber nicht mehr durch das Theme global für alle Seiten Deiner Website bestimmt wird. Jede einzelne Seite, die mit einem Page Builder aufgebaut wurde, wird mit massig inline CSS-Code und komplex verschachtelten HTML-Strukturen unnötig aufgebläht.

Weitere beliebte Page Builder

WP Bakery (ehem. VisualComposer), Beaver Builder, Thrive Architect/Thrive Theme Builder (kostenpfilchtig, thrivethemes.com) und Cornerstone (kostenpflichtig, theme.co).

Habt Ihr bereits eine eigene WordPress Website und diese auch mit einem Page Builder aufgebaut? Welchen nutzt Ihr? Oder vermeidet Ihr Page Builder lieber?