Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Linking an entire text division

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

With web studio "group" group a division of text or text with images.
Then use a link placed inside that group for the entire divisions link

WEB STUDIO GROUP
Group is a tool in web studio inside the create tab
When you drag a box around objects on the page web studio places all of those into a single block
Then you can drag the block around the page and it keeps the layout. That block in html is called a Division.

Example with an image

This block is grouped and links to the WSnext CSS category
For this to work you use only one link inside the group

This example is using a link I placed on the css
picture with web studio and used a "draw shape"
for the background then grouped it all with the text.

Example with text

This block of text is grouped and uses a text link made with web studio
The link for this example to work goes to the text css basics section
paragraph & text

This example also uses a "draw shape" for the background
You can un-group make changes then re-group as well

Add a link

Place your TEXT or TEXT and IMAGES on your page
ADD only one link to either the text or one of the images with web studio

Group the all the objects you want to use that link

Hold down the left mouse button
and drag a box around the objects

On the CREATE tab in GROUP
select
Group

Add a class to the GROUP

Select your GROUP on the HTML tab in Insert Object HTML
copy/paste this in
Inside DIV

 class="linked"

Make the GROUP use a "link" cursor

In Insert Page HTML Copy/Paste this code in the HEAD

<style type="text/css">
.linked div {cursor:pointer;}
</style>

Place the code to make it work on your page

On the Html tab
in Add HTML
select
HTML Object

That puts the HTML
container on the page

DOUBLE CLICK
on the HTML Object
and paste the code below

Press "OK"
to save

Copy / Paste this in the HTML Object:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
$(".linked").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
</script>

Thank-you

Text effects in Web Studio 5 - Linking an entire division - by Web Studio Next

aaaaaaaaaaaaiii