-
Posts
-
So…As many of you I am sure have been trying to figure out how to add more rows and columns on the presentation page… I was playing around and figured it out.
Under The presentation page go to the bottom where it says Extra Text in the parabola settings.
In the bottom text 1 and 2 enter this in:<div id="front-columns"> <div id="column1"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/santamonicamodern_03.jpg" alt="" /> <h3 class='column-header-image'>Hi there I'm a title!</h3></div> </a> <div class="column-text"> You can also have some text here. Just like with the slider, everything is optional (including the title and the link inputs). <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column2"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/Los-Angeles-Mansion1.jpg" alt="" /> <h3 class='column-header-image'>You can use HTML tags</h3></div> </a> <div class="column-text"> You can also use <a href='http://www.cryoutcreations.eu'>links</a> as well as most <strong>other</strong> <u>HTML</u> <em>tags</em> and even [shortcodes] inside the columns. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column3"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/imagesw.jpg" alt="" /> <h3 class='column-header-image'>Just another column title</h3></div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column4"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/images.jpg" alt="" /> </div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> </div>And add in your own info and photos in this code.
Boom extra 2 rows of photos and links of your choosing.
You are welcome.
Well crap it did not paste it…If you want the code send me an email
Emergencyx@gmail.comI have it working check the site out:
Just need to change the URL directing and photos and text.Great it works thanks…. but there is no gap between cells in the second and third row.. any idea how to fix it ??
Found solution… cause i am very poor at CSS i just removed Blockquote tags in the frontpage.php at this point:
// Frontpage text areas if($parabola_fronttext3) {?><div id="front-text3"> <blockquote><?php echo do_shortcode($parabola_fronttext3) ?> </blockquote></div><?php } if($parabola_fronttext4) {?><div id="front-text4"> <blockquote><?php echo do_shortcode($parabola_fronttext4) ?> </blockquote></div><?php } ?> </div> <!-- frontpage -->it will make all rows looks the same way. thanks. or you need to edit Blockquote CSS style
Hi, please send me the code. post@csts.no
This should be the right code, thanks to David:
<div id="front-columns"> <div id="column1"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/santamonicamodern_03.jpg" alt="" /> <h3 class='column-header-image'>Hi there I'm a title!</h3></div> </a> <div class="column-text"> You can also have some text here. Just like with the slider, everything is optional (including the title and the link inputs). <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column2"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/Los-Angeles-Mansion1.jpg" alt="" /> <h3 class='column-header-image'>You can use HTML tags</h3></div> </a> <div class="column-text"> You can also use <a href='http://www.cryoutcreations.eu'>links</a> as well as most <strong>other</strong> <u>HTML</u> <em>tags</em> and even [shortcodes] inside the columns. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column3"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/imagesw.jpg" alt="" /> <h3 class='column-header-image'>Just another column title</h3></div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column4"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/images.jpg" alt="" /> </div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> </div> <div id="front-columns"> <div id="column1"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/santamonicamodern_03.jpg" alt="" /> <h3 class='column-header-image'>Hi there I'm a title!</h3></div> </a> <div class="column-text"> You can also have some text here. Just like with the slider, everything is optional (including the title and the link inputs). <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column2"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/Los-Angeles-Mansion1.jpg" alt="" /> <h3 class='column-header-image'>You can use HTML tags</h3></div> </a> <div class="column-text"> You can also use <a href='http://www.cryoutcreations.eu'>links</a> as well as most <strong>other</strong> <u>HTML</u> <em>tags</em> and even [shortcodes] inside the columns. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column3"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/imagesw.jpg" alt="" /> <h3 class='column-header-image'>Just another column title</h3></div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> <div id="column4"> <a href="http://www.cryoutcreations.eu"> <div class="column-image"> <img src="http://www.westonfloridahomes.net/wp-content/uploads/2015/03/images.jpg" alt="" /> </div> </a> <div class="column-text"> You can have up to four columns or choose to have no columns at all. It's all up to you and your needs. <div class="columnmore"> <a href="http://www.cryoutcreations.eu">Click Here! »</a> </div> </div> </div> </div>Hello… could you please send me the code as well? kato@tmottgogo.com
Hoping I’ve made the code blocks readable, please use the backticks/backquotes to enclose code: `
If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.
Viewing 8 posts - 1 through 8 (of 8 total)
The topic ‘Quick How to add more Columns In Presentation’ is closed to new replies.