Any tutorial for Pages to create nice portal

[AlexJ]

I believe @Aiwa had created nice block/addon for IP.Content for IPS 3.4.x. Is their something like below exist for IPS 4.x pages? 

Screenshot from my old IPS 3.4.x website - https://www.screencast.com/t/At8pjtzn

Announcement block will pull data from selected category and will truncate to limited lines. It would be nice to have something like that in IPS 4.x Any help is appreciated.

Thanks

[opentype]

It’s pretty much drag and drop now in 4.x. No tutorial needed. You just drag widgets in places you like them to be. Make sure your homepage is a “Page Builder” page though to have drag&drop functionality. Converted pages from IP.Content don’t work this way. 

[Ramsesx]

Or this:

 

[Aiwa]

https://aiwa.me

Something like that?

[AlexJ]

On 4/17/2018 at 10:59 AM, Aiwa said:

https://aiwa.me

Something like that?

Yes, please. I would like to have something like that. Thank you for your past and future help. :) 

[Aiwa]

The only thing 'special' about that page is the news feed which is just a couple tweaks on a generic feed block.  Otherwise it's a simple page with a couple feeds.

Here's the 'content' for the news block.  I wrote it a LONG time ago for my own use, so excuse some of the hackyness.

{{if !empty( $topics ) }}
<!-- CSS Styles for the Date -->
<style>
#kc_date_wrap { line-height: 1.5; padding-right: 40px;}
.kc_date_day { font: 300 60px/40px 'Helvetica Neue', helvetica, arial, sans-serif; text-align: center; padding-right: 10px;}
.kc_date_monthyear { 
	text-transform: uppercase;
	font-size: 16px;
         padding-right: 10px;
}
</style>


	{{foreach $topics as $topic}}
		<div class='ipsBox ipsSpacer_bottom'>
			<h3 class='ipsType_sectionTitle'>
				<a href='{$topic->url()}' {{if $topic->canView()}}data-ipsHover data-ipsHover-target='{$topic->url()->setQueryString('preview', 1)}' data-ipsHover-timeout='1.5' {{endif}}> {wordbreak="$topic->mapped('title')"}
				</a>
				<span class='ipsType_reset ipsType_medium ipsType_light'>
							{lang="byline" htmlsprintf="$topic->author()->link()"} {datetime="$topic->mapped('date')"}
				</span>
				<div class="ipsCommentCount ipsPos_right {{if ( $topic->posts - 1 ) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="replies_number" pluralize="$topic->posts - 1"}'>{expression="$topic->posts - 1"}</div>
			</h3>
			<div class='ipsPad'>
				<!-- Large Date -->
				<div class='kc_date_wrap' style="float: left; text-align: center;">
				    <span class='kc_date_day'>{expression="\IPS\DateTime::ts($topic->mapped('date'))->strFormat( '%e' )"}</span><br />
				    <span class='kc_date_monthyear'>{expression="\IPS\DateTime::ts($topic->mapped('date'))->strFormat( '%b %G' )"}</span>
				</div>
					<div class='ipsType_normal ipsType_richText' data-ipsTruncate data-ipsTruncate-size="10 lines">
						<span class=''>{$topic->content()|raw}</span>
					</div>

			</div>
		</div>
	{{endforeach}}
{{endif}}

 

[AlexJ]

How do I make a layout something like this? All the layout for page builder have side bar only on right side  - 

 

[opentype]

26 minutes ago, AlexJ said:

How do I make a layout something like this?

That’s not a directly supported layout. You would have to code that manually from scratch and of course also deal with the responsiveness yourself. 

You can however set the main column to have 1, 2, or 3 colums as option of Page Builder pages.