Element „Frame” — instrukcja do szablonu „Vega 2.0”

Element „Frame” do szablonu graficznego „Vega 2.0” to gotowa do dostosowania sekcja kodu, którą można wykorzystać w dowolnym miejscu podczas tworzenia stron w witrynie, w tym wewnątrz bloków.

Przed użyciem kodu elementa przeczytaj instrukcję dotyczącą wywoływania bloków na dodatkowych stronach - Czytaj dalej

<!-- Element „Frame” -->
{$props = [
    'no_margin' => '',
    'color_scheme' => 'secondary',
    'content' => '<h2>Hello, world!</h2>',
    'columns' => 'one',
    'full_height' => '',
    'container' => '',
    'attributes' => '',
    'classes' => ''
]}
{call add_element element="frame" props=$props}

Właściwość 'content' może być wygodnie renderowana do osobnej zmiennej, gdy masz dużo treści. Przykład:

<!-- Umieść kod wewnątrz zmiennej content -->
{capture assign="content"}
    <h2>Hello, world!</h2>
{/capture}

<!-- Element „Frame” -->
{call add_element element="frame" props=[
    'no_margin' => '',
    'color_scheme' => 'secondary',
    'content' => $content
]}

W tym elemencie można umieścić nie tylko kod HTML, ale także inne elementy szablonu. W razie potrzeby można utworzyć kilka kolumn.

<!-- Zawartość pierwszej kolumny w zmiennej $left -->
{capture assign="left"}
    <!-- Element „Tytuł” -->
    {$props = [
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing.',
        'size' => 'medium, H2',
        'align' => 'left',
        'animation' => '',
        'gap' => '1',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="title" props=$props}

    <!-- Element „Tekst” -->
    {$props = [
        'content' => '<p>Lorem ipsum dolor sit amet Accusamus alias aliquid animi aut consequatur est eum exercitationem libero magni modi nulla officiis pariatur velit vero vitae?</p> <p>Ab consectetur cumque cupiditate dignissimos doloribus eius facere impedit natus obcaecati qui quis reprehenderit ut voluptas?</p>',
        'size' => 'medium',
        'align' => 'left',
        'column_count' => '',
        'width' => '800',
        'gap' => '1',
        'animation' => '',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="text" props=$props}

    <!-- Element „Przycisk” -->
    {$props = [
        'mode' => 'link',
        'url' => '#',
        'type' => 'primary',
        'size' => 'large',
        'width' => 'wide',
        'text' => 'Show more',
        'ymtarget' => '',
        'anchor' => '1',
        'animation' => '',
        'gap' => '1',
        'container' => '',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="button" props=$props}
{/capture}

{capture assign="right"}
    <!-- Element „Opinia” -->
    {$props = [
        'template' => 'review-one',
        'color_scheme' => 'secondary',
        'text' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit Accusamus alias aliquid animi aut consequatur distinctio dolore ea eligendi est eum exercitationem libero magni modi nulla officiis.',
        'name' => 'John Smith',
        'description' => 'Software developer',
        'image' => 'img/placeholders/100x100-user.png',
        'url' => '#',
        'width' => '500',
        'animation' => '',
        'gap' => '1',
        'attributes' => '',
        'classes' => ''
    ]}
    {call add_element element="review/`$props.template`" props=$props}
{/capture}

<!-- Element „Frame” -->
{call add_element element="frame" props=[
    'no_margin' => '',
    'color_scheme' => 'secondary',
    'content' => [$left, $right],
    'columns' => 'two'
]}

Możliwe konfiguracje dla elementu „Frame”