Sencillo
Simple & Easy to Use Wordpress Theme

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page contact form !
Or you can connect us via real time support: Live Chat .

Online Documetation

About Sencillo

Sencillo is an highly customizable Wordpress child theme based on Layers Framework . It can be use for any blog, portfolio or creative purpose, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail.
Take a look at the demos for possibilities of Sencillo.



Note: All premium images used in theme for demo purpose only and not allow to use for personal or commercial purpose. If you like to use same images or looking for new image you may buy them from depositphotos.com or bigstockphoto.com . You can try unsplash.com for free images.

Installation & Setup

WordPress Information & Installation INstallation

To install this theme you must have a latest version of WordPress already installed.

Configure WordPress

Layers depends on a few settings for optimal content presentation and functionality:

  1. Go to SettingsPermalinks and ensure anything but the default is selected. Post Name is recommended
  2. Go to SettingsMedia and ensure your settings are as follows:
    • Thumbnails: This is up to you, but we recommend 300×300
    • Medium: 600 wide and 9999 tall. This creates a 600px wide scaled version of uploaded images that are larger than 600px and is used by Layers in your widgets in some configurations.
    • Large: You can leave this be or change the height to 9999 to ensure portrait oriented images are never cropped. Or you can set 1000 wide or more and 9999 tall to crop it.
  3. If you have images in WordPress already, you will need to Regenerate your Images

Click Here for Detail Article

Wordpress Admin Settings Media

Layers Theme Framework Information & Installation Installation

Watch Video Help / Youtube Link [HD]

Layers is a theme framework for the WordPress publishing platform. Hopefully you already know what WordPress is and how to use it. If not, you can find some excellent starting videos and guides here: https://wordpress.org/

The World's most user friendly WordPress Theme. Layers is a WordPress Theme with a point-and-click site builder so simple, you'll be a pro the first time you use it.

Install Theme via WordPress Admin Installation

Note: Layers theme framework should be installed.

Important: One of the most common reasons people have issues is because they try to upload the Full zip downloaded from themeforest.net. Please make sure you are uploading only the installable theme which is called "sencillo.zip" inside the "theme-packages" folder.

Step 1: Make sure WordPress Is Up To Date

Please make sure WordPress is fully up to date before installing the theme! You should always be running the latest version of WordPress, because otherwise you put your whole site at risk for potential threats. Never use an outdated version of WordPress!

Step 2: Install Via WordPress Admin

  1. Log into your WordPress Admin and open AppearanceThemes
  2. Click on Add New
  3. Next click on Browse and then choose sencillo.zip from downloaded theme package
  4. Now click Install Now button
  5. Once WordPress has unpacked and installed the theme, just click on Activate
  6. After activation of the theme, Require and Recommended plugin installation alert message will appear, Just click on the begin installation and select Sencillo Extension to complete the installation process by installing require Sencillo Extension. You can also select recommendaed plugin if you want to use them.

Install Theme via FTP Installation

Note: Layers theme framework should be installed.


Important: One of the most common reasons people have issues is because they try to upload the Full zip downloaded from themeforest.net. Please make sure you are uploading only the installable theme which is called "sencillo" inside the "theme-packages" folder.

Step 1: Make sure WordPress Is Up To Date

Please make sure WordPress is fully up to date before installing the theme! You should always be running the latest version of WordPress, because otherwise you put your whole site at risk for potential threats. Never use an outdated version of WordPress!

Step 2: Install Via FTP

  1. Login into your server via FTP access and browse to folder located at wp-content/themes.
  2. Unzip downloaded themeforest.net zip file and find the folder theme-packages and upload sencillo from the theme-packages.
  3. Now login into your WordPress admin and navigate to AppearanceThemes to activate "sencillo".
  4. After activation of the theme, Require and Recommended plugin installation alert message will appear, Just click on the begin installation and select Sencillo Extension to complete the installation process by installing require Sencillo Extension. You can also select recommendaed plugin if you want to use them.

We are using FileZilla FTP to upload theme

Plugin Installation Installation

Watch Video Help / Youtube Link [HD]

WordPress Plugins are composed of PHP scripts that extend the functionality of WordPress. They offer new additions to your blog that either enhance features that were already available or add otherwise unavailable new features to your site.

  • How to install Plugin in wordpress.

We have five third party recommended plugins using in our theme.

Importing The Sample Data Installation

Note: Premium images used in demo not included with sample data.

Note: We do not recommend this if you have existing content in your WordPress installation, as it will add numerous posts, categories, media and more to your site.

How to Import the Sample Data

  1. Log into your dashboard and navigate to Tools > Import and choose the 'WordPress' importer.
  2. Upload the sencillo_sample_data.xml from sencillo-layers-wordpress-theme > sample_data folder and click the 'Upload file and import'.
  3. Now create or assign existing user and select 'Download and import file attachments' if you like to import images with sample data.
  4. It will take few minutes to import sample data, after success message you can start customization of your site.

