Build Sections with Shortcodes

Marketplace Forums Themes Cannyon Cannyon Premium Build Sections with Shortcodes

This topic contains 2 replies, has 3 voices, and was last updated by  NairaBrar 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #4307

    mythemes
    Keymaster

    So with Cannyon Premium it is possible to create custom sections for each page.

    By using shortcodes: [content ...], [boxed ...], [mask ...] and others.
    By using these shortcodes can easily create sections like the following: example 1, example 2, example 3.

    Actually the Front Page from our demo is built just with SECTIONS. You can download our export file ( including all pages, articles and forms ). You can also get the Front Page content ( text format ) like in WordPress Editor ( on edit page or / and article, Text Mode ).

    Let’s take a look over the shortcodes.

    NOTICE: I recommend to use the shortcodes below just with the full width layout pages. That allow you to create nice landing pages. The shortcodes work on pages with sidebar layout but I think these shortcodes look better on full width layout.


    1. Shortcode [content ...]

    Shortcode [content ...] creates a full width area what wraps any content. Important, you can’t include this shortcode in the content of another shortcode. So you can’t wrap this shortcode with another.

    example how the shortcodes CAN’T be used [content ... ]:

    [shortcode_wrapper]
        [content ... ]
    
            Any text Here or another Shortcodes ...
    
        [/content]
    [/shortcode_wrapper]
    

    Actually this shortcode creates a big wrapper ( primary wrapper ) and from this reason it can’t be used inside other shortcodes ( except multilanguage shorcodes ). Multilanguage shortcodes create multiple versions of one pages in different languages and do not affect the WEB structure of the content ( HTML Content ).

    Why you need to create a full width area ?

    The full width area ( section ) delimit different type of content or you can highlight any content of page.

    I create a special demo on our test website where you can preview the examples.

    Before trying the examples below you have to follow next steps:

    1. Upgrade the Cannyon Premium to Latest Version
    2. Go to Admin Dashboard › Appearance › Customize › Homepage Settings
    3. Customize › Homepage Settings – setup “A static page”, Create Pages and Save Options
    4. Go to Edit “A static page” – Front Page
    5. Disable Top and Bottom Spaces like in the screenshot

    So now let’s Start with a simple Example:

    Section eg. 1:

    [content text_align="center" inner="50"]
    
        Any text here or / and other shortcodes ...
    
    [/content]
    

    Add this and other examples in your WordPress Page Editor ( Text Mode ) – see screenshot.

    Attributes

    The text_align="center" and inner="50" are shortcode attributes. the attributes allow you to customize the shortcode [content ... ] for your needs.

    1. text_align="center" – aligns text to middle of page ( you can try to remove this attribute to see what happens ).
    2. inner="50" – this attribute adds 50px space inner section ( before and after content ).

    Attribute bg_color="..."

    Attribute bg_color="..." customizes the section background color. Below is an example with attribute that change the section background color. In our demo you can see a section with white background color.

    Section eg. 2:

    [content bg_color="#ffffff" text_align="center" inner="80"]
    
        The Section with white background color ( hex color code #ffffff )
    
    [/content]
    

    Attribute bg_image="..."

    Attribute bg_image="..." customizes the section background image. Below is an example with attribute that changes the section background image. In our demo you can see a section with umbrellas

    Section eg. 3:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/umbrella.jpg" text_align="center" inner="120"]
    
        The Section with a background Image.
    
    [/content]
    

    The attribute bg_image="..." can be used together with attribute effect="...". By default the background image effect value is parallax.
    Available values for attribute effect: parallax (by default), covered, screen-covered, parallax-scene.

    Attribute effect="..."

    Attribute effect="..." can have following values:

    parallax – parallax background image effect ( visible when scrolling content )
    covered – static background image. Background image fills all section space. On scroll image is static relative to section.
    screen-covered – background image is expanded and fill all device screen size. On scroll the background image is static relative to screen and dynamic relative to section.
    parallax-scene – the background is dynamic. The background moves in the opposite direction of the mouse cursor movement when the mouse cursor is moved ( left right up down ) over the section.

    Section eg. 4:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/architecture.jpg" effect="screen-covered" text_align="center" inner="140"]
    
        The Section with a background Image with effect - screen-covered.
    
    [/content]

    Try to change the effect value to see in action.

    Attribute color="..."

    Attribute color="..." customizes the section text color. Below is an example with attribute that change the section text color.

    Section eg. 5:

    [content bg_color="#1b1f23" color="#26ad60" text_align="center" inner="80"]
    
        The Section with dark background color ( hex color code #1b1f23 ) and Green text color
    
    [/content]

    Also if you want to add some text with different colors you can use tag <span style="color: #ffffff"> ... </span>

    Section eg. 6:

    [content bg_color="#0f1315" color="#ffffff" text_align="center" inner="80" id="section-6"]
    
        <h1><span style="color: #26ad60">Green Headline</span></h1>
    
        The Section with dark background color ( hex color code #0f1315 ), Green Headline and White text color
    
    [/content]

    OR

    [content bg_color="#0f1315" color="#ffffff" text_align="center" inner="80" id="section-6"]
    
        <h1 style="color: #26ad60">Green Headline</h1>
    
        The Section with dark background color ( hex color code #0f1315 ), Green Headline and White text color
    
    [/content]

    2. Shortcode [mask ...]

    The shortcode [mask ... ] creates a semitransparent foil between section background image and section content.
    This foil fills all section content and improve the contrast between section background image and section content ( text content).
    For this reason it is very important, the shortcode [mask ... ], needs to be the first element wrapped by shortcode [content ... ].

    Section eg. 7:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/white-flowers.jpg" effect="parallax-scene" color="#ffffff" text_align="center"]
    [mask bg_color="#000000" bg_opacity="80" inner="160"]
    
        <h1><span style="color: #26ad60">White Flowers</span></h1>
    
        The Section with dark mask, Green Headline and White text color
    
    [/mask]
    [/content]

    As you can see the shortcode [content ... ] wraps the shortcode [mask ... ] and the shortcode [mask ... ] wraps the content. It is very important not to have lines between these 2 wrappers.

    example how CAN’T be used:

    [content ... ]
    
    [mask ... ]
    
    	...
    

    AND / OR

    	...
    
    [/mask]
    
    [/content]
    

    The problem is on the blank line between [content ... ] and [mask ... ] AND / OR [/mask] and [/content].
    This is not working because the WordPress Editor fills the blank line with empty paragraphs.
    These paragraphs ( empty ) have margins and between 2 sections can be displayed as blank space and finally this integration can be ugly.

    Content VS Mask Attributes

    How you can observe the attribute inner="..." is missing on shortcode [content ... ] and the shortcode [mask ... ] has attribute inner="160".
    So if the shortcode [content ... ] wraps the shortcode [mask ... ] then the attribute inner="..."doesn’t work for shortcode [content ... ] and this is why we used the attribute inner="160" for shortcode [mask ... ].

    Mask Attributes

    1. bg_color="#000000" – this attribute works like for shortcode [content ... ] ( customizes the mask background color ).
    2. bg_opacity="80" – this attribute customizes the mask transparency. The attribute value is scaled in percents from 0 to 100.


    3. Shortcode [boxed ... ]

    The shortcode [boxed ... ] limits the width of the section content and align to center of webpage. If you will use the shortcode [content ... ] with more content then the content will fill all section

    Section eg. 8:

    [content bg_color="#ffffff" text_align="center" inner="80"]
    
        <h1>Section with more Content</h1>
    
    	Cras imperdiet, erat vel ullamcorper euismod, turpis ex hendrerit nisi, sit amet finibus ante nulla ut velit. Quisque nec commodo justo. Quisque consectetur, magna id molestie semper, lacus quam vestibulum elit, eget hendrerit ex leo sit amet lectus. Quisque consectetur volutpat tellus, semper blandit quam fringilla sit amet. Aliquam erat volutpat. Ut et lacus sed mi interdum pretium. Nulla porta tellus quam, fringilla semper dolor ullamcorper a. Nullam vitae justo sit amet neque interdum dictum gravida nec est. Duis elementum tortor sed dignissim faucibus. Morbi non pharetra ipsum. In ultrices lacinia est, sit amet malesuada eros.
    
    	Cras et vulputate eros. Ut lacinia arcu metus. Donec posuere velit et tortor fringilla, ac fermentum neque iaculis. Ut elit dolor, vestibulum quis venenatis nec, mattis eget orci. Mauris commodo nisi non tortor cursus viverra. Nam tellus nisl, semper ut sagittis eu, vehicula sed est. Maecenas quis ante sit amet mauris interdum tempor a vitae lectus.
    
    	Proin in odio luctus odio fermentum sollicitudin. Etiam fermentum nisl nec lacinia ullamcorper. Mauris eu laoreet mi. Nunc ultrices ipsum eu magna pulvinar sollicitudin. Etiam elementum nulla justo, vel cursus dui imperdiet sed. Donec commodo dignissim tellus ullamcorper gravida. Etiam eget mollis arcu, quis eleifend nisl. Mauris accumsan placerat ex in mattis. Vestibulum pulvinar odio ac vulputate tincidunt.
    
    [/content]

    Below you can see an example how to limit the section content width.

    Section eg. 9:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/winter-river.jpg" inner="100"]
    [boxed]
    
        <h1>Boxed Section with more Content</h1>
    
    	Cras imperdiet, erat vel ullamcorper euismod, turpis ex hendrerit nisi, sit amet finibus ante nulla ut velit. Quisque nec commodo justo. Quisque consectetur, magna id molestie semper, lacus quam vestibulum elit, eget hendrerit ex leo sit amet lectus. Quisque consectetur volutpat tellus, semper blandit quam fringilla sit amet. Aliquam erat volutpat. Ut et lacus sed mi interdum pretium. Nulla porta tellus quam, fringilla semper dolor ullamcorper a. Nullam vitae justo sit amet neque interdum dictum gravida nec est. Duis elementum tortor sed dignissim faucibus. Morbi non pharetra ipsum. In ultrices lacinia est, sit amet malesuada eros.
    
    	Cras et vulputate eros. Ut lacinia arcu metus. Donec posuere velit et tortor fringilla, ac fermentum neque iaculis. Ut elit dolor, vestibulum quis venenatis nec, mattis eget orci. Mauris commodo nisi non tortor cursus viverra. Nam tellus nisl, semper ut sagittis eu, vehicula sed est. Maecenas quis ante sit amet mauris interdum tempor a vitae lectus.
    
    	Proin in odio luctus odio fermentum sollicitudin. Etiam fermentum nisl nec lacinia ullamcorper. Mauris eu laoreet mi. Nunc ultrices ipsum eu magna pulvinar sollicitudin. Etiam elementum nulla justo, vel cursus dui imperdiet sed. Donec commodo dignissim tellus ullamcorper gravida. Etiam eget mollis arcu, quis eleifend nisl. Mauris accumsan placerat ex in mattis. Vestibulum pulvinar odio ac vulputate tincidunt.
    
    [/boxed]
    [/content]
    

    The boxed content can be normal ( attribute type="normal" or without attribute ) when the width of the content is exactly equal with the page layout ( max width 1140px ) and the boxed content can be 50% of the page layout ( attribute type="half" ).

    Section eg. 10:

    [content bg_color="#ffffff"  text_align="center" inner="100"]
    [boxed type="half"]
    
        <h1>Boxed type Half Width</h1>
    
    	Cras imperdiet, erat vel ullamcorper euismod, turpis ex hendrerit nisi, sit amet finibus ante nulla ut velit. Quisque nec commodo justo. Quisque consectetur, magna id molestie semper, lacus quam vestibulum elit, eget hendrerit ex leo sit amet lectus. Quisque consectetur volutpat tellus, semper blandit quam fringilla sit amet. Aliquam erat volutpat. Ut et lacus sed mi interdum pretium. Nulla porta tellus quam, fringilla semper dolor ullamcorper a. Nullam vitae justo sit amet neque interdum dictum gravida nec est. Duis elementum tortor sed dignissim faucibus. Morbi non pharetra ipsum. In ultrices lacinia est, sit amet malesuada eros.
    
    [/boxed]
    [/content]
    

    Also very important not put blank lines between [content ... ] and [boxed ... ] AND / OR [/boxed] and [/content] same reason as for shortcodes [content ... ] and [mask ... ] AND / OR [/mask] and [/content].


    4. Shortcodes Combinations [content ...], [mask ...] and [boxed ...]

    So now we can try combine these shortcodes to build nice sections.

    eg. of wrapping order:

    [content ... ]
    [mask ... ]
    [boxed ... ]
    
    [/boxed]
    [/mask]
    [/content]

    if you will change the order eg:

    [content ... ]
    [boxed ... ]
    [mask ... ]
    
     ...
    
    [/mask]
    [/boxed]
    [/content]

    You will build something like in example below:

    Section eg. 11:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/mountains.jpg" inner="60"]
    [boxed inner="60"]
    [mask bg_color="#ffffff" bg_pacity="80" inner="60"]
    
    	<div style="padding: 0px 60px;">
            <h1>Content, Boxed and Mask</h1>
    
    	    Cras imperdiet, erat vel ullamcorper euismod, turpis ex hendrerit nisi, sit amet finibus ante nulla ut velit. Quisque nec commodo justo. Quisque consectetur, magna id molestie semper, lacus quam vestibulum elit, eget hendrerit ex leo sit amet lectus. Quisque consectetur volutpat tellus, semper blandit quam fringilla sit amet. Aliquam erat volutpat. Ut et lacus sed mi interdum pretium. Nulla porta tellus quam, fringilla semper dolor ullamcorper a. Nullam vitae justo sit amet neque interdum dictum gravida nec est. Duis elementum tortor sed dignissim faucibus. Morbi non pharetra ipsum. In ultrices lacinia est, sit amet malesuada eros.
    	</div">
    
    [/mask]
    [/boxed]
    [/content]
    

    And now try with full width mask:

    Section eg. 12:

    [content bg_image="http://test.mythem.es/section-cannyon-premium/files/2018/02/sea.jpg" color="#ffffff"]
    [mask bg_color="#660000" bg_pacity="50"]
    [boxed inner="120"]
    
        <h1>Content, Boxed and Mask</h1>
    
    	Cras imperdiet, erat vel ullamcorper euismod, turpis ex hendrerit nisi, sit amet finibus ante nulla ut velit. Quisque nec commodo justo. Quisque consectetur, magna id molestie semper, lacus quam vestibulum elit, eget hendrerit ex leo sit amet lectus. Quisque consectetur volutpat tellus, semper blandit quam fringilla sit amet. Aliquam erat volutpat. Ut et lacus sed mi interdum pretium. Nulla porta tellus quam, fringilla semper dolor ullamcorper a. Nullam vitae justo sit amet neque interdum dictum gravida nec est. Duis elementum tortor sed dignissim faucibus. Morbi non pharetra ipsum. In ultrices lacinia est, sit amet malesuada eros.
    
    [/boxed]
    [/mask]
    [/content]
    

    Here you can download ( text format ) the final code of the page builded from examples above.

    #4795

    ok

    #8535

    NairaBrar
    Member

    Thanks this is great!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

[email protected]