Page Builder
Elementor is the ultimate WordPress page builder, the key difference is that you can
reach a high level of design while designing live and on the front end of your site.
Elementor is a page builder plugin that replaces the basic WordPress editor with a live
frontend editor, so you can create complex layouts visually, and design your website live,
without having to switch between the editor and the preview mode. The page builder enables
you to reach a top-notch quality of design without needing to use code or CSS and doesn't
require code knowledge.
Heading
A very simple element called heading but very powerful, has many use cases and its
options make it very powerful and easy to use.
Content Tab:
- Title: Enter the heading text, you can enter on the front end too, it's
writable there too.
- Link: Make the heading clickable with a link that you'll enter it on this
field. If you click the cogs icon on the
right two new options will appear, Open in a new window and Add no-follow.
- Size: Change the size of the Heading element, the default size is the
default size of the HTML tag.
- HTML Tag: Change the element tag of heading, it's very useful for SEO
reasons.
- Alignment: Change the alignment of the heading, you can expand these options
by clicking on the monitor, the same
options will be available on tablet screens and mobile screen.
Style Tab:
- Text Color: Simply change the color of heading with a simple picker, by
moving the right bar you will be able to
change the alpha of the color.
- Typography: Advanced typography is included to change the typography
properties, you can reset anytime the options of
the typography.
- Text Shadow: Add easily text shadow to the element, when you press on the
pencil, an option for color, blur and
horizontal, vertical will be displayed.
- Blend Mode: The blend mode property defines how an element’s content should
blend with its background. This means
that any images or text, borders or headings will be influenced by this property.
Typed Heading
Enter in any string, and watch it type at the speed you've set, backspace what it's
typed, and begin a new sentence for
however many strings you've set.
Content Tab:
- Content: Add the words inside the double curly brackets, separate the words
with commas.
{{First Word, Second Word, Third Word}}
- Loop: Make the text repeat after it's finished once.
- Cursor Character: Change the cursor characted on typing the default one is
_.
- Type Speed: Enter the typing speed.
- Start Delay: Enter the time that delays the start of words.
- Back Delay: Enter the time that delays when it's start removing of words.
- Back Speed: Enter the time that delays the remove of words.
- HTML Tag: Choose any html tag, it's very handy for seo purposes.
- Alignment: Select the alignment of the heading.
Style Tab:
- Content Color: Enter the color of the heading.
- Typed Color: Enter the color of the typed strings.
- Typed Background Color: Enter the background color of the typed strings.
- Content Typography: Change the typography of the heading.
- Typed Typography: Change the typography of the typed strings.
Social Media
Present your social media with style, plenty of options offer unlimited possibilities
for the style or layout.
Content Tab:
- Social Icons: Add the social icons inside the repeater, in the first field
you have to select the icon and in the second link you have to enter the URL of the
social media, you can press on the cogs icon and two new options will appear for
opening in a new window and adding a no-follow attribute to the link.
- Shape: Various shapes can be selected for the social media elements for
example rounded, square, circle.
- Alignment: Easily align the social media on each side you want to be left,
center, right or just.
Icon:
- Color: The first option makes each social media color to be represented by
its official color, so you don't need to add any custom color, the first option in
the color is custom, so two new fields of color pickers will appear where you can
select the primary and the secondary color of the social media.
- Size: Adjust the size of the icon with a great looking spinner.
- Padding: Add padding between the social media and its holder, it can be
changed to different em size.
- Border Type: The border type of social media can be changed to solid,
double, dotted, dashed or groove.
- Border Radius: Set border-radius to each corner, you can unlink the
properties by clicking the icon on the right.
Icon Hover:
- Primary Color: Change the primary color of the social media on hover.
- Secondary Color: Change the secondary color of the social media on hover.
- Hover Animation: Add a different animation to the social media on hover.
Counter
Set counters to a specific end number in a creative way, multiple settings will allow
the element to be used attractively.
Content Tab:
- Starting Number: Enter the starting number of the counter.
- Ending Number: Enter the ending number of the counter.
- Number Prefix: Add a number prefix, so the actual starting and ending number
will have a prefix number.
- Number Suffix: Add a number suffix, it will be displayed after the number
and can be used for different symbols.
- Animation Duration: Select the animation duration, the number is represented
by milliseconds.
- Thousand Separator: Add a separator between thousands.
- Separator: Select the separator between thousand, the default is a comma,
you can choose between dot and space.
- Title: Add the title which usually is displayed below the counting number.
Style Tab:
- Number
- Text Color: Change the color of the number in the counter element.
- Typography: Advanced typography is included to change the typography
properties, you can reset anytime the options of
the typography.
- Text
- Text Color: Change the color of the title in the counter element.
- Typography: Advanced typography is included to change the typography
properties, you can reset anytime the options of the typography.
Progress Bar
There are two progress bars, one default which comes from Elementor and the custom one
that we have created, both are great for use, we'll explain the one that is located in
Neuron Elements.
Functionality:
- Title: Add the title above the progress bar.
- Percentage: Select the percentage of the progress bar between 1 and 100.
- Height: Enter the height of the progress bar, the default height is 6
pixels.
Style:
- Color: Change the color of the bar.
- Background Color: Change the background color of the bar.
- Title Color: Change the color of the title which is placed above the bar.
- Percentage Color: Change the color of the percentage unit.
Accordion
Using the Accordion element lets you save space while still presenting an abundance of
content. Add the accordions with
a great repeater where you can add the title and the content.
With the Accordion, visitors can scan the item titles, and choose to expand an item only
if it is of interest.
When a page is loaded, the first item of the Accordion element is expanded, while all
other items remain collapsed.
With the Toggle element, however, all items are collapsed when a page is first loaded.
Only one item of an Accordion can be expanded at one time. As you expand another
Accordion item, the previously opened
item automatically collapses, looking similar to an accordion. With the Toggle element,
however, as many items as
desired can be expanded at the same time.
Content:
- Accordion Items Title & Content: Enter the title and description for each
item.
- Icon: Select the icon to represent the action of expanding an item.
- Active Icon: Select the icon to represent the action of collapsing the
active item.
- Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.
- Add Item: Use the 'Add Item' button to add more accordion items to the list.
Style:
- Accordion
- Border Width: Set the thickness of the border around the accordion
and between each item.
- Border Color: Choose the color of the border around the accordion
and between each item.
- Title
- Background: Choose the color of the title’s background.
- Color: Choose the color of the non-active titles’ text.
- Active Color: Choose the color of the active title’s text.
- Typography: Set the typography options for the titles.
- Padding: Set the padding for the titles.
- Icon
- Alignment: Align the icon to the left or right of the title.
- Color: Choose the color of the icons.
- Active Color: Choose the color of the active icon.
- Spacing: Control the spacing between the icon and the title.
- Content
- Background: Choose the background color of the content.
- Color: Choose the text color of the content.
- Typography: Set the typography options for the content.
- Padding: Set the padding for the content.
Toggle
The toggle element lets you create text boxes that are collapsed, so the visitor only
sees the titles of each text box
item. This lets you show your content in a condensed form, so visitors don't have to
scroll through a long page and can
sift through the titles easily.
A similar element is the Accordion element, but there are two main differences between
the Toggle element and the
Accordion element.
- When a page is loaded, all toggle element items are collapsed. With the accordion
element, however, the first item is expanded, while all other items remain
collapsed.
- With the Toggle element, as many items as desired can be expanded at the same time.
With the Accordion element, however, only one item can be expanded at one time. As
you expand another Accordion item, the previously opened item automatically
collapses, looking similar to an accordion.
Toggle
- Toggle Items: Enter the title and description for each item.
- Icon: Select the icon to represent the action of expanding an item.
- Active Icon: Select the icon to represent the action of collapsing the
active item.
- Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.
- Add Item: Use the 'Add Item' button to add more toggle items to the list.
Style
- Border Width: Set the thickness of the border around the toggle element and
between each item.
- Border Color: Choose the color of the border around the toggle element and
between each item.
- Space Between: Set the amount of space between each item.
- Box Shadow: Set the box shadow around the toggle element, or around each
item if there is space between each. You can
adjust the box shadow’s Color, Horizontal position, Vertical position, Blur, and
Spread as well as the shadow’s -
Position, which can be either Inset or Outline.
Title
- Background: Choose the color of the title’s background.
- Color: Choose the color of the non-active titles’ text.
- Active Color: Choose the color of the active title’s text.
- Typography: Set the typography options for the titles.
- Padding: Set the padding for the titles.
Icon
- Alignment: Align the icon to the left or right of the title.
- Color: Choose the color of the icons.
- Active Color: Choose the color of the active icon.
- Spacing: Control the spacing between the icon and the title.
Content
- Background: Choose the background color of the content.
- Color: Choose the text color of the content.
- Typography: Set the typography options for the content.
- Padding: Set the padding for the content.
Icon List
The Icon List element creates an easy-to-manage list of items, with each item
highlighted by its own icon.
Content Tab
- Layout: Choose Default or Inline. Default displays items in a vertical list,
while Inline displays items
horizontally.
- Items
- Text: Enter the list item’s text
- Icon: Select the icon for the item
- Link: Enter the URL for the item’s link. Click the Link Options cog
to either add rel=nofollow to the link or to open the link in a new window.
- Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or
Delete icon
Style
- List
- Space Between: Control the space between list items
- Alignment: Align the list left, right, or center
- Divider: Turn the item divider lines on or off, if the Divider
option is turned on, the following style options
become available:
- Style: Choose from Solid, Double, Dotted or Dashed
- Weight: Set the thickness of the divider
- Width: Control the width of the divider relative to the
container
- Color: Choose the divider’s color
- Icon
- Color: Choose the icon’s color.
- Hover: Choose the color of the icon’s hover state.
- Size: Set the exact size of the icon.
- Text
- Text Color: Choose the color of the text.
- Hover: Choose the color of the text’s hover state.
- Text Indent: Set the distance between the icon and the text.
- Typography: Set the typography options for the text.
Contact Forms
Make sure to install and activate the plugin Contact Form 7, without the
plugin you won't be able to create contact forms.
The contact forms are created on the WordPress dashboard menu item called Contact, you
can configure them and
use them later via the Elementor element shortcode. An example of use.
[contact-form-7 id="5430" title="Classic Style"]
The created form in the contact section:
- https://pastebin.com/raw/EkFF433y
Button
The Button element helps you easily design and customize buttons without the need for
any other plugins or shortcodes.
Content
- Type: Select from 5 styles of buttons to begin your design. Choose from
Default, Info, Success, Warning, or Danger
- Text: Enter the button’s text
- Link: Set the URL for the button’s link. Click the cog to set the link to
either open in a new window or to add
rel=nofollow to the link
- Alignment: Align the button to the left, center, right, or justified in
relation to its column.
- Size: Select the preset button sizes, from Extra Small to Extra Large
- Icon: Select a FontAwesome icon to display on the button
- Icon Position: Set the icon to appear before or after the button text
- Icon Spacing: Adjust the amount of space between the icon and the button
text
- Button ID: (Optional) Assign a unique button ID to use for situations such
as Google Analytics events
Style
- Typography: Change the default typography options for the button’s text.
- Text Color: Select the color of the button’s text.
- Background Color: Select the button’s background color for both Normal and
Hover states.
- Hover Animation: Click on the Hover tab to set a Hover Animation.
- Border Type: Select the type of border to use around the button.
- Width: Control the thickness of the border around the button.
- Color: Choose the border’s color.
- Border Radius: Set the border radius to control corner roundness.
- Box Shadow: Set options to apply a box shadow on the button.
- Padding: Change the padding settings of the button.
How to Track "Button onClick" Event (for Facebook Pixel, Google Analytics or Google Tag
Manager)
Follow these steps to track button onClick events:
- Edit Button > Advanced > set CSS ID = My_Button
- Add to the page HTML widget (after the button will be fine)
- Paste the following code into the HTML Code field:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
jQuery('#My_Button a').click(function () {
// tracking code here
// for example Facebook Pixel:
fbq('track', 'AddToCart');
});
});
</script>
Icon Box
Icon boxes come in very handy when building websites. The most common usage is for
sections that list features of products or services. It has various options you get to
customize every element of this widget: the icon, the headline, and the description.
The icons are derived from the Font Awesome Icons, and you are able to search through
them and pick the right one.
Content Tab
- View: Set the view of the icon as 'Default', 'Stacked' or 'Framed'. Stacked
is with a background and frame is with a
frame surrounding the icon.
- Choose Icon: Here you have a list of the entire collection of Font Awesome
icons.
- Title & Description: Insert the title and description of your Icon Box
widget.
- Link to: Insert a link, and choose if it will open on a new window.
- Icon Position: Set the position of the icon on the left, top or right side
of the box.
- Title HTML Tag: Choose the title tag, from H1..H6, Div, Span or P.
Style Tab
- Icon
- Primary Color: note that if you choose stacked or framed icon box,
you will also have a secondary color.
- Icon spacing: The space between the icon and the heading.
- Icon size: Scale up and down the size of the icon.
- Icon Rotate: Rotate the icon.
- Icon Hover
- Color: Choose the primary and secondary color for the icon hover.
- Animation: Choose from a long list of animations for the hover.
- Content
- Title
- Alignment: Left, centers, right or justified.
- Vertical Align: Top, middle and button.
- Title Spacing: Set the spacing between the title and the
description.
- Title color: Change the color of the title.
- Typography: Here I can customize the typography of the
title.
- Description
- Description Color: Change the color of the description.
- Typography: Choose custom to change the typography, just
like with the title.
Image Box
The Image Box element lets you add an image box that combines an image with a headline
and text, which is often used in features sections, as an alternative to using the Icon
Box element.
Content
- Choose Image: Select an image from the media library, or upload a new image
- Image Size: Select the size of the image, from thumbnail to full, or enter a
custom size
- Title & Description: Add the title and description that will appear in the
image box
- Link to: Enter the URL for the item’s link. Click the Link Options cog to
either add rel=nofollow to the link or to
open the link in a new window.
- Image Position: Set the position of the image to the left, top or right,
relative to the title and description
- Title HTML Tag: Set the HTML tag of the title as H1...H6, div, span or
paragraph
Style
- Image
- Spacing: Set the exact space between the image and the title
- Width: Scale the image width from 0 to 100%
- Hover Animation: Add Hover Animation to the image
- CSS Filters: Adjust the image style by changing the CSS Filter
scales for Blur, Brightness, Contrast, Saturation, and
Hue settings in Normal and Hover states
- Opacity: Control the opacity of the image in Normal and Hover states
- Transition Duration: Set the time it takes for each slide to appear.
This time is in milliseconds, so 1000 ms is
equal to 1 second
- Content
- Alignment: Align the content to the left, right, center or justified
- Vertical Alignment: Align the content to the top, middle or bottom
of the box
- Title Spacing: Set the space between the title and description
- Title Color: Set the color of the title
- Title Typography: Set the typography options for the title
- Description
- Color: Set the color of the description text
- Typography: Set the typography options for the description
Divider
The Divider element allows you to add style, horizontal lines that divide your content.
This is a basic element, but
it can help you create nice effects as separators of various sections, or for
highlighting your headings.
- Style: Choose between solid, double, dotted or dashed styles.
- Weight: Control the thickness of the divider.
- Color: Choose the color of the divider.
- Width: Control the width of the divider as a percentage from 0 to 100
percent.
- Alignment: Align the divider to the left, center or right of the page.
- Gap: Control the space above and below the divider
Shape Divider
Shape dividers are graphic shapes that separate the sections of a page.
How to Add Shape Dividers
- Add a new Section
- Go to Section > Style > Shape Divider
- Choose to display at the Top or Bottom of your section
- Type: Click the drop-down to choose your Shape Divider style
- Color: Pick a color
- Width: Set the width of your Shape Divider
- Height: Set the height of your Shape Divider
- Flip: Flip the direction of your Shape Divider
- Bring to front: Force your Shape Divider to be in front of other objects
Meta Views
WooCommerce Settings
How to config product image like demo
Step 1
Step 2
Step 3
Step 4
Attributes Swatches Settings
1. Go to: Products > Attributes.
2. Create a new attribute, or skip this step if you already have one.
3. Select
the gear icon on the right next to the attribute. When you hover over this icon, you’ll see “Configure
terms”.
4. Add New Color or whatever your attribute is called (or choose to edit an existing term).
5. Select either “Color” or “Image” in the Swatch Type dropdown.
- If you’ve chosen color, you’ll be able to click on the color icon and select the color you want
to use in the color picker. Alternatively, you can type in the HEX value for the color.
- If you’ve chosen image, you’ll be able to upload an image.
8. Select Add New Color.
For more information about setting up and managing Global
Product Attributes, see:
Managing Attributes.
Warning: If you change the attribute name and/or slug you permanently lose
the swatches configuration.
Add color and image swatches to variable products
Color and photo swatches can only be
used for variable products.
1. Create a variable product. Make sure that you select a global
attribute or create a custom one in the “Attributes” tab. Also set up the “Variations” tab. More information about
that can be found here:
2. Publish your product.
3. Go to the Swatches tab.
4. Select a “Type” for each of the attributes
used for the variations.
- None. The options will be offered in a dropdown.
- Taxonomy Colors and Images. The options of the global attribute will be offered. (Only
available for global attributes.)
- Custom Colors and Images. You will be able to add colors and image swatches.
- Radio Buttons. The available options will be displayed as radio buttons.
5. Choose whether to add a label or not and where to add it, if you’ve selected “Taxonomy
Colors and Images” or “Custom Colors and Images”. This label will display the name of the selected term.
6. Select the size of the swatches if you’ve selected “Custom Colors and Images”. This will
determine how large the swatches will be on the product page.
7. Configure the attribute terms. This is similar to how global attribute terms are configured
(see above).
- Select the term.
- Choose Attribute Color or Image.
- If you’ve chosen color, select a color.
- If you’ve chosen image, upload an image.
8. Update the product.
General
Product Page
Cart Page
Catalog Mode
Maintaince Mode
Mail Chimp Settings
Please go to Appearance> -> Theme Options -> Extensions -> Mailing List Manager
And then you can see the widget on the elements
Thank you for purchasing our theme
If you have any questions that are beyond the scope of this documentation
Please feel free to us via HelpDesk https://support.la-studioweb.com/.
Thanks so much!
Social Link
In this section you can control all social settings of your site