[Resolved] Sidebar widget like the one below for converting

[Nacho]

Hello Tom,

Will it be possible to create a sidebar widget like the one in this site: https://romualdfons.com/aumentar-15k-visitas-al-dia-marketing-contenidos/

It´s made with CSS help I guess.

If so, would you mind giving me a few tips for creating that?

Thanks a lot Tom.

GeneratePress 2.0.2

GP Premium 1.6.2

[Leo]

Hi there,

Can you show me what you have so far?

The page you linked created that with one single widget and several div.

You can actually see it by using browser inspect like this:

Try getting it start with it and let us know if you get stuck 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nacho]

Hello Tom,

Thanks for the video. I´ve managed to get the title centered and insert the image in the text content (I can´t center it) but I see it has like a lot of divs which I cannot see in my sidebar.

I´ll keep playing with the CSS.

Thanks a lot for the advice.

[Nacho]

Oh, sorry Leo, I did not see your name.

I´m going to play a bit more with it since right now I´m in a hosting migration and don´t know yet when it´s going to be finished.

Thanks a lot for your help Leo.

[Leo]

No problem 🙂

We can revisit once the site is viewable online.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

And also if you edit the original topic and use the private URL field then only Tom and myself can see.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nacho]

Hi Leo,

Well, I think I´m getting there but I can´t center the first image to the center. Here is the CSS and the Screenshot of what I´ve achieved since I´m trying locally.

Image: https://ibb.co/m95cwc

CSS:

.button.sun-flower,
.button.sun-flower:visited {
	background: #F1C40F;
	color:#FFF;
	color: black;
    background-color: #ffd700;
    border-color: #ffd700;
    border-bottom: 2px solid #ccaa01;
}

.button.sun-flower:hover,
.button.sun-flower:active {
color: black;
    background-color: #ffd700;
    border-color: #ffd700;
}

#text-2 {
	padding:0;
}

#text-2 .contrast {
	background-color: gold;
  padding: 2rem 1rem 3rem 1rem;
}

#text-2 .widget-title-contrast{
	  font-size: 1.5rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
	text-align:center;
	font-weight:700;
}

#text-2 .top{
	padding: 2rem 1rem;
    padding-bottom: 1rem;
	margin-top:-70px;
}

#text-2 .entry-thumbnail{
	margin-bottom: 1rem;
    width: 80px;
}
#text-2 .round img {
    border-radius: 50%;
}

img {
	  vertical-align: middle;
    max-width: 100%;
}
img {
	height:auto;
}

#text-2 .bottom{
	  padding: 2rem 1rem;
    padding-bottom: 1rem;
}

#text-2 .quote-text{
	margin-bottom: 1rem;
    position: relative;
    z-index: 3;
    color: #383838;
    font-size: .75rem;
    font-weight: 400;
    background-color: #fff;
    border-radius: .2rem;
}

#text-2 .quote-text-mask{
    padding: 1rem;
    background-color: #fff;
    position: relative;
    z-index: 100;
    border-radius: .2rem;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
    text-align: initial;
}

#text-2 .button.sun-flower{
	display: block;
  max-width: 25.875rem;
  margin: 0 auto;
}

Thanks a lot Leo.

[Leo]

It’s really hard solve this problem by looking at code and screenshots.

Can we revisit this once I can look at it live?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nacho]

Hi Leo,

The website is live again. Do you mind if I send you the URL by private message?

If so, where should I send it?

Thanks a lot.

[Leo]

Can you please edit the original topic and use the private URL field?

It makes it much easier for us to track.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nacho]

Hi Leo,

I´ve just done it.

Thanks a lot.

[Leo]

Good job! You are almost there 🙂

Try this additional CSS:

.entry-thumbnail.round {
    margin-left: auto;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nacho]

Hello Leo,

Wohooo! That worked like a charm.

Thank you so much Leo, now it looks good.

Have a good day.

Bests.

[Leo]

No problem at all 🙂

You did all the hard part!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts