Different coloured sections on 1 page

Dazzling
1

Hello there!

I was wondering how I can create separate ‘sections’ by colours on the same page?

The reason I want it is for testimonials for my Work With Me Page so that it all breaks up properly.

Here are some examples of what I mean:

http://avnipalekar.com/the-ultimate-mix/
The dark blues & greens there

Or the black sections here:

Thanks so much!

2

Hi @manateecake,

I hope you are well today and thank you for your question.

First of all just set the Full Width page template to the page as shown in the attached screenshot then we can create those sections by developing custom CSS code.

Best Regards,
Movin

3

I’m interested to know this too.

I’m new to website building and would also like my homepage to have the functioning slider like that in the demo too, but I haven’t worked that one out yet.

Thanks Lisa

4

Got you Movin, would you have the CSS code or is it quite complicated?

5

@lispetite To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/dazzling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

6

@manateecake If you have created full width page then please share me that page URL and tell me which sections you want to make full width as shown in your shared pages so that i can help you to achieve this.

7

I don’t know how to create my own thread sorry.
I’ve asked colorlib direct and via facebook and no one has replied.

8

Hi Movin,

I have already selected full width no side bar for the page. :slight_smile:

9

@lispetite After logging to this forum just visit the page https://colorlibsupport.com/c/dazzling/ and you will get New Topic form in the bottom of that page as shown in the attached screenshot.

10

@manateecake Then please as said previously share me that page URL and tell me which sections you want to make full width as shown in your shared pages so that i can help you to achieve this.

11

Hi Movin,

Here’s the link: http://www.femininespace.com/work-with-me/

There are multiple sections I would like to add to this page but the first section is here:

[coloured section]

Are you an intuitive empath who loves to give, connect and share with others?

Yet giving your all and doing everything right for everyone else, leaves you feeling out of balance and exhausted?

Ah… wouldn’t more time for yourself and space to breath be amazing? [end coloured section]

And I would like it to be horizontal bar of colour across the whole thing.

12

Wrap those text in the div having classes full-width and grey as displayed below.

<div class="full-width grey">…Text here…</div>

Then add the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS


.page-template-page-fullwidth .container {
    width: 100%;
    padding: 0;
}

.navbar-default .container,
#footer-area .container,
.page-template-page-fullwidth .entry-content > *,
.page-template-page-fullwidth article > header {
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
}

.page-template-page-fullwidth .entry-content > p{
  margin-bottom: 10px;
}

.page-template-page-fullwidth .entry-content > div.full-width {
    width: 100%;
    max-width: 100%;
    padding: 10px;
}

.page-template-page-fullwidth .entry-content > div.full-width.grey {

background: grey;

color: #fff;
}