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
Das hr-Element des HTML-Codes ergibt normalerweise eine Trennlinie, welche grau und auf der gesamten Anzeigebreite dargestellt wird. Doch dieser Horizontal Ruler hr lässt sich auch als Akzent einsetzen. Im heutigen Tipp ein paar Beispiele.
Die weitest verbreitete Shoplösung auf WordPress-Websites ist WooCommerce. Dieser Webshop schmiegt sich hervorragend ins Divi-Theme ein - Divi seinerseits bietet seit einer Weile eigene Module, um WooCommerce besser darzustellen. Eine Knacknuss ...
Mit dem Accordion-Modul aus dem Divi-Theme lassen sich Websites übersichtlich strukturieren. Die einzelnen Accordion-Inhalte lassen sich aber auch über einen Link direkt öffnen. Das ist eine nette Dienstleistung an Ihre Website-BesucherInnen.
Heute ein echter Quicktipp: Eine einzige Codezeile wird benötigt, um im Slider-Modul des Divi-Themes den Hintergrund zwar zu wechseln, den Text aber statisch beizubehalten.
Keine Inhalte gefunden.
Werbung
