Custom widget not showing

if you are working with child-theme you can manage it via that hook in functions.php of your child-theme:

add_action( 'ava_add_custom_default_sidebars', 'custom_sidebar_widget_area' );
function custom_sidebar_widget_area() {
	dynamic_sidebar( 'Rates' );
}

but it might work on sidebar without that code. You only have to choose on the Editior-Page – right side that you want to see this new custom sidebar.

Did you drag a widget to that new custom-sidebar?

so now with your website online i see you are using on that page a grid-layout or color-sections – these are per definition 100% width

But you can mimic it by:
click to enlarge

see example here: https://webers-testseite.de/test/

see my comment on https://kriesi.at/support/topic/custom-widget-not-showing/#post-822505

delete the following grid-row to proove – and than we will see if we can do that “Separator” in a different way

but you can force it by inserting the price-table in a 2/3 column and in that 1/3 column the Widget-Area ALB Element and do for that page/post a non sidebar layout!

the grid row above was not the problem – it is the following one – so if you like you can insert in a different way:

try adding this to quick css:

.page-id-117 #after_section_1::after {
    content: " ";
    display: block;
    height: 15px;
    width: 100vw;
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(left center , #604b66 0%, #604b66 33%, #937522 33%, #937522 66%, #d6a83e 66%);
    background: -webkit-linear-gradient(left, #604b66 0%,#604b66 33%,#937522 33%,#937522 66%,#d6a83e 66%);
	background: linear-gradient(to right, #604b66 0%,#604b66 33%,#937522 33%,#937522 66%,#d6a83e 66%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#604b66', endColorstr='#d6a83e',GradientType=1 ); 
    background-repeat: none;
    background-position: center top;
    background-size: 100vw 15px;
}

if you like to have it after each section you can add (this is only a short form of that above plus a rule for avia-section):

.avia-section::after, .page-id-117 #after_submenu:after {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #604b66 0%, #604b66 33%, #937522 33%, #937522 66%, #d6a83e 66%) repeat scroll center top / 100vw 15px;
    content: " ";
    display: block;
    height: 15px;
    width: 100vw;
}

but than you have to get rid of those grid-rows which are for that “separator”

if it is only for this site you can combine both rules (if you want it for all pages and after each color-section or grid-row this could be done via classes)

.page-id-117 #av_section_1::after, .page-id-117 #after_section_1::after  {
content: ” “;
display: block;
height: 15px;
width: 100vw;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(left center , #604b66 0%, #604b66 33%, #937522 33%, #937522 66%, #d6a83e 66%);
background: -webkit-linear-gradient(left, #604b66 0%,#604b66 33%,#937522 33%,#937522 66%,#d6a83e 66%);
background: linear-gradient(to right, #604b66 0%,#604b66 33%,#937522 33%,#937522 66%,#d6a83e 66%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#604b66′, endColorstr=’#d6a83e’,GradientType=1 );
background-repeat: none;
background-position: center top;
background-size: 100vw 15px;
}

btw: stretch your background-image of the color-section on top (cover element) because it ends on bigger screens.

• This reply was modified 7 years, 5 months ago by Guenni007.