Close
Home
One Topic - Three Distinct Views:  The Vanguard View | Subscribe
Let Vanguard Technology help you with your website  Contact Us

Partner With Vanguard

Beautifully designed impactful websites for your organization and budget
 

Web Smarts - Business Savvy

We’ve been building websites since 1998

We are trusted advisors to Over 50 Active Clients within several industries including associations and nonprofits, healthcare, financial services, retail, B2B and more.

We Are
Trusted
Partners

After we deliver a quality website on time and within your budget, we will be there for when it really counts. We will be proactive, consultative and strategic after we launch your website.

We Are
Integration
Experts

We’ve integrated with virtually every AMS system on the market as well as most LMS, publication, advocacy and career center applications. Our company was founded on custom development.

We build websites that are easy to edit, manage and design using the best content management system on the market, Sitefinity CMS.

Our Clients Are Our Partners....

John Wurm

Membership & Communications Director
Minnesota Council of Nonprofits

The team at Vanguard helped us think about our digital presence from the perspective and needs of our users, while holding true to the values our organization espouses.

Connect With Us

On-Demand Webinar

Improve Your Webcopy

Sitefinity 13

With Improvements to Asset Management, Classifications and Redesigned Personalization, is it time to consider an upgrade to Sitefinity 13?

The

Vanguard View

Technology articles about one topic from the perspective of Leadership, Marketing and IT professionals .

2020 Volume 2 - Leverage Video and Search to Quickly Improve Your Website

Utilizing Custom Grid Widgets for Ultimate Layout Flexibility

Posted: Oct 16, 2020
Development

One of the greatest content features of the Sitefinity is the layout widget. It allows content editors to separate their content into columns and rows. Sitefinity uses content blocks, which are essentially where the content resides. A page can have multiple content blocks, and that’s where layout widgets come to play. For instance, you can place a 3-column layout widget and use three content blocks to get the content side by side. This is very beneficial for short text or imagery that should be grouped together. To go one step further, you can apply CSS classes to that layout widget to make content appear in a particular way - whether that be a background color, special heading styling, and more.

To begin, there are two types of layouts: Web Form and MVC. With Sitefinity’s switch from ASP.NET web forms to ASP.NET MVC architecture, there is a better way for developers and content editors alike to manage and control layout elements for your website.

Web Form Layouts

With the web forms version of Sitefinity, you have a list of percentage-based column layouts ranging from 1 column to 5 columns with varying widths for each column. 

DragLayoutElements-blog-1

There is nothing too special about these layout elements and we can adjust the margin for each column, but we do not have much control over the presentation itself. If we wanted to add specific styles to these, the content editor would need to add a wrapper class to each layout block to make it look the way we want. For instance, if we wanted to create a new row that was blue, one would need to enter into that layouts’ settings and add in the class “row blue”:

EditLayoutElement-blog-2

MVC Layouts (Grid)

With the MVC version of the layout blocks, they are now referred to as grids. The reason for the name change is that it is now adhering to the Bootstrap grid system. Instead of having percentages as the indicator for the column widths, it is now displayed as numbers based on a 12-column system. So, in other words, “grid-6+6” is really “50% + 50%”. 

Draglayoutelements-blog-3

Another change is that there is no longer a margin field. The main reason for this is continuity between the column space. The spacing is already baked into the Bootstrap grid system, however, you can always apply the padding classes to each column if you want to change it. 

Extending the Grid System

Sitefinity allows developers to create custom layouts within the grid system. For instance, we may want to make rows layouts to break the page up into sections. What we would do is create a custom layout that contains all of the special attributes that is needed to make the content appear a specific way in and provide placeholders where the user will enter in the text.

The result would look something like this in the backend (see below). On the right-hand side, you can see we have custom grids to fit certain layout needs. 

layoutelements-blog-4

 

These grids don’t just stop at rows. Anything that you would want to drag and drop in a layout grid can be achieved. It might be a placeholder for quoted text, or it may be used to hold columns of cards, making each card the same height regardless of the content.

When it comes to custom layouts, imagination is the limit. To learn more about MVC grid system and how to customize it to work for your content, please reach out to a Vanguard Client Manager. 

Back To Posts

Author:

Matt Chriest

Vanguard Tips & Tricks

We provide helpful hints you never knew you needed for our clients. Check out "Vanguard Tips & Tricks" to learn quick and simple hacks to make managing your website easier than ever.

Utilizing Custom Grid Widgets for Ultimate Layout Flexibility

Posted: Oct 16, 2020
Development

One of the greatest content features of the Sitefinity is the layout widget. It allows content editors to separate their content into columns and rows. Sitefinity uses content blocks, which are essentially where the content resides. A page can have multiple content blocks, and that’s where layout widgets come to play. For instance, you can place a 3-column layout widget and use three content blocks to get the content side by side. This is very beneficial for short text or imagery that should be grouped together. To go one step further, you can apply CSS classes to that layout widget to make content appear in a particular way - whether that be a background color, special heading styling, and more.

To begin, there are two types of layouts: Web Form and MVC. With Sitefinity’s switch from ASP.NET web forms to ASP.NET MVC architecture, there is a better way for developers and content editors alike to manage and control layout elements for your website.

Web Form Layouts

With the web forms version of Sitefinity, you have a list of percentage-based column layouts ranging from 1 column to 5 columns with varying widths for each column. 

DragLayoutElements-blog-1

There is nothing too special about these layout elements and we can adjust the margin for each column, but we do not have much control over the presentation itself. If we wanted to add specific styles to these, the content editor would need to add a wrapper class to each layout block to make it look the way we want. For instance, if we wanted to create a new row that was blue, one would need to enter into that layouts’ settings and add in the class “row blue”:

EditLayoutElement-blog-2

MVC Layouts (Grid)

With the MVC version of the layout blocks, they are now referred to as grids. The reason for the name change is that it is now adhering to the Bootstrap grid system. Instead of having percentages as the indicator for the column widths, it is now displayed as numbers based on a 12-column system. So, in other words, “grid-6+6” is really “50% + 50%”. 

Draglayoutelements-blog-3

Another change is that there is no longer a margin field. The main reason for this is continuity between the column space. The spacing is already baked into the Bootstrap grid system, however, you can always apply the padding classes to each column if you want to change it. 

Extending the Grid System

Sitefinity allows developers to create custom layouts within the grid system. For instance, we may want to make rows layouts to break the page up into sections. What we would do is create a custom layout that contains all of the special attributes that is needed to make the content appear a specific way in and provide placeholders where the user will enter in the text.

The result would look something like this in the backend (see below). On the right-hand side, you can see we have custom grids to fit certain layout needs. 

layoutelements-blog-4

 

These grids don’t just stop at rows. Anything that you would want to drag and drop in a layout grid can be achieved. It might be a placeholder for quoted text, or it may be used to hold columns of cards, making each card the same height regardless of the content.

When it comes to custom layouts, imagination is the limit. To learn more about MVC grid system and how to customize it to work for your content, please reach out to a Vanguard Client Manager. 

Back To Posts

Author:

Matt Chriest

Case Studies

Vanguard conducts thorough preliminary investigative work to ensure your website is built to cater specifically to your target audience and meet your organization’s goals. Check out some of the case studies on some of our most recent client success stories.  

Follow Us On Social Media Twitter Facebook YouTube LinkedIn

What Can Vanguard Do For You?

As your organization grows and evolves, your website should as well. Whether you are looking to generate more traffic, implement custom functionality, mobile compatibility, integrate your systems, or give your site a complete redesign, Vanguard Technology is your go-to web partner. Reach out to us with your current concerns with your website, and our experts will happily provide a solution.