This sample data only import post, categories, images etc.

Layers Presets Pages

For pages you can use presets page layout right from the menu Layers > Add New Page and select any sencillo preset layout to create page and you can customize it from live customizer.

All presets layout created using Layers Widget so that you can edit them easily from customizer.

You can also create your own page with layers widgets from blank page.

  • How to use Sencillo Layers Widget
  • Site Setting Theme Costomization

    Logo & Title Site Setting

    Simple and easy to use live customizer image logo and site title options. You can upload image logo and resize its using size option or use 650+ google fonts for your site title and add color, size spacing etc using live customizer.

    How to customize logo or site title using live customizer: Watch Video Help / Youtube Link [HD]

    LayersCustomizeSite Settings Logo & Title

    Fonts Site Setting

    LayersCustomizeSite Settings Fonts

    Typekit

    Sencillo layers font options offer a Typekit integration field where you only need to enter your TypeKit ID. Whichever font is set for your domain on your Typekit account will be automatically pulled in when Layers loads.

    • Follow the link if you have Typekit account

    Google Font

    Watch Video Help / Youyube Link [HD]

    Sencillo layers bundles a simple font customization tool that lets you choose a Google webfont for Headings/Titles, body text and buttons which you can access from LayersCustomize under Site Settings. Simply choose your desired font from each drop-down. You may preview fonts in advance by visiting the Google Fonts page.

    Static Front Page Site Setting

    By default, WordPress shows your latest posts in reverse chronological order on the front page of your site. Many WordPress users want a static front page or splash page as the front page instead. You can do it from here.

    LayersCustomizeSite Settings Static Front Page

    Colors Site Setting

    Watch Video Help / Youtube Link [HD]

    Colors tab allow you to choose body background color, body text color, headings color, links and selection text etc.

    LayersCustomizeSite Settings Colors

    Buttons Site Setting

    Watch Video Help / Youtube Link [HD]

    Global button options for theme allow you to design your own button style.

    LayersCustomizeSite Settings Buttons

    Additional Scripts Site Setting

    From additional script tab you can setup "Google Analytics ID", 'Google Maps API Key' or any custom scripts in header .

    If you would like to use google map in contact page then you have to create Google Map API Key from your google account.

    LayersCustomizeSite SettingsAdditional Scripts

    Page title Header

    Page title option would be applicable for pages, post archive, single post and other pages, which could be display breadcrumbs, title and description(excerpt).

    LayersCustomizeHeaderPage Title

    Styling Header

    Styling header with live customizer is too easy, you can change background, padding from top and bottom, social icon setting, layout, border, logo position and more as your requirement.

    LayersCustomizeHeaderStyling

    Blog Theme Costomization

    Single Post Blog

    Single Post have many options to customize design like color, style and layout, you can watch video guide or screenshot help details for more information.

    LayersCustomizeBlogSingle Post

    Find the single post customizer options on below screenshot.

    Archive Blog

    WordPress archives(categories) let you customize the standard wordPress listing pages and with the sencillo customizer options you can do it easily.

    LayersCustomizeBlogArchive

    Find the pages customizer options on below screenshot.

    Pages Theme Costomization

    Pages have options to customize design like title, layout, colors etc, video guide will help you to know how options work from live customizer.

    Note: This setting is not applicable for layers pages

    LayersCustomizePages

    Find the pages customizer options on below screenshot.

    Social Media Theme Costomization

    This tab is for setup your social profile which will display in Header and Footer according to your settings.

    Available social media options: Facebook, Twitter, Google Plus, Pinterest, Tumblr, Instagram, Github, Behance, Vk, Flickr, Dribbble, Linkedin.

    You may ask for missing social site and if possible we will try to add option in future release.

    LayersCustomizeSocial Media

    CSS Theme Costomization

    This section is where all Custom CSS is housed for your site and is primarily used by front-end designers.

    LayersCustomizeCSS

    Layers Widgets Widgets

    Sencillo Slider Layers Widgets

    The Sencillo Layers Slider Widget is incredibly versatile and can be used as a traditional content slider, a jumbo layout section, Call-To-Action bar, or slideshow, just to name a few! This guide outlines the widget's options.

    When you add a new Slider widget, or if you have created a page using one of the Preset layouts, the Slider will display with some default settings and content.

    Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout Slider

    This section sets the Slider's overall size

    • Boxed will limit the width of the slider to 1040px by default and center it.
    • Full Width will allow the slider to span the entire browser window and is the default.
    • Full Screen will set the slides to fill the entire height and width of the user's browser window.

    2. Slider Slider

    This section sets the slider's overall style.

    Auto-Height Slides

    Check this box if you want slides to automatically adjust the slider's height based on the content/image size of the first visible slide.

    This setting is ignored if Full Screen Layout is chosen.

    Slider Height

    The slider is 550 pixels tall by default. If you would like to make it shorter or taller, enter your desired value here (minimum of 100)

    To fit a default size Title, Description and Button, you must set it to at least 180.

    Note: When using the Full Width Layout and setting a Slider Height of more than about 720 pixels, you will be forcing visitors with smaller screens to scroll to view the entire slider. Consider using the Full Screen slider layout instead.

    Show Slider Arrows

    Check this option if you want the left and right slider arrows to show when the mouse hovers over the slide. If your widget only has one slide, this option is ignored.

    Arrows are best if you want your visitors to be able to click back and fourth on their own. We do not recommend enabling arrows if you have Auto-Play enabled.

    Show Slider Dots

    Check this option to show navigation dots at the bottom of the slider. These can be used alone or in combination with the arrows, but are best used when you have the slider set to auto-slide (when the arrows should be disabled)

    Slider Controls Color

    Choose a color for your arrows or dots (white by default)

    Animation Type

    This option controls the slide effect. Choose from a traditional Slide (right to left), Fade, or Parallax. The Parallax option will animate the slider content separately from the background when the slider is advanced or auto-played (not when scrolled!)

    Auto-play Slides

    Check this option if you would like your slider to advance automatically. This option should not be used if you have Featured Video in any of your slides.

    3. Slide Options Slider

    The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget where content areas are present. A content area is typically a slide, column, tab, accordion or other repeatable area.

    Background

    The widget Background option sets a color or background image for the content area of the widget, such as individual slides or columns.

    Background Color Background

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the text in this content area is black or white by default.
    • Setting a background in Content Widget columns will add 20px of padding around the column.
    Background Image Background

    Click Choose Image and upload or select an image to fill the content area behind your text with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat Background

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position Background

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch Background

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken Background

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    Featured Media

    This setting adds an image or oEmbed media to the content area of your slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

    Featured Image Featured

    Click CHOOSE IMAGE and upload or select an image from your Media Library.

    • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.
    Video URL(oEmbed) Featured
    • This field takes any oEmbed content URL
    • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
    • The URL is copied from the "Share" link on the audio or video player.
    • oEmbed media will take the place of Featured Images
    Image Ratio Featured

    The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

    The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px wide.

    • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
    • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
    • Square: crops your image to 480x480 from center
    • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
    • Circle: Sets a radius on your image. To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.
    Image Align Featured

    The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

    • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
    • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.
    Title One

    The Title One option controls the styling of the title within the content area.

    Text Align Title One

    Alignment of the all slide content.

    Titles Background Title One

    Backgroudn of the all slide content.

    Title Size Title One

    Set the font size of title.

    Title Color Title One

    Set the font Color of title.

    Title Font Weight Title One

    Set the font Weight of title.

    Title Letter Spacing Title One

    Set the Letter Spacing of title.

    Title Bottom Margin Title One

    Set the Bottom Margin of title.

    Title Two

    All options will work same as Title One.

    Excerpt

    The Text option controls the styling of the excerpt within the content area.

    Excerpt Size Excerpt

    Set the Font Size of excerpt.

    Excerpt Color Excerpt

    Set the Font Color of excerpt.

    Excerpt Font Weight Excerpt

    Set the Font Weight of excerpt.

    Excerpt Letter Spacing Excerpt

    Set the Letter Spacing of excerpt.

    Excerpt Bottom Margin Excerpt

    Set the Bottom Margin of excerpt.

    Button

    The Text option controls the alignment and styling of the title and excerpt within the content area.

    Button Text Button

    Set the Text Color of button.

    Button Border Button

    Set the Border Color of button.

    Button Background Button

    Set the Background Color of button.

    Button Font Weight Button

    Set the Font Weight of button.

    Button Height Button

    Set the Height of button.

    Button Border Width Button

    Set the Border Width of button.

    Button Rounded Corners Button

    Set the Rounded Corners of button.

    Button Text Hover Button

    Set the Text Hover of button.

    Button Border Hover Button

    Set the Border Hover of button.

    Button Background Hover Button

    Set the Background Hover of button.

    Advanced

    The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

    Custom Classes Advanced

    You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget.

    • Add class names without a dot. Example: feature-column and not .feature-column
    • Class names should be unique. Example: my-feature-column has a better chance of being unique, column is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.

    4. Slider Content Slider

    You may enter a title, short description or link here, if desired, or leave these sections blank to display background image.

    Title One/Title Two Slider Content

    Sets the heading of text in the content area, affected by the Slide Options Title One/Title Two settings. Leave blank for no heading.

    Excerpt Slider Content

    The Excerpt includes rich text editing and supports basic HTML input via the Code view, much like the WordPress editor.

    • For best results, limit your content to brief, list-style or pointed text, keeping mobile users in mind.
    • Large amounts of text may not fit in the slider on mobile screens.
    Excerpt: Code View Slider Content
    • You cannot put scripts into this field such as javascript snippets
    • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
    • Shortcodes are OK, but the element pulled in may not jive well with the slide's design limitations and may require Advanced CSS styling.
    Linking (Button) Slider Content

    The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site.

    • To create a button, enter the link text into the TEXT field
    • Select Custom or Existing Content from the LINK drop-down
    • Enter the full URL (if Custom) or search for the page or post title you want to link to and select it
    • To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

    5. Adding Slides Slider

    Add, simply click the +ADD NEW SLIDE button. This will duplicate your last slide to help speed up customization.

    6. Deleting Slides Slider

    Delete, click the pencil icon in the right corner of the column's title bar to expand it, then click the red trash-can icon.

    7. Advanced Slider

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Content Layers Widgets

    When you add a new Content widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

    You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    When you add a new Content widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

    You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout Content

    This section sets the widget content's width. The widget itself will always be full width to the page.

    • Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
    • Full Width will expand the widget content to the width of the page. This also makes each column wider.

    2. List Style Content

    • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
    • Masonry allows each column block to fit together at various heights (such as Pinterest)

    The gutter option controls the margins/spacing between blocks. Uncheck it to remove spacing.

    3. Title/Subtitle Content

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Title Style

    It has two style vertical and horizontal, which you can style using below setting.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    4. Background Content

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    5. Widget Options Content

    The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget, much like the WordPress post editor.

    Background

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    Featured Media

    This setting adds an image or oEmbed media to the content area of your slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

    Featured Image Featured

    Click CHOOSE IMAGE and upload or select an image from your Media Library.

    • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.
    Video URL(oEmbed) Featured
    • This field takes any oEmbed content URL
    • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
    • The URL is copied from the "Share" link on the audio or video player.
    • oEmbed media will take the place of Featured Images
    Image Ratio Featured

    The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

    The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px wide.

    • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
    • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
    • Square: crops your image to 480x480 from center
    • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
    • Circle: Sets a radius on your image. To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.
    Image Align Featured

    The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

    • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
    • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.
    Column Width

    The column width option is available in the Content widget, or custom widgets using Columns, and sets the width of this specific column to a fraction of 12. This takes a little bit of basic math:

    • The grid in Layers has 12 possible columns per row.
    • For an individual column to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
    • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
    • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
    • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other (9+3=12)

    You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

    Advanced

    The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

    Custom Classes Advanced

    You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget.

    • Add class names without a dot. Example: feature-column and not .feature-column
    • Class names should be unique. Example: my-feature-column has a better chance of being unique, column is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.
    Padding

    Adds the specified amount of padding in pixels to the inside of the content area. This is useful for designs where you want your text to be centered inside a larger colored block, etc

    Margin

    Adds the specified amount of margin to the outside of the content area. We only allow you to adjust the top and bottom as the left and right margins are pre-defined parts of the grid. If you need to remove the space between columns, uncheck the Gutter option in the Display option of the Design Bar.

    6. Column Style Content

    Title

    Sets the heading of your column content, or may be left blank.

    Click Column Style to set aligment, color, size etc.

    Excerpt

    This field works like the Description field and can take a small amount of text or basic HTML. This field may optionally be left blank.

    • You cannot put scripts or javascript snippets into this field!
    • You can use shortcodes
    • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

    Click Column Style to set aligment, color, size etc.

    7. Insert Link (Button) Content

    The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the column's Title and Featured Image, in addition to any button element you create.

    Click Column Style to set aligment, color, size etc.

    • To create a button, enter the link text into the TEXT field
    • Select Custom or Existing Content from the LINK drop-down
    • Enter the full URL (if Custom) or search for the page or post title you want to link to and select it
    • To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

    8. Adding Columns Content

    To add more column blocks, simply click the +ADD NEW Column button. This will duplicate your last column block to help speed up customization.

    9. Deleting Columns Content

    To delete a column block, click the pencil icon in the right corner of the column's title bar to expand it, then click the red trash-can icon.

    10. Advanced Content

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Portfolio Layers Widgets

    When you add a new Portfolio Widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings and content.

    Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout Portfolio

    This section sets the widget content's width. The widget itself will always be full width to the page.

    • Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
    • Full Width will expand the widget content to the width of the page. This also makes each column wider.

    2. List Style Portfolio

    • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
    • Masonry allows each column block to fit together at various heights (such as Pinterest)

    The gutter option controls the margins/spacing between blocks. Uncheck it to remove spacing.

    3. Title/Subtitle Portfolio

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Title Style

    It has two style vertical and horizontal, which you can style using below setting.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    4. Background Portfolio

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Choose Repeat only if you want

    Background Repeat

    your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    5. Widget Options Portfolio

    The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget, much like the WordPress post editor.

    Background

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    Featured Media

    This setting adds an image or oEmbed media to the content area of your slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

    Featured Image Featured

    Click CHOOSE IMAGE and upload or select an image from your Media Library.

    • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.
    Image Ratio Featured

    The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

    The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px wide.

    • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
    • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
    • Square: crops your image to 480x480 from center
    • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
    • Circle: Sets a radius on your image. To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.
    Column Width

    The column width option is available in the Content widget, or custom widgets using Columns, and sets the width of this specific column to a fraction of 12. This takes a little bit of basic math:

    • The grid in Layers has 12 possible columns per row.
    • For an individual column to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
    • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
    • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
    • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other (9+3=12)

    You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

    Advanced

    The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

    Custom Classes Advanced

    You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget.

    • Add class names without a dot. Example: feature-column and not .feature-column
    • Class names should be unique. Example: my-feature-column has a better chance of being unique, column is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.
    Padding

    Adds the specified amount of padding in pixels to the inside of the content area. This is useful for designs where you want your text to be centered inside a larger colored block, etc

    Margin

    Adds the specified amount of margin to the outside of the content area. We only allow you to adjust the top and bottom as the left and right margins are pre-defined parts of the grid. If you need to remove the space between columns, uncheck the Gutter option in the Display option of the Design Bar.

    6. Column Style Portfolio

    Title

    Sets the heading of your column content, or may be left blank.

    Click Column Style to set aligment, color, size etc.

    Category

    Sets the category of your column content, or may be left blank.

    Click Column Style to set aligment, color, size etc.

    Excerpt

    This field works like the Description field and can take a small amount of text or basic HTML. This field may optionally be left blank.

    • You cannot put scripts or javascript snippets into this field!
    • You can use shortcodes
    • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

    Click Column Style to set aligment, color, size etc.

    7. Insert Link (Button) Portfolio

    The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the column's Title and Featured Image, in addition to any button element you create.

    Click Button to set aligment, color, size etc.

    • To create a button, enter the link text into the TEXT field
    • Select Custom or Existing Content from the LINK drop-down
    • Enter the full URL (if Custom) or search for the page or post title you want to link to and select it
    • To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

    8. Adding Columns Portfolio

    To add more column blocks, simply click the +ADD NEW Column button. This will duplicate your last column block to help speed up customization.

    9. Deleting Columns Portfolio

    To delete a column block, click the pencil icon in the right corner of the column's title bar to expand it, then click the red trash-can icon.

    10. Advanced Portfolio

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Post Layers Widgets

    The Sencillo Layers Post Widget allows you to display your posts feed in several different layouts. Checkout our demos for some creative ways to configure this widget.

    When you add a new Posts widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings.

    Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout

    This section sets the widget content's width. The widget itself will always be full width to the page.

    • Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
    • Full Width will expand the widget content to the width of the page. This also makes each column wider.

    2. List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • List will force a single column feed similar to a traditional blog layout. This layout will not place a background color on each post, whereas choosing One Column+Grid will produce a similar layout with a background on each post.
  • Masonry allows each post block to fit together at various heights (such as Pinterest) and is ideal if you want your images to use their original dimensions
  • 3. Title/Subtitle Portfolio

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Click Title/Subtitle to set aligment, color, size etc.

    Title Style

    It has two style vertical and horizontal, which you can style using below setting.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    4. Display & Style

    This section controls the visibility and style options of all the things that your posts include.

    Click on Display & Style to expand and set your display style of post options like title, category, date, pagination, excerpt etc.

    5. Columns

    Columns

    Choose the number of columns for your layout, to a maximum of 6.

    • The number of columns you choose combined with the Layout will determine how large featured images in your posts need to be to fill the column space.
    • For best results, use images at least 960px wide.
    Background Color

    Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

    • Background colors will automatically convert the post content text color. Dark background colors will have white text, and light colors will have black text.
    Gutter

    This option controls spacing between posts in the grid.

    Uncheck the gutter option to remove the spacing.

    There are more options in colunm to design post block like aligment, border, margin, rounded corner etc.

    6. Buttons

    The button option allows you to customize the color, size, font style etc of the Read More button. Skip if you disabled buttons in the Display options.

    Click Buttons to set color, size, styles etc.

    7. Image Ratio

    Image Ratio options control how your featured images are scaled or cropped.

    The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 960px wide.

    • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
    • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
    • Square: crops your image to 480×480 from center
    • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
    • Circle: Sets a radius on your image. To get a perfect circle, your original image should be square. Portrait and Landscape originals may produce ovals.

    8. Background Portfolio

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Choose Repeat only if you want

    Background Repeat

    your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    9. Widget Options Portfolio

    These menus allow you to filter the posts the widget displays.

    Category to Display

    Choose a specific category to filter by, or select All

    Number of Items to Show

    Choose how many posts to pull in. For best results, choose a multiple of the number of columns you chose in the design bar. For example, if you chose 3 columns, you should set this to 3,6,9, or 12 etc.

    If you have sticky posts, increase this by the number of stickies shown.

    Sort By

    Choose how to sort your posts, if desired. By default they are listed in chronological order with the newest post first/left to right.

    Custom Order is only possible if you have installed a plugin like Admin Management Xtended which allows post ordering. See How to Manually Order Posts for details on using this option.

    10. Advanced Portfolio

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Services Layers Widgets

    When you add a new Services Widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

    You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    When you add a new Services Widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

    You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout Services

    This section sets the widget content's width. The widget itself will always be full width to the page.

    • Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
    • Full Width will expand the widget content to the width of the page. This also makes each column wider.

    2. List Style Services

    • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
    • Masonry allows each column block to fit together at various heights (such as Pinterest)

    The gutter option controls the margins/spacing between blocks. Uncheck it to remove spacing.

    3. Title/Subtitle Services

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Title Style

    It has two style vertical and horizontal, which you can style using below setting.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    4. Background Services

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    5. Widget Options Services

    The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget, much like the WordPress post editor.

    Background

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    Column Width

    The column width option is available in the Content widget, or custom widgets using Columns, and sets the width of this specific column to a fraction of 12. This takes a little bit of basic math:

    • The grid in Layers has 12 possible columns per row.
    • For an individual column to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
    • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
    • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
    • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other (9+3=12)

    You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

    Advanced

    The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

    Custom Classes Advanced

    You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget.

    • Add class names without a dot. Example: feature-column and not .feature-column
    • Class names should be unique. Example: my-feature-column has a better chance of being unique, column is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.
    Padding

    Adds the specified amount of padding in pixels to the inside of the content area. This is useful for designs where you want your text to be centered inside a larger colored block, etc

    Margin

    Adds the specified amount of margin to the outside of the content area. We only allow you to adjust the top and bottom as the left and right margins are pre-defined parts of the grid. If you need to remove the space between columns, uncheck the Gutter option in the Display option of the Design Bar.

    6. Icon Services

    Icon

    Sets the Icon of your column content, or may be left blank.

    Click Icon to set color, size, margin etc.

    7. Column Style Services

    Title

    Sets the heading of your column content, or may be left blank.

    Click Column Style to set aligment, color, size etc.

    Excerpt

    This field works like the Description field and can take a small amount of text or basic HTML. This field may optionally be left blank.

    • You cannot put scripts or javascript snippets into this field!
    • You can use shortcodes
    • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

    Click Column Style to set aligment, color, size etc.

    8. Insert Link (Button) Content

    The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the column's Title and Featured Image, in addition to any button element you create.

    Click Column Style to set aligment, color, size etc.

    • To create a button, enter the link text into the TEXT field
    • Select Custom or Existing Content from the LINK drop-down
    • Enter the full URL (if Custom) or search for the page or post title you want to link to and select it
    • To open links in a new browser tab, click the new tab icon to the right of your URL or Page.

    9. Adding Columns Services

    To add more column blocks, simply click the +ADD NEW Column button. This will duplicate your last column block to help speed up customization.

    10. Deleting Columns Services

    To delete a column block, click the pencil icon in the right corner of the column's title bar to expand it, then click the red trash-can icon.

    11. Advanced Services

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Testimonials Layers Widgets

    When you add a new Testimonials widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings and content.

    Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

    1. Layout Testimonials

    This section sets the Slider's overall size

    • Boxed will limit the width of the slider to 1040px by default and center it.
    • Full Width will allow the slider to span the entire browser window and is the default.
    • Full Screen will set the slides to fill the entire height and width of the user's browser window.

    2. Slider Testimonials

    This section sets the slider's overall style.

    Auto-Height Slides

    Check this box if you want slides to automatically adjust the slider's height based on the content/image size of the first visible slide.

    This setting is ignored if Full Screen Layout is chosen.

    Slider Height

    The slider is 550 pixels tall by default. If you would like to make it shorter or taller, enter your desired value here (minimum of 100)

    To fit a default size Title, Description and Button, you must set it to at least 180.

    Note: When using the Full Width Layout and setting a Slider Height of more than about 720 pixels, you will be forcing visitors with smaller screens to scroll to view the entire slider. Consider using the Full Screen slider layout instead.

    Show Slider Arrows

    Check this option if you want the left and right slider arrows to show when the mouse hovers over the slide. If your widget only has one slide, this option is ignored.

    Arrows are best if you want your visitors to be able to click back and fourth on their own. We do not recommend enabling arrows if you have Auto-Play enabled.

    Show Slider Dots

    Check this option to show navigation dots at the bottom of the slider. These can be used alone or in combination with the arrows, but are best used when you have the slider set to auto-slide (when the arrows should be disabled)

    Slider Controls Color

    Choose a color for your arrows or dots (white by default)

    Animation Type

    This option controls the slide effect. Choose from a traditional Slide (right to left), Fade, or Parallax. The Parallax option will animate the slider content separately from the background when the slider is advanced or auto-played (not when scrolled!)

    Auto-play Slides

    Check this option if you would like your slider to advance automatically. This option should not be used if you have Featured Video in any of your slides.

    3. Title/Subtitle Testimonials

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    4. Background Testimonials

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    5. Widget Options Testimonials

    These menus give you control to add featured image and custom class.

    Featured Image Featured

    This setting adds an image to the content area of your slide.

    Click CHOOSE IMAGE and upload or select an image from your Media Library.

    • Images should be at least 200px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.
    Advanced

    The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

    Custom Classes Advanced

    You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget.

    • Add class names without a dot. Example: feature-column and not .feature-column
    • Class names should be unique. Example: my-feature-column has a better chance of being unique, column is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.

    6. Slide (Content) Testimonials

    Testimonail

    This field works like the Description field and can take a small amount of text or basic HTML.

    • You cannot put scripts or javascript snippets into this field!
    • You can use shortcodes
    • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

    Click Text to set color, size etc.

    Client

    Click Text to set color, size etc.

    Company

    Click Text to set color, size etc.

    7. Adding Slides Testimonials

    Add, simply click the +ADD NEW SLIDE button. This will duplicate your last slide to help speed up customization.

    8. Deleting Slides Testimonials

    Delete, click the pencil icon in the right corner of the column's title bar to expand it, then click the red trash-can icon.

    9. Advanced Testimonials

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Sencillo Contact Layers Widgets

    The Layers Contact Details & Maps Widget creates a customizable section for displaying maps and contact forms. This widget can be used on any Layers page, including a custom "Contact Page" where it can be used alone or in combination with other widgets.

    When you add a new Contact widget, it will be pre-configured to display some text and a map

    The design bar on the right side of the widget controls the overall style and layout for the widget. Choose the following options to begin:

    1. Layout Contact

    This section sets the widgets's overall size

    • Boxed will limit the width of the widget's content (including the map) and is the default. As such, the map and form area become narrower
    • Full Width will allow the widget to span the entire browser window. If you choose not to show a contact form, this will let the map span full-width as well.

    2. Title/Subtitle Contact

    Sets the title and subtitle on the widget, appearing above your widget content and may be left blank.

    Click Heading/Title to set aligment, color, size etc.

    Title & Subtitle Align

    You can align Title and Subtitle.

    Title Size

    Set the font Size of title.

    Title Color

    Set the Color of title.

    Title Font Weight

    Set the Font Weight of title.

    Title Letter Spacing

    Set the Letter Spacing of title.

    Title Bottom Margin

    Set the Bottom Margin of title.

    Subtitle Size

    Set the font Size of Subtitle.

    Subtitle Color

    Set the Color of Subtitle.

    Subtitle Bottom Margin

    Set the Bottom Margin of Subtitle.

    3. Display

    This section controls the visibility and design of elements in the widget.

    Map Height

    Enter a value (corresponding to pixels) to set your desired map height. Default is 400..

    Show Google Map

    On by default. Uncheck to hide the map.

    Show Address

    Off by default. Check to display the content of the "Address Shown" field, which is placed above the contact form on the left side of the map.

    Show Contact Form

    On by default. This displays the content of the Contact Form field (typically a contact form shortcode or text). This section is not limited to contact form shortcodes and can contain other shortcodes, if desired.

    4. Background Contact

    The background option affects the widget background and will span full width of the page.

    Background Color

    Click Select Color to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

    • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
    Backround Image

    Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

    • Textures, photos and images without embedded text are best.
    • Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
    • Tiles or repeatable images can be any size you want.

    When you set a background image, the following settings will appear:

    Background Repeat

    Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

    Background Position

    This option aligns your image and can help you adjust the placement of the subject of your background if needed.

    Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

    Stretch

    Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

    Darken

    Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

    5. Address Contact

    This section controls the location of the map, and the content of the Address Shown field, if enabled.

    Google Maps Location

    Enter your street address using the same format as the field hint, ie Street, City, Zip or Country at a minimum

    Example: 300 Prestwich Str, Cape Town, South Africa

    Google Maps Longitude and Latitude

    This is optional, but can increase the accuracy of the map pin and problems with your map resolving at all.

    • This is optional, but can increase the accuracy of the map pin and problems with your map resolving at all.
    • Go to http://maps.google.com and enter your address
    • Zoom in, center on your location until you're satisfied, then click the map once to add a marker
    • Look at the URL in your browser address bar and you will see the latitude and longitude there
    • Highlight and copy it, then paste into this field in the widget
    • Example: 45.8203704, 15.9870767
    Address Shown

    This field includes rich text editing like the Description field, and supports basic HTML input via the Code view

    If the Contact Form section is enabled, you should limit this to your address, phone number and email, if desired (ie one per line)

    If the Contact Form is not enabled, you can add pure-HTML widget codes such as a mailchimp signup form, etc, though we recommend using plugins that provide shortcodes instead as they offer the most customization options.

    • You cannot put scripts into this field
    • You cannot put shortcodes into this field
    • You should not paste text/html from Word or the WordPress editor into this field

    6. Contact Form Contact

    The Contact Form section of the widget is intended to hold a shortcode from your chosen Contact Form plugin and has the same content rules as the other text areas outlined above.

    For best results, use a contact form shortcode with no additional content in this field. Example using Contact Form 7:

    Recommended Contact Form plugins include:

    7. Advanced Contact

    This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a slider with this class is loaded. This is useful in cases where you want to style sliders differently from one another and want the styling to be saved in the page's export data. This has advantages over using the global CSS area when creating style kits, for example. You may also add specific classes to specific slides by using the slide's Advanced button.

    If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

    See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

    Plugins Plugins

    Wordpress Plugin Installation Guide

    WP Smart Preloader Plugins

    A Plugin to add awesome collection of Loaders and Spinners. Delightful and performance-focused Pure CSS animations.

    Plugin Download Link: WP Smart Preloader

    1. Install and activate plugin with sencillo theme or you can install it manually.
    2. Now you can select loading style from options or add any custom loading css.

    MailChimp for WP Plugins

    MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods.

    Plugin Download Link: MailChimp for WordPress

    1. Install and activate plugin with sencillo theme or you can install it manually.
    2. Now it will appear in wordpress menu section like in below screenshot.
    3. To activate MailChip, you need to connect it from your MailChip account with API Key.
    4. Just follow steps in MailChip area to get your API Key.

    Instagram Feed Plugins

    Display beautifully clean, customizable, and responsive feeds from multiple Instagram accounts.

    Plugin Download Link: Instagram Feed

    1. Install and activate plugin with sencillo theme or you can install it manually.
    2. Now it will appear in wordpress menu section like in below screenshot.
    3. To activate feed and display photos from your account you need "Access Token" and " User ID"

    Recent Tweets Widget Plugins

    Recent Tweets Widget plugin for Twitter API v1.1 with Cache.

    Plugin Download Link: Recent Tweets Widget

    1. Install and activate plugin with sencillo theme or you can install it manually.
    2. Now it will appear in wordpress widget section like in below screenshot.
    3. Add widget in your sidebar or footer widget area and setup it with your account using the require details.

    Contact Form 7 Plugins

    Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

    Plugin Download Link: Contact Form 7

    Help and Documentation: Docs

    1. Install and activate plugin with sencillo theme or you can install it manually.
    2. Now it will appear in wordpress menu section like in below screenshot.
    3. Create any form using simple markup as your requirement.

    Updating Theme & Layers

    Wordpress Update Updateing

    You should always update WordPress to the latest version. When a new version of WordPress is available you will receive an update message in your WordPress Admin Screens. To update WordPress, click the link in this message.

    Before you proceed with the update, we strongly advise you to make a backup of your WordPress and Database.

    Layers Theme Framework UpdateUpdateing

    When an important fix, new feature or improvement is released for Layers, you will be able to update right from the WordPress Dashboard as long as you have the Layers Updater Plugin activated. Staying on top of updates is important to maintain the stability of your theme.

    Sencillo Theme Update Updateing

    Before you proceed with the update, backup your theme files if you have made any changes.


    Note: Changes on any theme file is not recommended.

    Sencillo Child Theme update via FTP (safest method)

    Your host provides you with FTP file access to your webspace via a free program such as FileZilla , or through your hosting control panel.

    1. Download updated Sencillo Child Theme package from your themeforest account and unzip it to your desktop
    2. Open the sencillo-layers-wordpress-theme package folder to find the updated sencillo.zip or sencillo theme folder.
    3. Connect to your site via FTP
    4. Upload the  sencillo theme folder to wp-content/themes
    5. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

    Support

    Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page contact form !
    Or you can connect us via real time support: Live Chat .

    What's included in item support

    We are providing the best possible support only for the features which we have created and for the issues related to this theme. Custom modifications or third party module implementations are not included.

    Read more about Themeforest Item Support Policy

    Support Policy

    Users must provide their purchase code to get support.
    How to find your purchase code

    Custom modification

    Customization is the process of making changes to strandard theme that is not covered by the scope of our support, feel free to contact us for any customization related queries.