Hello every one,
I’m having a problem setting up the SiteOrigin plugin. I would like to make a clickable Text Widget, however I’m not able to. The option to add a destination link seems to only be available when using the Image Widget.
So I’ve made a workaround by creating a HTML code with a div and pasting it inside the Text Widget:
<a href="http://google.com"><div class="photo-home" style="background-image: url(path_to_working_image_its_ok);background-size: cover;"> <div class="textwidget">TEXT HERE</div></div></a>
The code seems to work OK, but when I’m testing the W3C, i get a fatal error:
Error: End tag a violates nesting rules. From line 178, column 4; to line 178, column 7 </div>↩</a></div>
The website source code for that part goes as follows:
<div id="pl-301">
<div class="panel-grid" id="pg-301-0" >
<div class="panel-grid-cell" id="pgc-301-0-0" >
<div class="photo-home widget widget_text widget_text panel-first-child panel-last-child" id="panel-301-0-0-0">
<div class="textwidget"><a href="http://google.com">
<div class="photo-home" style="background-image: url('path_to_working_image_its_ok'); background-size: cover;">
<div class="textwidget">TEXT HERE</div>
</div>
</a></div>
</div>
</div>As you can see, the tag is added after an automatically generated tag. I tried turning off automatic paragraph adding but it didn’t help.
What can I do to resolve this issue? Is the W3C fatal error something to be concerned about?
I meant:
the
tag is added after an automatically generated
tag
Destination URL is also available when using the Hero Image Widget. You may then need to use the siteorigen custom css to style the text you want.
I also tried using the siteorigin editor widget and the spacer widget and put a links around the space I introduced which gave the illusion of a clickable background image.
Can you describe more precisely how did you use the spacer widget? Where can I download it?
Anyone else know if a Fatal Error in W3C like this one mentioned above is really bad?
https://wordpress.org/plugins/spacer/
the plugin install into the editor, and then you can choose to add space. I the added the a tags around the spacer shortcodes.
Okay, I’ve used the Hero Image Widget, and by styling the its divs with custom CSS, I was able to achieve the effect I wanted. The whole image is clickable, and since I added only one slide (with a background image on it), no control buttons appear and it looks like a normal static div widget. I styled the widget’s text by putting it inside of a div with a certain class.
The source code still shows there are some unnecesary
tags, but the W3C validator doesn’t show a fatal error anymore which is good! Thank you for your help.