Single Module, Multiple layouts

Hi, 

New to SF and so far so good, however first hurdle that is stopping me is as follows:

Trying to create a Hero Item containing:

1) a single image

2) A single title

3) a message

4) a button

Now I have so far something along these lines: 

[### START CODE BLOCK ###]
<div class="wrp">

<div class="cnt">

<div class="TitleMessage">

<h1><asp:Label ID="TitleLabel" Text="Text" runat="server" /></h1>

<p><asp:Label ID="MessageLabel" Text="Text" runat="server" /></p>​

</div>

</div>

<div class="cnt">

<div class="button">
<asp:HyperLink ID="ButtonLink" runat="server">
<asp:Label ID="ButtonTextLabel" Text="<%# ButtonTextLabel %>" runat="server" />
</asp:HyperLink>
</div>

</div>

<div class="cnt">

<div class="image">
<% if (String.IsNullOrEmpty(HeroImage.ImageUrl)) %>
<div class="imgPlaceholder">
<p>Image has not been specified</p>
</div>
<% else %>
<asp:HyperLink ID="ImageLink" runat="server">
<asp:Image ID="HeroImage" runat="server" GenerateEmptyAlternateText="true" CssClass="imgZIndex-1" />
</asp:HyperLink>
<% %>
</div>

</div>

</div>

[### END CODE BLOCK ###]

So as you can see I have a wrapping <div> and inner cnt div's and the image in code is last, this is fine for the first layout variant of the Hero Item:

[Left cnt div = 60% width] This has

Title

Message

and button below.

[right cnt div = 40% width]

this has only got the single image.

 See my example attached. (HeroItemV1.png)

What I need to know is how to best manage the layout of this single module for the varying layouts  planned using the power of Sitefinity? So the next scenario would be that the image would appear before the title in a vertical layout for the 25% col layout in Sitefinty CMS, what would be the best way to manage this? is it just via CSS or does Sitefinity allow for multiple layouts for a single module?

## Using Sitefinty layout of col_25% + col_75%, I place my module in the 25% column ##

[Image = 100% width]

Image File

[Title, Message, Button = 100%]

Title

Message

Button

Any hints or tips towards the right direction appreciated.

I have also attached further images of the 25% width scenario layout issue I am facing and then the 25% width with a 75% width 2 up Hero Item again that would be using the same module but differing layouts respective to the width of the col_option defined at the page level by the content editor.
Files: (HeroItem25%.png) & (HeroItem2Up.png)

Hello Steven,

I have some difficulties to understand your scenario. If I am correct you have created a dynamic module using module builder and the goal is to display the content of this module in several different ways.

For every widget that displays dynamic content you can create multiple templates. Every template can display the content with different layout.

Regarding the layout widgets they can be used only for pages. They are designed for creating page layouts. Can you check the following link for more detailed information about layout widgets.

Create a template using the Layout editor

Regards,
Kaloyan
Telerik

Hi Kaloyan,

 thank you for taking the time to respond, I am developing a custom Widget sorry, not a module in module builder, my apologies, I have been told that there should be a way to create a single widget using thunder with a designer and then have multiple layouts for the single module but as a newcomer to SF I am unable to find the supporting documentation or any tutorials on this? 

So in its simplest form I have three parts, an image, a title & Paragraph of text with a Button for the Call to action.

so the HTML layout by default has the <img> appear last in the code block, however in the next layout of this widget (Not page layout) the <img> would come first in the code block so for example:

Layout A:

<div>Title</div

<div> Message</div>

<div>Button</div>

<img />

Layout B:

<img /> 

<div>Title</div
<div> Message</div>
<div>Button</div>

 so page layouts allow me to set an area that a widget can be placed but teh widget template(s) will allow the content editor (CE) to define "I want a Hero Item" the CE selects the Hero Item Widget and drags this into the content & layout to the desired position.

From here the CE would then click on the "edit" text to edit the widget properties and define the image, title message & button label and link destination etc.

My question is, how do I offer the CE multiple templates for the same widget to choose from from within the designer window?

I hope this makes sense,  think ​I got a little mixed up in my original message as forgot we have both modules & widgets in SF.

Any pointers appreciated.

Hi Steven,

Please check the following link where you can find detailed documentation about Sitefinity Thunder. 

Thunder: Widgets and widget templates

In one of the sub-articles you can find how you can create widget designers. When you have your widget with designer you can use as much templates as you need.

Regards,
Kaloyan
Telerik