Trick # 487 | Dieser Beitrag beinhaltet 594 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Portfolio, welches Sie mit dem filterbaren Portfolio-Modul des Divi-Themes erstellen können, zeigt die Kategoriefilter standardmässig als Button. Wenn Ihnen ein Dropdown-Manü besser zusagt, können Sie es auch als solches darstellen. Wie’s geht, zeigt dieser Trick.
Von Haus aus werden die Filter im filterbaren Portfolio-Modul als Buttons dargestellt. So wie nebenan:
Um die Ansicht auf ein Dropdown-Menü umzugestalten, benötigen Sie das folgende Script, welches Sie in den <head>-Bereich Ihrer Website integrieren. Unter Divi/Theme-Optionen/Integration:
<script>
jQuery(document).ready(function($){
$('.et_pb_portfolio_filters ul').each(function() {
var $select = $('<select />');
$(this).find('.et_pb_portfolio_filter a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('data-category-slug')).html($(this).html());
$select.append($option);
});
$(this).prepend($select);
});
$('.et_pb_portfolio_filters select').each(function() {
$(this).on('change', function() {
var selectedFilter = $(this).val();
$(this).siblings().find("[data-category-slug='"+selectedFilter+"']").trigger('click');
});
});
$('.et_pb_portfolio_filters ul li').hide();
});
</script>Sogleich werden die Filter statt nebeneinander als Dropdown-Auswahl angezeigt:
Werbung
Die Module Portfolio und filterbares Portfolio des Divi-Themes haben einige Einschränkungen: Der Titeltext und der Metatext (Kategorie) befinden sich unter dem Bild. Was aber, wenn Sie das ändern und auf dem Bild platzieren möchten? Dafür gibt ...
Eine Leserin des Dr.-Code-Blogs hat uns vor einiger Zeit gefragt, wie sich Webaktionen für Schnellentschlossene in Divi machen lassen. Beispielsweise einen 50-%-Rabatt für SofortbestellerInnen. Das geht tatsächlich ganz einfach und ohne ...
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Heute bauen wir einen echten Hingucker: So genannte Flip-Cards, die sich umdrehen, sobald der Mauszeiger darüber bewegt wird. Das gibt ein ebenso cooles wie professionelles Look & Feel für Ihre Website.
Immer wieder trifft man auf die Empfehlung, ein Child-Theme für die WordPress-Website anzulegen. Aus gutem Grund, freilich: Die Vorteile sind beachtlich. Wir erklären sie hier und zeigen, wie Sie ein Child-Theme erstellen.
Keine Inhalte gefunden.
Werbung
