Portfolio

---

Content Tab

• Number of items: Items you want to show when the page load.
• Loading Effect: How you want to load the portfolio gallery item like on click or on scroll.
• Loading Effect: Select between different layouts, masonry, landscape & portrait.
• Show Title: Show or Hide the title.
• Show Category: Show or Hide the category.

Style

• Image Overlay Color: You can set the image overlay color from here.
• Heading Color: Set heading color from here.
• Heading Color: Set category color from here.
• Text Typography: Set heading typography from here.
• Category Typography: Set category typography from here.
• Load More Button
  BG Color: Set button background color from here.
• Color: Set button color from here.
• Border Color: Set button border color from here.
• BG Color on Hover: Set button background color on hover from here.
• Color on Hover: Set button color on hover from here.
• Border Color on Hover: Set button border color on hover from here.

The default elementor settings you can mangage from here for this section.

Blockquote

Content Tab

• Content: Write the quote content here.
• Author: Quote from whom.

• Background Color: Set blockquote background color from here.
• Color: Set blockquote color from here.
• Author Text Color: Set blockquote Author Text Color from here.
• Content Typography: Set blockquote Content Typography from here.
• Author Typography: Set blockquote Author Typography from here.

The default elementor settings you can mangage from here for this section.

Dodg Heading

Content Tab

• Sub Title: Write the Sub Title here.
• Title: Write the Title here.

• Title Color: Set Title Color from here.
• Sub Title Color: Set Sub Title Color from here.
• Title Typography: Set Title Typography from here.
• Sub Title Typography: Set Sub Title Typography from here.

The default elementor settings you can mangage from here for this section.

Project Details

---

Content Tab

Repeater field, you can add items using the below button 'Add Item'.

• Title: Info Title
• Info: Iformation you want to provide.

• Title Color: Set Title Color from here.
• Title Typography: Set Title Typography from here.
• Info Color: Set Info Color from here.
• Info Typography: Set info Typography from here.
• Text Align: Set text alignment from here.

The default elementor settings you can mangage from here for this section.

Team

---

Content Tab

• Choose Team Member Image: Set team item image from here.
• Name: Set team member name.
• Position: Set team member position.
• Social Media: Add social media(Repeater field).

• Overlay Color: Set Image Overlay Color from here.
• Title Typography: Set Title Typography from here.
• Position Typography: Set Position Typography from here.
• Icon Size: Set social icon size from here.
• Text Color: Set Text Color from here.

The default elementor settings you can mangage from here for this section.

Services

---

Content Tab

Repeater field, you can add items using the below button 'Add Item'.

• Title: Set Service Title from here.
• Description: Set Service Description from here.
• Icon: Set Service Icon from here.

• Title Typography: Set Title Typography from here.
• Description Typography: Set Description Typography from here.
• Icon Size: Set social icon size from here.
• Icon Background Color: Set Icon Background Color from here.
• Icon Color: Set Icon Color from here.
• Overlay Color on Hover: Set Overlay Color on Hover from here.
• Text Color: Set Text Color from here.
• Text Color on Hover: Set Text Color on Hover from here.

The default elementor settings you can mangage from here for this section.

Text & Heading

---

Content Tab

Repeater field, you can add items using the below button 'Add Item'.

• Title: Set Title from here.
• Description: Set Description from here.

• Title Typography: Set Title Typography from here.
• Description Typography: Set Description Typography from here.
• Title Color: Set Title Color from here.
• Text Color: Set Text Color from here.

The default elementor settings you can mangage from here for this section.

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.

• 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.

• 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.

Social Media

Present your social media with style, plenty of options offer unlimited possibilities for the style or layout.

• 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.

• 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.

• 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.

• 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.

• 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

• Title: Add the title above the progress bar.
• Type: Type of the progress bar you want to create.
• Percentage: Select the percentage of the progress bar between 1 and 100.
• Display Percentage: If you want to show the Percentage or not.
• Inner Text: Will be show in the progress bar.

• Color: Change the color of the bar.
• Background Color: Change the background color of the bar.
• Height: Height of the bar.
• Border Radius: Border Radius of the bar.
• Inner Text
  Color: Change the color of the Inner Text.
• Typography: Change the Typography of the Inner Text.
• Title Style
  Text Color: Change the color of the Title Text.
• Typography: Change the Typography of the Title Text.

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.

• 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.

• 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.

1. 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.
2. 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 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.

• 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.

• 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.

• 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.

• 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.

• 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

• 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="107" title="Contact Page"]

The created form in the contact section:

[text* your-name placeholder "Name"]




[email* your-email placeholder "E-mail"]






[text* your-subject placeholder "Subject"]


[textarea your-message placeholder "Message"]

[submit class:dodg-btn-tansparent class:dodg-btn-contact-form "Send Message"]

Button

The Button element helps you easily design and customize buttons without the need for any other plugins or shortcodes.

• 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

• 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)

1. Edit Button > Advanced > set CSS ID = My_Button
2. Add to the page HTML widget (after the button will be fine)
3. 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.

• 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.

• 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.

• 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

• 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.

1. Add a new Section
2. Go to Section > Style > Shape Divider
3. Choose to display at the Top or Bottom of your section
4. Type: Click the drop-down to choose your Shape Divider style
5. Color: Pick a color
6. Width: Set the width of your Shape Divider
7. Height: Set the height of your Shape Divider
8. Flip: Flip the direction of your Shape Divider
9. Bring to front: Force your Shape Divider to be in front of other objects