Same problem here, Advanced Layout Editor not working in pages, but works fine in posts, it just stopped working while I was editing some pages today.

I opened a topic for the exact same issue, hope a solution will be posted soon.

I just found out that the problem seems to be isolated to Pages. With all plugins activated the advanced layout editor is working fine in Posts. Is it working for you in Post but not in Pages?

• This reply was modified 9 years, 7 months ago by winnieandbuzz.

Bingo ! See here on top : Link

4 or 6 Icon Circles : most is the same code-block has one less or one more circle.
And only Positioning of the icons is the work to do – all the rest is similar to 5 Icon Circle !

In the Code-Block you only have to complete Link, link-target and fill in you own Caption

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

The 5 Circle Case:

Some Positioning:

/* the circle itself border-radius has to be more than 50% of height and width */
.circle {
    border: 2px solid #059 !important;
    border-radius: 250px;
    display: block;
    height: 500px;
    overflow: visible;
    padding: 0 !important;
    width: 500px;
    position: relative;
    margin: 60px
}

/* if you like to have a background-image in the circle, with less opacity */
.circle::before {
    background-color: transparent;
    background-image: url("http://webers-testseite.de/ikom/wp-content/uploads/sh_284363741.jpg");
    border-radius: 250px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

/* if you don't like to change the code itself you can set the icon size here */
.circle .av_font_icon .av-icon-char  {
    font-size: 50px !important;
    line-height: 50px !important;
    width: 50px !important;
}

/* this is the class from the code not the caption set by icon element and determines the position where the description is shown */
.circlecaption {
    position: relative;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* you see in that code that these are the single text elements of each Icon */
.circlecaption span {
    display: none;
    width: 250px; 
font-size: 16px;
text-align: center
}

/* this is the logo or image in the center - hover states must follow than */
.circlecaption img {
    display: block;
    width: 250px;
}

/* very nice gimmick - the tilde (swung dash) is a special selector - read yourself  */
/* it is called: General Sibling Combinator */
.circle .av_font_icon.circle1-5:hover ~ div.circlecaption span.circle1-5,
.circle .av_font_icon.circle2-5:hover ~ div.circlecaption span.circle2-5,
.circle .av_font_icon.circle3-5:hover ~ div.circlecaption span.circle3-5,
.circle .av_font_icon.circle4-5:hover ~ div.circlecaption span.circle4-5,
.circle .av_font_icon.circle5-5:hover ~ div.circlecaption span.circle5-5 {
display: block;
background: rgba(255,255,255,0.8);
padding: 5px;
border-radius: 5px
}

/* hover effects for the hovered links  */

.circle .av_font_icon.circle1-5:hover a {
background: #BF00FF;
color: #fff !important
}
.circle .av_font_icon.circle2-5:hover a {
background: #0080FF;
color: #fff !important
}
.circle .av_font_icon.circle3-5:hover a {
background: #00FF00;
color: #fff !important
}
.circle .av_font_icon.circle4-5:hover a {
background: #FFFF00;
color: #000 !important
}
.circle .av_font_icon.circle5-5:hover a  {
background: #FF0000;
color: #fff !important
}

/*  hovering the icons - let the logo in the circle disappear */
.circle .av_font_icon:hover ~ div.circlecaption .circlelogo {
display: none !important;
}

/* positioning of each icon in the uniform pentagon - so most positions are calculated and nearly not  influenced*/ 
/*  - by circle dimensions  - 50px is here  icon-font-size  -  but this is a lot trial and error  */

.circle .av_font_icon a , 
.circle .av_font_icon span {
    background-color: #fff;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 55px);
    left: calc(0px + 195px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px + 433px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 342px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 48px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px - 55px);
}

here some code for responsive case:

@media only screen and (max-width: 720px) {

.circle .av_font_icon .av-icon-char  {
    font-size: 40px !important;
    line-height: 40px !important;
    width: 40px !important;
}

.circle .av_font_icon .av-icon-char {
    padding: 20px !important;
}

.circle {
    height: 350px;
    margin: 40px;
    overflow: visible;
    width: 350px;
    border-radius: 190px;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 35px);
    left: calc(0px + 135px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px + 301px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 238px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 32px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px - 32px);
}
}

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