Docs

[fatheaddrummer]

Hi There,

I would like to add 2-3 reviews on my website with images go customers….could you tell me how this is done the usual way? And could you provide me with an x-theme example? Unfortunately I don’t receive any good looking results with block quote or pull quote. Working with visual composer by the way.

Thanks!

https://www.staging2.diamond-precision-studio.com/

Best, Christian

[Lely]

Hello Christian,

Thanks for posting in.
Usually, we do use BLOCKQUOTE. But then if you want to use an image, you may want to use PROMO element. If that will not suite your needs, it would be better if you will give a screenshot of what you want to achieve so we can give a better recommendation.

[fatheaddrummer]

Hi Lely,

Thank you very much! Actually that’s the problem: I don’t find any review examples of the x-theme WITH images of customers. I’ve been searching for demos quite a while now…could you provide me with some demos (or one) 🙂
So I can find out what’s possible…

I pretty much do like the promo element, but for my taste the image is displayed a little bit too large in there…(although I just had the idea to create an image in photoshop with background, so I could make the person of the foto smaller)….however, some examples and explanations would be great.

Thank you so much, you’re awesome!

Cheers, Christian

[Lely]

Hello Christian,

You may check this sample:
http://theme.co/x/testimonials/

[fatheaddrummer]

Thanks a lot!
How are they created (if using visual composer)?
How can I add a quotation mark like this?
Is there a way to add a customer picture?

Thank you so much!
Best, Christian

[Joao]

Hi Christian,

You can use the Accordiong Shortcode.

Accordion

Add the following content inside the Accordion Item:

<div class="tco-testimonial"><img src="smiley.gif" alt="Smiley face" height="42" width="42"><p>Perfect theme!</p><span>batcrazy1, December 31, 2016</span></div>

And this to Appereance > Customizer > Custom > CSS

.tco-testimonial {
    position: relative;
    margin: 0 0 35px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 0 35px 45px;
}
.tco-testimonial:before {
    content: "\f10d";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "fontawesome";
    font-size: 28px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    color: #272727;
    opacity: 0.15;
    speak: none;
}

Hope that helps

Joao

[Author]

Posts