Rosa Lite Documentation

Gridable allows you to create an adaptable and fully responsive grid in no time. You can start by simply experimenting how it works in order to discover its huge potential. Here’s how you can start exploring this plugin:

• Log in into WordPress dashboard
• Go to Pages and click on Add new
• Click on Add row button (Next to Add media)
• You have two columns where you can insert: text, photos or videos

Now you can create up to 12 columns and manage them easily by simply moving the icon that separates them. Click on it and drag to the left or to the right in order to adjust the content, and make it fit your particular needs.

How can I adapt it to my branding?

One of the strongest perks of using Gridable is that you can align it to your brand’s voice. After creating a grid of however columns you find it necessary, here’s what you need to do next to make it even more about your unique personality.

You have two main areas of customization. On one hand, you can Edit the Column, and on the other hand, you can Edit the Row.

Each has particular options. For Column, you can set the Spacing and the Background Color, and for the Row, you can set much more such as Row Spacing Top, Row Spacing Bottom, Row Gutter, Row Background Color, and Stretched or not Stretched.

Using Shortcodes for Custom Elements

Here is where the beauty lies. We’ve taken that extra mile and crafted an advanced, but simple to use shortcodes plugin that will allow you to give structure to your pages and posts. To ensure ease of use, everything is visual, nicely packed in a modal window accessible from the WordPress editor. Everything starts with the funky P button.

Columns

The main shortcode that will be the workhorse of your pages is the Columns shortcode. This enables you to divide the content into a multitude of columns via a simple and intuitive slider interface. Simply choose how many columns do you want and then drag the sliders to select the proportions of each column.

Once you are done, hit the Insert button and we will generate for you the shortcode, with some dummy content for each column. From here you can add what content you desire in each column like text, images or even other shortcodes.

You can have multiple rows of columns on one page with different column configurations, but we urge you to take the time and think things over, so you don’t clutter your pages with too much content.

Button

To further emphasize your call to action or links, you can use this Button shortcode to get a beautiful button that is in line with the rest of the theme (we really hate those pesky default browser buttons). Simply input the button link and label and you are good to go. You can also choose the size of your button: small, medium or big. For custom styling, you can add a CSS class and/or id.

*Tip: Upgrading to Rosa PRO will unlock more options for shortcodes like Slider, Icons, Tabs, Quotes, and Reservation.

Creating Columns and Rows with Gridable

Gridable is an in‐house tool which allows you to create an adaptable and fully responsive grid in no time. You can start by simply experimenting how it works to discover its enormous potential.

Create rows

Rows make the whole content grid, and each one can contain up to 12 columns. To create a new row in your grid, just press the Add Row button next to the Add Media button. As you can see, a two‐columns row is available on your page.
If you want to remove the row, all you have to do is to click inside of one of the columns and press the Remove Row button in the top toolbar. Check this out to get a glimpse:

Create columns

Once you add a new row to the grid, you automatically get two columns. If you plan on using several, just click the plus sign in the Columns section of the grid toolbar. You can play with it to adjust the number with ease.

As said, you can have up to 12 columns in a single row. If you want to have columns with the same width, you should have two, three, four, six or 12 columns on the same row.
If you find that there are too many columns in the row, just press the minus sign. Here’s a short video to assist you:

Change columns width

With Gridable, switching the width of the columns is now easier than ever. To do that, you just need to drag each column and set its size. Nothing more, nothing less. Watch this GIF to make it happen:

Add a new row

A complex grid content is made out of multiple rows. You can easily add a new one in your page by going to the end of the current row and pressing once again the Add Row button. Now you have a new row where you can add or remove the number and content of the columns. Video right here:

Create a full‐width row

You might face situations where you need to add a full‐width row inside your content. By the way, each row is set up to fill the width of the page. If you want your content to be stretched on one single line (or row), please remove all the columns until you have just one left:

Edit columns options

As for the columns’ options, you can change the style of each column by choosing between Simple, Island or Feature Box. Also, if you want to design one of your rows a bit different, you can add a CSS class to the CSS Class field.

Creating a ”Food Menu”

Since ROSA is particularly targeted for the restaurants, we have thought it would be great to have a handy dandy system to reliably create and manage your menus.

The Menu Syntax

In order to get the Restaurant Menu shortcode, first, you have to access the funky P button from the WordPress editor (Visual mode). After this, you will be presented with a quick walkthrough of the shortcode features. Once you hit Insert, we will add a starter shortcode into the editor so you can start editing right away. Something in the lines of the text bellow:

HTML:

[restaurantmenu]

#Section Title
-----

##First Product Title
**Description of the first product
==$15

##Our Choice
##Second Product Title
**Description of the second product (no price)

##Third Product Title (no description)
==$23

##Fourth Product Title
**Subproduct 1
==$23.99
**Subproduct 2
==$26.99
**Subproduct 3
==$29.99

##Fifth Product Title (just title)

#Another Section Title
-----

##Another Product Title
**Another product description
==$2993

[/restaurantmenu] 

Markers

We rely on a couple of markers to identify the four sections of each menu product. Every menu product is identified with a different set of characters at the start of the line.

1. # for Section Title — so if you will add a single # at the beginning of a line that will be styled as a section title. You can have multiple section titles to help you better organize your menu.
2. ## for Product Title – notice the double # you need to add at the beginning. You can have as many products as you want. Generally a product is comprised of a title, a description and price, but these last 2 ones are optional.
3. ** for Product Description  — notice the double * that acts as marker for this.
4. == for Product Price – the price has double “=” as marker so you could write something like ==$50.99.
5. ++ for Product Highlight – this allows you to highlight some of the menu items and make them stand out; this feature is available only in Rosa PRO.

That wraps it up in terms of the hard part, markers and all that.

Product Group and Sub‐products

Now for some magical hidden logic. If you wish to use the title as some sort of a product group, we will recognize that. So if you decide to add multiple description‐price line groups after a title, we will treat and style these as sub‐products (see the below example).

HTML:

##Fourth Product Title
**Subproduct 1
==$23.99
**Subproduct 2
==$26.99
**Subproduct 3
==$26.99

Need More? Upgrade to Rosa PRO

If you are looking for more flexibility and customizations options, awesome parallax areas on multiple pages, advanced features for food menus, support for online ordering, slideshow parallax, and many more, check out the comparison table.

View Rosa PRO