en en en en az it en en hi en en en en en la en pt en pt en en en en en en en en en pt en en pt en en en en en fr en en
This article is for vintage Kingdom theme (versions up to 3.8.0), and doesn't apply to Online Store 2.0 (versions higher than 4.0.0)
With Online Store 2.0, you can now use the "Text Columns with Images" section in any page you wish.
Our theme features layouts with columns, which you can use in any page or article. To insert columns you need to switch into the HTML viewer when editing a page.
When you switch the the HTML viewer you should see a code representation of your content (or nothing if you're just starting). To add columns, you'll have to add some special HTML tags and write your content within them.
Here's a basic example of how a three columns layout looks like:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
If you insert the code above and save your page, you should see a simple three columns layout. Now here's the code breakdown:
This represents a row. Each row should start with this tag and inside it you will put your column tags. Do not forget to close any   that you open!
This is an inner column which needs to be placed inside a row. The span4 class represents the actual width. Possible values are:
span12 - full width (1/1)
span8 - two thirds (2/3)
span6 - two halves (1/2)
span4 - one third (1/3)
span3 - one quarter (1/4)
The first class needs to be written in columns that are first in their row. Make sure that you put full layouts in each row, not more (for example 1/2 + 1/2 or 1/3 + 2/3 or 1/3 + 1/3 + 1/3, etc.)
After you have your structure defined, you can go back to the normal edit and edit your content with the pretty viewer. You should go back to the HTML view from time to time (when editing) in order to make sure that the columns structure remains intact.
There's one last tip here, if you want to have a certain text alignment in the entire column. The text is left aligned by default, but you can change the alignment of an entire column if you add one of the following classes to that column: align-center or align-right. This is how a centered column which is first in it's row should look like:
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.
Last updated on September 29, 2021
© Krown Themes 2022. Powered by Help Scout