[Elodie]

Hello,
For the needs of my client who wants a call to action at the bottom of certain pages, i need to use the promobox inside a page & i need to center it.
Adding promobox to a page is very simple but i do not manage to center it.
Could you help me please ?
thanks in advance.

Elodie Hazac
Fée Digitale
@ L’effet Digital

the concerned pagehttp://www.cerponline.fr/formation-bepecaser-mention-2-roues-bepecaser-moto/

[Theme Horse Support Team]

Hi Elodie,

You have to add below html code manually to have the promobox inside the pages.

<section class="widget widget_promotional_bar clearfix">
  <div class="promotional-text">“Free Responsive Retina Ready WordPress Theme”
    <span>Free WordPress Theme has never been so easy & beautiful.</span>
  </div>
  <a title="View Work" href="#" class="call-to-action">View Work</a>
 </section>

And to manage it on center Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

.widget_promotional_bar {
    text-align: center;
}
.widget_promotional_bar .promotional-text {
    float: none;
    text-align: center;
    width: 100%;
}
.widget_promotional_bar .call-to-action {
    float: none;
    margin-top: 16px;
}

Thank you!

[Elodie]

Thanks,
that’s a good start, this is how it looks
http://www.cerponline.fr/test?preview=true&preview_id=298&preview_nonce=2fa27fc1fa

but for the need of my client, the promo bar needs to have a square shape like in below link in order to be a promo box & not a promo line.
http://www.cerponline.fr/formation-bepecaser-mention-2-roues-bepecaser-moto/

How is this possible in the html code of each page needing this promo box (& not promo bar) ?
thank you very much in advance, it would be precious, it is the call to action leading to a contact form for conversion optimisation in the website.

Kind regards,

[Theme Horse Support Team]

Hi Elodie,

You can add below css in custom css to make it as box

.widget_promotional_bar {
    width: 30%;
}

Thank you!

[Elodie]

thanks a lot, it’s working !

http://www.cerponline.fr/formation-bepecaser-mention-2-roues-bepecaser-moto/

but now, what html code in the page to force the whole box to be centered in the middle of the page on the post only instead of being on the left of the page ?

thanks a lot for your help, i’m not very good in html code.

Kidn regards,

[Theme Horse Support Team]

Hi Elodie,

You have to add below CSS code for that

.widget_promotional_bar {
    margin-left: auto;
    margin-right: auto;
}

Hope this will help.

Thank you!

[Author]

Posts